Update components in preparation for 0.6.3 release

Author: Jan Miksovsky

basic-page-dots.html

@@ -84,30 +84,32 @@
   contribute: {
 
     applySelection: function(item, selected) {
+      var index = this.collective.indexOfItem(item);
+      // See if the corresponding dot has already been created.
+      // If not, the correct dot will be selected when it gets created.
       var dots = this.dots;
-      if (dots && dots.length > 0) {
-        var index = this.collective.indexOfItem(item);
+      if (dots && dots.length > index) {
         var dot = this.dots[index];
         if (dot) {
           dot.classList.toggle('selected', selected);
         }
-      } else {
-        // HACK: Dots haven't been created yet, because binding hasn't updated.
-        // Wait a tick and try again.
-        var callee = arguments.callee;
-        setTimeout(function() {
-          callee.call(this, item, selected);
-        }.bind(this));
       }
     },
 
-    // TODO: Move the requirement for a selction to basic-item-selection. This
-    // should ideally pick the nearest item to the previously-selected item.
-    // collectiveChanged: function() {
-    //   if (this.collective.selectedItem === null && this.collective.items != null && this.collective.selectFirst) {
-    //     this.collective.selectFirst();
-    //   }
-    // },
+    collectiveChanged: function() {
+      // Apply any selection made before assimilation.
+      if (this._prematureSelectedIndex
+          && 'selectedIndex' in this.collective
+          && this.collective.selectedIndex === -1) {
+        this.collective.selectedIndex = this._prematureSelectedIndex;
+        this._prematureSelectedIndex = null;
+      }
+      // TODO: Move the requirement for a selction to basic-item-selection. This
+      // should ideally pick the nearest item to the previously-selected item.
+      //   if (this.collective.selectedItem === null && this.collective.items != null && this.collective.selectFirst) {
+      //     this.collective.selectFirst();
+      //   }
+    },
 
     // TODO: Seems like this ultimately belongs in Collective.
     itemsChanged: function() {
@@ -139,6 +141,18 @@
 
   is: 'basic-page-dots',
 
+  properties: {
+
+    selectedIndex: {
+      type: Number
+    },
+
+    selectedItem: {
+      type: Object
+    }
+
+  },
+
   ready: function() {
     this.$.dots.addEventListener('click', function(event) {
       this.dotClick(event);
@@ -153,10 +167,18 @@
    * @type Number
    */
   get selectedIndex() {
-    return this.collective.selectedIndex;
+    // See note at basic-item-selection's selectedIndex getter.
+    if (this._readied) {
+      return this.collective.selectedIndex;
+    }
   },
   set selectedIndex(index) {
-    this.collective.selectedIndex = index;
+    if ('selectedIndex' in this.collective) {
+      this.collective.selectedIndex = index;
+    } else {
+      // Selection is being made before the collective supports it.
+      this._prematureSelectedIndex = index;
+    }
   },
 
   /**
@@ -173,30 +195,31 @@
   },
 
   _createDots: function(count) {
+    var selectedIndex = this.selectedIndex;
     var dotContainer = this.$.dots;
-    var existingDots = dotContainer.children;
-    var existingDotCount = existingDots.length;
-    if (count == existingDots.length) {
+    var existingDotCount = dotContainer.children.length;
+    if (count === existingDotCount) {
       return;
-    } else if (existingDots.length > count) {
+    } else if (existingDotCount > count) {
       // Remove extra dots.
-      for (var i = count; i < existingDotCount; i++) {
-        var existingDot = existingDots[i];
-        Polymer.dom(dotContainer).removeChild(existingDot);
+      while (dotContainer.children.length > count) {
+        Polymer.dom(dotContainer).removeChild(dotContainer.children[0]);
       }
     } else {
       // Create needed dots.
-      // var dotTemplate = this.$.dotTemplate;
       for (var i = existingDotCount; i < count; i++) {
-        // var newDot = document.importNode(dotTemplate.content, true);
         var newDot = document.createElement('div');
         newDot.classList.add('dot');
         newDot.classList.add('style-scope');
         newDot.classList.add('basic-page-dots');
+        newDot.classList.toggle('selected', i === selectedIndex);
         dotContainer.appendChild(newDot);
       }
     }
-  }
+  },
+
+  // Tracks selection before the collective supports it.
+  _prematureSelectedIndex: null
 
 });
 </script>

bower.json

@@ -1,15 +1,15 @@
 {
   "name": "basic-page-dots",
   "description": "Aspect which adds a set of small dots to a collective tracking a list of items.",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "license": "MIT",
   "main": "basic-page-dots.html",
   "dependencies": {
-    "basic-aspect": "basic-web-components/basic-aspect#0.6.2",
+    "basic-aspect": "basic-web-components/basic-aspect#0.6.3",
     "polymer": "Polymer/polymer#^1.1"
   },
   "devDependencies": {
-    "basic-framed-content": "basic-web-components/basic-framed-content#0.6.2",
+    "basic-framed-content": "basic-web-components/basic-framed-content#0.6.3",
     "web-component-tester": "*"
   },
   "keywords": [