polymer-core-rails 0.2.5 → 0.2.6

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

@@ -20,6 +20,14 @@ may be reused with a new model at any time.  Particularly, any state that
 may change as the result of a user interaction with the list item must be
 bound to the model to avoid view state inconsistency.
 
+IMPORTANT: `core-list` must ether be explicitly sized, or delegate scrolling to
+an explicitly sized parent.  By "explicitly sized", we mean it either has an
+explicit CSS `height` property set via a class or inline style, or else is sized
+by other layout means (e.g. `flex` or `fit`).  Alternatively, `core-list` can
+delegate scrolling to a scrollable element that contains the list by setting the
+`scrollTarget` property, and the same explicit sizing requiremets will apply
+to that element.
+
 ### Template model
 
 List item templates should bind to template models of the following structure:
@@ -162,11 +170,13 @@ the following abstract API:
 
 @group Polymer Core Elements
 @element core-list
+@mixins Polymer.CoreResizable https://github.com/polymer/core-resizable
 -->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../core-selection/core-selection.html">
+<link rel="import" href="../core-resizable/core-resizable.html">
 
-<polymer-element name="core-list" on-tap="{{tapHandler}}" tabindex="-1">
+<polymer-element name="core-list" tabindex="-1">
 <template>
   <core-selection id="selection" multi="{{multi}}" on-core-select="{{selectedHandler}}"></core-selection>
   <link rel="stylesheet" href="core-list.css">
@@ -178,7 +188,7 @@ the following abstract API:
   var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
   var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
 
