Merge pull request #73 from PolymerElements/observe-nodes

Observe nodes
PolymerElements · Oct 28, 2015 · 92b0bbc · 92b0bbc
2 parents f614fe2 + 2d20d61
commit 92b0bbc
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 51 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,28 @@
+language: node_js
+sudo: false
+matrix:
+  include:
+  - node_js: stable
+    script: xvfb-run wct
+    addons:
+      firefox: latest
+      apt:
+        sources:
+        - google-chrome
+        packages:
+        - google-chrome-stable
+  - node_js: node
+    script:
+    - |
+      if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
+        wct -s 'default'
+      fi
+before_script:
+- npm install web-component-tester
+- npm install bower
+- export PATH=$PWD/node_modules/.bin:$PATH
+- bower install
+env:
+  global:
+  - secure: ltCkwJM0nkTS9WjikyjqBsB5J2hQon4UnVVrINk4y+Vq4v9PQJH3+83nya0jnxilKaeAJs4d2/OS02F9GkqYpsSmDz7OgXPfk0hrHA8UksvvpSALfnukleIAN2YTOcxXJKeNHcfpqCKPk1dGeNQOEM61H+QgTBIyFB3sMugygqs=
+  - secure: TJuu1WdpFLTaBN/prBafm8Pld/BQCySNuuG1nATbF3fqiOpgehXu8Z5URAz5syUhqZAyEmuRMxvXpEVD/t1jrtaXVwkdCFkkQ4ckkP4gTIeSGA/Puw8sveB2q7QAqXyTmeFkocNlh8fxV+B07o0SPWdhcvdZnDVU9VrpSqL+92M=
diff --git a/bower.json b/bower.json
@@ -20,7 +20,7 @@
   "homepage": "https://github.com/PolymerElements/iron-selector",
   "ignore": [],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0"
+    "polymer": "Polymer/polymer#^1.2.0"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

diff --git a/iron-multi-selectable.html b/iron-multi-selectable.html
@@ -72,6 +72,11 @@
       this._selection.multi = multi;
     },
 
