Uprev to Polymer 0.2.1

third_party/polymer/polymer-selector/polymer-selector.html

 <!--
 Copyright 2013 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 -->
 <!--
 /**
  * @module Polymer Elements
  */
 /**
@@ skipping 20 matching lines @@
  *       }
  *     </style>
  *     ...
  *     <polymer-selector>
  *       <div class="item">Item 1</div>
  *       <div class="item">Item 2</div>
  *       <div class="item">Item 3</div>
  *     </polymer-selector>
  *
  * @class polymer-selector
+ * @status stable
  */
 /**
  * Fired when an item's selection state is changed. This event is fired both
  * when an item is selected or deselected. The `isSelected` detail property
  * contains the selection state.
  * 
  * @event polymer-select
  * @param {Object} detail
  *   @param {boolean} detail.isSelected true for selection and false for deselection
  *   @param {Object} detail.item the item element
  */
 /**
  * Fired when an item element is tapped.
  * 
  * @event polymer-activate
  * @param {Object} detail
  *   @param {Object} detail.item the item element
  */
 -->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../polymer-selection/polymer-selection.html">
 
 <polymer-element name="polymer-selector"
-    attributes="selected multi valueattr selectedClass selectedProperty selectedItem selectedModel selectedIndex notap target itemsSelector activateEvent">
+    attributes="selected multi valueattr selectedClass selectedProperty selectedAttribute selectedItem selectedModel selectedIndex notap target itemsSelector activateEvent">
   <template>
     <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="{{selectionSelect}}"></polymer-selection>
     <content id="items" select="*"></content>
   </template>
   <script>
     Polymer('polymer-selector', {
       /**
        * Gets or sets the selected element.  Default to use the index
        * of the item element.
        *
@@ skipping 48 matching lines @@
        * @type string
        * @default 'polymer-selected'
        */
       selectedClass: 'polymer-selected',
       /**
        * Specifies the property to be used to set on the selected element
        * to indicate its active state.
        *
        * @attribute selectedProperty
        * @type string
+       * @default ''
+       */
+      selectedProperty: '',
+      /**
+       * Specifies the property to be used to set on the selected element
+       * to indicate its active state.
+       *
+       * @attribute selectedProperty
+       * @type string
        * @default 'active'
        */
-      selectedProperty: 'active',
+      selectedAttribute: 'active',
       /**
        * Returns the currently selected element. In multi-selection this returns
        * an array of selected elements.
        * 
        * @attribute selectedItem
        * @type Object
        * @default null
        */
       selectedItem: null,
       /**
@@ skipping 155 matching lines @@
           this.applySelection(detail.item, detail.isSelected);
         }
       },
       applySelection: function(item, isSelected) {
         if (this.selectedClass) {
           item.classList.toggle(this.selectedClass, isSelected);
         }
         if (this.selectedProperty) {
           item[this.selectedProperty] = isSelected;
         }
+        if (this.selectedAttribute && item.setAttribute) {
+          if (isSelected) {
+            item.setAttribute(this.selectedAttribute, '');
+          } else {
+            item.removeAttribute(this.selectedAttribute);
+          }
+        }
       },
       // event fired from host
       activateHandler: function(e) {
         if (!this.notap) {
           var i = this.findDistributedTarget(e.target, this.items);
           if (i >= 0) {
             var item = this.items[i];
             var s = this.valueForNode(item) || i;
             if (this.multi) {
               if (this.selected) {
@@ skipping 24 matching lines @@
           var i = Array.prototype.indexOf.call(nodes, target);
           if (i >= 0) {
             return i;
           }
           target = target.parentNode;
         }
       }
     });
   </script>
 </polymer-element>