fix: class syntax and tagless all the way

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

Hide file tree

Showing 7 changed files with 1,685 additions and 443 deletions.
diff --git a/addon/components/x-toggle-label/component.js b/addon/components/x-toggle-label/component.js
@@ -1,30 +1,33 @@
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { action, computed } from '@ember/object';
 import { readOnly } from '@ember/object/computed';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import layout from './template';
 
-export default Component.extend({
-  layout,
-  tagName: '',
-  for: readOnly('switchId'),
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class XToggleLabel extends Component {
+  @readOnly('switchId')
+  for;
 
-  labelType: computed('type', function () {
+  @computed('type')
+  get labelType() {
     let type = this.type;
 
     return `${type}-label`;
-  }),
+  }
 
-  type: computed('value', {
-    get() {
-      return this.value ? 'on' : 'off';
-    },
-  }),
+  @computed('value')
+  get type() {
+    return this.value ? 'on' : 'off';
+  }
 
-  actions: {
-    clickLabel(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      this.sendToggle(this.value);
-    },
-  },
-});
+  @action
+  clickLabel(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    this.sendToggle(this.value);
+  }
+}
diff --git a/addon/components/x-toggle-switch/component.js b/addon/components/x-toggle-switch/component.js
@@ -1,58 +1,63 @@
+import classic from 'ember-classic-decorator';
+import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { action, computed } from '@ember/object';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import { next } from '@ember/runloop';
 import layout from './template';
 
-export default Component.extend({
-  layout,
-  tagName: '',
+@classic
+@templateLayout(layout)
+@tagName('')
+export default class XToggleSwitch extends Component {
+  labelDisabled = false;
 
-  labelDisabled: false,
-
-  effectiveForId: computed('forId', 'labelDisabled', function () {
+  @computed('forId', 'labelDisabled')
+  get effectiveForId() {
     return this.labelDisabled ? null : this.forId;
-  }),
+  }
 
-  themeClass: computed('theme', function () {
+  @computed('theme')
+  get themeClass() {
     let theme = this.theme || 'default';
 
     return `x-toggle-${theme}`;
-  }),
-
-  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();
-    },
-  },
+  }
+
+  @action
+  spacebarToggle(event) {
+    // spacebar: 32
+    if (event.which === 32) {
+      let value = this.value;
+
+      this.sendToggle(!value);
+      event.preventDefault();
+    }
+  }
+
+  @action
+  handlePanRight() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.sendToggle(true);
+    this._disableLabelUntilMouseUp();
+  }
+
+  @action
+  handlePanLeft() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.sendToggle(false);
+    this._disableLabelUntilMouseUp();
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
     this._removeListener();
-  },
+  }
 
   /*
     When you pan with a mouse and release the mouse button over the <label>
@@ -84,7 +89,7 @@ export default Component.extend({
     });
 
     document.addEventListener('mouseup', _listener);
-  },
+  }
 
   _removeListener() {
     const _listener = this._listener;
@@ -93,5 +98,5 @@ export default Component.extend({
       document.removeEventListener('mouseup', _listener);
       this.set('_listener', null);
     }
-  },
-});
+  }
+}
diff --git a/addon/components/x-toggle-switch/template.hbs b/addon/components/x-toggle-switch/template.hbs
@@ -1,38 +1,38 @@
 <span
   class="x-toggle-container
-    {{this.size}}
-    {{if this.disabled 'x-toggle-container-disabled'}}
-    {{if this.value 'x-toggle-container-checked'}}
+    {{@size}}
+    {{if @disabled 'x-toggle-container-disabled'}}
+    {{if @value 'x-toggle-container-checked'}}
   "
-  {{recognize-gesture 'pan'}}
-  {{on 'panleft' (action 'panLeft')}}
-  {{on 'panright' (action 'panRight')}}
   ...attributes
+  {{recognize-gesture 'pan'}}
+  {{on 'panleft' this.handlePanLeft}}
+  {{on 'panright' this.handlePanRight}}
 >
   <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')}}
+    checked={{@toggled}}
+    disabled={{@disabled}}
+    id={{@forId}}
+    name={{@name}}
+    {{on 'keypress' this.spacebarToggle}} 
+    {{on 'change' (action @sendToggle value='target.checked')}}
   />
 
   <label for={{this.effectiveForId}}>
     <div
-      id="x-toggle-visual-{{this.forId}}"
+      id="x-toggle-visual-{{@forId}}"
       role='checkbox'
       class="x-toggle-btn
         {{this.themeClass}}
-        {{this.size}}
-        {{if this.disabled ' x-toggle-disabled'}}
+        {{@size}}
+        {{if @disabled ' x-toggle-disabled'}}
       "
-      aria-owns={{this.forId}}
-      aria-checked={{this.toggled}}
-      data-tg-on={{this.onLabel}}
-      data-tg-off={{this.offLabel}}
+      aria-owns={{@forId}}
+      aria-checked={{@toggled}}
+      data-tg-on={{@onLabel}}
+      data-tg-off={{@offLabel}}
     >
     </div>
   </label>

diff --git a/addon/components/x-toggle/component.js b/addon/components/x-toggle/component.js
@@ -1,46 +1,29 @@
+import classic from 'ember-classic-decorator';
+import { layout as templateLayout } from '@ember-decorators/component';
+import { action, computed } from '@ember/object';
 import { readOnly } from '@ember/object/computed';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
 import layout from './template';
 
-export default Component.extend({
-  layout,
-  classNames: ['x-toggle-component'],
-  classNameBindings: ['focused:x-toggle-focused'],
-  attributeBindings: ['tabindex'],
-
-  tabindex: '0',
-  focused: false,
-  disabled: false,
-  name: 'default',
-  onLabel: 'On',
-  offLabel: 'Off',
-  value: false,
+@classic
+@templateLayout(layout)
+export default class XToggle extends Component {
+  tabindex = '0';
+  focused = false;
+  disabled = false;
+  name = 'default';
+  onLabel = 'On';
+  offLabel = 'Off';
+  value = false;
 
   // private
-  toggled: readOnly('value'),
+  @readOnly('value')
+  toggled;
 
-  forId: computed('elementId', function () {
+  @computed('elementId')
+  get forId() {
     return this.elementId + '-x-toggle';
-  }),
-
-  keyPress(event) {
-    // spacebar: 32
-    if (event.which === 32) {
-      let value = this.value;
-
-      this.toggleSwitch(!value);
-      event.preventDefault();
-    }
-  },
-
-  focusIn() {
-    this.set('focused', true);
-  },
-
-  focusOut() {
-    this.set('focused', false);
-  },
+  }
 
   toggleSwitch(value) {
     let onToggle = this.onToggle;
@@ -61,11 +44,20 @@ export default Component.extend({
         checkbox.checked = newValue;
       }
     }
-  },
+  }
+
+  @action
+  sendToggle(value) {
+    this.toggleSwitch(value);
+  }
 
-  actions: {
-    sendToggle(value) {
-      this.toggleSwitch(value);
-    },
-  },
-});
+  @action
+  handleFocusIn() {
+    this.set('focused', true);
+  }
+
+  @action
+  handleFocusOut() {
+    this.set('focused', false);
+  }
+}