polymer-paper-rails 0.2.0 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 56679fa4f11f1c12f7e84286df2e1ef0f3d56b0a
-  data.tar.gz: 3c81094a6dc380d30df906a87ff5ef9a39eacdc5
+  metadata.gz: 7f3cf63cae3249231c47b9018957a68a9ecb339b
+  data.tar.gz: 0f6809b4a33a8c59dd17503216be345e083c6d63
 SHA512:
-  metadata.gz: 9667c787263a094827de17c9247da4cb66347a6084f6f22aa21d89ebd81f662435b9a186d191f59047975e581b6fb2621cec6fa39ee71b125110b54bcf68e705
-  data.tar.gz: 7f8c239afea971c624d327e784e70c2e7a39236ef55a8b25ae63362295e09762f1c442273ff6a22aedd9e79b4d40fa0162ef0a0f167e0bc4da5fea3dbd3457e5
+  metadata.gz: 0e756c2f2458bae54cb18b6e3b26479af8d403b4104d1e216f41b249d9df6b612ff9520d6985c0aabc9b351bf31698cf2d441198f77462541df0fa54c580e6b5
+  data.tar.gz: e5d020282213164adad69fc2afdeefebdfcb972ecec4a726fcb0bc7b36b8fbaaf0d31de47c4c0f02f876c763dec6412cf0321fa37f56d4c33c1f421e23d637c8

data/app/assets/components/core-a11y-keys/core-a11y-keys.html

