fix: simplify (#66)

* Ember 2.12
* Do some basic cleanup and simplification

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module'
+  },
+  extends: 'eslint:recommended',
+  env: {
+    browser: true
+  },
+  rules: {
+  }
+};

.npmignore

@@ -8,7 +8,7 @@
 .editorconfig
 .ember-cli
 .gitignore
-.jshintrc
+.eslintrc.js
 .watchmanconfig
 .travis.yml
 bower.json

addon/components/x-toggle-label/component.js

@@ -1,16 +1,27 @@
-import Ember from 'ember';
+import Component from 'ember-component';
+import computed from 'ember-computed';
 import layout from './template';
 
-const { computed } = Ember;
-
-export default Ember.Component.extend({
+export default Component.extend({
   layout,
-  tagName: '',
+  tagName: 'label',
+  attributeBindings: ['for', 'id'],
+  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() {
-      let value = this.get('value');
-      return value ? 'on' : 'off';
+      return this.get('value') ? 'on' : 'off';
     }
   })
 });

addon/components/x-toggle-label/template.hbs

@@ -1,10 +1,5 @@
-{{#if show}}
-  <label id='{{type}}-label-{{switchId}}' for={{switchId}} class="toggle-text toggle-prefix {{type}}-label"
-    onclick={{action onClick value}}>
-    {{#if hasBlock}}
-      {{yield label}}
-    {{else}}
-      {{label}}
-    {{/if}}
-  </label>
+{{#if hasBlock}}
+  {{yield label}}
+{{else}}
+  {{label}}
 {{/if}}

addon/components/x-toggle-switch/component.js

@@ -1,15 +1,14 @@
-import Ember from 'ember';
+import Component from 'ember-component';
+import computed from 'ember-computed';
 import layout from './template';
 
-const { computed } = Ember;
-
-export default Ember.Component.extend({
+export default Component.extend({
   layout,
-  tagName: '',
-
-  themeClass: computed('theme', function () {
-    var theme = this.get('theme') || 'default';
+  tagName: 'span',
+  classNames: ['x-toggle-container'],
+  classNameBindings: ['size', 'disabled:x-toggle-container-disabled', 'value:x-toggle-container-checked'],
 
-    return 'x-toggle-' + theme;
-  }),
+  themeClass: computed('theme', function() {
+    return `x-toggle-${this.get('theme') || 'default'}`;
+  })
 });

addon/components/x-toggle-switch/template.hbs

@@ -1,19 +1,18 @@
-<span class="x-toggle-container {{size}}{{if value ' x-toggle-container-checked'}}{{if disabled ' x-toggle-container-disabled'}}">
-  <input id="{{forId}}"
-    name={{name}}
-    type='checkbox'
-    checked={{toggled}}
-    changed={{action onChangeValue value='target.checked'}}
-    class='x-toggle'
-    disabled={{disabled}}>
+<input
+  checked={{toggled}}
+  disabled={{disabled}}
+  class='x-toggle'
+  id={{forId}}
+  name={{name}}
+  onchange={{action onChangeValue 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}}
-    aria-role="checkbox"
-    aria-owns={{forId}}>
-  </div>
-</span>
+<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}}
+  aria-role="checkbox"
+  aria-owns={{forId}}>
+</div>

addon/components/x-toggle/component.js

@@ -1,16 +1,15 @@
-import Ember from 'ember';
+import Component from 'ember-component';
+import computed from 'ember-computed';
 import layout from './template';
 
-const { computed } = Ember;  // jshint ignore:line
-
-const ToggleComponent = Ember.Component.extend({
-  layout: layout,
+export default Component.extend({
+  layout,
   classNames: ['x-toggle-component'],
 
+  disabled: false,
   name: 'default',
   onLabel: 'On',
   offLabel: 'Off',
-  disabled: false,
   value: false,
 
   // private
@@ -20,14 +19,6 @@ const ToggleComponent = Ember.Component.extend({
     return this.get('elementId') + '-x-toggle';
   }),
 
-  sendToggle(value) {
-    let onToggle = this.get('onToggle');
-
-    if (typeof onToggle === 'function') {
-      onToggle(value);
-    }
-  },
-
   actions: {
     onClick(e) {
       let value = this.get('value');
@@ -38,15 +29,16 @@ const ToggleComponent = Ember.Component.extend({
       this.sendToggle(!value);
     },
 
-    setToValue(value, e) {
-      e.stopPropagation();
-      e.preventDefault();
-
+    setToValue(value) {
       this.sendToggle(value);
     }
-  }
-});
+  },
 
-ToggleComponent[Ember.NAME_KEY] = 'x-toggle';
+  sendToggle(value) {
+    let onToggle = this.get('onToggle');
 
-export default ToggleComponent;
+    if (typeof onToggle === 'function') {
+      onToggle(value);
+    }
+  }
+});

addon/components/x-toggle/template.hbs

@@ -11,19 +11,19 @@
       offLabel=offLabel
       onLabel=onLabel
       forId=forId)
-    offLabel=(component 'x-toggle-label' onClick=(action 'setToValue')
+    offLabel=(component 'x-toggle-label'
       label=offLabel
       value=false
       show=showLabels
       switchId=forId)
-    onLabel=(component 'x-toggle-label' onClick=(action 'setToValue')
+    onLabel=(component 'x-toggle-label'
       label=onLabel
       value=true
       show=showLabels
       switchId=forId)
   )}}
 {{else}}
-  {{x-toggle-label onClick=(action 'setToValue')
+  {{x-toggle-label
     label=offLabel
     value=false
     show=showLabels
@@ -41,7 +41,7 @@
     onLabel=onLabel
     forId=forId}}
 
-  {{x-toggle-label onClick=(action 'setToValue')
+  {{x-toggle-label
     label=onLabel
     value=true
     show=showLabels

config/ember-try.js

@@ -1,4 +1,4 @@
-/*jshint node:true*/
+/* eslint-env node */
 module.exports = {
   scenarios: [
     {

config/environment.js

@@ -1,4 +1,4 @@
-/*jshint node:true*/
+/* eslint-env node */
 'use strict';
 
 module.exports = function(/* environment, appConfig */) {

ember-cli-build.js

@@ -1,6 +1,5 @@
-/*jshint node:true*/
-/* global require, module */
-var EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
+/* eslint-env node */
+const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
   var app = new EmberAddon(defaults, {

index.js

@@ -1,4 +1,4 @@
-/* jshint node: true */
+/* eslint-env node */
 'use strict';
 
 module.exports = {
@@ -31,7 +31,7 @@ module.exports = {
       var allThemes = ['light', 'ios', 'default', 'flat', 'skewed', 'flip'];
       var included = config.includedThemes;
       var excluded = config.excludedThemes;
-      
+
       excludeBaseStyles = config.excludeBaseStyles || false;
 
       if (included && Array.isArray(included)) {
@@ -51,7 +51,7 @@ module.exports = {
         return theme && allThemes.indexOf(theme) !== -1;
       });
     }
-    
+
     if (!excludeBaseStyles) {
       app.import('vendor/ember-toggle/base.css');
     }

package.json

@@ -2,58 +2,55 @@
   "name": "ember-toggle",
   "version": "5.0.0-alpha.0",
   "description": "Checkbox based toggle switch component for Ember.js",
+  "keywords": [
+    "ember-addon",
+    "toggle",
+    "switch",
+    "component",
+    "ember"
+  ],
+  "license": "MIT",
+  "author": "Ilya Radchenko",
   "directories": {
     "doc": "doc",
     "test": "tests"
   },
+  "repository": "https://github.com/knownasilya/ember-toggle",
   "scripts": {
-    "start": "ember server",
     "build": "ember build",
+    "start": "ember server",
     "test": "ember try:each",
     "release": "standard-version"
   },
-  "repository": "https://github.com/knownasilya/ember-toggle",
-  "engines": {
-    "node": ">= 0.12.0"
+  "dependencies": {
+    "ember-cli-babel": "^5.1.7",
+    "ember-cli-htmlbars": "^1.1.1",
+    "ember-runtime-enumerable-includes-polyfill": "^1.0.1"
   },
-  "author": "Ilya Radchenko",
-  "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
-    "ember-cli": "^2.11.0",
-    "ember-cli-app-version": "^2.0.0",
+    "ember-cli": "2.12.1",
     "ember-cli-dependency-checker": "^1.3.0",
+    "ember-cli-eslint": "^3.0.0",
     "ember-cli-github-pages": "0.1.2",
-    "ember-cli-htmlbars-inline-precompile": "^0.3.3",
+    "ember-cli-htmlbars-inline-precompile": "^0.3.6",
     "ember-cli-inject-live-reload": "^1.4.1",
-    "ember-cli-jshint": "^2.0.1",
-    "ember-cli-qunit": "^3.0.1",
+    "ember-cli-qunit": "^3.1.0",
     "ember-cli-release": "^1.0.0-beta.2",
     "ember-cli-shims": "^1.0.2",
     "ember-cli-sri": "^2.1.0",
-    "ember-cli-test-loader": "^1.1.0",
     "ember-cli-uglify": "^1.2.0",
-    "ember-data": "^2.11.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.6.0",
     "ember-resolver": "^2.0.3",
-    "ember-source": "^2.11.0",
-    "loader.js": "^4.0.10",
+    "ember-source": "~2.12.0",
+    "loader.js": "^4.2.3",
     "standard-version": "^4.0.0"
   },
-  "keywords": [
-    "ember-addon",
-    "toggle",
-    "switch",
-    "component",
-    "ember"
-  ],
-  "dependencies": {
-    "ember-cli-babel": "^5.1.7",
-    "ember-cli-htmlbars": "^1.1.1",
-    "ember-runtime-enumerable-includes-polyfill": "^1.0.1"
+  "engines": {
+    "node": ">= 4"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

testem.js

@@ -1,6 +1,5 @@
-/*jshint node:true*/
+/* eslint-env node */
 module.exports = {
-  "framework": "qunit",
   "test_page": "tests/index.html?hidepassed",
   "disable_watching": true,
   "launch_in_ci": [