googlearchive · dfreedm · Aug 15, 2013 · Aug 12, 2013 · Aug 12, 2013 · Aug 12, 2013
diff --git a/polymer-ajax/polymer-ajax.html b/polymer-ajax/polymer-ajax.html
@@ -89,7 +89,7 @@
        * @type Object
        * @default null
        */
-      ready: function() {
+      created: function() {
         this.xhr = document.createElement('polymer-xhr');
       },
       response: '',

diff --git a/polymer-anchor-point/index.html b/polymer-anchor-point/index.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html>
+	<head>
+		<title>polymer-anchor-point</title>
+		<link rel="import" href="../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
+		<link rel="import" href="../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
+		<link rel="import" href="polymer-anchor-point.html">
+		<script src="../../polymer/polymer.js"></script>
+		<link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
+		<style>
+			html, body {
+				margin: 0;
+				padding: 0;
+			}
+			html, body, #container {
+				height: 100%;
+			}
+			#target {
+				padding: 5px;
+				border: 1px solid black;
+				display: none;
+				position: absolute;
+				left: -99999px;
+			}
+			#target.active {
+				display: block;
+			}
+		</style>
+	</head>
+	<body class="polymer-ui-body-text">
+		<div id="container">
+			<polymer-flex-layout vertical="true"></polymer-flex-layout>
+			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
+				<polymer-ui-icon-button icon="menu" anchor-point="bottom left" target-anchor-point="top left"></polymer-ui-icon-button>
+				<div flex></div>
+				<polymer-ui-icon-button icon="refresh" anchor-point="bottom center" target-anchor-point="top center"></polymer-ui-icon-button>
+				<div flex></div>
+				<polymer-ui-icon-button icon="add" anchor-point="bottom right" target-anchor-point="top right"></polymer-ui-icon-button>
+			</polymer-ui-toolbar>
+			<div flex></div>
+			<div style="text-align:center">
+				<p><strong>Click icon buttons in the toolbars or enter custom <a href="http://dev.w3.org/csswg/css-backgrounds/#the-background-position" target="_blank">anchor-points</a> below.</strong></p>
+				<br>
+				anchor-point: <input id="customAnchorPt" value="bottom">
+				target anchor-point: <input id="customTargetAnchorPt" value="center -10px">
+				<br><br>
+				Click <polymer-ui-icon-button icon="settings" onclick="toggleCustom(event)"></polymer-ui-icon-button> for custom
+			</div>
+			<div flex></div>
+			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
+				<polymer-ui-icon-button icon="drawer" anchor-point="top left" target-anchor-point="bottom left"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="dots" anchor-point="top center" target-anchor-point="bottom center"></polymer-ui-icon-button>
+				<div flex></div>
+				<polymer-ui-icon-button icon="search" anchor-point="top right" target-anchor-point="bottom right"></polymer-ui-icon-button>
+			</polymer-ui-toolbar>
+		</div>
+		<div id="target" onclick="toggle(event)"></div>
+		<polymer-anchor-point id="anchorable"></polymer-anchor-point>
+		<script>
+			function toggle(e) {
+				var anchorable = document.querySelector('#anchorable');
+				var target = document.querySelector('#target');
+				var anchor = e.target;
+				if (target.classList.contains('active')) {
+					target.classList.remove('active');
+				} else {
+					var targetAnchorPt = anchor.getAttribute('target-anchor-point');
+					target.setAttribute('anchor-point', targetAnchorPt);
+					target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPt;
+					anchorable.target = target;
+					anchorable.anchor = anchor;
+					target.classList.add('active');
+					anchorable.apply();
+				}
+			};
+			function toggleCustom(e) {
+				var anchorable = document.querySelector('#anchorable');
+				var target = document.querySelector('#target');
+				var anchor = e.target;
+				if (target.classList.contains('active')) {
+					target.classList.remove('active');
+				} else {
+					var anchorPt = document.querySelector('#customAnchorPt').value;
+					anchor.setAttribute('anchor-point', anchorPt);
+					var targetAnchorPt = document.querySelector('#customTargetAnchorPt').value;
+					target.setAttribute('anchor-point', targetAnchorPt);
+					target.innerHTML = 'anchor-point: ' + anchorPt + '<br>' + 'target anchor-point: ' + targetAnchorPt;
+					anchorable.target = target;
+					anchorable.anchor = anchor;
+					target.classList.add('active');
+					anchorable.apply();
+				}
+			}
+		</script>
+	</body>
+</html>
diff --git a/polymer-anchor-point/polymer-anchor-point.html b/polymer-anchor-point/polymer-anchor-point.html
@@ -0,0 +1,194 @@
+<!--
+/**
+ * @module Polymer Elements
+ */
+/**
+ * polymer-anchor-point can be used to align two nodes. The node to
+ * use as the reference position is the anchor node, and the node to
+ * be positioned is the target node.
+ *
+ * Both the anchor and target nodes should have an anchor-point
+ * attribute. The target node is positioned such that its anchor-point
+ * aligns with the anchor node's anchor-point.
+ *
+ * Note: The target node is positioned with position: fixed, and will not
+ * scroll with the page.
+ *
+ * Note: This is meant to polyfill the <dialog> positioning behavior when
+ * an anchor is provided. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
+ *
+ * Example:
+ *
+ *    <div id="anchor" anchor-point="bottom left"></div>
+ *    <div id="target" anchor-point="top left"></div>
+ *    <polymer-anchor-point id="anchor-helper"></polymer-anchor-point>
+ *    <script>
+ *        var helper = document.querySelector('#anchor-helper');
+ *        helper.anchor = document.querySelector('#anchor');
+ *        helper.target = document.querySelector('#target');
+ *        helper.apply();
+ *    </script>
+ *
+ * @class polymer-anchor-point
+ */
+ -->
+<polymer-element name="polymer-anchor-point" attributes="target anchor">
+	<script>
+		(function() {
+			var DEFAULT_ANCHOR_POINT = 'center center';
+
+			function getAnchorPoint(node) {
+				var anchorPt = node.getAttribute('anchor-point');
+				if (!anchorPt || anchorPt === 'none') {
+					anchorPt = DEFAULT_ANCHOR_POINT;
+				}
+				return anchorPt;
+			};
+
+			function lengthIsPx(length) {
+				return length.slice(-2) === 'px';
+			};
+
+			function lengthIsPercent(length) {
+				return length.slice(-1) === '%';
+			};
+
+			function computeLength(length, ref) {
+				var computed = 0;
+				if (lengthIsPx(length)) {
+					computed  = length.slice(0, -2);
+				} else if (lengthIsPercent(length)) {
+					computed = ref * length.slice(0, -1) / 100;
+				}
+				return computed;
+			};
+
+			function partIsX(part) {
+				return part === 'left' || part === 'right' || part === 'center';
+			};
+
+			function partIsY(part) {
+				return part === 'top' || part === 'bottom' || part === 'center';
+			};
+
+			function partIsKeyword(part) {
+				return part.slice(-1) !== '%' && part.slice(-2) !== 'px';
+			};
+
+			function parsePosition(position) {
+				var parsed = {};
+				var parts = position.split(' ');
+				var i = 0;
+				var lastEdgeX = true;
+				do {
+					if (partIsX(parts[i])) {
+						parsed.x = parts[i];
+						lastEdgeX = parts[i] !== 'center';
+					} else if (partIsY(parts[i])) {
+						parsed.y = parts[i];
+						lastEdgeX = false;
+					} else if (lastEdgeX) {
+						parsed.xOffset = parts[i];
+						lastEdgeX = false;
+					} else {
+						parsed.yOffset = parts[i];
+					}
+				} while (++i < parts.length);
+				return parsed;
+			};
+
+			function computeAnchorOffset(rect, anchorPt) {
+				var offset = {
+					left: 0,
+					top: 0
+				};
+				var parsed = parsePosition(anchorPt);
+				if (!parsed.x && !parsed.xOffset) {
+					offset.left = rect.width / 2;
+				} else if (parsed.x && !parsed.xOffset) {
+					switch (parsed.x) {
+						case 'left':
+							offset.left = 0;
+							break;
+						case 'right':
+							offset.left = rect.width;
+							break;
+						case 'center':
+							offset.left = rect.width / 2;
+							break;
+					}
+				} else {
+					var computed = computeLength(parsed.xOffset, rect.width);
+					if (parsed.x === 'right') {
+						offset.left = rect.width - computed;
+					} else if (!parsed.x || parsed.x === 'left') {
+						offset.left = computed;
+					}
+				}
+				if (!parsed.y && !parsed.yOffset) {
+					offset.top = rect.height / 2;
+				} else if (parsed.y && !parsed.yOffset) {
+					switch (parsed.y) {
+						case 'top':
+							offset.top = 0;
+							break;
+						case 'bottom':
+							offset.top = rect.height;
+							break;
+						case 'center':
+							offset.top = rect.height / 2;
+							break;
+					}
+				} else {
+					var computed = computeLength(parsed.yOffset, rect.height);
+					if (parsed.y === 'bottom') {
+						offset.top = rect.height - computed;
+					} else if (!parsed.y || parsed.y === 'top') {
+						offset.top = computed;
+					}
+				}
+				return offset;
+			};
+
+			Polymer('polymer-anchor-point', {
+				/**
+				 * The node to be positioned.
+				 * @attribute target
+				 * @type Node
+				 */
+				target: null,
+				/**
+				 * The node to align the target to.
+				 * @attribute anchor
+				 * @type node
+				 */
+				anchor: null,
+				canPosition: function() {
+					return this.target && this.anchor;
+				},
+				apply: function() {
+					if (!this.canPosition()) {
+						return;
+					}
+					var pos = this.computePosition();
+					this.target.style.position = 'fixed';
+					this.target.style.top = pos.top + 'px';
+					this.target.style.left = pos.left + 'px';
+				},
+				computePosition: function() {
+					var rect = this.anchor.getBoundingClientRect();
+					var anchorPt = getAnchorPoint(this.anchor);
+					var anchorOffset = computeAnchorOffset(rect, anchorPt);
+					var targetRect = this.target.getBoundingClientRect();
+					var targetAnchorPt = getAnchorPoint(this.target);
+					var targetOffset = computeAnchorOffset(targetRect, targetAnchorPt);
+					var pos = {
+						left: rect.left + anchorOffset.left - targetOffset.left,
+						top: rect.top + anchorOffset.top - targetOffset.top
+					};
+					return pos;
+				}
+			});
+		})();
+	</script>
+</polymer-element>
diff --git a/polymer-animation/polymer-animation-group.html b/polymer-animation/polymer-animation-group.html
@@ -32,7 +32,7 @@
            */
           type: 'par'
         },
