googlearchive · dfreedm · Jul 11, 2013 · Jun 17, 2013 · Jun 18, 2013 · Jun 18, 2013
diff --git a/polymer-ajax/index.html b/polymer-ajax/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>polymer-ajax</title>
+  <script src="../../polymer/polymer.js"></script>
+  <link rel="import" href="polymer-ajax.html">
+</head>
+<body>
+  <polymer-ajax auto url="http://gdata.youtube.com/feeds/api/videos/" 
+      params='{"alt":"json", "q":"chrome"}'
+      handleAs="json"></polymer-ajax>
+
+  <template repeat="{{response.feed.entry}}">
+    <div>{{title.$t}}</div>
+  </template>
+
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+      var ajax = document.querySelector("polymer-ajax");
+      ajax.addEventListener("polymer-response", 
+        function(e) {
+          document.querySelector('template').model = {
+            response: e.detail.response
+          };
+        }
+      );
+    });
+  </script>
+</body>
+</html>
diff --git a/polymer-ajax/polymer-ajax.html b/polymer-ajax/polymer-ajax.html
@@ -23,23 +23,24 @@
 /**
  * Fired when a response is received.
  * 
- * @event response
+ * @event polymer-response
  */
 /**
  * Fired when an error is received.
  * 
- * @event error
+ * @event polymer-error
  */
 /**
  * Fired whenever a response or an error is received.
  *
- * @event complete
+ * @event polymer-complete
  */
 -->
 <link rel="import" href="polymer-xhr.html">
-<element name="polymer-ajax" attributes="url handleAs auto params response">
+
+<polymer-element name="polymer-ajax" attributes="url handleAs auto params response">
   <script>
