diff --git a/.gitignore b/.gitignore index 07e6e47..f2630ac 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,4 @@ /node_modules +/docs + +/build.bat diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..f30fbaa --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "tools"] + path = tools + url = https://github.com/Polymer/tools.git diff --git a/gruntfile.js b/gruntfile.js new file mode 100644 index 0000000..9d0f9db --- /dev/null +++ b/gruntfile.js @@ -0,0 +1,35 @@ +/* + * Copyright 2013 The Polymer Authors. All rights reserved. + * Use of this source code is governed by a BSD-style + * license that can be found in the LICENSE file. + */ +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + yuidoc: { + compile: { + name: '<%= pkg.name %>', + description: '<%= pkg.description %>', + version: '<%= pkg.version %>', + url: '<%= pkg.homepage %>', + options: { + exclude: 'docs', + extension: '.js,.html', + paths: '.', + outdir: 'docs', + linkNatives: 'true', + tabtospace: 2, + themedir: 'tools/doc/themes/footstrap' + } + } + } + }); + + // plugins + grunt.loadNpmTasks('grunt-contrib-yuidoc'); + + // tasks + grunt.registerTask('default', ['yuidoc']); + grunt.registerTask('docs', ['yuidoc']); +}; + diff --git a/manifest.xml b/manifest.xml new file mode 100644 index 0000000..e821eaf --- /dev/null +++ b/manifest.xml @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 3b8c527..1a5ed1e 100644 --- a/package.json +++ b/package.json @@ -2,15 +2,7 @@ "name": "PolymerElements", "version": "0.0.1", "devDependencies": { - "mocha": "*", - "chai": "*", "grunt": "*", - "grunt-contrib-uglify": "*", - "grunt-contrib-yuidoc": "*", - "grunt-karma-0.9.1": "~0.4.3", - "karma-mocha": "*", - "karma-browserstack-launcher": "*", - "karma-script-launcher": "*", - "karma-crbot-reporter": "*" + "grunt-contrib-yuidoc": "*" } } diff --git a/polymer-ajax/polymer-xhr.html b/polymer-ajax/polymer-xhr.html index 90d058e..2ae9d3c 100644 --- a/polymer-ajax/polymer-xhr.html +++ b/polymer-ajax/polymer-xhr.html @@ -79,10 +79,10 @@ if (params && method == 'GET') { url += (url.indexOf('?') > 0 ? '&' : '?') + params; } + xhr.open(method, url, async); if (options.responseType) { xhr.responseType = options.responseType; } - xhr.open(method, url, async); this.makeReadyStateHandler(xhr, options.callback); this.setRequestHeaders(options.headers); xhr.send(method == 'POST' ? (options.body || params) : null); diff --git a/polymer-animation/index.html b/polymer-animation/index.html index eff2cdf..e5b7073 100644 --- a/polymer-animation/index.html +++ b/polymer-animation/index.html @@ -40,46 +40,71 @@
raw - - - - - + + + + + + + + + + + + raw group - - - - - + + + + + + + + + + + + - - - - - + + + + + + + + + + + + bounce shake - shake forever + flip X flip Y blink fade in - fade out + fade out (with event)
diff --git a/polymer-animation/polymer-animation-group.html b/polymer-animation/polymer-animation-group.html index d371787..a09e8a1 100644 --- a/polymer-animation/polymer-animation-group.html +++ b/polymer-animation/polymer-animation-group.html @@ -12,22 +12,6 @@ /** * Component for a group of animations. * - * A fade in and move animation in sequence: - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * * @class polymer-animation-group */ Polymer('polymer-animation-group', { @@ -55,6 +39,13 @@ makeAnimation: function() { return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps); }, + doOnChildren: function(inFn) { + var children = this.children; + if (!children.length) { + children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : []; + } + Array.prototype.forEach.call(children, inFn, this); + }, completeApply: function() { this.doOnChildren(function(c) { c.completeApply(); diff --git a/polymer-animation/polymer-animation-keyframe.html b/polymer-animation/polymer-animation-keyframe.html index 56b9f58..f114cfe 100644 --- a/polymer-animation/polymer-animation-keyframe.html +++ b/polymer-animation/polymer-animation-keyframe.html @@ -1,39 +1,28 @@ diff --git a/polymer-animation/polymer-animation-prop.html b/polymer-animation/polymer-animation-prop.html index d67a889..34bacb5 100644 --- a/polymer-animation/polymer-animation-prop.html +++ b/polymer-animation/polymer-animation-prop.html @@ -1,17 +1,8 @@ - - + diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html index 2e9ae28..35d8605 100644 --- a/polymer-animation/polymer-animation.html +++ b/polymer-animation/polymer-animation.html @@ -34,16 +34,24 @@ * A animation component to fade out an element: * * - * - * - * - * + * + * + * + * + * + * + * + * * * @class polymer-animation */ /** - * Fired when an animation completes - * @event complete + * Fired when the animation starts + * @event animation-start + * + * Fired when the animation completes + * @event animation-end + * */ Polymer('polymer-animation', { publish: { @@ -61,16 +69,12 @@ targetSelector: null, // animation /** - * Animation properties specified as a dictionary of - * :. For example, - * `{opacity: ['0','1']}` specifies animating the opacity - * from 0 to 1. - * The values must be strings. - * (https://github.com/web-animations/web-animations-js/issues/178) - * @property properties + * Animation keyframes specified as an array of dictionaries of + * : pairs. For example, + * @property keyframes * @type Object */ - properties: null, + keyframes: null, //accumulate: null, // not working in polyfill /** * The composition behavior. "replace", "add" or "merge". @@ -145,10 +149,8 @@ //this.animation && console.log('play', this.animation); if (this.animation) { this.cancel(); + this.bindAnimationEvents(); this.player = document.timeline.play(this.animation); - this.player.paused = false; - this.player.currentTime = 0; - this.monitor(); } }); }, @@ -171,8 +173,8 @@ return this.animation; }, makeAnimation: function() { - //this.target && console.log('makeAnimation target', this.target, 'animation', this.animationProps, 'timing', this.timingProps); - return this.target ? new Animation(this.target, this.animationProps, this.timingProps) : null; + //this.target && console.log('makeAnimation target', this.target, 'animation', this.animationEffect, 'timing', this.timingProps); + return this.target ? new Animation(this.target, this.animationEffect, this.timingProps) : null; }, asyncApply: function() { this.cancelApply(); @@ -199,7 +201,7 @@ this.target = findTarget(this.targetSelector, this); } }, - propertiesChanged: function() { + keyframesChanged: function() { this.asyncApply(); }, compositeChanged: function() { @@ -226,13 +228,6 @@ autoplayChanged: function() { this.asyncApply(); }, - doOnChildren: function(inFn) { - var children = this.children; - if (!children.length) { - children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : []; - } - Array.prototype.forEach.call(children, inFn, this); - }, get timingProps() { var props = {}; var timing = { @@ -241,7 +236,7 @@ startDelay: {isNumber: true}, iterationCount: {isNumber: true, allowInfinity: true}, direction: {}, - duration: {isNumber: true} + duration: {property: 'iterationDuration', isNumber: true} }; for (t in timing) { if (this[t] !== null) { @@ -251,43 +246,35 @@ } return props; }, - get animationProps() { + get animationEffect() { var props = {}; - if (!this.properties) { - this.doOnChildren(function(c) { - if (c.tagName && c.tagName.toLowerCase() === 'polymer-animation-prop') { - var property = c.name; - var values = []; - this.doOnChildren.call(c, function(f) { - values.push(f.properties); - }); - props[property] = values; - } - }); - } else { - for (k in this.properties) { - if (this.properties.hasOwnProperty(k)) { - props[k] = this.properties[k]; - } + var frames = []; + if (!this.keyframes) { + var children = this.querySelectorAll('polymer-animation-keyframe'); + if (children.length === 0) { + children = this.shadowRoot.querySelectorAll('polymer-animation-keyframe'); } - } - if (this.composite) { - props.operation = this.composite; - } - return props; - }, - monitor: function() { - // TODO(sorvell): adding brittle support for an end event - if (this.player && this.player.source && - this.player.source._isPastEndOfActiveInterval()) { - this.complete(); + Array.prototype.forEach.call(children, function(c) { + frames.push(c.properties); + }); } else { - requestAnimationFrame(this.monitor.bind(this)); + frames = this.keyframes; } + return new KeyframeAnimationEffect(frames, this.composite); }, - // intended for user implementation - complete: function() { - this.fire('complete'); + bindAnimationEvents: function() { + if (!this.animation.onstart) { + this.animation.onstart = this.animationStartHandler.bind(this); + } + if (!this.animation.onend) { + this.animation.onend = this.animationEndHandler.bind(this); + } + }, + animationStartHandler: function() { + this.fire('animation-start'); + }, + animationEndHandler: function() { + this.fire('animation-end'); } }); })(); diff --git a/polymer-animation/polymer-blink.html b/polymer-animation/polymer-blink.html index b7c348b..61fcda9 100644 --- a/polymer-animation/polymer-blink.html +++ b/polymer-animation/polymer-blink.html @@ -6,9 +6,10 @@ duration: 0.7, iterationCount: 'Infinity', easing: 'cubic-bezier(1.0,0,0,1.0)', - properties: { - opacity: ["1","0"] - } + keyframes: [ + {opacity: 1}, + {opacity: 0} + ] }); diff --git a/polymer-animation/polymer-bounce.html b/polymer-animation/polymer-bounce.html index 58d2d7c..9a24ad7 100644 --- a/polymer-animation/polymer-bounce.html +++ b/polymer-animation/polymer-bounce.html @@ -14,17 +14,15 @@ }, generate: function() { var parsed = this.magnitude.match(/([\-0-9]+)(.*)/); - this.properties = { - transform: [ - {offset: 0, value: 'translateY(0)'}, - {offset: 0.2, value: 'translateY(0)'}, - {offset: 0.4, value: 'translateY(' + this.magnitude + ')'}, - {offset: 0.5, value: 'translateY(0)'}, - {offset: 0.6, value:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'}, - {offset: 0.8, value: 'translateY(0)'}, - {offset: 1, value: 'translateY(0)'} - ] - }; + this.keyframes = [ + {offset: 0, transform: 'translateY(0)'}, + {offset: 0.2, transform: 'translateY(0)'}, + {offset: 0.4, transform: 'translateY(' + this.magnitude + ')'}, + {offset: 0.5, transform: 'translateY(0)'}, + {offset: 0.6, transform:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'}, + {offset: 0.8, transform: 'translateY(0)'}, + {offset: 1, transform: 'translateY(0)'} + ]; } }); diff --git a/polymer-animation/polymer-fadein.html b/polymer-animation/polymer-fadein.html index 50f09ac..9c68bea 100644 --- a/polymer-animation/polymer-fadein.html +++ b/polymer-animation/polymer-fadein.html @@ -1,10 +1,14 @@ diff --git a/polymer-animation/polymer-flip.html b/polymer-animation/polymer-flip.html index fdd91df..b1613c7 100644 --- a/polymer-animation/polymer-flip.html +++ b/polymer-animation/polymer-flip.html @@ -17,29 +17,22 @@ var isY = this.axis === 'y' || this.axis === 'Y'; var rotate = isY ? 'rotateY' : 'rotateX'; var transZ = isY ? '150px' : '50px'; - this.properties = { - transform: [{ - easing: 'ease-out', - offset: 0, - value: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)' - }, { - easing: 'ease-out', - offset: 0.4, - value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)' - }, { - easing: 'ease-in', - offset: 0.5, - value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)' - }, { - easing: 'ease-in', - offset: 0.8, - value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)' - }, { - easing: 'ease-in', - offset: 1, - value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)' - }] - } + this.keyframes = [{ + offset: 0, + transform: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)' + }, { + offset: 0.4, + transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)' + }, { + offset: 0.5, + transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)' + }, { + offset: 0.8, + transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)' + }, { + offset: 1, + transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)' + }]; } }); diff --git a/polymer-animation/polymer-shake.html b/polymer-animation/polymer-shake.html index 208d0af..8201f2b 100644 --- a/polymer-animation/polymer-shake.html +++ b/polymer-animation/polymer-shake.html @@ -2,23 +2,38 @@ diff --git a/polymer-animation/polymer-translate.html b/polymer-animation/polymer-translate.html index 77ad25a..b83c3a9 100644 --- a/polymer-animation/polymer-translate.html +++ b/polymer-animation/polymer-translate.html @@ -1,21 +1,13 @@ - + diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html index 46478ba..2b282ab 100644 --- a/polymer-collapse/polymer-collapse.html +++ b/polymer-collapse/polymer-collapse.html @@ -8,7 +8,9 @@ * @module Polymer Elements */ /** - * polymer-collapse is used to add collapsible behavior to another element. + * polymer-collapse is used to add collapsible behavior to the + * target element. It adjusts the height or width of the target element + * to make the element collapse and expand. * * Example: * @@ -27,7 +29,7 @@ * @class polymer-collapse */ --> - + @@ -117,13 +118,13 @@

Title

 -

Using CSS class from polymer-flex-layout.css

+

polymer-flex-layout.css


-

polymer-flex-layout as a flexbox container

+

polymer-flex-panel element


-

Using polymer-flex-layout to add flexbox behavior to the parent node

+

polymer-flex-layout element

diff --git a/polymer-flex-layout/polymer-flex-layout.css b/polymer-flex-layout/polymer-flex-layout.css index 6b41a08..da98d18 100644 --- a/polymer-flex-layout/polymer-flex-layout.css +++ b/polymer-flex-layout/polymer-flex-layout.css @@ -1,4 +1,9 @@ -.flexbox { +/* +Copyright 2013 The Polymer Authors. All rights reserved. +Use of this source code is governed by a BSD-style +license that can be found in the LICENSE file. +*/ +.flexbox, [flexbox], [h-flexbox], [v-flexbox] { display: -webkit-box !important; display: -ms-flexbox !important; display: -moz-flex !important; @@ -6,7 +11,7 @@ display: flex !important; } -.flexbox.row { +.flexbox.row, [flexbox], [h-flexbox] { -webkit-box-orient: horizontal; -ms-flex-direction: row; -moz-flex-direction: row; @@ -14,7 +19,7 @@ flex-direction: row; } -.flexbox.column { +.flexbox.column, [v-flexbox] { -webkit-box-orient: vertical; -ms-flex-direction: column; -moz-flex-direction: column; @@ -30,9 +35,9 @@ flex: 1; } -content::-webkit-distributed(.flex), -content::-webkit-distributed([flex]), -content::-webkit-distributed([fit]) { +::-webkit-distributed(.flex), +::-webkit-distributed([flex]), +::-webkit-distributed([fit]) { -webkit-box-flex: 1; -ms-flex: 1; -moz-flex: 1; @@ -97,7 +102,7 @@ content::-webkit-distributed([fit]) { } @host { - .flexbox { + .flexbox, [flexbox], [h-flexbox], [v-flexbox] { display: -webkit-box !important; display: -ms-flexbox !important; display: -moz-flex !important; @@ -105,7 +110,7 @@ content::-webkit-distributed([fit]) { display: flex !important; } - .flexbox.row { + .flexbox.row, [flexbox], [h-flexbox] { -webkit-box-orient: horizontal; -ms-flex-direction: row; -moz-flex-direction: row; @@ -113,7 +118,7 @@ content::-webkit-distributed([fit]) { flex-direction: row; } - .flexbox.column { + .flexbox.column, [v-flexbox] { -webkit-box-orient: vertical; -ms-flex-direction: column; -moz-flex-direction: column; diff --git a/polymer-flex-layout/polymer-flex-panel.html b/polymer-flex-layout/polymer-flex-panel.html new file mode 100644 index 0000000..6e1d4e2 --- /dev/null +++ b/polymer-flex-layout/polymer-flex-panel.html @@ -0,0 +1,10 @@ + + + + diff --git a/polymer-grid-layout/index.html b/polymer-grid-layout/index.html new file mode 100644 index 0000000..010f7a6 --- /dev/null +++ b/polymer-grid-layout/index.html @@ -0,0 +1,81 @@ + + + + polymer-grid-layout example + + + + + + + + + + + + + diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html new file mode 100644 index 0000000..41f3ddc --- /dev/null +++ b/polymer-grid-layout/polymer-grid-layout.html @@ -0,0 +1,276 @@ + + + + \ No newline at end of file diff --git a/polymer-layout/polymer-layout.html b/polymer-layout/polymer-layout.html index 0860d65..5b55a2a 100644 --- a/polymer-layout/polymer-layout.html +++ b/polymer-layout/polymer-layout.html @@ -63,7 +63,7 @@ w: c.offsetWidth, h: c.offsetHeight }; - if (!c.hasAttribute('fit')) { + if (!c.hasAttribute('fit') && !c.hasAttribute('flex')) { ww += c.offsetWidth; hh += c.offsetHeight; list.push(info); diff --git a/polymer-list/index.html b/polymer-list/index.html new file mode 100644 index 0000000..9f9bf3b --- /dev/null +++ b/polymer-list/index.html @@ -0,0 +1,16 @@ + + + + List + + + + + + + + diff --git a/polymer-list/polymer-grid.html b/polymer-list/polymer-grid.html new file mode 100644 index 0000000..e398108 --- /dev/null +++ b/polymer-list/polymer-grid.html @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + + diff --git a/polymer-list/polymer-list.html b/polymer-list/polymer-list.html new file mode 100644 index 0000000..9ee6c86 --- /dev/null +++ b/polymer-list/polymer-list.html @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + diff --git a/polymer-meta/polymer-meta.html b/polymer-meta/polymer-meta.html index 5278c9c..9f3b22e 100644 --- a/polymer-meta/polymer-meta.html +++ b/polymer-meta/polymer-meta.html @@ -16,38 +16,56 @@ * @class polymer-meta */ --> - + + diff --git a/polymer-overlay/polymer-overlay-slideup.html b/polymer-overlay/polymer-overlay-slideup.html new file mode 100644 index 0000000..5af6b13 --- /dev/null +++ b/polymer-overlay/polymer-overlay-slideup.html @@ -0,0 +1,18 @@ + + + + + + diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html index 6b8e186..08587c9 100644 --- a/polymer-overlay/polymer-overlay.html +++ b/polymer-overlay/polymer-overlay.html @@ -73,13 +73,6 @@ - - -
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
- -

Multi-select

- -
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
- + + + + + + + diff --git a/polymer-selector/polymer-selection.html b/polymer-selector/polymer-selection.html index 318a61e..5c9ac16 100644 --- a/polymer-selector/polymer-selection.html +++ b/polymer-selector/polymer-selection.html @@ -43,9 +43,7 @@ this.selection.splice(i, 1); } } - // TODO(sjmiles): consider replacing with summary - // notifications (asynchronous job) - this.asyncFire("polymer-select", {isSelected: isSelected, item: item}); + this.fire("polymer-select", {isSelected: isSelected, item: item}); } }, select: function(item) { diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html index 4018fd6..3442185 100644 --- a/polymer-selector/polymer-selector.html +++ b/polymer-selector/polymer-selector.html @@ -9,20 +9,20 @@ */ /** * polymer-selector is used to display a list of elements that can be selected. - * The attribute "selected" indicates which element is being selected. - * Tapping on the element to change selection would fire "polymer-activate" - * event. + * The attribute "selected" indicates which item element is being selected. + * Tapping on the item element would fire "polymer-activate" event. And use + * "polymer-select" event to listen for selection changes. * * Example: * - * + * *
Item 1
*
Item 2
*
Item 3
* * - * polymer-selector is not styled. So one needs to use "selected" CSS class - * to style the selected element. + * polymer-selector is not styled. So one needs to use "polymer-selected" CSS + * class to style the selected element. * * diff --git a/test/html/polymer-selector-basic.html b/test/html/polymer-selector-basic.html index f995573..b12dcf5 100644 --- a/test/html/polymer-selector-basic.html +++ b/test/html/polymer-selector-basic.html @@ -6,6 +6,15 @@ + @@ -17,6 +26,8 @@
Item 5
 +

+
Item 1
Item 2
diff --git a/test/html/polymer-selector-multi.html b/test/html/polymer-selector-multi.html new file mode 100644 index 0000000..066fb88 --- /dev/null +++ b/test/html/polymer-selector-multi.html @@ -0,0 +1,53 @@ + + + + polymer-selector-multi + + + + + + + + + +
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+ + + + + diff --git a/test/js/polymer-selector.js b/test/js/polymer-selector.js index fbbc048..537fa39 100644 --- a/test/js/polymer-selector.js +++ b/test/js/polymer-selector.js @@ -7,4 +7,5 @@ htmlSuite('polymer-selector', function() { htmlTest('html/polymer-selector-basic.html'); htmlTest('html/polymer-selector-activate-event.html'); + htmlTest('html/polymer-selector-multi.html'); }); \ No newline at end of file diff --git a/tools b/tools new file mode 160000 index 0000000..313f752 --- /dev/null +++ b/tools @@ -0,0 +1 @@ +Subproject commit 313f7524ce37689ebfb60c81f7bda721535467cf