-        ready: function() {
+        created: function() {
           // TODO: need to do this for now.
           this.super();
         },

diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
@@ -13,7 +13,7 @@
         if (p) {
           target = p.querySelector(inSelector);
         }
-        if (!target && p.host) {
+        if (!target && p && p.host) {
           target = findTarget(inSelector, p.host);
         }
         return target;
@@ -133,7 +133,7 @@
           autoplay: false
         },
         animation: false,
-        ready: function() {
+        created: function() {
           this.asyncApply();
         },
         /**

diff --git a/polymer-animation/polymer-bounce.html b/polymer-animation/polymer-bounce.html
@@ -5,7 +5,7 @@
 			targetSelector: '',
 			duration: 1,
 			magnitude: '-30px',
-      ready: function() {
+      created: function() {
         this.super();
         this.magnitudeChanged();
       },

diff --git a/polymer-animation/polymer-flip.html b/polymer-animation/polymer-flip.html
@@ -7,7 +7,7 @@
         duration: 0.5,
         axis: 'x',
 			},
-			ready: function() {
+			created: function() {
 				this.generate();
 			},
       axisChanged: function() {

diff --git a/polymer-animation/polymer-shake.html b/polymer-animation/polymer-shake.html
@@ -45,7 +45,7 @@
 			magnitude: '10px',
 			period: 0.1,
 			easing: 'ease-in',
-      ready: function() {
+      created: function() {
         this.super();
         this.magnitudeChanged();
         this.periodChanged();

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
@@ -29,7 +29,7 @@
  * @class polymer-collapse
  */
 -->
-<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize defaultClosed">
+<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize">
   <template>
     <style>
       @host {   
@@ -93,7 +93,6 @@
        */
       fixedSize: false,
       size: null,
-      defaultClosed: false,
       removed: function() {
         this.removeListeners(this.target);
       },
@@ -113,9 +112,7 @@
           this.target.style.overflow = 'hidden';
           this.addListeners(this.target);
         }
-        if (this.closed || this.defaultClosed) {
-          this.update();
-        }
+        this.update();
       },
       addListeners: function(node) {
         this.transitionEndListener = this.transitionEndListener || 

diff --git a/polymer-cookie/polymer-cookie.html b/polymer-cookie/polymer-cookie.html
@@ -16,7 +16,7 @@
       var cookieProps = ['expires', 'secure', 'max-age', 'domain', 'path'];
       Polymer('polymer-cookie', {
         expires: FOREVER,
-        ready: function() {
+        created: function() {
           this.load();
         },
         parseCookie: function() {