diff --git a/.gitmodules b/.gitmodules
index bfaa7793b5..f7923d2337 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -4,6 +4,6 @@
[submodule "buildbot"]
path = buildbot
url = https://github.com/toolkitchen/buildbot.git
-[submodule "lib/test"]
- path = lib/test
- url = https://github.com/toolkitchen/test
+[submodule "tools"]
+ path = tools
+ url = https://github.com/toolkitchen/tools.git
diff --git a/README.md b/README.md
index 61ef2d0bdc..348c3562aa 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,13 @@
-Coolkit
-=======
\ No newline at end of file
+# Toolkitchen:Toolkit
+
+## Brief Overview
+
+For more detailed info goto [http://toolkitchen.github.io/](http://toolkitchen.github.io/).
+
+The Toolkitchen Toolkit is a new type of library for the web, designed to leverage the existing browser infrastructure to provide the encapsulation and extendability currently only available in JS libraries.
+
+Toolkitchen Toolkit is based on a set of future technologies, including [Shadow DOM](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html), [Custom Elements](https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html) and Model Driven Views. Currently these technologies are implemented as polyfills or shims, but as browsers adopt these features natively, the platform code that drives Toolkit evacipates, leaving only the value-adds.
+
+## Tools & Testing
+
+For running tests or building minified files, consult the [tooling information](http://toolkitchen.github.com/tooling-strategy.html).
\ No newline at end of file
diff --git a/buildbot b/buildbot
index b5a0c122dc..30d8686c66 160000
--- a/buildbot
+++ b/buildbot
@@ -1 +1 @@
-Subproject commit b5a0c122dcd7be49fae4c125d7aac81c9b609a8c
+Subproject commit 30d8686c66f287475cbe3a92198253f0cc379e7a
diff --git a/components/css/g-menu-button.css b/components/css/g-menu-button.css
index 641ae82f4d..2ad4be1a61 100644
--- a/components/css/g-menu-button.css
+++ b/components/css/g-menu-button.css
@@ -2,6 +2,7 @@
* {
display: inline-block;
box-sizing: border-box;
+ -moz-box-sizing: border-box;
width: 44px;
height: 44px;
}
@@ -9,52 +10,53 @@
#overlay {
background: white;
- border: 1px solid #cfcfcf;
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
margin: 9px 0 0 22px;
-webkit-transform: translateX(-50%);
+ -moz-transform: translateX(-50%);
}
[valign=right] #overlay {
-webkit-transform: translateX(-90%);
+ -moz-transform: translateX(-90%);
}
[valign=left] #overlay {
-webkit-transform: translateX(-10%);
+ -moz-transform: translateX(-10%);
}
.arrow {
height: 1px;
width: 0;
- margin: 0 auto;
- margin-top: -22px;
+ margin: -17px auto 0;
border-color: transparent transparent #cfcfcf transparent;
border-style: solid;
- border-width: 10px;
+ border-width: 8px;
}
.arrow-inner {
border-bottom-color: white;
- margin-top: -19px;
+ margin-top: -16px;
}
[valign=right] .arrow {
position: relative;
- left: -9px;
+ left: -7px;
margin-left: 90%;
}
[valign=left] .arrow {
position: relative;
- left: -9px;
+ left: -7px;
margin-left: 10%;
}
#menu {
+ display: block;
box-sizing: border-box;
- /* override g-menu @host *rule style */
- border: 1px solid transparent !important;
- box-shadow: none !important;
+ -moz-box-sizing: border-box;
}
/* TODO(ffu): adding responsive class won't work in native; to work in native
@@ -72,6 +74,7 @@ container */
[responsive=true] #overlay {
position: absolute;
-webkit-transform: translateX(0);
+ transform: translateX(0);
right: 0;
bottom: 0;
left: 0;
@@ -82,11 +85,14 @@ container */
[responsive=true] #overlay.slideup {
-webkit-transform: translateY(100%);
+ transform: translateY(100%);
/* override g-overlay @host rule style */
-webkit-transition: -webkit-transform 0.218s !important;
+ transition: -webkit-transform 0.218s !important;
}
[responsive=true] #overlay.slideup.opened {
-webkit-transform: translateY(0);
+ transform: translateY(0);
}
}
\ No newline at end of file
diff --git a/components/css/g-togglebutton.css b/components/css/g-togglebutton.css
index de283e70ab..d098c9483e 100644
--- a/components/css/g-togglebutton.css
+++ b/components/css/g-togglebutton.css
@@ -22,6 +22,7 @@
font-weight: bold;
color: #666;
background-image: -webkit-linear-gradient(top, #EEEEEE, #e0e0e0);
+ background-image: -moz-linear-gradient(top, #EEEEEE, #e0e0e0);
box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
}
@@ -35,6 +36,7 @@
.toggle span.on {
color: #FFF;
background-image: -webkit-linear-gradient(top, #3b93ff, #3689EE);
+ background-image: -moz-linear-gradient(top, #3b93ff, #3689EE);
box-shadow: inset 0px 1px 2px 0 rgba(0,0,0,0.1);
border-radius: 2px 0 0 2px;
}
@@ -50,15 +52,19 @@
border-radius: 2px;
box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.1);
background-image: -webkit-linear-gradient(top, #f8f8f8, #f1f1f1);
+ background-image: -moz-linear-gradient(top, #f8f8f8, #f1f1f1);
-webkit-transition: all 0.130s ease-out;
+ transition: all 0.130s ease-out;
}
.thumb.dragging {
-webkit-transition: all 0;
+ transition: all 0;
}
.toggle.on .thumb {
-webkit-transform: translate3d(47px, 0, 0);
+ transform: translate3d(47px, 0, 0);
}
.toggle .thumb::after {
@@ -70,6 +76,7 @@
height: 9px;
width: 17px;
background-image: -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%), -webkit-linear-gradient(left, #ccc 50%, transparent 50%);
+ background-image: -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%), -moz-linear-gradient(left, #ccc 50%, transparent 50%);
background-size: 2px;
background-position: 0 0, 0 2px, 0 4px, 0 6px, 0 8px;
background-repeat: repeat-x;
diff --git a/components/g-ajax.html b/components/g-ajax.html
index cf9803c383..3bd3d8378f 100644
--- a/components/g-ajax.html
+++ b/components/g-ajax.html
@@ -3,7 +3,10 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
-
+-->
@@ -131,6 +134,9 @@
return r;
}
},
+ urlChanged: function() {
+ this.autoGo();
+ },
paramsChanged: function() {
this.autoGo();
},
@@ -155,7 +161,12 @@
* @method go
*/
go: function() {
- var params = typeof(this.params) == 'string' ? JSON.parse(this.params) : this.params || null;
+ // don't go if there's no url
+ if (!this.url) {
+ return;
+ }
+ var params = this.params && typeof(this.params) == 'string' ?
+ JSON.parse(this.params) : this.params || null;
return this.$.xhr.request({url: this.url,
callback: this.receive.bind(this), params: params});
}
diff --git a/components/g-animation-group.html b/components/g-animation-group.html
index 1015860683..358339f98a 100644
--- a/components/g-animation-group.html
+++ b/components/g-animation-group.html
@@ -5,6 +5,9 @@
'par': ParGroup,
'seq': SeqGroup
};
+ /**
+ * @module Animation
+ */
/**
* Component for a group of animations.
*
@@ -33,20 +36,22 @@
* @type HTMLElement|Node
* @optional
*/
- target: null,
- /**
- * Group type. 'par' for parallel and 'seq' for sequence.
- * @property type
- * @type String
- */
- type: 'par',
- // timing
- duration: null,
- fillMode: null,
- easing: null,
- iterationCount: null,
- startDelay: null,
- direction: null,
+ publish: {
+ target: null,
+ /**
+ * Group type. 'par' for parallel and 'seq' for sequence.
+ * @property type
+ * @type String
+ */
+ type: 'par',
+ // timing
+ duration: null,
+ fillMode: null,
+ easing: null,
+ iterationCount: null,
+ startDelay: null,
+ direction: null
+ },
ready: function() {
// TODO: need to do this for now.
this.super();
diff --git a/components/g-animation.html b/components/g-animation.html
index 89558a6a5c..55b16f425d 100644
--- a/components/g-animation.html
+++ b/components/g-animation.html
@@ -3,7 +3,8 @@
@@ -250,25 +255,27 @@
* @class g-keyframe
*/
Toolkit.register(this, {
- /**
- * From 0 to 1.
- * @property offset
- * @type Number
- * @required
- */
- offset: null,
- /**
- * Property value at the animation offset.
- * @property value
- * @type String
- * @required
- */
- value: null,
- /**
- * @property easing
- * @type String
- */
- easing: null,
+ publish: {
+ /**
+ * From 0 to 1.
+ * @property offset
+ * @type Number
+ * @required
+ */
+ offset: null,
+ /**
+ * Property value at the animation offset.
+ * @property value
+ * @type String
+ * @required
+ */
+ value: null,
+ /**
+ * @property easing
+ * @type String
+ */
+ easing: null
+ },
get properties() {
var props = {
// TODO bug in webanimations polyfill
diff --git a/components/g-app.html b/components/g-app.html
index e7c6052a62..2163a1edce 100644
--- a/components/g-app.html
+++ b/components/g-app.html
@@ -3,6 +3,69 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
+
-
+-->
diff --git a/components/g-icon.html b/components/g-icon.html
index a97641148c..7775446732 100644
--- a/components/g-icon.html
+++ b/components/g-icon.html
@@ -3,7 +3,12 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
-
+-->
diff --git a/components/g-overlay.html b/components/g-overlay.html
index 01e0af8354..8bdeee3c6c 100644
--- a/components/g-overlay.html
+++ b/components/g-overlay.html
@@ -3,6 +3,63 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
+
-
+
@@ -32,7 +84,28 @@
var element = this;
Toolkit.register(this, {
+ /**
+ * The type of transition g-panels should use to change between selected
+ * panels. The transition property corresponds to an element that is used
+ * to manage panel transitions. If it's not a custom element name,
+ * transition is converted into g--panel-transition.
+ *
+ * @attribute transition
+ * @type string
+ * @default keyframe
+ *
+
+ */
transition: 'keyframe',
+ /**
+ * The selected panel to select. Panels are identify by either their name
+ * or id attributes. If this value is unset, then when g-panels is created
+ * its first panel will be selected.
+ *
+ * @attribute selected
+ * @type string
+ * @default null
+ */
selected: null,
index: 0,
autoSelect: false,
@@ -51,7 +124,13 @@
this.initPanel(p, i);
}, this);
},
- initPanel: function() {},
+ /**
+ * Extendors can implement initPanel to initialize the panels in a g-panels.
+ * @method initPanel
+ * @param inPanel The panel to initialize.
+ * @param inIndex The index of the panel.
+ */
+ initPanel: function(inPanel, inIndex) {},
indexChanged: function(inOldValue) {
var i = this.clampIndex(this.index);
if (!this.canSelect(i)) {
@@ -253,7 +332,7 @@
inNode.style.zIndex = inZ;
},
enableTransitions: function(inEnable) {
- this._canTransition = inEnable;
+ return this._canTransition = inEnable;
},
// note: cannot use hidden attr for this since it's trumped by display
// setting e.g. hidden + display: -webkit-flex == showing.
@@ -261,9 +340,14 @@
if (inPanel) {
inPanel.style.display = inEnable ? null : 'none';
}
- },
- // TODO: consider selecting something more specific so we don't need to
- // filter out style/templates children.
+ },
+ /**
+ *
+ * Get the panel elements inside the g-panels.
+ *
+ * @method getPanels
+ * @returns {Array}
+ */
getPanels: function() {
var n$ = this.$.content.getDistributedNodes();
var excluded = ['style', 'template'];
@@ -272,24 +356,66 @@
&& !this.isTransitionNode(c);
}.bind(this));
},
+ /**
+ * The number of panel elements inside the g-panels
+ *
+ * @attribute count
+ * @returns {Number}
+ */
get count() {
return this.getPanels().length;
},
+ /**
+ * Returns the currently selected panel
+ * @method getSelectedPanel
+ * @returns {Object}
+ */
getSelectedPanel: function() {
return this.getPanels()[this.index];
},
+ /**
+ * Returns the index of given panel element.
+ *
+ * @method indexOf
+ * @param inPanel
+ * @returns {Number}
+ */
indexOf: function(inPanel) {
return this.getPanels().indexOf(inPanel);
},
+ /**
+ * Returns the panel element at the given index in the list of panels
+ *
+ * @method panelAtIndex
+ * @param inIndex
+ * @returns {Object}
+ */
panelAtIndex: function(inIndex) {
return this.getPanels()[inIndex];
},
+ /**
+ * Selects the next panel in the list of panel elements.
+ *
+ * @method next
+ */
next: function() {
this.index++;
},
+ /**
+ * Selects the previous panel in the list of panel elements.
+ *
+ * @method previous
+ */
previous: function() {
this.index--;
},
+ /**
+ * Toggles the selected panel between two values
+ *
+ * @method toggleBetween
+ * @param inA
+ * @param inB
+ */
toggleBetween: function(inA, inB) {
this.selected = this.selected == inA ? inB : inA;
},
diff --git a/components/g-ratings.html b/components/g-ratings.html
index 0df84cc7a8..a7e68e90a7 100644
--- a/components/g-ratings.html
+++ b/components/g-ratings.html
@@ -3,7 +3,10 @@
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
-
+-->
+
+
+
+
+
+ Toolbar w/Menu Button
+
+ Share Link
+ Email Link
+ Add to Favorites
+
+
+
+
+
+
+