-    Polymer.register(this, {
+    Polymer('polymer-ajax', {
       /**
        * The URL target of the request.
        * 
@@ -175,4 +176,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>
diff --git a/polymer-ajax/polymer-xhr.html b/polymer-ajax/polymer-xhr.html
@@ -19,7 +19,7 @@
  * @class polymer-xhr
  */
 -->
-<element name="polymer-xhr">
+<polymer-element name="polymer-xhr">
   <template>
     <style>
       @host {
@@ -30,11 +30,11 @@
     </style>
   </template>
   <script>
-    Polymer.register(this, {
+    Polymer('polymer-xhr', {
       makeReadyStateHandler: function(xhr, callback) {
         xhr.onreadystatechange = function() {
           if (xhr.readyState == 4) {
-            callback && callback.call(null, xhr.responseText, xhr);
+            callback && callback.call(null, xhr.response, xhr);
           }
         };
       },
@@ -66,6 +66,7 @@
        *    @param {Object} inOptions.params Data to be sent to the server.
        *    @param {Object} inOptions.body The content for the request body for POST method.
        *    @param {Object} inOptions.headers HTTP request headers.
+       *    @param {String} inOptions.responseType The response type. Default is 'text'.
        *    @param {Object} inOptions.callback Called when request is completed.
        * @returns {Object} XHR object.
        */
@@ -78,6 +79,9 @@
         if (params && method == 'GET') {
           url += (url.indexOf('?') > 0 ? '&' : '?') + params;
         }
+        if (options.responseType) {
+          xhr.responseType = options.responseType;
+        }
         xhr.open(method, url, async);
         this.makeReadyStateHandler(xhr, options.callback);
         this.setRequestHeaders(options.headers);
@@ -89,4 +93,4 @@
       }
     });
   </script>
-</element>
+</polymer-element>
diff --git a/polymer-animation/index.html b/polymer-animation/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Polymer Animation Components</title>
+    <link rel="import" href="polymer-animation.html">
+    <link rel="import" href="polymer-animation-group.html">
+    <link rel="import" href="polymer-blink.html">
+    <link rel="import" href="polymer-bounce.html">
+    <link rel="import" href="polymer-fadein.html">
+    <link rel="import" href="polymer-fadeout.html">
+    <link rel="import" href="polymer-flip.html">
+    <link rel="import" href="polymer-shake.html">
+    <script src="../../polymer/polymer.js"></script>
+    <style>
+      body {
+        text-align: center;
+        font-family: Helvetica, sans-serif;
+      }
+      div#target {
+        display: inline-block;
+        background-color: dimgrey;
+        border-radius: 5px;
+        padding: 5px 10px;
+        margin: 50px;
+        font-size: 30px;
+        color: white;
+      }
+      div.animations > * {
+        display: inline-block;
+        background-color: darkgrey;
+        border-radius: 5px;
+        padding: 5px 10px;
+        margin: 5px;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target">animated!</div>
+    <div class="animations">
+			<polymer-animation duration="1">
+				raw
+				<polymer-animation-prop name="opacity" easing="ease-in-out">
+					<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
+					<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
+					<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
+				</polymer-animation-prop>
+			</polymer-animation>
+			<polymer-animation-group type="seq">
+				raw group
+				<polymer-animation duration="0.3">
+					<polymer-animation-prop name="opacity" easing="ease-in-out">
+						<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
+						<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
+						<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
+					</polymer-animation-prop>
+				</polymer-animation>
+				<polymer-animation duration="0.3">
+					<polymer-animation-prop name="transform" easing="ease-in-out">
+						<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
+						<polymer-animation-keyframe value="scale(1.2)"></polymer-animation-keyframe>
+						<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
+					</polymer-animation-prop>
+				</polymer-animation>
+			</polymer-animation-group>
+      <polymer-bounce duration="1">bounce</polymer-bounce>
+      <polymer-shake>shake</polymer-shake>
+      <polymer-shake duration="Infinity">shake forever</polymer-shake>
+      <polymer-flip>flip X</polymer-flip>
+      <polymer-flip axis="y">flip Y</polymer-flip>
+      <polymer-blink>blink</polymer-blink>
+      <polymer-fadein>fade in</polymer-fadein>
+      <polymer-fadeout>fade out</polymer-fadeout>
+    </div>
+    <script>
+      document.addEventListener('WebComponentsReady', function() {
+        document.querySelector('.animations').addEventListener('click',
+            function(e) {
+              var animation = e.target;
+              animation.target = target;
+              animation.play();
+            });
+      });
+    </script>
+  </body>
+</html>
diff --git a/polymer-animation/polymer-animation-group.html b/polymer-animation/polymer-animation-group.html
@@ -0,0 +1,100 @@
+<link rel="import" href="polymer-animation.html">
+<polymer-element name="polymer-animation-group" extends="polymer-animation" on-animationchange="onAnimationChange">
+  <script>
+    (function() {
+      var ANIMATION_GROUPS = {
+        'par': ParGroup,
+        'seq': SeqGroup
+      };
+      /**
+       * @module Animation
+       */
+      /**
+       * Component for a group of animations.
+       *
+       * A fade in and move animation in sequence:
+       *
+       *     <polymer-animation-group type="seq">
+       *       <polymer-animation>
+       *         <polymer-animation-prop name="opacity">
+       *           <polymer-animation-keyframe value="0.5" offset="0"></polymer-animation-keyframe>
+       *           <polymer-animation-keyframe value="1" offset="1"></polymer-animation-keyframe>
+       *         <polymer-animation-prop>
+       *       </polymer-animation>
+       *       <polymer-animation>
+       *         <polymer-animation-prop name="transform">
+       *           <polymer-animation-keyframe value="translateX(0)" offset="0"></polymer-animation-keyframe>
+       *           <polymer-animation-keyframe value="translateX(100px)" offset="1"></polymer-animation-keyframe>
+       *         <polymer-animation-prop>
+       *       </polymer-animation>
+       *     </polymer-animation-group>
+       * @class polymer-animation-group
+       */
+      Polymer('polymer-animation-group', {
+        /**
+         * If specified the target will be assigned to all child animations.
+         * @property target
+         * @type HTMLElement|Node
+         * @optional
+         */
+        publish: {
+          targetSelector: '',
+          target: null,
+          duration: null,
+          /**
+           * Group type. 'par' for parallel and 'seq' for sequence.
+           * @property type
+           * @type String
+           */
+          type: 'par'
+        },
+        ready: function() {
+          // TODO: need to do this for now.
+          this.super();
+        },
+        makeAnimation: function() {
+          return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
+        },
+        completeApply: function() {
+          this.doOnChildren(function(c) {
+            c.completeApply();
+          });
+          Platform.flush();
+          this.super();
+        },
+        onAnimationChange: function(inEvent, inSender) {
+          if (inSender !== this) {
+            this.asyncApply();
+          }
+        },
+        typeChanged: function() {
+          this.asyncApply();
+        },
+        targetChanged: function() {
+          this.doOnChildren(function(c) {
+            c.target = this.target;
+          }.bind(this));
+        },
+        doOnChildren: function(inFn) {
+          var children = this.children;
+          if (!children.length) {
+            children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
+          }
+          Array.prototype.forEach.call(children, function(c) {
+            // TODO <template> in the way
+            c.apply && inFn(c);
+          }, this);
+        },
+        get childAnimations() {
+          var list = [];
+          this.doOnChildren(function(c) {
+            if (c.animation) {
+              list.push(c.animation);
+            }
+          });
+          return list;
+        }
+      });
+    })();
+  </script>
+</polymer-element>
diff --git a/polymer-animation/polymer-animation-keyframe.html b/polymer-animation/polymer-animation-keyframe.html
@@ -0,0 +1,41 @@
+<polymer-element name="polymer-animation-keyframe" attributes="offset value easing">
+	<script>
+		/**
+		 * Defines the value at a keyframe for the containing `polymer-animation-prop`.
+		 * @class polymer-animation-keyframe
+		 */
+		/**
+		 * From 0 to 1.
+		 * @property offset
+		 * @type Number
+		 * @required
+		 */
+		/**
+		 * Property value at the animation offset.
+		 * @property value
+		 * @type String
+		 * @required
+		 */
+		/**
+		 * @property easing
+		 * @type String
+		 */
+		Polymer('polymer-animation-keyframe', {
+			get properties() {
+				var props = {
+					// TODO bug in webanimations polyfill
+					value: String(this.value) || "",
+				};
+				var more = this.offset !== null || this.easing;
+				if (this.offset !== null) {
+					props.offset = this.offset;
+				}
+				if (this.easing) {
+					props.timingFunction = this.easing;
+				}
+				return more ? props : String(this.value);
+			}
+		});
+	</script>
+</polymer-element>
+
diff --git a/polymer-animation/polymer-animation-prop.html b/polymer-animation/polymer-animation-prop.html
@@ -0,0 +1,25 @@
+<link rel="import" href="polymer-animation-keyframe.html">
+<polymer-element name="polymer-animation-prop" attributes="name">
+  <script>
+    /**
+     * An animated property. Its children should be `<polymer-animation-keyframe>`
+     * elements specifying the keyframe values.
+     *
+     * Declaring an property to move down and then right:
+     *
+     *     <polymer-animation-prop name="transform">
+     *       <polymer-animation-keyframe offset="0" value="translate(0,0)"></polymer-animation-keyframe>
+     *       <polymer-animation-keyframe offset="0.5" value="translate(0,100px)"></polymer-animation-keyframe>
+     *       <polymer-animation-keyframe offset="1" value="translate(100px,100px)"></polymer-animation-keyframe>
+     *     </polymer-animation-prop>
+     * @class polymer-animation-prop
+     */
+		/**
+		 * CSS property name.
+		 * @property name
+		 * @type String
+		 * @required
+		 */
+    Polymer('polymer-animation-prop');
+  </script>
+</polymer-element>