Add CoreResizable support. Add resizable demos. Update to element API…

… changes.
googlearchive · Dec 3, 2014 · 86b8754 · 86b8754
1 parent 08b90f8
commit 86b8754
Show file tree

Hide file tree

Showing 9 changed files with 968 additions and 38 deletions.
diff --git a/bower.json b/bower.json
@@ -3,22 +3,29 @@
   "private": true,
   "dependencies": {
     "polymer": "Polymer/polymer#master",
-    "core-selection": "Polymer/core-selection#master"
+    "core-selection": "Polymer/core-selection#master",
+    "core-resizable": "Polymer/core-resizable#master"
   },
   "devDependencies": {
   	"web-component-tester": "Polymer/web-component-tester#master",
     "core-ajax": "Polymer/core-ajax#master",
+    "core-animated-pages": "Polymer/core-animated-pages#master",
     "core-icon": "Polymer/core-icon#master",
     "core-icon-button": "Polymer/core-icon-button#master",
     "core-icons": "Polymer/core-icons#master",
     "core-image": "Polymer/core-image#master",
+    "core-menu": "Polymer/core-menu#master",
     "core-media-query": "Polymer/core-media-query#master",
     "core-menu": "Polymer/core-menu#master",
     "core-overlay": "Polymer/core-overlay#master",
     "core-scroll-header-panel": "Polymer/core-scroll-header-panel#master",
     "core-scroll-threshold": "Polymer/core-scroll-threshold#master",
     "core-selector": "Polymer/core-selector#master",
+    "core-splitter": "Polymer/core-splitter#master",
     "core-toolbar": "Polymer/core-toolbar#master",
+    "core-tooltip": "Polymer/core-tooltip#master",
+    "paper-button": "Polymer/paper-button#master",
+    "paper-dialog": "Polymer/paper-dialog#master",
     "paper-dropdown": "Polymer/paper-dropdown#master",
     "paper-fab": "Polymer/paper-fab#master",
     "paper-icon-button": "Polymer/paper-icon-button#master",
@@ -27,6 +34,7 @@
     "paper-menu-button": "Polymer/paper-menu-button#master",
     "paper-shadow": "Polymer/paper-shadow#master",
     "paper-slider": "Polymer/paper-slider#master",
-    "paper-spinner": "Polymer/paper-spinner#master"
+    "paper-spinner": "Polymer/paper-spinner#master",
+    "paper-tabs": "Polymer/paper-tabs#master"
   }
 }
diff --git a/core-list.html b/core-list.html
@@ -165,8 +165,9 @@
 -->
 <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 +179,7 @@
   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 +329,16 @@
 
     },
 
