Alphabetize

Author: cletusw

cw-options-list.html

@@ -34,7 +34,7 @@
     <!-- Wrapper div necessary for sibling CSS selector to work for now -->
     <div>
       <template id="optionsTemplate" repeat="{{option in options | filter}}">
-        <li class="option {{ { selected: option.selected } | tokenList }}" on-tap="{{onOptionTap}}" highlighted?="{{option === highlighted}}" on-mouseenter="{{onMouseEnter}}">{{option.text}}</li>
+        <li class="option {{ { selected: option.selected } | tokenList }}" highlighted?="{{option === highlighted}}" on-mouseenter="{{onMouseEnter}}" on-tap="{{onOptionTap}}">{{option.text}}</li>
       </template>
       <li class="option no-options">No results for "{{filterText}}"</li>
     </div>
@@ -114,6 +114,20 @@
         }
       },
 
+      onMouseEnter: function(event, detail, sender) {
+        var model = sender.templateInstance.model.option;
+        if (model.selected === false) {
+          this.highlighted = model;
+        }
+      },
+
+      onOptionTap: function(event, detail, sender) {
+        var model = sender.templateInstance.model.option;
+        if (model.selected === false) {
+          this.select(model);
+        }
+      },
+
       ready: function() {
         this.selected = [];
       },
@@ -128,20 +142,6 @@
         if (this.highlighted && !this.hidden) {
           this.select(this.highlighted);
         }
-      },
-
-      onMouseEnter: function(event, detail, sender) {
-        var model = sender.templateInstance.model.option;
-        if (model.selected === false) {
-          this.highlighted = model;
-        }
-      },
-
-      onOptionTap: function(event, detail, sender) {
-        var model = sender.templateInstance.model.option;
-        if (model.selected === false) {
-          this.select(model);
-        }
       }
 
     });

cw-token-field.html

@@ -18,7 +18,7 @@
 @element cw-token-field
 @homepage http://cletusw.github.io/cw-token-field
 -->
-<polymer-element name="cw-token-field" tabindex="0" on-tap="{{onTap}}" on-focus="{{onFocus}}" on-blur="{{onBlur}}">
+<polymer-element name="cw-token-field" on-blur="{{onBlur}}" on-focus="{{onFocus}}" on-tap="{{onTap}}" tabindex="0">
 
   <template>
 
@@ -27,8 +27,8 @@
     <template repeat="{{selected}}">
       <span class="selected">{{text}} <span class="unselect" on-tap="{{unselect}}">x</span></span>
     </template>
-    <input is="cw-autosize-input" id="filter" type="text" class="{{ { 'maximize-width': selected.length === 0 } | tokenList }}" inputValue="{{filterText}}" placeholder="{{_placeholder}}" on-input="{{onInput}}" on-keydown="{{onKeydown}}">
-    <cw-options-list id="optionsList" filterText="{{filterText}}" options="{{options}}" field="text" selected="{{selected}}" hidden?="{{!isOptionsListVisible}}" on-tap="{{onOptionsTap}}"></cw-options-list>
+    <input class="{{ { 'maximize-width': selected.length === 0 } | tokenList }}" id="filter" inputValue="{{filterText}}" is="cw-autosize-input" on-input="{{onInput}}" on-keydown="{{onKeydown}}" placeholder="{{_placeholder}}" type="text">
+    <cw-options-list field="text" filterText="{{filterText}}" hidden?="{{!isOptionsListVisible}}" id="optionsList" on-tap="{{onOptionsTap}}" options="{{options}}" selected="{{selected}}"></cw-options-list>
 
   </template>