[SKILL-BUTTON]: rewrite to put logic into component js

code-corps · Feb 23, 2017 · b2036b1 · b2036b1
1 parent 1d814f4
commit b2036b1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/app/components/skill-button.js b/app/components/skill-button.js
@@ -10,13 +10,32 @@ const {
 
 export default Component.extend({
   alwaysShowX: false,
+  attributeBindings: ['isLoading:disabled'],
+  classNames: ['has-spinner', 'skill'],
+  classNameBindings: ['isHovering:can-delete', 'size', 'type'],
   hasCheck: false,
+  iconAfter: not('iconBefore'),
   iconBefore: true,
   isHovering: false,
   size: 'large',
+  tagName: 'button',
 
-  iconAfter: not('iconBefore'),
+  click() {
+    get(this, 'remove')();
+  },
+
+  mouseEnter() {
+    set(this, 'isHovering', true);
+  },
+
+  mouseLeave() {
+    set(this, 'isHovering', false);
+  },
 
+  /**
+    @property spanClass
+    @type String
+   */
   spanClass: computed('isLoading', 'isHovering', function() {
     if (get(this, 'isLoading')) {
       return 'button-spinner';
@@ -25,15 +44,5 @@ export default Component.extend({
     } else if (get(this, 'hasCheck')) {
       return 'check-mark';
     }
-  }),
-
-  actions: {
-    hoverButton() {
-      set(this, 'isHovering', true);
-    },
-
-    leaveButton() {
-      set(this, 'isHovering', false);
-    }
-  }
+  })
 });
diff --git a/app/templates/components/skill-button.hbs b/app/templates/components/skill-button.hbs
@@ -1,9 +1,7 @@
-<button class="has-spinner skill {{if isHovering "can-delete"}} {{size}} {{type}}" {{action remove}} disabled={{isLoading}} {{action "hoverButton" on="mouseEnter"}} {{action "leaveButton" on="mouseLeave"}}>
-  {{#if iconBefore}}
-    <span class="{{spanClass}} {{size}} {{if iconBefore "before"}}"></span>
-  {{/if}}
-  {{skill.title}}
-  {{#if iconAfter}}
-    <span class="{{spanClass}} {{size}} {{if iconAfter "after"}}"></span>
-  {{/if}}
-</button>
+{{#if iconBefore}}
+  <span class="{{spanClass}} {{size}} {{if iconBefore "before"}}"></span>
+{{/if}}
+{{skill.title}}
+{{#if iconAfter}}
+  <span class="{{spanClass}} {{size}} {{if iconAfter "after"}}"></span>
+{{/if}}