+    get _shouldUpdateSelection() {
+      return this.selected != null ||
+        (this.selectedValues != null && this.selectedValues.length);
+    },
+
     _updateSelected: function() {
       if (this.multi) {
         this._selectMulti(this.selectedValues);

diff --git a/iron-selectable.html b/iron-selectable.html
@@ -64,7 +64,7 @@
 
       /**
        * Returns the currently selected item.
-       * 
+       *
        * @type {?Object}
        */
       selectedItem: {
@@ -106,6 +106,17 @@
         value: null
       },
 
+      /**
+       * The list of items from which a selection can be made.
+       */
+      items: {
+        type: Array,
+        readOnly: true,
+        value: function() {
+          return [];
+        }
+      },
+
       /**
        * The set of excluded elements where the key is the `localName`
        * of the element that will be ignored from the item list.
@@ -129,41 +140,24 @@
     created: function() {
       this._bindFilterItem = this._filterItem.bind(this);
       this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
-      // TODO(cdata): When polymer/polymer#2535 lands, we do not need to do this
-      // book keeping anymore:
-      this.__listeningForActivate = false;
     },
 
     attached: function() {
       this._observer = this._observeItems(this);
-      this._contentObserver = this._observeContent(this);
-      if (!this.selectedItem && this.selected) {
+      this._updateItems();
+      if (!this._shouldUpdateSelection) {
         this._updateSelected(this.attrForSelected,this.selected)
       }
       this._addListener(this.activateEvent);
     },
 
     detached: function() {
       if (this._observer) {
-        this._observer.disconnect();
-      }
-      if (this._contentObserver) {
-        this._contentObserver.disconnect();
+        Polymer.dom(this).unobserveNodes(this._observer);
       }
       this._removeListener(this.activateEvent);
     },
 
-    /**
-     * Returns an array of selectable items.
-     *
-     * @property items
-     * @type Array
-     */
-    get items() {
-      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
-      return Array.prototype.filter.call(nodes, this._bindFilterItem);
-    },
-
     /**
      * Returns the index of the given item.
      *
@@ -206,25 +200,29 @@
       this.selected = this._indexToValue(index);
     },
 
-    _addListener: function(eventName) {
-      if (!this.isAttached || this.__listeningForActivate) {
-        return;
-      }
+    get _shouldUpdateSelection() {
+      return this.selected != null;
+    },
 
-      this.__listeningForActivate = true;
+    _addListener: function(eventName) {
       this.listen(this, eventName, '_activateHandler');
     },
 
     _removeListener: function(eventName) {
       this.unlisten(this, eventName, '_activateHandler');
-      this.__listeningForActivate = false;
     },
 
     _activateEventChanged: function(eventName, old) {
       this._removeListener(old);
       this._addListener(eventName);
     },
 
+    _updateItems: function() {
+      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
+      nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
+      this._setItems(nodes);
+    },
+
     _updateSelected: function() {
       this._selectSelected(this.selected);
     },
@@ -283,34 +281,22 @@
       this._setSelectedItem(this._selection.get());
     },
 
-    // observe content changes under the given node.
-    _observeContent: function(node) {
-      var content = node.querySelector('content');
-      if (content && content.parentElement === node) {
-        return this._observeItems(node.domHost);
-      }
-    },
-
     // observe items change under the given node.
     _observeItems: function(node) {
-      // TODO(cdata): Update this when we get distributed children changed.
-      var observer = new MutationObserver(function(mutations) {
+      return Polymer.dom(node).observeNodes(function(mutations) {
         // Let other interested parties know about the change so that
         // we don't have to recreate mutation observers everywher.
         this.fire('iron-items-changed', mutations, {
           bubbles: false,
           cancelable: false
         });
 
-        if (this.selected != null) {
+        this._updateItems();
+
+        if (this._shouldUpdateSelection) {
           this._updateSelected();
         }
-      }.bind(this));
-      observer.observe(node, {
-        childList: true,
-        subtree: true
       });
-      return observer;
     },
 
     _activateHandler: function(e) {

diff --git a/test/basic.html b/test/basic.html
@@ -104,10 +104,13 @@
         s2 = fixture('basic');
       });
 
-      test('honors the attrForSelected attribute', function() {
-        assert.equal(s2.attrForSelected, 'id');
-        assert.equal(s2.selected, 'item2');
-        assert.equal(s2.selectedItem, document.querySelector('#item2'));
+      test('honors the attrForSelected attribute', function(done) {
+        Polymer.Base.async(function() {
+          assert.equal(s2.attrForSelected, 'id');
+          assert.equal(s2.selected, 'item2');
+          assert.equal(s2.selectedItem, document.querySelector('#item2'));
+          done();
+        });
       });
 
       test('allows assignment to selected', function() {
@@ -153,10 +156,10 @@
             changeCount++;
           });
 
-          s2.appendChild(newItem);
+          Polymer.dom(s2).appendChild(newItem);
 
           Polymer.Base.async(function() {
-            s2.removeChild(newItem);
+            Polymer.dom(s2).removeChild(newItem);
 
             Polymer.Base.async(function() {
               expect(changeCount).to.be.equal(2);

diff --git a/test/excluded-local-names.html b/test/excluded-local-names.html
@@ -70,17 +70,22 @@
       });
 
 
-      test('items', function() {
+      test('items', function(done) {
         test1._excludedLocalNames.span = 1;
         test2._excludedLocalNames.div = 1;
+        test1._updateItems();
+        test2._updateItems();
 
+        Polymer.Base.async(function() {
           var NOT_FOUND = -1;
           var items1 = test1.items.map(function(el) { return el.localName; });
           var items2 = test2.items.map(function(el) { return el.localName; });
 
           assert.equal(items1.indexOf('span'), NOT_FOUND);
           assert.equal(items2.indexOf('div'), NOT_FOUND);
+          done();
         });
+      });
 
     });
 

diff --git a/test/multi.html b/test/multi.html
@@ -66,6 +66,7 @@
 
       setup(function () {
         s = fixture('test');
+        t = Polymer.dom(s).querySelector('[is="dom-repeat"]');
       });
 
       test('honors the multi attribute', function() {
@@ -163,6 +164,30 @@
         });
       });
 
+      test('updates selection when dom changes', function(done) {
+        var selectEventCounter = 0;
+
+        s = fixture('test');
+
+        Polymer.Base.async(function() {
+          var firstChild = Polymer.dom(s).querySelector(':first-child');
+          var lastChild = Polymer.dom(s).querySelector(':last-child');
+
+          MockInteractions.tap(firstChild);
+          MockInteractions.tap(lastChild);
+
+          expect(s.selectedItems.length).to.be.equal(2);
+
+          Polymer.dom(s).removeChild(lastChild);
+
+          Polymer.Base.async(function() {
+            expect(s.selectedItems.length).to.be.equal(1);
+            done();
+          });
+        });
+
+      });
+
       /* test('toggle multi from true to false', function() {
         // set selected
         s.selected = [0, 2];