polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/core-input/metadata.html

@@ -9,12 +9,15 @@
 -->
 <x-meta id="core-input" label="Input" group="Core" isEditor>
 
+  <property name="value"></property>
+  <property name="placeholder"></property>
+
   <template>
-    <core-input placeholder="Type something..." style="padding: 15px;"></core-input>
+    <input is="core-input" placeholder="type something..." style="padding: 15px;">
   </template>
-  
+
   <template id="imports">
     <link rel="import" href="core-input.html">
   </template>
-  
+
 </x-meta>

data/app/assets/components/core-item/core-item.css

@@ -7,32 +7,33 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 
-html /deep/ core-item {
+:host {
   display: block;
   position: relative;
   min-height: 40px;
   white-space: nowrap;
 }
 
-html /deep/ core-item.font-scalable {
+:host(.font-scalable) {
   min-height: 2.5em;
 }
 
-html /deep/ core-item.core-selected {
+:host(.core-selected) {
   font-weight: bold;
 }
 
-html /deep/ core-item::shadow core-icon {
+#icon {
   margin: 0 16px 0 4px;
 }
 
-html /deep/ core-item.font-scalable::shadow core-icon {
+:host(.font-scalable) #icon {
   margin: 0 1em 0 0.25em;
   height: 1.5em;
   width: 1.5em;
 }
 
-html /deep/ core-item::shadow ::content > a {
+polyfill-next-selector { content: ':host > a'; }
+::content > a {
   position: absolute;
   top: 0;
   right: 0;

data/app/assets/components/core-item/core-item.html

@@ -30,15 +30,14 @@ Example:
 
 <link rel="import" href="../core-icon/core-icon.html">
 
-<link rel="stylesheet" href="core-item.css" shim-shadowdom>
-
 <polymer-element name="core-item" attributes="label icon src" horizontal center layout>
 <template>
-
-  <core-icon src="{{src}}" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon>
+  <link rel="stylesheet" href="core-item.css">
+  <template if="{{icon || src}}">
+    <core-icon src="{{src}}" id="icon" icon="{{icon}}" hidden?="{{!src && !icon}}"></core-icon>
+  </template>
   <div id="label">{{label}}</div>
   <content></content>
-  
 </template>
 <script>
 

data/app/assets/components/core-item/metadata.html

@@ -21,4 +21,4 @@
     
   </template>
   
-</x-meta>
+</x-meta>

data/app/assets/components/core-label/core-label.html

@@ -0,0 +1,124 @@
+<!--
+    @license
+    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+    Code distributed by Google as part of the polymer project is also
+    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+`<core-label>` provides a version of the `<label>` element that works with Custom Elements as well as native elements.
+
+All text in the `core-label` will be applied to the target element as a screen-reader accessible description.
+
+There are two ways to use `core-label` to target an element:
+
+1. place an element inside core-label with the `for` attribute:
+
+        <core-label>
+          Context for the Button
+          <paper-button for>button</paper-button>
+        </core-label>
+
+2. Set the `for` attribute on the `core-label` element to point to a target element in the same scope with a query
+string:
+
+        <core-label for=".foo">
+          Context for the button witht the "foo" class"
+        </core-label>
+        <paper-button class="foo">Far away button</paper-button>
+
+All taps on the `core-label` will be forwarded to the "target" element.
+
+@group Core Elements
+@element core-label
+@homepage github.io
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<!-- Native <label> has cursor: default -->
+<style>
+  html /deep/ core-label {
+    cursor: default;
+  }
+</style>
+
+<polymer-element name="core-label">
+  <script>
+    (function() {
+
+      var ID = 0;
+      function generate(node) {
+        if (!node.id) {
+          node.id = 'core-label-' + ID++;
+        }
+        return node.id;
+      }
+
+      Polymer('core-label', {
+        /**
+         * A query selector string for a "target" element not nested in the `<core-label>`
+         *
+         * @attribute for
+         * @type string
+         * @default ''
+         */
+        publish: {
+          'for': {reflect: true, value: ''}
+        },
+        eventDelegates: {
+          'tap': 'tapHandler'
+        },
+        created: function() {
+          generate(this);
+          this._forElement = null;
+        },
+        ready: function() {
+          if (!this.for) {
+            this._forElement = this.querySelector('[for]');
+            this._tie();
+          }
+        },
+        tapHandler: function(ev) {
+          if (!this._forElement) {
+            return;
+          }
+          if (ev.target === this._forElement) {
+            return;
+          }
+          this._forElement.focus();
+          this._forElement.click();
+          this.fire('tap', null, this._forElement);
+        },
+        _tie: function() {
+          if (this._forElement) {
+            this._forElement.setAttribute('aria-labelledby', this.id);
+          }
+        },
+        _findScope: function() {
+          var n = this.parentNode;
+          while(n && n.parentNode) {
+            n = n.parentNode;
+          }
+          return n;
+        },
+        forChanged: function(oldFor, newFor) {
+          if (this._forElement) {
+            this._forElement.removeAttribute('aria-labelledby');
+          }
+          var scope = this._findScope();
+          if (!scope) {
+            return;
+          }
+          this._forElement = scope.querySelector(newFor);
+          if (this._forElement) {
+            this._tie();
+          }
+        }
+      });
+    })();
+  </script>
+</polymer-element>

data/app/assets/components/core-menu/core-menu.css

@@ -7,12 +7,12 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
 
-html /deep/ core-menu {
+:host {
   display: block;
   margin: 12px;
 }
 
-polyfill-next-selector { content: 'core-menu > core-item'; }
-html /deep/ core-menu::shadow ::content > core-item {
+polyfill-next-selector { content: ':host > core-item'; }
+::content > core-item {
   cursor: default;
 }

data/app/assets/components/core-menu/core-menu.html

@@ -57,6 +57,12 @@ The `core-select` event signals selection change.
 
 <link rel="import" href="../core-selector/core-selector.html">
 
-<link rel="stylesheet" href="core-menu.css" shim-shadowdom>
+<polymer-element name="core-menu" extends="core-selector" noscript>
+<template>
 
-<polymer-element name="core-menu" extends="core-selector" noscript></polymer-element>
+  <link rel="stylesheet" href="core-menu.css">
+  
+  <shadow></shadow>
+  
+</template>
+</polymer-element>

data/app/assets/components/core-menu/core-submenu.css

@@ -24,6 +24,20 @@ core-item {
  cursor: default; 
 }
 
+:host(.font-scalable) > core-item {
+  min-height: 2.5em;
+}
+
+:host(.font-scalable) > core-item::shadow core-icon {
+  margin: 0 1em 0 0.25em;
+  height: 1.5em;
+  width: 1.5em;
+}
+
 #submenu {
   margin: 0 0 0 44px;
 }
+
+:host(.font-scalable) > #submenu {
+  margin: 0 0 0 2.75em;
+}

data/app/assets/components/core-menu/core-submenu.html

@@ -32,6 +32,26 @@ You can override the margin by doing:
       margin-left: 20px;
     }
 
+To style the item for the submenu, do something like this:
+
+    core-submenu::shadow > #submenuItem {
+      color: blue;
+    }
+    
+To style all the `core-item`s in the light DOM:
+
+    polyfill-next-selector { content: 'core-submenu > #submenu > core-item'; }
+    core-submenu > core-item {
+      color: red;
+    }
+    
+The above will style `Topic1` and `Topic2` to have font color red.
+
+    <core-submenu icon="settings" label="Topics">
+      <core-item label="Topic1"></core-item>
+      <core-item label="Topic2"></core-item>
+    </core-submenu>
+    
 @group Polymer Core Elements
 @element core-submenu
 @extends core-item
@@ -46,7 +66,7 @@ You can override the margin by doing:
 
   <link rel="stylesheet" href="core-submenu.css">
 
-  <core-item src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
+  <core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
     <content select=".item-content"></content>
   </core-item>
 

data/app/assets/components/core-overlay/core-overlay-layer.html

@@ -6,6 +6,7 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
+<link rel="import" href="../polymer/polymer.html">
 
 <polymer-element name="core-overlay-layer">
 <template>

data/app/assets/components/core-overlay/core-overlay.html

@@ -48,10 +48,15 @@ presses the escape key. This behavior can be turned off via the
     </core-overlay>
 
 `core-overlay` will automatically size and position itself according to the 
-following rules. If the target's style.top and style.left are unset, the 
-target will be centered. The size of the target is constrained to be no larger
-than the window dimensions. The `margin` property specifies the extra amount
-of space that should be reserved around the overlay. This can be used to ensure
+following rules. The overlay's size is constrained such that it does not
+overflow the screen. This is done by setting maxHeight/maxWidth on the 
+`sizingTarget`. If the `sizingTarget` already has a setting for one of these
+properties, it will not be overridden. The overlay should
+be positioned via css or imperatively using the `core-overlay-position` event.
+If the overlay is not positioned vertically via setting `top` or `bottom`, it
+will be centered vertically. The same is true horizontally via a setting to 
+`left` or `right`. In addition, css `margin` can be used to provide some space
+around the overlay. This can be used to ensure
 that, for example, a drop shadow is always visible around the overlay.
 
 @group Core Elements
@@ -75,6 +80,20 @@ Fired when the `core-overlay` has completely closed.
 
 @event core-overlay-close-completed
 -->
+<!--
+Fired when the `core-overlay` needs to position itself. Optionally, implement
+in order to position an overlay via code. If the overlay was not otherwise
+positioned, it's important to indicate how the overlay has been positioned by
+setting the `dimensions.position` object. For example, if the overlay has been
+positioned via setting `right` and `top`, set dimensions.position to an
+object like this: `{v: 'top', h: 'right'}`.
+
+@event core-overlay-position
+@param {Object} detail
+@param {Object} detail.target the overlay target
+@param {Object} detail.sizingTarget the overlay sizing target
+@param {Object} detail.opened the opened state
+-->
 <style>
   .core-overlay-backdrop {
     position: fixed;
@@ -165,6 +184,16 @@ Fired when the `core-overlay` has completely closed.
        */
       autoCloseDisabled: false,
 
+      /**
+       * By default an overlay will focus its target or an element inside
+       * it with the `autoFocus` attribute. Disable this
+       * behavior by setting the `autoFocusDisabled` property to true.
+       * @attribute autoFocusDisabled
+       * @type boolean
+       * @default false
+       */
+      autoFocusDisabled: false,
+
       /**
        * This property specifies an attribute on elements that should
        * close the overlay on tap. Should not set `closeSelector` if this
@@ -187,18 +216,6 @@ Fired when the `core-overlay` has completely closed.
        */
       closeSelector: '',
 
-      /**
-       * A `core-overlay` target's size is constrained to the window size.
-       * The `margin` property specifies a pixel amount around the overlay 
-       * that will be reserved. It's useful for ensuring that, for example, 
-       * a shadow displayed outside the target will always be visible.
-       *
-       * @attribute margin
-       * @type number
-       * @default 0
-       */
-      margin: 0,
-
       /**
        * The transition property specifies a string which identifies a 
        * <a href="../core-transition/">`core-transition`</a> element that 
@@ -231,7 +248,7 @@ Fired when the `core-overlay` has completely closed.
     ready: function() {
       this.target = this.target || this;
       // flush to ensure styles are installed before paint
-      Platform.flush();
+      Polymer.flush();
     },
 
     /** 
@@ -272,6 +289,7 @@ Fired when the `core-overlay` has completely closed.
         }
         this.addElementListenerList(this.target, this.targetListeners);
         this.target.style.display = 'none';
+        this.target.__overlaySetup = false;
       }
       if (old) {
         this.removeElementListenerList(old, this.targetListeners);
@@ -286,41 +304,50 @@ Fired when the `core-overlay` has completely closed.
       }
     },
 
+    transitionChanged: function(old) {
+      if (!this.target) {
+        return;
+      }
+      if (old) {
+        this.getTransition(old).teardown(this.target);
+      }
+      this.target.__overlaySetup = false;
+    },
+
     // NOTE: wait to call this until we're as sure as possible that target
     // is styled.
     ensureTargetSetup: function() {
       if (!this.target || this.target.__overlaySetup) {
         return;
       }
+      if (!this.sizingTarget) {
+        this.sizingTarget = this.target;
+      }
       this.target.__overlaySetup = true;
       this.target.style.display = '';
       var transition = this.getTransition();
       if (transition) {
         transition.setup(this.target);
       }
+      var style = this.target.style;
       var computed = getComputedStyle(this.target);
-      this.targetStyle = {
-        position: computed.position === 'static' ? 'fixed' :
-            computed.position
-      }
-      if (!transition) {
-        this.target.style.position = this.targetStyle.position;
-        this.target.style.outline = 'none';
+      if (computed.position === 'static') {
+        style.position = 'fixed';
       }
-      this.target.style.display = 'none';
+      style.outline = 'none';
+      style.display = 'none';
     },
 
     openedChanged: function() {
       this.transitioning = true;
       this.ensureTargetSetup();
       this.prepareRenderOpened();
-      // continue styling after delay so display state can change
-      // without aborting transitions
-      // note: we wait a full frame so that transition changes executed
-      // during measuring do not cause transition
+      // async here to allow overlay layer to become visible.
       this.async(function() {
         this.target.style.display = '';
-        this.async('renderOpened');
+        // force layout to ensure transitions will go
+        this.target.offsetWidth;
+        this.renderOpened();
       });
       this.fire('core-overlay-open', this.opened);
     },
@@ -342,20 +369,14 @@ Fired when the `core-overlay` has completely closed.
           'resizeHandler');
 
       if (this.opened) {
-        // TODO(sorvell): force SD Polyfill to render
-        forcePolyfillRender(this.target);
-        if (!this._shouldPosition) {
-          this.target.style.position = 'absolute';
-          var computed = getComputedStyle(this.target);
-          var t = (computed.top === 'auto' && computed.bottom === 'auto');
-          var l = (computed.left === 'auto' && computed.right === 'auto');
-          this.target.style.position = this.targetStyle.position;
-          this._shouldPosition = {top: t, left: l};
-        }
-        // if we are showing, then take care when measuring
-        this.prepareMeasure(this.target);
+        // force layout so SD Polyfill renders
+        this.target.offsetHeight;
+        this.discoverDimensions();
+        // if we are showing, then take care when positioning
+        this.preparePositioning();
+        this.positionTarget();
         this.updateTargetDimensions();
-        this.finishMeasure(this.target);
+        this.finishPositioning();
         if (this.layered) {
           this.layer.addElement(this.target);
           this.layer.opened = this.opened;
@@ -424,20 +445,49 @@ Fired when the `core-overlay` has completely closed.
       }
     },
 
-    prepareMeasure: function(target) {
-      target.style.transition = target.style.webkitTransition = 'none';
-      target.style.transform = target.style.webkitTransform = 'none';
-      target.style.display = '';
+    preparePositioning: function() {
+      this.target.style.transition = this.target.style.webkitTransition = 'none';
+      this.target.style.transform = this.target.style.webkitTransform = 'none';
+      this.target.style.display = '';
+    },
+
+    discoverDimensions: function() {
+      if (this.dimensions) {
+        return;
+      }
+      var target = getComputedStyle(this.target);
+      var sizer = getComputedStyle(this.sizingTarget);
+      this.dimensions = {
+        position: {
+          v: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
+            'bottom' : null),
+          h: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
+            'right' : null),
+          css: target.position
+        },
+        size: {
+          v: sizer.maxHeight !== 'none',
+          h: sizer.maxWidth !== 'none'
+        },
+        margin: {
+          top: parseInt(target.marginTop) || 0,
+          right: parseInt(target.marginRight) || 0,
+          bottom: parseInt(target.marginBottom) || 0,
+          left: parseInt(target.marginLeft) || 0
+        }
+      };
     },
 
-    finishMeasure: function(target) {
-      target.style.display = 'none';
-      target.style.transform = target.style.webkitTransform = '';
-      target.style.transition = target.style.webkitTransition = '';
+    finishPositioning: function(target) {
+      this.target.style.display = 'none';
+      this.target.style.transform = this.target.style.webkitTransform = '';
+      // force layout to avoid application of transform
+      this.target.offsetWidth;
+      this.target.style.transition = this.target.style.webkitTransition = '';
     },
 
-    getTransition: function() {
-      return this.meta.byId(this.transition);
+    getTransition: function(name) {
+      return this.meta.byId(name || this.transition);
     },
 
     getFocusNode: function() {
@@ -447,7 +497,9 @@ Fired when the `core-overlay` has completely closed.
     applyFocus: function() {
       var focusNode = this.getFocusNode();
       if (this.opened) {
-        focusNode.focus();
+        if (!this.autoFocusDisabled) {
+          focusNode.focus();
+        }
       } else {
         focusNode.blur();
         if (currentOverlay() == this) {
@@ -458,49 +510,76 @@ Fired when the `core-overlay` has completely closed.
       }
     },
 
+    positionTarget: function() {
+      // fire positioning event
+      this.fire('core-overlay-position', {target: this.target,
+          sizingTarget: this.sizingTarget, opened: this.opened});
+      if (!this.dimensions.position.v) {
+        this.target.style.top = '0px';
+      }
+      if (!this.dimensions.position.h) {
+        this.target.style.left = '0px';
+      }
+    },
+
     updateTargetDimensions: function() {
-      this.positionTarget();
       this.sizeTarget();
-      //
-      if (this.layered) {
-        var rect = this.target.getBoundingClientRect();
-        this.target.style.top = rect.top + 'px';
-        this.target.style.left = rect.left + 'px';
-        this.target.style.right = this.target.style.bottom = 'auto';
-      }
+      this.repositionTarget();
     },
 
     sizeTarget: function() {
-      var sizer = this.sizingTarget || this.target;
-      var rect = sizer.getBoundingClientRect();
-      var mt = rect.top === this.margin ? this.margin : this.margin * 2;
-      var ml = rect.left === this.margin ? this.margin : this.margin * 2;
-      var h = window.innerHeight - rect.top - mt;
-      var w = window.innerWidth - rect.left - ml;
-      sizer.style.maxHeight = h + 'px';
-      sizer.style.maxWidth = w + 'px';
-      sizer.style.boxSizing = 'border-box';
+      this.sizingTarget.style.boxSizing = 'border-box';
+      var dims = this.dimensions;
+      var rect = this.target.getBoundingClientRect();
+      if (!dims.size.v) {
+        this.sizeDimension(rect, dims.position.v, 'top', 'bottom', 'Height');
+      }
+      if (!dims.size.h) {
+        this.sizeDimension(rect, dims.position.h, 'left', 'right', 'Width');
+      }
     },
 
-    positionTarget: function() {
-      // vertically and horizontally center if not positioned
-      if (this._shouldPosition.top) {
-        var t = Math.max((window.innerHeight - 
-            this.target.offsetHeight - this.margin*2) / 2, this.margin);
+    sizeDimension: function(rect, positionedBy, start, end, extent) {
+      var dims = this.dimensions;
+      var flip = (positionedBy === end);
+      var m = flip ? start : end;
+      var ws = window['inner' + extent];
+      var o = dims.margin[m] + (flip ? ws - rect[end] : 
+          rect[start]);
+      var offset = 'offset' + extent;
+      var o2 = this.target[offset] - this.sizingTarget[offset];
+      this.sizingTarget.style['max' + extent] = (ws - o - o2) + 'px';
+    },
+
+    // vertically and horizontally center if not positioned
+    repositionTarget: function() {
+      // only center if position fixed.      
+      if (this.dimensions.position.css !== 'fixed') {
+        return; 
+      }
+      if (!this.dimensions.position.v) {
+        var t = (window.innerHeight - this.target.offsetHeight) / 2;
+        t -= this.dimensions.margin.top;
         this.target.style.top = t + 'px';
       }
-      if (this._shouldPosition.left) {
-        var l = Math.max((window.innerWidth - 
-            this.target.offsetWidth - this.margin*2) / 2, this.margin);
+
+      if (!this.dimensions.position.h) {
+        var l = (window.innerWidth - this.target.offsetWidth) / 2;
+        l -= this.dimensions.margin.left;
         this.target.style.left = l + 'px';
       }
     },
 
     resetTargetDimensions: function() {
-      this.target.style.top = this.target.style.left = '';
-      this.target.style.right = this.target.style.bottom = '';
-      this.target.style.width = this.target.style.height = '';
-      this._shouldPosition = null;
+      if (!this.dimensions || !this.dimensions.size.v) {
+        this.sizingTarget.style.maxHeight = '';  
+        this.target.style.top = '';
+      }
+      if (!this.dimensions || !this.dimensions.size.h) {
+        this.sizingTarget.style.maxWidth = '';  
+        this.target.style.left = '';
+      }
+      this.dimensions = null;
     },
 
     tapHandler: function(e) {
@@ -593,18 +672,12 @@ Fired when the `core-overlay` has completely closed.
       if (!this[bound]) {
         this[bound] = function(e) {
           method.call(self, e);
-        }
+        };
       }
       return this[bound];
     },
   });
 
-  function forcePolyfillRender(target) {
-    if (window.ShadowDOMPolyfill) {
-      target.offsetHeight;
-    }
-  }
-
   // TODO(sorvell): This should be an element with private state so it can
   // be independent of overlay.
   // track overlays for z-index and focus managemant