@@ -0,0 +1,335 @@
+<!--
+    @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-a11y-keys` provides a normalized interface for processing keyboard commands that pertain to [WAI-ARIA best
+practices](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding). The element takes care of browser differences
+with respect to Keyboard events and uses an expressive syntax to filter key presses.
+
+Use the `keys` attribute to express what combination of keys will trigger the event to fire.
+
+Use the `target` attribute to set up event handlers on a specific node.
+The `keys-pressed` event will fire when one of the key combinations set with the `keys` attribute is pressed.
+
+Example:
+
+This element will call `arrowHandler` on all arrow keys:
+
+    <core-a11y-keys target="{{}}" keys="up down left right" on-keys-pressed="{{arrowHandler}}"></core-a11y-keys>
+
+Keys Syntax:
+
+The `keys` attribute can accepts a space seprated, `+` concatenated set of modifier keys and some common keyboard keys.
+
+The common keys are `a-z`, `0-9` (top row and number pad), `*` (shift 8 and number pad), `F1-F12`, `Page Up`, `Page
+Down`, `Left Arrow`, `Right Arrow`, `Down Arrow`, `Up Arrow`, `Home`, `End`, `Escape`, `Space`, `Tab`, and `Enter` keys.
+
+The modifier keys are `Shift`, `Control`, and `Alt`.
+
+All keys are expected to be lowercase and shortened:
+`Left Arrow` is `left`, `Page Down` is `pagedown`, `Control` is `ctrl`, `F1` is `f1`, `Escape` is `esc` etc.
+
+Keys Syntax Example:
+
+Given the `keys` attribute value "ctrl+shift+f7 up pagedown esc space alt+m", the `<core-a11y-keys>` element will send
+the `keys-pressed` event if any of the follow key combos are pressed: Control and Shift and F7 keys, Up Arrow key, Page
+Down key, Escape key, Space key, Alt and M key.
+
+Slider Example:
+
+The following is an example of the set of keys that fulfil the WAI-ARIA "slider" role [best
+practices](http://www.w3.org/TR/wai-aria-practices/#slider):
+
+    <core-a11y-keys target="{{}}" keys="left pagedown down" on-keys-pressed="{{decrement}}"></core-a11y-keys>
+    <core-a11y-keys target="{{}}" keys="right pageup up" on-keys-pressed="{{increment}}"></core-a11y-keys>
+    <core-a11y-keys target="{{}}" keys="home" on-keys-pressed="{{setMin}}"></core-a11y-keys>
+    <core-a11y-keys target="{{}}" keys="end" on-keys-pressed="{{setMax}}"></core-a11y-keys>
+
+The `increment` function will move the slider a set amount toward the maximum value.
+The `decrement` function will move the slider a set amount toward the minimum value.
+The `setMin` function will move the slider to the minimum value.
+The `setMax` function will move the slider to the maximum value.
+
+Keys Syntax Grammar:
+
+[EBNF](http://en.wikipedia.org/wiki/Extended_Backus%E2%80%93Naur_Form) Grammar of the `keys` attribute.
+
+    modifier = "shift" | "ctrl" | "alt";
+    ascii = ? /[a-z0-9]/ ? ;
+    fnkey = ? f1 through f12 ? ;
+    arrow = "up" | "down" | "left" | "right" ;
+    key = "tab" | "esc" | "space" | "*" | "pageup" | "pagedown" | "home" | "end" | arrow | ascii | fnkey ;
+    keycombo = { modifier, "+" }, key ;
+    keys = keycombo, { " ", keycombo } ;
+
+@group Core Elements
+@element core-a11y-keys
+@homepage github.io
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<style shim-shadowdom>
+  html /deep/ core-a11y-keys {
+    display: none;
+  }
+</style>
+
+<polymer-element name="core-a11y-keys">
+<script>
+  (function() {
+    /*
+     * Chrome uses an older version of DOM Level 3 Keyboard Events
+     *
+     * Most keys are labeled as text, but some are Unicode codepoints.
+     * Values taken from: http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/keyset.html#KeySet-Set
+     */
+    var KEY_IDENTIFIER = {
+      'U+0009': 'tab',
+      'U+001B': 'esc',
+      'U+0020': 'space',
+      'U+002A': '*',
+      'U+0030': '0',
+      'U+0031': '1',
+      'U+0032': '2',
+      'U+0033': '3',
+      'U+0034': '4',
+      'U+0035': '5',
+      'U+0036': '6',
+      'U+0037': '7',
+      'U+0038': '8',
+      'U+0039': '9',
+      'U+0041': 'a',
+      'U+0042': 'b',
+      'U+0043': 'c',
+      'U+0044': 'd',
+      'U+0045': 'e',
+      'U+0046': 'f',
+      'U+0047': 'g',
+      'U+0048': 'h',
+      'U+0049': 'i',
+      'U+004A': 'j',
+      'U+004B': 'k',
+      'U+004C': 'l',
+      'U+004D': 'm',
+      'U+004E': 'n',
+      'U+004F': 'o',
+      'U+0050': 'p',
+      'U+0051': 'q',
+      'U+0052': 'r',
+      'U+0053': 's',
+      'U+0054': 't',
+      'U+0055': 'u',
+      'U+0056': 'v',
+      'U+0057': 'w',
+      'U+0058': 'x',
+      'U+0059': 'y',
+      'U+005A': 'z',
+      'U+007F': 'del'
+    };
+
+    /*
+     * Special table for KeyboardEvent.keyCode.
+     * KeyboardEvent.keyIdentifier is better, and KeyBoardEvent.key is even better than that
+     *
+     * Values from: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.keyCode#Value_of_keyCode
+     */
+    var KEY_CODE = {
+      9: 'tab',
+      13: 'enter',
+      27: 'esc',
+      33: 'pageup',
+      34: 'pagedown',
+      35: 'end',
+      36: 'home',
+      32: 'space',
+      37: 'left',
+      38: 'up',
+      39: 'right',
+      40: 'down',
+      46: 'del',
+      106: '*'
+    };
+
+    /*
+     * KeyboardEvent.key is mostly represented by printable character made by the keyboard, with unprintable keys labeled
+     * nicely.
+     *
+     * However, on OS X, Alt+char can make a Unicode character that follows an Apple-specific mapping. In this case, we
+     * fall back to .keyCode.
+     */
+    var KEY_CHAR = /[a-z0-9*]/;
+
+    function transformKey(key) {
+      var validKey = '';
+      if (key) {
+        var lKey = key.toLowerCase();
+        if (lKey.length == 1) {
+          if (KEY_CHAR.test(lKey)) {
+            validKey = lKey;
+          }
+        } else if (lKey == 'multiply') {
+          // numpad '*' can map to Multiply on IE/Windows
+          validKey = '*';
+        } else {
+          validKey = lKey;
+        }
+      }
+      return validKey;
+    }
+
+    var IDENT_CHAR = /U\+/;
+    function transformKeyIdentifier(keyIdent) {
+      var validKey = '';
+      if (keyIdent) {
+        if (IDENT_CHAR.test(keyIdent)) {
+          validKey = KEY_IDENTIFIER[keyIdent];
+        } else {
+          validKey = keyIdent.toLowerCase();
+        }
+      }
+      return validKey;
+    }
+
+    function transformKeyCode(keyCode) {
+      var validKey = '';
+      if (Number(keyCode)) {
+        if (keyCode >= 65 && keyCode <= 90) {
+          // ascii a-z
+          // lowercase is 32 offset from uppercase
+          validKey = String.fromCharCode(32 + keyCode);
+        } else if (keyCode >= 112 && keyCode <= 123) {
+          // function keys f1-f12
+          validKey = 'f' + (keyCode - 112);
+        } else if (keyCode >= 48 && keyCode <= 57) {
+          // top 0-9 keys
+          validKey = String(48 - keyCode);
+        } else if (keyCode >= 96 && keyCode <= 105) {
+          // num pad 0-9
+          validKey = String(96 - keyCode);
+        } else {
+          validKey = KEY_CODE[keyCode];
+        }
+      }
+      return validKey;
+    }
+
+    function keyboardEventToKey(ev) {
+      // fall back from .key, to .keyIdentifier, and then to .keyCode
+      var normalizedKey = transformKey(ev.key) || transformKeyIdentifier(ev.keyIdentifier) || transformKeyCode(ev.keyCode) || '';
+      return {
+        shift: ev.shiftKey,
+        ctrl: ev.ctrlKey,
+        meta: ev.metaKey,
+        alt: ev.altKey,
+        key: normalizedKey
+      };
+    }
+
+    /*
+     * Input: ctrl+shift+f7 => {ctrl: true, shift: true, key: 'f7'}
+     * ctrl/space => {ctrl: true} || {key: space}
+     */
+    function stringToKey(keyCombo) {
+      var keys = keyCombo.split('+');
+      var keyObj = Object.create(null);
+      keys.forEach(function(key) {
+        if (key == 'shift') {
+          keyObj.shift = true;
+        } else if (key == 'ctrl') {
+          keyObj.ctrl = true;
+        } else if (key == 'alt') {
+          keyObj.alt = true;
+        } else {
+          keyObj.key = key;
+        }
+      });
+      return keyObj;
+    }
+
+    function keyMatches(a, b) {
+      return Boolean(a.alt) == Boolean(b.alt) && Boolean(a.ctrl) == Boolean(b.ctrl) && Boolean(a.shift) == Boolean(b.shift) && a.key === b.key;
+    }
+
+    /**
+     * Fired when a keycombo in `keys` is pressed.
+     *
+     * @event keys-pressed
+     */
+    function processKeys(ev) {
+      var current = keyboardEventToKey(ev);
+      for (var i = 0, dk; i < this._desiredKeys.length; i++) {
+        dk = this._desiredKeys[i];
+        if (keyMatches(dk, current)) {
+          ev.preventDefault();
+          ev.stopPropagation();
+          this.fire('keys-pressed', current, this, false);
+          break;
+        }
+      }
+    }
+
+    function listen(node, handler) {
+      if (node && node.addEventListener) {
+        node.addEventListener('keydown', handler);
+      }
+    }
+
+    function unlisten(node, handler) {
+      if (node && node.removeEventListener) {
+        node.removeEventListener('keydown', handler);
+      }
+    }
+
+    Polymer('core-a11y-keys', {
+      created: function() {
+        this._keyHandler = processKeys.bind(this);
+      },
+      attached: function() {
+        if (!this.target) {
+          this.target = this.parentNode;
+        }
+        listen(this.target, this._keyHandler);
+      },
+      detached: function() {
+        unlisten(this.target, this._keyHandler);
+      },
+      publish: {
+        /**
+         * The set of key combinations to listen for.
+         *
+         * @attribute keys
+         * @type string (keys syntax)
+         * @default ''
+         */
+        keys: '',
+        /**
+         * The node that will fire keyboard events.
+         * Default to this element's parentNode unless one is assigned
+         *
+         * @attribute target
+         * @type Node
+         * @default this.parentNode
+         */
+        target: null
+      },
+      keysChanged: function() {
+        // * can have multiple mappings: shift+8, * on numpad or Multiply on numpad
+        var normalized = this.keys.replace('*', '* shift+*');
+        this._desiredKeys = normalized.toLowerCase().split(' ').map(stringToKey);
+      },
+      targetChanged: function(oldTarget) {
+        unlisten(oldTarget, this._keyHandler);
+        listen(this.target, this._keyHandler);
+      }
+    });
+  })();
+</script>
+</polymer-element>

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

@@ -62,7 +62,7 @@ Elements that are targets to a `core-animation` are given the `core-animation-ta
 @status beta
 @homepage github.io
 -->
