| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. | 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style | 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. | 4 license that can be found in the LICENSE file. |
| 5 --> | 5 --> |
| 6 <!-- | 6 <!-- |
| 7 /** | 7 /** |
| 8 * @module Polymer Elements | 8 * @module Polymer Elements |
| 9 */ | 9 */ |
| 10 --> | 10 --> |
| 11 <!-- | 11 <!-- |
| 12 /** | 12 /** |
| 13 * The polymer-selection element is used to manage selection state. It has no | 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. | 14 * visual appearance and is typically used in conjuneciton with another element. |
| 15 * For example, <a href="polymer-selector.html">polymer-selector</a> | 15 * For example, <a href="polymer-selector.html">polymer-selector</a> |
| 16 * use a polymer-selection to manage selection. | 16 * use a polymer-selection to manage selection. |
| 17 * | 17 * |
| 18 * To mark an item as selected, call the select(item) method on | 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. | 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 | 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. | 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. | 22 * The attribute "multi" indicates if multiple items can be selected at once. |
| 23 * | 23 * |
| 24 * Example: | 24 * Example: |
| 25 * | 25 * |
| 26 * <polymer-element name="selection-example"> | 26 * <polymer-element name="selection-example"> |
| 27 * <template> | 27 * <template> |
| 28 * <style> | 28 * <style> |
| 29 * ::-webkit-distributed(> .selected) { | 29 * ::-webkit-distributed(> .selected) { |
| 30 * font-weight: bold; | 30 * font-weight: bold; |
| 31 * font-style: italic; | 31 * font-style: italic; |
| 32 * } | 32 * } |
| 33 * </style> | 33 * </style> |
| (...skipping 19 matching lines...) Expand all Loading... |
| 53 * <li>Green</li> | 53 * <li>Green</li> |
| 54 * <li>Blue</li> | 54 * <li>Blue</li> |
| 55 * </selection-example> | 55 * </selection-example> |
| 56 * | 56 * |
| 57 * @class polymer-selection | 57 * @class polymer-selection |
| 58 */ | 58 */ |
| 59 /** | 59 /** |
| 60 * Fired when an item's selection state is changed. This event is fired both | 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 | 61 * when an item is selected or deselected. The `isSelected` detail property |
| 62 * contains the selection state. | 62 * contains the selection state. |
| 63 * | 63 * |
| 64 * @event polymer-select | 64 * @event polymer-select |
| 65 * @param {Object} detail | 65 * @param {Object} detail |
| 66 * @param {boolean} detail.isSelected true for selection and false for deselec
tion | 66 * @param {boolean} detail.isSelected true for selection and false for deselec
tion |
| 67 * @param {Object} detail.item the item element | 67 * @param {Object} detail.item the item element |
| 68 */ | 68 */ |
| 69 --> | 69 --> |
| 70 <link rel="import" href="../polymer/polymer.html"> |
| 71 |
| 70 <polymer-element name="polymer-selection" attributes="multi"> | 72 <polymer-element name="polymer-selection" attributes="multi"> |
| 71 <template> | 73 <template> |
| 72 <style> | 74 <style> |
| 73 :host { | 75 :host { |
| 74 display: none !important; | 76 display: none !important; |
| 75 } | 77 } |
| 76 </style> | 78 </style> |
| 77 </template> | 79 </template> |
| 78 <script> | 80 <script> |
| 79 Polymer('polymer-selection', { | 81 Polymer('polymer-selection', { |
| 80 /** | 82 /** |
| 81 * If true, multiple selections are allowed. | 83 * If true, multiple selections are allowed. |
| 82 * | 84 * |
| 83 * @attribute multi | 85 * @attribute multi |
| 84 * @type boolean | 86 * @type boolean |
| 85 * @default false | 87 * @default false |
| 86 */ | 88 */ |
| 87 multi: false, | 89 multi: false, |
| 88 ready: function() { | 90 ready: function() { |
| 89 this.clear(); | 91 this.clear(); |
| 90 }, | 92 }, |
| 91 clear: function() { | 93 clear: function() { |
| 92 this.selection = []; | 94 this.selection = []; |
| 93 }, | 95 }, |
| 94 /** | 96 /** |
| 95 * Retrieves the selected item(s). | 97 * Retrieves the selected item(s). |
| 96 * @method getSelection | 98 * @method getSelection |
| 97 * @returns Returns the selected item(s). If the multi property is true, | 99 * @returns Returns the selected item(s). If the multi property is true, |
| 98 * getSelection will return an array, otherwise it will return | 100 * getSelection will return an array, otherwise it will return |
| 99 * the selected item or undefined if there is no selection. | 101 * the selected item or undefined if there is no selection. |
| 100 */ | 102 */ |
| 101 getSelection: function() { | 103 getSelection: function() { |
| 102 return this.multi ? this.selection : this.selection[0]; | 104 return this.multi ? this.selection : this.selection[0]; |
| 103 }, | 105 }, |
| 104 /** | 106 /** |
| 105 * Indicates if a given item is selected. | 107 * Indicates if a given item is selected. |
| 106 * @method isSelected | 108 * @method isSelected |
| 107 * @param {any} item The item whose selection state should be checked. | 109 * @param {any} item The item whose selection state should be checked. |
| 108 * @returns Returns true if `item` is selected. | 110 * @returns Returns true if `item` is selected. |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 142 * Toggles the selection state for `item`. | 144 * Toggles the selection state for `item`. |
| 143 * @method toggle | 145 * @method toggle |
| 144 * @param {any} item: The item to toggle. | 146 * @param {any} item: The item to toggle. |
| 145 */ | 147 */ |
| 146 toggle: function(item) { | 148 toggle: function(item) { |
| 147 this.setItemSelected(item, !this.isSelected(item)); | 149 this.setItemSelected(item, !this.isSelected(item)); |
| 148 } | 150 } |
| 149 }); | 151 }); |
| 150 </script> | 152 </script> |
| 151 </polymer-element> | 153 </polymer-element> |
| OLD | NEW |