fix: update deps and remove mixin, convert to tagless

knownasilya · Sep 25, 2020 · 609a0e1 · 609a0e1
1 parent 3e58e60
commit 609a0e1
Show file tree

Hide file tree

Showing 4 changed files with 387 additions and 3,980 deletions.
diff --git a/addon/components/x-toggle-switch/component.js b/addon/components/x-toggle-switch/component.js
@@ -2,21 +2,12 @@ import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { next } from '@ember/runloop';
 import layout from './template';
-import RecognizerMixin from 'ember-gestures/mixins/recognizers';
 
-/* eslint ember/no-mixins: 0 */
-export default Component.extend(RecognizerMixin, {
+export default Component.extend({
   layout,
-  tagName: 'span',
-  classNames: ['x-toggle-container'],
-  classNameBindings: [
-    'size',
-    'disabled:x-toggle-container-disabled',
-    'value:x-toggle-container-checked',
-  ],
+  tagName: '',
 
   labelDisabled: false,
-  recognizers: 'pan',
 
   effectiveForId: computed('forId', 'labelDisabled', function () {
     return this.labelDisabled ? null : this.forId;
@@ -28,32 +19,34 @@ export default Component.extend(RecognizerMixin, {
     return `x-toggle-${theme}`;
   }),
 
-  keyPress(event) {
-    // spacebar: 32
-    if (event.which === 32) {
-      let value = this.value;
-
-      this.sendToggle(!value);
-      event.preventDefault();
-    }
-  },
-
-  panRight() {
-    if (this.disabled) {
-      return;
-    }
-
-    this.sendToggle(true);
-    this._disableLabelUntilMouseUp();
-  },
-
-  panLeft() {
-    if (this.disabled) {
-      return;
-    }
-
-    this.sendToggle(false);
-    this._disableLabelUntilMouseUp();
+  actions: {
+    keyPress(event) {
+      // spacebar: 32
+      if (event.which === 32) {
+        let value = this.value;
+
+        this.sendToggle(!value);
+        event.preventDefault();
+      }
+    },
+
+    panRight() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.sendToggle(true);
+      this._disableLabelUntilMouseUp();
+    },
+
+    panLeft() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.sendToggle(false);
+      this._disableLabelUntilMouseUp();
+    },
   },
 
   willDestroyElement() {

diff --git a/addon/components/x-toggle-switch/template.hbs b/addon/components/x-toggle-switch/template.hbs
@@ -1,22 +1,39 @@
-<input
-  class='x-toggle'
-  type='checkbox'
-  checked={{this.toggled}}
-  disabled={{this.disabled}}
-  id={{this.forId}}
-  name={{this.name}}
-  {{on 'change' (action this.sendToggle value='target.checked')}}
+<span
+  class="x-toggle-container
+    {{this.size}}
+    {{if this.disabled 'x-toggle-container-disabled'}}
+    {{if this.value 'x-toggle-container-checked'}}
+  "
+  {{recognize-gesture 'pan'}}
+  {{on 'panleft' (action 'panLeft')}}
+  {{on 'panright' (action 'panRight')}}
+  ...attributes
 >
+  <input
+    class='x-toggle'
+    type='checkbox'
+    checked={{this.toggled}}
+    disabled={{this.disabled}}
+    id={{this.forId}}
+    name={{this.name}}
+    {{on 'keypress' (action 'keyPress')}} 
+    {{on 'change' (action this.sendToggle value='target.checked')}}
+  />
 
-<label for={{this.effectiveForId}}>
-  <div
-    id='x-toggle-visual-{{this.forId}}'
-    role='checkbox'
-    class='x-toggle-btn {{this.themeClass}} {{this.size}}{{if this.disabled ' x-toggle-disabled'}}'
-    aria-owns={{this.forId}}
-    aria-checked={{this.toggled}}
-    data-tg-on={{this.onLabel}}
-    data-tg-off={{this.offLabel}}
-  >
-  </div>
-</label>
+  <label for={{this.effectiveForId}}>
+    <div
+      id="x-toggle-visual-{{this.forId}}"
+      role='checkbox'
+      class="x-toggle-btn
+        {{this.themeClass}}
+        {{this.size}}
+        {{if this.disabled ' x-toggle-disabled'}}
+      "
+      aria-owns={{this.forId}}
+      aria-checked={{this.toggled}}
+      data-tg-on={{this.onLabel}}
+      data-tg-off={{this.offLabel}}
+    >
+    </div>
+  </label>
+</span>