Merge pull request #52 from locomotivemtl/mcaskill-es6

ES6 Revisions

assets/scripts/App.js

@@ -69,7 +69,7 @@ class App {
             let options = getNodeData(el);
 
             // Add current DOM element and jQuery element
-            options.el = el;
+            options.el  = el;
             options.$el = $(el);
 
             // Module does exist at this point

assets/scripts/modules/AbstractModule.js

@@ -2,16 +2,20 @@
 import { $document, $window, $html, $body } from '../utils/environment';
 
 /**
- * Abstract module
- * Gives access to generic jQuery nodes
+ * Abstract Module
  */
-export default class {
-    constructor(options) {
-        this.$document = $document;
-        this.$window = $window;
-        this.$html = $html;
-        this.$body = $body;
-        this.$el = options.$el;
-        this.el = options.el;
+export default class
+{
+    constructor(options)
+    {
+        this.$el = options.$el || null;
+        this.el  = options.el  || null;
+    }
+
+    destroy()
+    {
+        if (this.$el) {
+            this.$el.off();
+        }
     }
 }

assets/scripts/modules/Button.js

@@ -1,16 +1,30 @@
 /* jshint esnext: true */
 import AbstractModule from './AbstractModule';
+import { $document, APP_NAME, DATA_API_KEY } from '../utils/environment';
 
-export default class extends AbstractModule {
-    constructor(options) {
+const DATA_KEY  = `${APP_NAME}.button`;
+const EVENT_KEY = `.${DATA_KEY}`;
+
+const Event = {
+    CLICK : `click${EVENT_KEY}`
+};
+
+/**
+ * Button
+ */
+export default class extends AbstractModule
+{
+    constructor(options)
+    {
         super(options);
 
-        this.$el.on('click.Button', (event) => {
-            this.$document.trigger('Title.changeLabel', [$(event.currentTarget).val()]);
+        this.$el.on(Event.CLICK, (event) => {
+            $document.trigger(`changeLabel.Title.${APP_NAME}`, [ $(event.currentTarget).val() ]);
         });
     }
 
-    destroy() {
-        this.$el.off('.Button');
+    destroy()
+    {
+        this.$el.off(EVENT_KEY);
     }
 }

assets/scripts/modules/Title.js

@@ -1,58 +1,76 @@
 /* jshint esnext: true */
-import { visibilityApi } from '../utils/visibility';
 import AbstractModule from './AbstractModule';
+import { visibilityApi } from '../utils/visibility';
+import { $document, APP_NAME, DATA_API_KEY } from '../utils/environment';
 
-export default class extends AbstractModule {
-    constructor(options) {
+const DATA_KEY  = `${APP_NAME}.Title`;
+const EVENT_KEY = `.${DATA_KEY}`;
+
+const Event = {
+    CHANGE_LABEL : `changeLabel${EVENT_KEY}`
+};
+
+const Selector = {
+    LABEL : '.js-label'
+}
+
+export default class extends AbstractModule
+{
+    constructor(options)
+    {
         super(options);
 
-        this.$label = this.$el.find('.js-label');
+        this.$label = this.$el.find(Selector.LABEL);
 
-        this.$document.on('Title.changeLabel', (event, value) => {
+        $document.on(Event.CHANGE_LABEL, (event, value) => {
             this.changeLabel(value);
             this.destroy();
         });
 
         this.hiddenCallbackIdent = visibilityApi({
-            action: 'addCallback',
-            state: 'hidden',
+            action:   'addCallback',
+            state:    'hidden',
             callback: this.logHidden
         });
 
         this.visibleCallbackIdent = visibilityApi({
-            action: 'addCallback',
-            state: 'visible',
+            action:   'addCallback',
+            state:    'visible',
             callback: this.logVisible
         });
     }
 
-    logHidden() {
+    logHidden()
+    {
         console.log('Title is hidden');
     }
 
-    logVisible() {
+    logVisible()
+    {
         console.log('Title is visible');
     }
 
-    changeLabel(value) {
+    changeLabel(value)
+    {
         this.$label.text(value);
     }
 
-    destroy() {
-        this.$document.off('Title.changeLabel');
+    destroy()
+    {
+        $document.off(EVENT_KEY);
+
+        this.$el.off(EVENT_KEY);
 
         visibilityApi({
             action: 'removeCallback',
-            state: 'hidden',
-            ident: this.hiddenCallbackIdent
+            state:  'hidden',
+            ident:   this.hiddenCallbackIdent
         });
 
         visibilityApi({
             action: 'removeCallback',
-            state: 'visible',
-            ident: this.visibleCallbackIdent
+            state:  'visible',
+            ident:   this.visibleCallbackIdent
         });
-
-        this.$el.off('.Title');
     }
 }

assets/scripts/utils/environment.js

@@ -1,6 +1,9 @@
-const $document = $(document);
-const $window = $(window);
-const $html = $(document.documentElement);
-const $body = $(document.body);
+const APP_NAME     = 'boilerplate';
+const DATA_API_KEY = '.data-api';
 
-export { $document, $window, $html, $body };
+const $document    = $(document);
+const $window      = $(window);
+const $html        = $(document.documentElement);
+const $body        = $(document.body);
+
+export { $document, $window, $html, $body, APP_NAME, DATA_API_KEY };