-  Polymer('core-list', {
+  Polymer(Polymer.mixin({
     
     publish: {
       /**
@@ -328,11 +338,16 @@ the following abstract API:
 
     },
 
+    eventDelegates: {
+      tap: 'tapHandler',
+      'core-resize': 'updateSize'
+    },
+
     // Local cache of scrollTop
     _scrollTop: 0,
     
     observe: {
-      'data grid width template scrollTarget': 'initialize',
+      'isAttached data grid width template scrollTarget': 'initialize',
       'multi selectionEnabled': '_resetSelection'
     },
 
@@ -357,33 +372,36 @@ the following abstract API:
       this._nestedGroups = false;
       this._groupStart = 0;
       this._groupStartIndex = 0;
-
-      this._boundResizeHandler = this.updateSize.bind(this);
-      window.addEventListener('resize', this._boundResizeHandler);
     },
 
     attached: function() {
+      this.isAttached = true;
       this.template = this.querySelector('template');
       if (!this.template.bindingDelegate) {
         this.template.bindingDelegate = this.element.syntax;
       }
+      this.resizableAttachedHandler();
     },
 
     detached: function() {
-      this.removeEventListener(this._boundScrollHandler);
-      this.removeEventListener(this._boundResizeHandler);
+      this.isAttached = false;
+      if (this._target) {
+        this._target.removeEventListener('scroll', this._boundScrollHandler);
+      }
+      this.resizableDetachedHandler();
     },
 
     /**
-     * To be called by the user when the list is resized or shown
-     * after being hidden.  Note, `core-list` calls this automatically
-     * when the window is resized.
+     * To be called by the user when the list is manually resized
+     * or shown after being hidden.
      *
      * @method updateSize
      */
     updateSize: function() {
-      this._resetIndex(this._getFirstVisibleIndex());
-      this.initializeData();
+      if (!this._positionPending && !this._needItemInit) {
+        this._resetIndex(this._getFirstVisibleIndex() || 0);
+        this.initialize();
+      }
     },
 
     _resetSelection: function() {
@@ -436,7 +454,7 @@ the following abstract API:
       }
       // Adjust offset/scroll position based on total number of items changed
       if (this._virtualStart < this._physicalCount) {
-        this._resetIndex(this._getFirstVisibleIndex());
+        this._resetIndex(this._getFirstVisibleIndex() || 0);
       } else {
         totalDelta = Math.max((totalDelta / this._rowFactor) * this._physicalAverage, -this._physicalOffset);
         this._physicalOffset += totalDelta;
@@ -456,13 +474,12 @@ the following abstract API:
 
     groupsChanged: function() {
       if (!!this.groups != this._grouped) {
-        this.initialize();
-        this._resetIndex(this._getFirstVisibleIndex() || this._virtualStart);
+        this.updateSize();
       }
     },
 
     initialize: function() {
-      if (!this.template) {
+      if (!this.template || !this.isAttached) {
         return;
       }
 
@@ -530,6 +547,7 @@ the following abstract API:
       if (getComputedStyle(this._target).position == 'static') {
         this._target.style.position = 'relative';
       }
+      this._target.style.boxSizing = this._target.style.mozBoxSizing = 'border-box';
       this.style.overflowY = (target == this) ? 'auto' : null;
     },
 
@@ -598,8 +616,10 @@ the following abstract API:
         if (!this.width) {
           throw 'Grid requires the `width` property to be set';
         }
-        this._rowFactor = Math.floor(this._target.offsetWidth / this.width) || 1;
-        this._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width)) / 2;
+        var cs = getComputedStyle(this._target);
+        var padding = parseInt(cs.paddingLeft || 0) + parseInt(cs.paddingRight || 0);
+        this._rowFactor = Math.floor((this._target.offsetWidth - padding) / this.width) || 1;
+        this._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width) - padding) / 2;
       } else {
         this._rowFactor = 1;
         this._rowMargin = 0;
@@ -647,7 +667,11 @@ the following abstract API:
       
       // Add physical items up to a max based on data length, viewport size, and extra item overhang
       var currentCount = this._physicalCount || 0;
-      this._physicalCount = Math.min(Math.ceil(this._target.offsetHeight / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount);
+      var height = this._target.offsetHeight;
+      if (!height && this._target.offsetParent) {
+        console.warn('core-list must either be sized or be inside an overflow:auto div that is sized');
+      }
+      this._physicalCount = Math.min(Math.ceil(height / (this._physicalAverage || this.height)) * this.runwayFactor * this._rowFactor, this._virtualCount);
       this._physicalCount = Math.max(currentCount, this._physicalCount);
       this._physicalData = this._physicalData || new Array(this._physicalCount);
       var needItemInit = false;
@@ -779,10 +803,9 @@ the following abstract API:
 
       // Measure content in scroller before virtualized items
       if (this._target != this) {
-        el1 = this.previousElementSibling;
-        this._aboveSize = el1 ? el1.offsetTop + el1.offsetHeight : 0;
+        this._aboveSize = this.offsetTop;
       } else {
-        this._aboveSize = 0;
+        this._aboveSize = parseInt(getComputedStyle(this._target).paddingTop);
       }
 
       // Calculate average height
@@ -1232,7 +1255,7 @@ the following abstract API:
         var virtualIndex = this._virtualStart + i;
         var physicalIndex = this._virtualToPhysical(virtualIndex);
         var item = this._physicalItems[physicalIndex];
-        if (item._translateY >= this._scrollTop) {
+        if (!item.hidden && item._translateY >= this._scrollTop - this._aboveSize) {
           return virtualIndex;
         }
       }
@@ -1242,8 +1265,8 @@ the following abstract API:
       index = Math.min(index, this._virtualCount-1);
       index = Math.max(index, 0);
       this.changeStartIndex(index - this._virtualStart);
-      this._scrollTop = this.setScrollTop((index / this._rowFactor) * this._physicalAverage);
-      this._physicalOffset = this._scrollTop;
+      this._scrollTop = this.setScrollTop(this._aboveSize + (index / this._rowFactor) * this._physicalAverage);
+      this._physicalOffset = this._scrollTop - this._aboveSize;
       this._dir = 0;
     },
 
@@ -1286,7 +1309,7 @@ the following abstract API:
       this.refresh();
     }
 
-  });
+  }, Polymer.CoreResizable));
 
 })();
 </script>

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

@@ -72,16 +72,15 @@ triggered only when value is a different instance.
      */
     autoSaveDisabled: false,
     
-    attached: function() {
-      // wait for bindings are all setup
-      this.async('load');
-    },
-    
     valueChanged: function() {
       if (this.loaded && !this.autoSaveDisabled) {
         this.save();
       }
     },