+    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,35 +363,34 @@
       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.resizeableAttachedHandler();
     },
 
     detached: function() {
+      this.isAttached = false;
       this.removeEventListener(this._boundScrollHandler);
-      this.removeEventListener(this._boundResizeHandler);
+      this.resizeableDetachedHandler();
     },
 
     /**
-     * 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() {
-      if (this.grid) {
+      if (!this._positionPending && !this._needItemInit) {
         this._resetIndex(this._getFirstVisibleIndex() || 0);
+        this.initialize();
       }
-      this.initializeData();
     },
 
     _resetSelection: function() {
@@ -438,7 +443,7 @@
       }
       // 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;
@@ -458,13 +463,12 @@
 
     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;
       }
 
@@ -601,7 +605,9 @@
           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._rowMargin = (this._target.offsetWidth - (this._rowFactor * this.width) - padding) / 2;
       } else {
         this._rowFactor = 1;
         this._rowMargin = 0;
@@ -649,7 +655,11 @@
 
       // 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;
@@ -781,10 +791,9 @@
 
       // Measure content in scroller before virtualized items
       if (this._target != this) {
-        var 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
@@ -1234,7 +1243,7 @@
         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;
         }
       }
@@ -1244,8 +1253,8 @@
       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;
     },
 
@@ -1288,7 +1297,7 @@
       this.refresh();
     }
 
-  });
+  }, Polymer.CoreResizable));
 
 })();
 </script>

diff --git a/demo.html b/demo.html
@@ -12,6 +12,7 @@
   <title>core-list</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <script src="../webcomponentsjs/webcomponents.js"></script>
+  <link rel="import" href="../polymer/polymer.html">
   <link rel="import" href="core-list.html">
   <style>
     html, body {

diff --git a/demos/demo-data-grouped-short.json b/demos/demo-data-grouped-short.json
@@ -23,7 +23,6 @@
         {"letter": "U"},
         {"letter": "V"},
         {"letter": "W"},
-        {"letter": "X"},
         {"letter": "Y"},
         {"letter": "Z"}
     ],
@@ -3283,7 +3282,6 @@
             "text": "Deserunt ad dolore aliquip magna deserunt eu velit labore elit. Ut labore consequat ad amet et magna aute deserunt culpa labore officia ullamco.",
             "color": "rgb(216,110,116)"
         }],
-        [],
         [{
             "index": 4820,
             "name": "Yang Chambers",

diff --git a/demos/demo-flickr-responsive.html b/demos/demo-flickr-responsive.html
@@ -124,21 +124,36 @@
       </paper-dropdown>
     </paper-menu-button>
     <paper-menu-button>
-      <paper-icon-button icon="{{modeEl.icon}}" noink></paper-icon-button>
+      <paper-icon-button icon="{{modeEl.dataset.icon}}" noink></paper-icon-button>
       <paper-dropdown class="dropdown">
         <core-menu class="menu" selected="{{mode}}" selectedItem="{{modeEl}}">
-          <paper-item name="grid" icon="view-module">Grid</paper-item>
-          <paper-item name="list" icon="view-list">List</paper-item>
-          <paper-item name="responsive" icon="device:devices">Responsive</paper-item>
+          <paper-item name="grid" data-icon="view-module">
+            <core-icon icon="view-module"></core-icon>
+            <span class="pad-left">Grid</span>
+          </paper-item>
+          <paper-item name="list" data-icon="view-list">
+            <core-icon icon="view-list"></core-icon>
+            <span class="pad-left">List</span>
+          </paper-item>
+          <paper-item name="responsive" icon="device:devices">
+            <core-icon icon="device:devices"></core-icon>
+            <span class="pad-left">Responsive</span>
+          </paper-item>
         </core-menu>
       </paper-dropdown>
     </paper-menu-button>
     <paper-menu-button>
-      <paper-icon-button icon="{{groupedEl.icon}}" noink></paper-icon-button>
+      <paper-icon-button icon="{{groupedEl.dataset.icon}}" noink></paper-icon-button>
       <paper-dropdown class="dropdown">
         <core-menu class="menu" selected="{{grouped}}" selectedItem="{{groupedEl}}">
-          <paper-item name="yes" icon="image:filter-none">Show Groups</paper-item>
-          <paper-item name="no" icon="image:crop-din">No Groups</paper-item>
+          <paper-item name="yes" data-icon="image:filter-none">
+            <core-icon icon="image:filter-none"></core-icon>
+            <span class="pad-left">Show Groups</span>
+          </paper-item>
+          <paper-item name="no" data-icon="image:crop-din">
+            <core-icon icon="image:crop-din"></core-icon>
+            <span class="pad-left">No Groups</span>
+          </paper-item>
         </core-menu>
       </paper-dropdown>      
     </paper-menu-button>

diff --git a/demos/demo-messages.html b/demos/demo-messages.html
@@ -125,10 +125,10 @@
   <core-toolbar class="toolbar">
     <paper-menu-button>
       <paper-icon-button icon="menu" noink></paper-icon-button>
-      <paper-dropdown class="dropdown">
+      <paper-dropdown class="dropdown" layered>
         <core-menu class="menu" on-core-activate="{{jumpToGroup}}">
           <template repeat="{{group, index in groups}}">
-            <paper-item label="{{group.data.label}}"></paper-item>
+            <paper-item>{{group.data.label}}</paper-item>
           </template>
         </core-menu>
       </paper-dropdown>