fix: the toggle switch explicit on and off (#67)

* Simplify clicks, no idea why click in label does not fire * Fix explicit on and off toggles
knownasilya · Apr 7, 2017 · 283946f · 283946f
1 parent dbbf670
commit 283946f
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 59 deletions.
diff --git a/addon/components/x-toggle-label/component.js b/addon/components/x-toggle-label/component.js
@@ -5,23 +5,22 @@ import layout from './template';
 export default Component.extend({
   layout,
   tagName: 'label',
-  attributeBindings: ['for', 'id'],
+  attributeBindings: ['for'],
   classNames: ['toggle-text', 'toggle-prefix'],
   classNameBindings: ['labelType'],
   for: computed.readOnly('switchId'),
-  id: computed('switchId', 'type', function() {
-    const switchId = this.get('switchId');
-    const type = this.get('type');
-    return `${type}-label-${switchId}`;
-  }),
   isVisible: computed.readOnly('show'),
   labelType: computed('type', function() {
     return `${this.get('type')}-label`;
   }),
-
   type: computed('value', {
     get() {
       return this.get('value') ? 'on' : 'off';
     }
-  })
+  }),
+  click(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.sendToggle(this.get('value'));
+  }
 });
diff --git a/addon/components/x-toggle-switch/component.js b/addon/components/x-toggle-switch/component.js
@@ -10,5 +10,14 @@ export default Component.extend({
 
   themeClass: computed('theme', function() {
     return `x-toggle-${this.get('theme') || 'default'}`;
-  })
+  }),
+
+  click(e) {
+    const value = this.get('value');
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    this.sendToggle(!value);
+  }
 });
diff --git a/addon/components/x-toggle-switch/template.hbs b/addon/components/x-toggle-switch/template.hbs
@@ -4,12 +4,11 @@
   class='x-toggle'
   id={{forId}}
   name={{name}}
-  onchange={{action onChangeValue value='target.checked'}}
+  onchange={{action sendToggle value='target.checked'}}
   type='checkbox'>
 
 <div id="x-toggle-visual-{{forId}}"
   class="x-toggle-btn {{themeClass}} {{size}}{{if disabled ' x-toggle-disabled'}}"
-  onclick={{action onClick}}
   data-tg-on={{onLabel}}
   data-tg-off={{offLabel}}
   for={{forId}}

diff --git a/addon/components/x-toggle/component.js b/addon/components/x-toggle/component.js
@@ -15,30 +15,17 @@ export default Component.extend({
   // private
   toggled: computed.readOnly('value'),
 
-  forId: computed(function () {
+  forId: computed(function() {
     return this.get('elementId') + '-x-toggle';
   }),
 
   actions: {
-    onClick(e) {
-      let value = this.get('value');
+    sendToggle(value) {
+      let onToggle = this.get('onToggle');
 
-      e.stopPropagation();
-      e.preventDefault();
-
-      this.sendToggle(!value);
-    },
-
-    setToValue(value) {
-      this.sendToggle(value);
-    }
-  },
-
-  sendToggle(value) {
-    let onToggle = this.get('onToggle');
-
-    if (typeof onToggle === 'function') {
-      onToggle(value);
+      if (typeof onToggle === 'function') {
+        onToggle(value);
+      }
     }
   }
 });
diff --git a/addon/components/x-toggle/template.hbs b/addon/components/x-toggle/template.hbs
@@ -1,49 +1,53 @@
 {{#if hasBlock}}
   {{yield (hash
-    switch=(component 'x-toggle-switch' onClick=(action 'onClick')
-      onChangeValue=(action 'setToValue')
-      value=value
-      theme=theme
-      size=size
+    switch=(component 'x-toggle-switch'
       disabled=disabled
-      toggled=toggled
+      forId=forId
       name=name
       offLabel=offLabel
       onLabel=onLabel
-      forId=forId)
+      size=size
+      sendToggle=(action 'sendToggle')
+      theme=theme
+      toggled=toggled
+      value=value)
     offLabel=(component 'x-toggle-label'
       label=offLabel
-      value=false
+      sendToggle=(action 'sendToggle')
       show=showLabels
-      switchId=forId)
+      switchId=forId
+      value=false)
     onLabel=(component 'x-toggle-label'
       label=onLabel
-      value=true
+      sendToggle=(action 'sendToggle')
       show=showLabels
-      switchId=forId)
+      switchId=forId
+      value=true)
   )}}
 {{else}}
   {{x-toggle-label
     label=offLabel
-    value=false
+    sendToggle=(action 'sendToggle')
     show=showLabels
-    switchId=forId}}
+    switchId=forId
+    value=false}}
 
-  {{x-toggle-switch onClick=(action 'onClick')
-    onChangeValue=(action 'setToValue')
-    value=value
-    theme=theme
-    size=size
+  {{x-toggle-switch
     disabled=disabled
-    toggled=toggled
+    forId=forId
     name=name
     offLabel=offLabel
     onLabel=onLabel
-    forId=forId}}
+    sendToggle=(action 'sendToggle')
+    size=size
+    theme=theme
+    toggled=toggled
+    value=value}}
 
   {{x-toggle-label
     label=onLabel
-    value=true
+    sendToggle=(action 'sendToggle')
     show=showLabels
-    switchId=forId}}
+    switchId=forId
+    value=true}}
 {{/if}}
diff --git a/tests/integration/components/x-toggle-label/component-test.js b/tests/integration/components/x-toggle-label/component-test.js
@@ -6,16 +6,14 @@ moduleForComponent('x-toggle-label', 'Integration | Component | x toggle label',
 });
 
 test('it renders', function(assert) {
-  this.set('onClick', () => {});
-  this.render(hbs`{{x-toggle-label onClick=onClick label='test' value=true switchId='test' show=true}}`);
+  this.render(hbs`{{x-toggle-label label='test' value=true switchId='test' show=true}}`);
 
   assert.equal(this.$().text().trim(), 'test');
 });
 
 test('it renders in block form', function(assert) {
-  this.set('onClick', () => {});
   this.render(hbs`
-    {{#x-toggle-label onClick=onClick label='test' value=true switchId='test' show=true as |value|}}
+    {{#x-toggle-label label='test' value=true switchId='test' show=true as |value|}}
       hi {{value}}
     {{/x-toggle-label}}
   `);

diff --git a/tests/integration/components/x-toggle-switch/component-test.js b/tests/integration/components/x-toggle-switch/component-test.js
@@ -6,9 +6,8 @@ moduleForComponent('x-toggle-switch', 'Integration | Component | x toggle switch
 });
 
 test('it renders', function(assert) {
-  this.set('onClick', () => {});
-  this.set('onChangeValue', () => {});
-  this.render(hbs`{{x-toggle-switch onClick=(action onClick) onChangeValue=(action onChangeValue)}}`);
+  this.set('sendToggle', () => {});
+  this.render(hbs`{{x-toggle-switch sendToggle=(action sendToggle)}}`);
 
   assert.equal(this.$().text().trim(), '');
 });
diff --git a/tests/integration/components/x-toggle/component-test.js b/tests/integration/components/x-toggle/component-test.js
@@ -71,6 +71,9 @@ test('clicking component labels triggers onToggle action', function(assert) {
 
   this.$('.off-label').click();
   assert.equal(this.get('value'), false, 'clicking off label toggles value to false');
+
+  this.$('.off-label').click();
+  assert.equal(this.get('value'), false, 'clicking off label again, value stays false');
 });
 
 if (emberVersionGTE(2,0)) {