third_party/polymer/v1_0/components/iron-selector/iron-multi-selectable.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12 <link rel="import" href="iron-selectable.html">
  13
  14 <script>
  15   /** @polymerBehavior Polymer.IronMultiSelectableBehavior */
  16   Polymer.IronMultiSelectableBehaviorImpl = {
  17     properties: {
  18
  19       /**
  20        * If true, multiple selections are allowed.
  21        */
  22       multi: {
  23         type: Boolean,
  24         value: false,
  25         observer: 'multiChanged'
  26       },
  27
  28       /**
  29        * Gets or sets the selected elements. This is used instead of `selected` when `multi`
  30        * is true.
  31        */
  32       selectedValues: {
  33         type: Array,
  34         notify: true
  35       },
  36
  37       /**
  38        * Returns an array of currently selected items.
  39        */
  40       selectedItems: {
  41         type: Array,
  42         readOnly: true,
  43         notify: true
  44       },
  45
  46     },
  47
  48     observers: [
  49       '_updateSelected(attrForSelected, selectedValues)'
  50     ],
  51
  52     /**
  53      * Selects the given value. If the `multi` property is true, then the selected state of the
  54      * `value` will be toggled; otherwise the `value` will be selected.
  55      *
  56      * @method select
  57      * @param {string} value the value to select.
  58      */
  59     select: function(value) {
  60       if (this.multi) {
  61         if (this.selectedValues) {
  62           this._toggleSelected(value);
  63         } else {
  64           this.selectedValues = [value];
  65         }
  66       } else {
  67         this.selected = value;
  68       }
  69     },
  70
  71     multiChanged: function(multi) {
  72       this._selection.multi = multi;
  73     },
  74
  75     _updateSelected: function() {
  76       if (this.multi) {
  77         this._selectMulti(this.selectedValues);
  78       } else {
  79         this._selectSelected(this.selected);
  80       }
  81     },
  82
  83     _selectMulti: function(values) {
  84       this._selection.clear();
  85       if (values) {
  86         for (var i = 0; i < values.length; i++) {
  87           this._selection.setItemSelected(this._valueToItem(values[i]), true);
  88         }
  89       }
  90     },
  91
  92     _selectionChange: function() {
  93       var s = this._selection.get();
  94       if (this.multi) {
  95         this._setSelectedItems(s);
  96       } else {
  97         this._setSelectedItems([s]);
  98         this._setSelectedItem(s);
  99       }
 100     },
 101
 102     _toggleSelected: function(value) {
 103       var i = this.selectedValues.indexOf(value);
 104       var unselected = i < 0;
 105       if (unselected) {
 106         this.selectedValues.push(value);
 107       } else {
 108         this.selectedValues.splice(i, 1);
 109       }
 110       this._selection.setItemSelected(this._valueToItem(value), unselected);
 111     }
 112   };
 113
 114   /** @polymerBehavior */
 115   Polymer.IronMultiSelectableBehavior = [
 116     Polymer.IronSelectableBehavior,
 117     Polymer.IronMultiSelectableBehaviorImpl
 118   ];
 119
 120 </script>