Merge pull request #3 from PolymerElements/merge-0.8-behaviors

merge ffu's 0.8 behaviors branch
PolymerElements · Apr 24, 2015 · 58f8700 · 58f8700
2 parents 1c75f91 + 543074a
commit 58f8700
Show file tree

Hide file tree

Showing 6 changed files with 351 additions and 302 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -22,7 +22,7 @@
     <style>
 
       iron-selector > * {
-        padding: 16px;
+        padding: 8px;
       }
 
       .iron-selected {
@@ -34,7 +34,8 @@
   </head>
   <body>
 
-    <h3>Example 1</h3>
+    <h3>Basic</h3>
+
     <iron-selector selected="0">
       <div>Item 0</div>
       <div>Item 1</div>
@@ -43,7 +44,18 @@ <h3>Example 1</h3>
       <div>Item 4</div>
     </iron-selector>
 
-    <h3>Example 2</h3>
+    <h3>Multi-select</h3>
+
+    <iron-selector multi selected-values='[0,2]'>
+      <div>Item 0</div>
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+      <div>Item 4</div>
+    </iron-selector>
+
+    <h3>Example</h3>
+
     <iron-selector selected="foo" attr-for-selected="name">
       <div name="foo">Foo</div>
       <div name="bar">Bar</div>

diff --git a/iron-multi-selectable.html b/iron-multi-selectable.html
@@ -0,0 +1,127 @@
+<!--
+Copyright (c) 2015 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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="iron-selectable.html">
+
+<script>
+
+  Polymer.IronMultiSelectableBehavior = [
+    Polymer.IronSelectableBehavior, {
+
+      properties: {
+
+        /**
+         * If true, multiple selections are allowed.
+         *
+         * @attribute multi
+         * @type Boolean
+         * @default false
+         */
+        multi: {
+          type: Boolean,
+          value: false,
+          observer: 'multiChanged'
+        },
+
+        /**
+         * Gets or sets the selected elements. This is used instead of `selected` when `multi`
+         * is true.
+         *
+         * @attribute selectedValues
+         * @type Array
+         */
+        selectedValues: {
+          type: Array,
+          notify: true
+        },
+
+        /**
+         * Returns an array of currently selected items.
+         *
+         * @attribute selectedItems
+         * @type Array
+         */
+        selectedItems: {
+          type: Array,
+          readOnly: true,
+          notify: true
+        },
+
+      },
+
+      observers: [
+        '_updateSelected(attrForSelected, selectedValues)'
+      ],
+
+      /**
+       * Selects the given value. If the `multi` property is true, then the selected state of the
+       * `value` will be toggled; otherwise the `value` will be selected.
+       *
+       * @method select
+       * @param {String} value the value to select.
+       */
+      select: function(value) {
+        if (this.multi) {
+          if (this.selectedValues) {
+            this._toggleSelected(value);
+          } else {
+            this.selectedValues = [value];
+          }
+        } else {
+          this.selected = value;
+        }
+      },
+
+      multiChanged: function(multi) {
+        this._selection.multi = multi;
+      },
+
+      _updateSelected: function() {
+        if (this.multi) {
+          this._selectMulti(this.selectedValues);
+        } else {
+          this._selectSelected(this.selected);
+        }
+      },
+
+      _selectMulti: function(values) {
+        this._selection.clear();
+        if (values) {
+          for (var i = 0; i < values.length; i++) {
+            this._selection.setItemSelected(this._valueToItem(values[i]), true);
+          }
+        }
+      },
+
+      _selectionChange: function() {
+        var s = this._selection.get();
+        if (this.multi) {
+          this._setSelectedItems(s);
+        } else {
+          this._setSelectedItems([s]);
+          this._setSelectedItem(s);
+        }
+      },
+
+      _toggleSelected: function(value) {
+        var i = this.selectedValues.indexOf(value);
+        var unselected = i < 0;
+        if (unselected) {
+          this.selectedValues.push(value);
+        } else {
+          this.selectedValues.splice(i, 1);
+        }
+        this._selection.setItemSelected(this._valueToItem(value), unselected);
+      }
+
+    }
+  ];
+
+</script>