Work on making iron-selector DDAU. 🤠

dunnkers · Jan 2, 2017 · 4d01c4b · 4d01c4b
1 parent 178a791
commit 4d01c4b
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 27 deletions.
diff --git a/addon/components/iron-selector.js b/addon/components/iron-selector.js
@@ -4,37 +4,57 @@ const { computed } = Ember;
 let IronSelector = Ember.Component.extend({
   attributeBindings: [
     'selected',
-    'role'
+    'role',
+    'attrForSelected',
+    'multi'
   ],
 
   selectedItem: computed({
-    get() {
-      Ember.get(this, 'selectedItem');
+    get(key) {
+      // return Ember.get(this, key);
     },
 
     set(key, value) {
-      if (!!this.element) {
-        this.setBoundValue(value);
+      // if (!!this.element) {
+      //   this.setBoundValue(value);
+      // }
+      let idx = this.getItemIndex();
+
+      if (this.getSelectedIndex() !== idx && idx !== -1) {
+        Ember.set(this, 'selected', idx);
       }
 
       return value;
     }
   }),
 
-  setBoundValue(value) {
-    let selected = this.getSelectedIndex();
-    let itemIndex = this.getItemIndex(value);
-
-    if (selected !== itemIndex) {
-      this.element.selectIndex(itemIndex);
+  // selected: computed({
+  //   get(key) {
+  //     return Ember.get(this, `_${key}`);
+  //   },
+  //
+  //   set(key, value) {
+  //     Ember.set(this, `_${key}`, value);
+  //   }
+  // }),
+  //
+  // setBoundValue(value) {
+  //   let selected = this.getSelectedIndex();
+  //   let itemIndex = this.getItemIndex(value);
+  //
+  //   if (selected !== itemIndex) {
+  //     this.element.selectIndex(itemIndex);
+  //   }
+  // },
+  //
+  getItemIndex() {
+    if (!!this.get('items') && !!this.get('selectedItem')) {
+      return this.get('items').indexOf(this.get('selectedItem'));
+    } else {
+      return -1;
     }
   },
 
-  getItemIndex(item) {
-    // FIXME this might prevent functionality when not using items positional.
-    return this.get('items').indexOf(item);
-  },
-
   getSelectedIndex() {
     let el = this.element;
 
@@ -62,8 +82,10 @@ let IronSelector = Ember.Component.extend({
       this.set('selectedItem', selectedItem);
     });
 
-    if (!!this.get('selectedItem')) {
-      this.setBoundValue(this.get('selectedItem'));
+    // initial selection
+    if (!!this.get('items') && !!this.get('selectedItem')) {
+      let idx = this.get('items').indexOf(this.get('selectedItem'));
+      Ember.set(this, 'selected', idx);
     }
   }
 });

diff --git a/tests/dummy/app/components/snippets/paper-listbox.js b/tests/dummy/app/components/snippets/paper-listbox.js
@@ -1,6 +1,10 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
+  // BEGIN-SNIPPET block-usage
   items: [ 'Dog', 'Cat', 'Elephant', 'Giraffe' ],
-  blockSelected: 'Cat'
+  blockSelected: 'Cat',
+  // END-SNIPPET block-usage
+
+  selectedAnimal: 2
 });
diff --git a/tests/dummy/app/templates/components/snippets/paper-listbox.hbs b/tests/dummy/app/templates/components/snippets/paper-listbox.hbs
@@ -1,14 +1,43 @@
-Block usage:
-{{#paper-listbox items selectedItem=blockSelected as |item|}}
-  <paper-item>{{item}}</paper-item>
-{{/paper-listbox}}
-<p>
-  Selected = {{blockSelected}}
-</p>
+<p>Block usage:</p>
+
+{{#element-example name="block-usage" as |ex|}}
+  {{#ex.code}}
+    {{!-- BEGIN-SNIPPET block-usage --}}
+    {{#paper-listbox items selectedItem=blockSelected as |item|}}
+      <paper-item>{{item}}</paper-item>
+    {{/paper-listbox}}
+    {{!-- END-SNIPPET --}}
+  {{/ex.code}}
+
+  {{#ex.result}}
+    {{!-- BEGIN-SNIPPET block-usage-result --}}
+    Selected = {{blockSelected}}
+    {{!-- END-SNIPPET --}}
+  {{/ex.result}}
+{{/element-example}}
+
+<p>Another listbox to prove the values being bound.</p>
+
 {{#paper-listbox items selectedItem=blockSelected as |item|}}
   <paper-item>{{item}}</paper-item>
 {{/paper-listbox}}
 
+<p>Multi select:</p>
+
+{{#element-example name="multi" as |ex|}}
+  {{#ex.code}}
+    {{!-- BEGIN-SNIPPET multi --}}
+    {{paper-listbox items selectedItem=multiSelected multi=true}}
+    {{!-- END-SNIPPET --}}
+  {{/ex.code}}
+
+  {{#ex.result}}
+    {{!-- BEGIN-SNIPPET multi-result --}}
+    Selected = {{multiSelected}}
+    {{!-- END-SNIPPET --}}
+  {{/ex.result}}
+{{/element-example}}
+
 Non block usage:
 {{paper-listbox items selectedItem=nonBlockSelected}}
 <p>
@@ -24,3 +53,20 @@ Without a positional param:
 <p>
   Selected = {{noPositionalSelected}}
 </p>
+
+With other attribute:
+{{#paper-listbox selectedItem=withNameAttribute selected="b"
+  attrForSelected="name"}}
+  <paper-item name="a">Item a</paper-item>
+  <paper-item name="b">Item b</paper-item>
+  <paper-item name="c">Item c</paper-item>
+{{/paper-listbox}}
+<p>
+  Selected = {{withNameAttribute}}
+</p>
+
+Using just index:
+{{paper-listbox items selected=selectedAnimal}}
+<p>
+  Selected = {{selectedAnimal}}
+</p>
diff --git a/tests/dummy/app/templates/components/snippets/paper-toggle-button.hbs b/tests/dummy/app/templates/components/snippets/paper-toggle-button.hbs
@@ -1,7 +1,17 @@
-{{#paper-toggle-button checked=toggled}}
+{{#paper-toggle-button update=(action (mut toggled))}}
 Toggle
 {{/paper-toggle-button}}
 
 <p>
   Toggled: {{toggled}}
 </p>
+
+<p>We could also use a traditional two-way binding.</p>
+
+{{#paper-toggle-button checked=onoff}}
+On/Off
+{{/paper-toggle-button}}
+
+<p>
+  On: {{onoff}}
+</p>