-<polymer-element name="core-animation" constructor="CoreAnimation" attributes="target keyframes sample composite duration fill easing iterationStart iterationCount delay direction autoplay targetSelector">
+<polymer-element name="core-animation" constructor="CoreAnimation" attributes="target keyframes customEffect composite duration fill easing iterationStart iterationCount delay direction autoplay targetSelector">
   <script>
     (function() {
 
@@ -80,7 +80,7 @@ Elements that are targets to a `core-animation` are given the `core-animation-ta
        /**
         *
         * Fired when the web animation object changes.
-        * 
+        *
         * @event core-animation-change
         */
 
@@ -143,11 +143,11 @@ Elements that are targets to a `core-animation` are given the `core-animation-ta
 
           /**
            * Controls the effect the animation has on the target when it's not playing.
-           * The possible values are "none", "forwards", "backwards", "both" or "auto". 
+           * The possible values are "none", "forwards", "backwards", "both" or "auto".
            *
            * "none" means the animation has no effect when it's not playing.
            *
-           * "forward" applies the value at the end of the animation after it's finished.
+           * "forwards" applies the value at the end of the animation after it's finished.
            *
            * "backwards" applies the value at the start of the animation to the target
            * before it starts playing and has no effect when the animation finishes.
@@ -429,7 +429,7 @@ Elements that are targets to a `core-animation` are given the `core-animation-ta
             frames = this.keyframes;
           } else if (!this.customEffect) {
             var children = this.querySelectorAll('core-animation-keyframe');
-            if (children.length === 0) {
+            if (children.length === 0 && this.shadowRoot) {
               children = this.shadowRoot.querySelectorAll('core-animation-keyframe');
             }
             Array.prototype.forEach.call(children, function(c) {
@@ -439,7 +439,8 @@ Elements that are targets to a `core-animation` are given the `core-animation-ta
           if (this.customEffect) {
             effect = this.customEffect;
           } else {
-            effect = new KeyframeEffect(frames, this.composite);
+            // effect = new KeyframeEffect(frames, this.composite);
+            effect = frames;
           }
           return effect;
         },

data/app/assets/components/core-animation/web-animations.html

@@ -7,4 +7,4 @@
     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
 -->
-<script src="../web-animations-js/web-animations.js"></script>
+<link rel="import" href="../web-animations-next/web-animations.html">

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

@@ -9,12 +9,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <!--
 `core-collapse` creates a collapsible block of content.  By default, the content
-will be collapsed.  Use `opened` to show/hide the content.
+will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
 
     <button on-click="{{toggle}}">toggle collapse</button>
     
     <core-collapse id="collapse">
-      ...
+      Content goes here...
     </core-collapse>
     
     ...
@@ -22,6 +22,23 @@ will be collapsed.  Use `opened` to show/hide the content.
     toggle: function() {
       this.$.collapse.toggle();
     }
+    
+`core-collapse` adjusts the height/width of the collapsible element to show/hide
+the content.  So avoid putting padding/margin/border on the collapsible directly,
+and instead put a div inside and style that.
+
+    <style>
+      .collapse-content {
+        padding: 15px;
+        border: 1px solid #dedede;
+      }
+    </style>
+
+    <core-collapse>
+      <div class="collapse-content">
+        Content goes here...
+      </div>
+    </core-collapse>
 
 @group Polymer Core Elements
 @element core-collapse
@@ -31,7 +48,7 @@ will be collapsed.  Use `opened` to show/hide the content.
 
 <link rel="stylesheet" href="core-collapse.css" shim-shadowdom>
 
-<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize">
+<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow">
 <template>
 
   <content></content>
@@ -55,7 +72,8 @@ will be collapsed.  Use `opened` to show/hide the content.
      */
 
     /**
-     * The target element.
+     * The target element that will be opened when the `core-collapse` is 
+     * opened. If unspecified, the `core-collapse` itself is the target.
      *
      * @attribute target
      * @type object
@@ -101,6 +119,18 @@ will be collapsed.  Use `opened` to show/hide the content.
      * @default false
      */
     fixedSize: false,
+    
+    /**
+     * By default the collapsible element is set to overflow hidden. This helps
+     * avoid element bleeding outside the region and provides consistent overflow
+     * style across opened and closed states. Set this property to true to allow 
+     * the collapsible element to overflow when it's opened.
+     *
+     * @attribute allowOverflow
+     * @type boolean
+     * @default false
+     */
+    allowOverflow: false,
 
     created: function() {
       this.transitionEndListener = this.transitionEnd.bind(this);
@@ -131,7 +161,7 @@ will be collapsed.  Use `opened` to show/hide the content.
       }
       this.isTargetReady = !!this.target;
       this.classList.toggle('core-collapse-closed', this.target !== this);
-      this.target.style.overflow = 'hidden';
+      this.toggleOpenedStyle(false);
       this.horizontalChanged();
       this.addListeners(this.target);
       // set core-collapse-closed class initially to hide the target
@@ -178,6 +208,7 @@ will be collapsed.  Use `opened` to show/hide the content.
         this.updateSize('auto', null);
       }
       this.setTransitionDuration(null);
+      this.toggleOpenedStyle(this.opened);
       this.toggleClosedClass(!this.opened);
       this.asyncFire('core-resize', null, this.target);
     },
@@ -186,6 +217,10 @@ will be collapsed.  Use `opened` to show/hide the content.
       this.hasClosedClass = closed;
       this.target.classList.toggle('core-collapse-closed', closed);
     },
+    
+    toggleOpenedStyle: function(opened) {
+      this.target.style.overflow = this.allowOverflow && opened ? '' : 'hidden';
+    },
 
     updateSize: function(size, duration, forceEnd) {
       this.setTransitionDuration(duration);
@@ -241,6 +276,7 @@ will be collapsed.  Use `opened` to show/hide the content.
     },
 
     hide: function() {
+      this.toggleOpenedStyle(false);
       // don't need to do anything if it's already hidden
       if (this.hasClosedClass && !this.fixedSize) {
         return;