polymer-paper-rails 0.2.5 → 0.2.6

data/app/assets/components/core-scroll-header-panel/core-scroll-header-panel.html

@@ -46,10 +46,12 @@ that represents a header by adding a `core-header` class to it.
 
 @group Polymer Core Elements
 @element core-scroll-header-panel
+@mixins Polymer.CoreResizable https://github.com/polymer/core-resizable
 @homepage github.io
 -->
 
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../core-resizable/core-resizable.html">
 
 <polymer-element name="core-scroll-header-panel">
 <template>
@@ -77,7 +79,7 @@ that represents a header by adding a `core-header` class to it.
 <script>
 (function() {
 
-  Polymer('core-scroll-header-panel', {
+  Polymer(Polymer.mixin({
     
     /**
      * Fired when the content has been scrolled.
@@ -184,7 +186,15 @@ that represents a header by adding a `core-header` class to it.
     observe: {
       'headerMargin fixed': 'setup'
     },
-    
+
+    eventDelegates: {
+      'core-resize': 'measureHeaderHeight'
+    },
+
+    attached: function() {
+      this.resizableAttachedHandler();
+    },
+
     ready: function() {
       this._scrollHandler = this.scroll.bind(this);
       this.scroller.addEventListener('scroll', this._scrollHandler);
@@ -192,6 +202,7 @@ that represents a header by adding a `core-header` class to it.
     
     detached: function() {
       this.scroller.removeEventListener('scroll', this._scrollHandler);
+      this.resizableDetachedHandler();
     },
     
     domReady: function() {
@@ -330,7 +341,7 @@ that represents a header by adding a `core-header` class to it.
       }
     }
 
-  });
+  }, Polymer.CoreResizable));
   
   //determine proper transform mechanizm
   if (document.documentElement.style.transform !== undefined) {

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

@@ -12,7 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 The `<core-selection>` element is used to manage selection state. It has no
 visual appearance and is typically used in conjunction with another element.
 For example, [core-selector](#core-selector)
-use a `<core-selection>` to manage selection.
+uses a `<core-selection>` to manage selection.
 
 To mark an item as selected, call the `select(item)` method on 
 `<core-selection>`. The item itself is an argument to this method.

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

@@ -130,7 +130,7 @@ Fired when an item element is tapped.
 
       /**
        * Specifies the CSS class to be used to add to the selected element.
-       * 
+       *
        * @attribute selectedClass
        * @type string
        * @default 'core-selected'
@@ -162,7 +162,7 @@ Fired when an item element is tapped.
        * an array of selected elements.
        * Note that you should not use this to set the selection. Instead use
        * `selected`.
-       * 
+       *
        * @attribute selectedItem
        * @type Object
        * @default null
@@ -172,9 +172,9 @@ Fired when an item element is tapped.
       /**
        * In single selection, this returns the model associated with the
        * selected element.
-       * Note that you should not use this to set the selection. Instead use 
+       * Note that you should not use this to set the selection. Instead use
        * `selected`.
-       * 
+       *
        * @attribute selectedModel
        * @type Object
        * @default null
@@ -193,7 +193,7 @@ Fired when an item element is tapped.
       selectedIndex: -1,
 
       /**
-       * Nodes with local name that are in the list will not be included 
+       * Nodes with local name that are in the list will not be included
        * in the selection items.  In the following example, `items` returns four
        * `core-item`'s and doesn't include `h3` and `hr`.
        *
@@ -213,9 +213,9 @@ Fired when an item element is tapped.
       excludedLocalNames: '',
 
       /**
-       * The target element that contains items.  If this is not set 
+       * The target element that contains items.  If this is not set
        * core-selector is the container.
-       * 
+       *
        * @attribute target
        * @type Object
        * @default null
@@ -223,7 +223,7 @@ Fired when an item element is tapped.
       target: null,
 
       /**
-       * This can be used to query nodes from the target node to be used for 
+       * This can be used to query nodes from the target node to be used for
        * selection items.  Note this only works if `target` is set
        * and is not `core-selector` itself.
        *
@@ -236,7 +236,7 @@ Fired when an item element is tapped.
        *       <label><input type="radio" name="color" value="blue"> Blue</label> <br>
        *       <p>color = {{color}}</p>
        *     </form>
-       * 
+       *
        * @attribute itemsSelector
        * @type string
        * @default ''
@@ -264,7 +264,7 @@ Fired when an item element is tapped.
       notap: false,
 
       defaultExcludedLocalNames: 'template',
-      
+
       observe: {
         'selected multi': 'selectedChanged'
       },
@@ -288,8 +288,8 @@ Fired when an item element is tapped.
         if (!this.target) {
           return [];
         }
-        var nodes = this.target !== this ? (this.itemsSelector ? 
-            this.target.querySelectorAll(this.itemsSelector) : 
+        var nodes = this.target !== this ? (this.itemsSelector ?
+            this.target.querySelectorAll(this.itemsSelector) :
                 this.target.children) : this.$.items.getDistributedNodes();
         return Array.prototype.filter.call(nodes, this.itemFilter);
       },
@@ -332,7 +332,7 @@ Fired when an item element is tapped.
 
       /**
        * Returns the selected item(s). If the `multi` property is true,
-       * this will return an array, otherwise it will return 
+       * this will return an array, otherwise it will return
        * the selected item or undefined if there is no selection.
        */
       get selection() {
@@ -348,7 +348,7 @@ Fired when an item element is tapped.
           this.updateSelected();
         }
       },
-      
+
       updateSelected: function() {
         this.validateSelected();
         if (this.multi) {
@@ -363,7 +363,7 @@ Fired when an item element is tapped.
 
       validateSelected: function() {
         // convert to an array for multi-selection
-        if (this.multi && !Array.isArray(this.selected) && 
+        if (this.multi && !Array.isArray(this.selected) &&
             this.selected != null) {
           this.selected = [this.selected];
         // use the first selected in the array for single-selection
@@ -373,7 +373,7 @@ Fired when an item element is tapped.
           this.selected = s;
         }
       },
-      
+
       processSplices: function(splices) {
         for (var i = 0, splice; splice = splices[i]; i++) {
           for (var j = 0; j < splice.removed.length; j++) {
@@ -398,7 +398,7 @@ Fired when an item element is tapped.
         var item = this.valueToItem(value);
         this.$.selection.select(item);
       },
-      
+
       setValueSelected: function(value, isSelected) {
         var item = this.valueToItem(value);
         if (isSelected ^ this.$.selection.isSelected(item)) {
@@ -417,12 +417,12 @@ Fired when an item element is tapped.
         } else {
           this.selectedModel = null;
         }
-        this.selectedIndex = this.selectedItem ? 
+        this.selectedIndex = this.selectedItem ?
             parseInt(this.valueToIndex(this.selected)) : -1;
       },
-      
+
       valueToItem: function(value) {
-        return (value === null || value === undefined) ? 
+        return (value === null || value === undefined) ?
             null : this.items[this.valueToIndex(value)];
       },
 
@@ -506,7 +506,7 @@ Fired when an item element is tapped.
           target = target.parentNode;
         }
       },
-      
+
       selectIndex: function(index) {
         var item = this.items[index];
         if (item) {
@@ -514,7 +514,7 @@ Fired when an item element is tapped.
           return item;
         }
       },
-      
+
       /**
        * Selects the previous item. This should be used in single selection only.
        *
@@ -524,11 +524,11 @@ Fired when an item element is tapped.
        * @returns the previous item or undefined if there is none
        */
       selectPrevious: function(wrapped) {
-        var i = wrapped && !this.selectedIndex ? 
+        var i = wrapped && !this.selectedIndex ?
             this.items.length - 1 : this.selectedIndex - 1;
         return this.selectIndex(i);
       },
-      
+
       /**
        * Selects the next item.  This should be used in single selection only.
        *
@@ -538,11 +538,11 @@ Fired when an item element is tapped.
        * @returns the next item or undefined if there is none
        */
       selectNext: function(wrapped) {
-        var i = wrapped && this.selectedIndex >= this.items.length - 1 ? 
+        var i = wrapped && this.selectedIndex >= this.items.length - 1 ?
             0 : this.selectedIndex + 1;
         return this.selectIndex(i);
       }
-      
+
     });
   </script>
 </polymer-element>

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

@@ -143,7 +143,7 @@ Polymer('core-style', {
    * inside another.
    *
    * @attribute list
-   * @type object (readonly)
+   * @type object
    * @default {map of all `core-style` producers}
    */
   list: CoreStyle.list,

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

@@ -138,7 +138,7 @@ on itself or any of its ancestors.
       if (old) {
         bar.removeAttribute(this.toLayoutAttrName(old));
       }
-      if (this.justify) {
+      if (justify) {
         bar.setAttribute(this.toLayoutAttrName(justify), '');
       }
     },

data/app/assets/components/paper-button/paper-button-base.html

@@ -13,12 +13,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 `paper-button-base` is the base class for button-like elements with ripple and optional shadow.
 
 @element paper-button-base
-@mixins Polymer.CoreFocusable
+@mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable
 @status unstable
 -->
 
 <link href="../polymer/polymer.html" rel="import">
 <link href="../core-focusable/core-focusable.html" rel="import">
+<link href="../paper-ripple/paper-ripple.html" rel="import">
 
 <polymer-element name="paper-button-base" tabindex="0">
 
@@ -29,22 +30,48 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     var p = {
 
       eventDelegates: {
-        down: 'downAction'
+        down: 'downAction',
+        up: 'upAction'
+      },
+
+      toggleBackground: function() {
+        if (this.active) {
+
+          if (!this.$.bg) {
+            var bg = document.createElement('div');
+            bg.setAttribute('id', 'bg');
+            bg.setAttribute('fit', '');
+            bg.style.opacity = 0.25;
+            this.$.bg = bg;
+            this.shadowRoot.insertBefore(bg, this.shadowRoot.firstChild);
+          }
+          this.$.bg.style.backgroundColor = getComputedStyle(this).color;
+
+        } else {
+
+          if (this.$.bg) {
+            this.$.bg.style.backgroundColor = '';
+          }
+        }
       },
 
       activeChanged: function() {
         this.super();
 
-        if (this.$.ripple) {
-          if (this.active) {
-            // FIXME: remove when paper-ripple can have a default 'down' state.
-            if (!this.lastEvent) {
-              var rect = this.getBoundingClientRect();
-              this.lastEvent = {
-                x: rect.left + rect.width / 2,
-                y: rect.top + rect.height / 2
-              }
-            }
+        if (this.toggle && (!this.lastEvent || this.matches(':host-context([noink])'))) {
+          this.toggleBackground();
+        }
+      },
+
+      pressedChanged: function() {
+        this.super();
+
+        if (!this.lastEvent) {
+          return;
+        }
+
+        if (this.$.ripple && !this.hasAttribute('noink')) {
+          if (this.pressed) {
             this.$.ripple.downAction(this.lastEvent);
           } else {
             this.$.ripple.upAction();
@@ -54,6 +81,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         this.adjustZ();
       },
 
+      focusedChanged: function() {
+        this.adjustZ();
+      },
+
       disabledChanged: function() {
         this._disabledChanged();
         this.adjustZ();
@@ -79,6 +110,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           this.$.shadow.setZ(2);
         } else if (this.disabled) {
           this.$.shadow.setZ(0);
+        } else if (this.focused) {
+          this.$.shadow.setZ(3);
         } else {
           this.$.shadow.setZ(1);
         }
@@ -107,6 +140,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           // No need to forward the event to the ripple because the ripple
           // is triggered in activeChanged
         }
+      },
+
+      upAction: function() {
+        this._upAction();
+
+        if (this.toggle) {
+          this.toggleBackground();
+          if (this.$.ripple) {
+            this.$.ripple.cancel();
+          }
+        }
       }
 
     };

data/app/assets/components/paper-button/paper-button.html

@@ -30,8 +30,7 @@ create a button with an icon and some text:
       custom button content
     </paper-button>
 
-Styling
--------
+## Styling
 
 Style the button with CSS as you would a normal DOM element.
 
@@ -57,8 +56,8 @@ The opacity of the ripple is not customizable via CSS.
 -->
 
 <link href="../polymer/polymer.html" rel="import">
-<link href="../paper-ripple/paper-ripple.html" rel="import">
 <link href="../paper-shadow/paper-shadow.html" rel="import">
+<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
 
 <link href="paper-button-base.html" rel="import">
 
@@ -100,7 +99,7 @@ role="button">
         text-transform: inherit;
       }
 
-      #shadow {
+      #bg, #shadow {
         border-radius: inherit;
       }
 
@@ -117,6 +116,7 @@ role="button">
       ::content > a {
         height: 100%;
         padding: 0.7em 0.57em;
+        margin: -0.7em -0.57em;
         /* flex */
         -ms-flex: 1 1 0.000000001px;
         -webkit-flex: 1;
@@ -134,9 +134,10 @@ role="button">
     <!-- this div is needed to position the ripple behind text content -->
     <div class="button-content" relative layout horizontal center-center>
       <content></content>
-      {{label}}
     </div>
 
+    <core-a11y-keys keys="space enter" target="{{}}" on-keys-pressed="{{_activate}}"></core-a11y-keys>
+
   </template>
 
   <script>
@@ -173,6 +174,22 @@ role="button">
          */
         fill: true
 
+      },
+
+      _activate: function() {
+        this.click();
+        this.fire('tap');
+        if (!this.pressed) {
+          var bcr = this.getBoundingClientRect();
+          var x = bcr.left + (bcr.width / 2);
+          var y = bcr.top + (bcr.height / 2);
+          this.downAction({x: x, y: y});
+          var fn = function fn() {
+            this.upAction();
+            this.removeEventListener('keyup', fn);
+          }.bind(this);
+          this.addEventListener('keyup', fn);
+        }
       }
 
     });