OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. |
| 5 --> |
| 6 <!-- |
| 7 /** |
| 8 * @module Polymer Elements |
| 9 */ |
| 10 --> |
| 11 <!-- |
| 12 /** |
| 13 * The polymer-selection element is used to manage selection state. It has no |
| 14 * visual appearance and is typically used in conjuneciton with another element. |
| 15 * For example, <a href="polymer-selector.html">polymer-selector</a> |
| 16 * use a polymer-selection to manage selection. |
| 17 * |
| 18 * To mark an item as selected, call the select(item) method on |
| 19 * polymer-selection. Notice that the item itself is an argument to this method. |
| 20 * The polymer-selection element manages selection state for any given set of |
| 21 * items. When an item is selected, the `polymer-select` event is fired. |
| 22 * The attribute "multi" indicates if multiple items can be selected at once. |
| 23 * |
| 24 * Example: |
| 25 * |
| 26 * <polymer-element name="selection-example"> |
| 27 * <template> |
| 28 * <style> |
| 29 * ::-webkit-distributed(> .selected) { |
| 30 * font-weight: bold; |
| 31 * font-style: italic; |
| 32 * } |
| 33 * </style> |
| 34 * <ul on-tap="{{itemTapAction}}"> |
| 35 * <content></content> |
| 36 * </ul> |
| 37 * <polymer-selection id="selection" multi on-polymer-select="{{selectA
ction}}"></polymer-selection> |
| 38 * </template> |
| 39 * <script> |
| 40 * Polymer('selection-example', { |
| 41 * itemTapAction: function(e) { |
| 42 * this.$.selection.select(e.target); |
| 43 * }, |
| 44 * selectAction: function(e, detail) { |
| 45 * detail.item.classList.toggle('selected', detail.isSelected); |
| 46 * } |
| 47 * }); |
| 48 * </script> |
| 49 * </polymer-element> |
| 50 * |
| 51 * <selection-example> |
| 52 * <li>Red</li> |
| 53 * <li>Green</li> |
| 54 * <li>Blue</li> |
| 55 * </selection-example> |
| 56 * |
| 57 * @class polymer-selection |
| 58 */ |
| 59 /** |
| 60 * Fired when an item's selection state is changed. This event is fired both |
| 61 * when an item is selected or deselected. The `isSelected` detail property |
| 62 * contains the selection state. |
| 63 * |
| 64 * @event polymer-select |
| 65 * @param {Object} detail |
| 66 * @param {boolean} detail.isSelected true for selection and false for deselec
tion |
| 67 * @param {Object} detail.item the item element |
| 68 */ |
| 69 --> |
| 70 <polymer-element name="polymer-selection" attributes="multi"> |
| 71 <template> |
| 72 <style> |
| 73 :host { |
| 74 display: none !important; |
| 75 } |
| 76 </style> |
| 77 </template> |
| 78 <script> |
| 79 Polymer('polymer-selection', { |
| 80 /** |
| 81 * If true, multiple selections are allowed. |
| 82 * |
| 83 * @attribute multi |
| 84 * @type boolean |
| 85 * @default false |
| 86 */ |
| 87 multi: false, |
| 88 ready: function() { |
| 89 this.clear(); |
| 90 }, |
| 91 clear: function() { |
| 92 this.selection = []; |
| 93 }, |
| 94 /** |
| 95 * Retrieves the selected item(s). |
| 96 * @method getSelection |
| 97 * @returns Returns the selected item(s). If the multi property is true, |
| 98 * getSelection will return an array, otherwise it will return |
| 99 * the selected item or undefined if there is no selection. |
| 100 */ |
| 101 getSelection: function() { |
| 102 return this.multi ? this.selection : this.selection[0]; |
| 103 }, |
| 104 /** |
| 105 * Indicates if a given item is selected. |
| 106 * @method isSelected |
| 107 * @param {any} item The item whose selection state should be checked. |
| 108 * @returns Returns true if `item` is selected. |
| 109 */ |
| 110 isSelected: function(item) { |
| 111 return this.selection.indexOf(item) >= 0; |
| 112 }, |
| 113 setItemSelected: function(item, isSelected) { |
| 114 if (item !== undefined && item !== null) { |
| 115 if (isSelected) { |
| 116 this.selection.push(item); |
| 117 } else { |
| 118 var i = this.selection.indexOf(item); |
| 119 if (i >= 0) { |
| 120 this.selection.splice(i, 1); |
| 121 } |
| 122 } |
| 123 this.fire("polymer-select", {isSelected: isSelected, item: item}); |
| 124 } |
| 125 }, |
| 126 /** |
| 127 * Set the selection state for a given `item`. If the multi property |
| 128 * is true, then the selected state of `item` will be toggled; otherwise |
| 129 * the `item` will be selected. |
| 130 * @method select |
| 131 * @param {any} item: The item to select. |
| 132 */ |
| 133 select: function(item) { |
| 134 if (this.multi) { |
| 135 this.toggle(item); |
| 136 } else if (this.getSelection() !== item) { |
| 137 this.setItemSelected(this.getSelection(), false); |
| 138 this.setItemSelected(item, true); |
| 139 } |
| 140 }, |
| 141 /** |
| 142 * Toggles the selection state for `item`. |
| 143 * @method toggle |
| 144 * @param {any} item: The item to toggle. |
| 145 */ |
| 146 toggle: function(item) { |
| 147 this.setItemSelected(item, !this.isSelected(item)); |
| 148 } |
| 149 }); |
| 150 </script> |
| 151 </polymer-element> |
OLD | NEW |