+
+    nameChanged: function() {
+      this.load();
+    },
     
     load: function() {
       var v = localStorage.getItem(this.name);

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

@@ -15,7 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       <core-item icon="dialog" label="Dialog"></core-item>
       <core-item icon="search" label="Search"></core-item>
     </core-menu>
-    
+
 When an item is selected the `core-selected` class is added to it.  The user can
 use the class to add more stylings to the selected item.
 
@@ -56,13 +56,18 @@ The `core-select` event signals selection change.
 -->
 
 <link rel="import" href="../core-selector/core-selector.html">
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 
 <polymer-element name="core-menu" extends="core-selector" noscript>
 <template>
 
   <link rel="stylesheet" href="core-menu.css">
-  
+
+  <core-a11y-keys target="{{}}" keys="up" on-keys-pressed="{{ selectPrevious }}"></core-a11y-keys>
+  <core-a11y-keys target="{{}}" keys="down" on-keys-pressed="{{ selectNext }}"></core-a11y-keys>
+  <core-a11y-keys target="{{}}" keys="enter" on-keys-pressed="{{ validateSelected }}"></core-a11y-keys>
+
   <shadow></shadow>
-  
+
 </template>
 </polymer-element>

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

@@ -61,7 +61,7 @@ The above will style `Topic1` and `Topic2` to have font color red.
 <link rel="import" href="../core-menu/core-menu.html">
 <link rel="import" href="../core-collapse/core-collapse.html">
 
-<polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr">
+<polymer-element name="core-submenu" attributes="selected selectedItem selectedAttribute label icon src valueattr">
 <template>
 
   <link rel="stylesheet" href="core-submenu.css">
@@ -70,7 +70,7 @@ The above will style `Topic1` and `Topic2` to have font color red.
     <content select=".item-content"></content>
   </core-item>
 
-  <core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" valueattr="{{valueattr}}">
+  <core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedAttribute="{{selectedAttribute}}" valueattr="{{valueattr}}">
     <content></content>
   </core-menu>
 

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

@@ -9,6 +9,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <link rel="import" href="../polymer/polymer.html">
 
+<!--
+@element core-key-helper
+-->
 <polymer-element name="core-key-helper">
   <script>
     Polymer('core-key-helper', {

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

@@ -8,6 +8,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <link rel="import" href="../polymer/polymer.html">
 
+<!--
+@element core-overlay-layer
+-->
 <polymer-element name="core-overlay-layer">
 <template>
   <style>

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

@@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../core-transition/core-transition.html">
+<link rel="import" href="../core-resizable/core-resizable.html">
 <link rel="import" href="core-key-helper.html">
 <link rel="import" href="core-overlay-layer.html">
 
@@ -61,6 +62,7 @@ that, for example, a drop shadow is always visible around the overlay.
 
 @group Core Elements
 @element core-overlay
+@mixins Polymer.CoreResizer https://github.com/polymer/core-resizable
 @homepage github.io
 -->
 <!--
@@ -115,7 +117,7 @@ object like this: `{v: 'top', h: 'right'}`.
 <script>
 (function() {
 
-  Polymer('core-overlay', {
+  Polymer(Polymer.mixin({
 
     publish: {
       /**
@@ -236,7 +238,19 @@ object like this: `{v: 'top', h: 'right'}`.
       'keydown': 'keydownHandler',
       'core-transitionend': 'transitionend'
     },
-    
+
+    attached: function() {
+      this.resizerAttachedHandler();
+    },
+
+    detached: function() {
+      this.resizerDetachedHandler();
+    },
+
+    resizerShouldNotify: function() {
+      return this.opened;
+    },
+
     registerCallback: function(element) {
       this.layer = document.createElement('core-overlay-layer');
       this.keyHelper = document.createElement('core-key-helper');
@@ -387,6 +401,7 @@ object like this: `{v: 'top', h: 'right'}`.
     // tasks which cause the overlay to actually open; typically play an
     // animation
     renderOpened: function() {
+      this.notifyResize();
       var transition = this.getTransition();
       if (transition) {
         transition.go(this.target, {opened: this.opened});
@@ -675,8 +690,9 @@ object like this: `{v: 'top', h: 'right'}`.
         };
       }
       return this[bound];
-    },
-  });
+    }
+
+  }, Polymer.CoreResizer));
 
   // TODO(sorvell): This should be an element with private state so it can
   // be independent of overlay.

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

@@ -0,0 +1,248 @@
+<!--
+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
+-->
+
+<!--
+ * @group Polymer Mixins
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+
+(function(scope) {
+
+/**
+  `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
+  in Polymer elements to coordinate the flow of resize events between "resizers" (elements
+  that control the size or hidden state of their children) and "resizables" (elements that
+  need to be notified when they are resized or un-hidden by their parents in order to take
+  action on their new measurements).
+
+  Elements that perform measurement should add the `Core.Resizable` mixin to their 
+  Polymer prototype definition and listen for the `core-resize` event on themselves.
+  This event will be fired when they become showing after having been hidden,
+  when they are resized explicitly by a `CoreResizer`, or when the window has been resized.
+  Note, the `core-resize` event is non-bubbling.
+
+  `CoreResizable`'s must manually call the `resizableAttachedHandler` from the element's
+  `attached` callback and `resizableDetachedHandler` from the element's `detached`
+  callback.
+
+    @element CoreResizable
+    @status beta
+    @homepage github.io
+*/
+
+  scope.CoreResizable = {
+
+    /**
+     * User must call from `attached` callback
+     *
+     * @method resizableAttachedHandler
+     */
+    resizableAttachedHandler: function(cb) {
+      cb = cb || this._notifyResizeSelf;
+      this.async(function() {
+        var detail = {callback: cb, hasParentResizer: false};
+        this.fire('core-request-resize', detail);
+        if (!detail.hasParentResizer) {
+          this._boundWindowResizeHandler = cb.bind(this);
+          // log('adding window resize handler', null, this);
+          window.addEventListener('resize', this._boundWindowResizeHandler);
+        }
+      }.bind(this));
+    },
+
+    /**
+     * User must call from `detached` callback
+     *
+     * @method resizableDetachedHandler
+     */
+    resizableDetachedHandler: function() {
+      this.fire('core-request-resize-cancel', null, this, false);
+      if (this._boundWindowResizeHandler) {
+        window.removeEventListener('resize', this._boundWindowResizeHandler);
+      }
+    },
+
+    // Private: fire non-bubbling resize event to self; returns whether
+    // preventDefault was called, indicating that children should not
+    // be resized
+    _notifyResizeSelf: function() {
+      return this.fire('core-resize', null, this, false).defaultPrevented;
+    }
+
+  };
+
+/**
+  `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
+  in Polymer elements to coordinate the flow of resize events between "resizers" (elements
+  that control the size or hidden state of their children) and "resizables" (elements that
+  need to be notified when they are resized or un-hidden by their parents in order to take
+  action on their new measurements).
+
+  Elements that cause their children to be resized (e.g. a splitter control) or hide/show
+  their children (e.g. overlay) should add the `Core.CoreResizer` mixin to their 
+  Polymer prototype definition and then call `this.notifyResize()` any time the element
+  resizes or un-hides its children.
+
+  `CoreResizer`'s must manually call the `resizerAttachedHandler` from the element's
+  `attached` callback and `resizerDetachedHandler` from the element's `detached`
+  callback.
+
+  Note: `CoreResizer` extends `CoreResizable`, and can listen for the `core-resize` event
+  on itself if it needs to perform resize work on itself before notifying children.
+  In this case, returning `false` from the `core-resize` event handler (or calling
+  `preventDefault` on the event) will prevent notification of children if required.
+
+  @element CoreResizer
+  @extends CoreResizable
+  @status beta
+  @homepage github.io
+*/
+
+  scope.CoreResizer = Polymer.mixin({
+
+    /**
+     * User must call from `attached` callback
+     *
+     * @method resizerAttachedHandler
+     */
+    resizerAttachedHandler: function() {
+      this.resizableAttachedHandler(this.notifyResize);
+      this._boundResizeRequested = this._boundResizeRequested || this._handleResizeRequested.bind(this);
+      var listener;
+      if (this.resizerIsPeer) {
+        listener = this.parentElement || (this.parentNode && this.parentNode.host);
+        listener._resizerPeers = listener._resizerPeers || [];
+        listener._resizerPeers.push(this);
+      } else {
+        listener = this;
+      }
+      listener.addEventListener('core-request-resize', this._boundResizeRequested);
+      this._resizerListener = listener;
+    },
+
+    /**
+     * User must call from `detached` callback
+     *
+     * @method resizerDetachedHandler
+     */
+    resizerDetachedHandler: function() {
+      this.resizableDetachedHandler();
+      this._resizerListener.removeEventListener('core-request-resize', this._boundResizeRequested);
+    },
+
+    /**
+     * User should call when resizing or un-hiding children
+     *
+     * @method notifyResize
+     */
+    notifyResize: function() {
+      // Notify self
+      if (!this._notifyResizeSelf()) {
+        // Notify requestors if default was not prevented
+        var r = this.resizeRequestors;
+        if (r) {
+          for (var i=0; i<r.length; i++) {
+            var ri = r[i];
+            if (!this.resizerShouldNotify || this.resizerShouldNotify(ri.target)) {
+              // log('notifying resize', null, ri.target, true);
+              ri.callback.apply(ri.target);
+              // logEnd();
+            }
+          }
+        }
+      }
+    },
+
+    /**
+     * User should implement to introduce filtering when notifying children.
+     * Generally, children that are hidden by the CoreResizer (e.g. non-active
+     * pages) need not be notified during resize, since they will be notified
+     * again when becoming un-hidden.
+     *
+     * Return `true` if CoreResizable passed as argument should be notified of
+     * resize.
+     *
+     * @method resizeerShouldNotify
+     * @param {Element} el
+     */
+     // resizeerShouldNotify: function(el) { }  // User to implement if needed
+
+    /**
+     * Set to `true` if the resizer is actually a peer to the elements it
+     * resizes (e.g. splitter); in this case it will listen for resize requests
+     * events from its peers on its parent.
+     *
+     * @property resizerIsPeer
+     * @type Boolean
+     * @default false
+     */
+
+    // Private: Handle requests for resize
+    _handleResizeRequested: function(e) {
+      var target = e.path[0];
+      if ((target == this) || 
+          (target == this._resizerListener) || 
+          (this._resizerPeers && this._resizerPeers.indexOf(target) < 0)) {
+        return;
+      }
+      // log('resize requested', target, this);
+      if (!this.resizeRequestors) {
+        this.resizeRequestors = [];
+      }
+      this.resizeRequestors.push({target: target, callback: e.detail.callback});
+      target.addEventListener('core-request-resize-cancel', this._cancelResizeRequested.bind(this));
+      e.detail.hasParentResizer = true;
+      e.stopPropagation();
+    },
+
+    // Private: Handle cancellation requests for resize
+    _cancelResizeRequested: function(e) {
+      // Exit early if we're already out of the DOM (resizeRequestors will already be null)
+      if (this.resizeRequestors) {
+        for (var i=0; i<this.resizeRequestors.length; i++) {
+          if (this.resizeRequestors[i].target == e.target) {
+            // log('resizeCanceled', e.target, this);
+            this.resizeRequestors.splice(i, 1);
+            break;
+          }
+        }
+      }
+    }
+
+  }, Polymer.CoreResizable);
+
+  // function prettyName(el) {
+  //   return el.localName + (el.id ? '#' : '') + el.id;
+  // }
+
+  // function log(what, from, to, group) {
+  //   var args = [what];
+  //   if (from) {
+  //     args.push('from ' + prettyName(from));
+  //   }
+  //   if (to) {
+  //     args.push('to ' + prettyName(to));
+  //   }
+  //   if (group) {
+  //     console.group.apply(console, args);
+  //   } else {
+  //     console.log.apply(console, args);
+  //   }
+  // }
+
+  // function logEnd() {
+  //   console.groupEnd();
+  // }
+
+})(Polymer);
+
+</script>

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) {