Get the old (working) view.js back

js/view.js

@@ -1,3 +1,4 @@
+/* eslint no-invalid-this: 0, complexity:[2, 9] */
 import {qs, qsa, $on, $parent, $delegate} from './helpers'
 
 /**
@@ -9,7 +10,7 @@ import {qs, qsa, $on, $parent, $delegate} from './helpers'
  *   - render(command, parameterObject)
  *     Renders the given command with the options
  */
-class View {
+export default class View {
   constructor(template) {
     this.template = template
 
@@ -24,6 +25,7 @@ class View {
     this.$toggleAll = qs('.toggle-all')
     this.$newTodo = qs('.new-todo')
   }
+
   _removeItem(id) {
     var elem = qs('[data-id="' + id + '"]')
 
@@ -31,10 +33,12 @@ class View {
       this.$todoList.removeChild(elem)
     }
   }
+
   _clearCompletedButton(completedCount, visible) {
     this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount)
     this.$clearCompleted.style.display = visible ? 'block' : 'none'
   }
+
   _editItemDone(id, title) {
     var listItem = qs('[data-id="' + id + '"]')
 
@@ -51,47 +55,51 @@ class View {
       label.textContent = title
     })
   }
+
   render(viewCmd, parameter) {
+    var that = this
     var viewCommands = {
-      showEntries: () => {
-        this.$todoList.innerHTML = this.template.show(parameter)
+      showEntries: function() {
+        that.$todoList.innerHTML = that.template.show(parameter)
       },
-      removeItem: () => {
-        this._removeItem(parameter)
+      removeItem: function() {
+        that._removeItem(parameter)
       },
-      updateElementCount: () => {
-        this.$todoItemCounter.innerHTML = this.template.itemCounter(parameter)
+      updateElementCount: function() {
+        that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter)
       },
-      clearCompletedButton: () => {
-        this._clearCompletedButton(parameter.completed, parameter.visible)
+      clearCompletedButton: function() {
+        that._clearCompletedButton(parameter.completed, parameter.visible)
       },
-      contentBlockVisibility: () => {
-        this.$main.style.display = this.$footer.style.display = parameter.visible ? 'block' : 'none'
+      contentBlockVisibility: function() {
+        that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none'
       },
-      toggleAll: () => {
-        this.$toggleAll.checked = parameter.checked
+      toggleAll: function() {
+        that.$toggleAll.checked = parameter.checked
       },
-      setFilter: () => {
+      setFilter: function() {
         _setFilter(parameter)
       },
-      clearNewTodo: () => {
-        this.$newTodo.value = ''
+      clearNewTodo: function() {
+        that.$newTodo.value = ''
       },
-      elementComplete: () => {
+      elementComplete: function() {
         _elementComplete(parameter.id, parameter.completed)
       },
-      editItem: () => {
+      editItem: function() {
         _editItem(parameter.id, parameter.title)
       },
-      editItemDone: () => {
-        this._editItemDone(parameter.id, parameter.title)
+      editItemDone: function() {
+        that._editItemDone(parameter.id, parameter.title)
       }
     }
 
     viewCommands[viewCmd]()
   }
+
   _bindItemEditDone(handler) {
-    $delegate(this.$todoList, 'li .edit', 'blur', () => {
+    var that = this
+    $delegate(that.$todoList, 'li .edit', 'blur', function() {
       if (!this.dataset.iscanceled) {
         handler({
           id: _itemId(this),
@@ -100,17 +108,19 @@ class View {
       }
     })
 
-    $delegate(this.$todoList, 'li .edit', 'keypress', (event) => {
-      if (event.keyCode === this.ENTER_KEY) {
+    $delegate(that.$todoList, 'li .edit', 'keypress', function(event) {
+      if (event.keyCode === that.ENTER_KEY) {
         // Remove the cursor from the input when you hit enter just like if it
         // were a real form
         this.blur()
       }
     })
   }
+
   _bindItemEditCancel(handler) {
-    $delegate(this.$todoList, 'li .edit', 'keyup', (event) => {
-      if (event.keyCode === this.ESCAPE_KEY) {
+    var that = this
+    $delegate(that.$todoList, 'li .edit', 'keyup', function(event) {
+      if (event.keyCode === that.ESCAPE_KEY) {
         this.dataset.iscanceled = true
         this.blur()
 
@@ -118,34 +128,36 @@ class View {
       }
     })
   }
-  bind(event, handler) { // eslint-disable-line complexity
+
+  bind(event, handler) {
+    var that = this
     if (event === 'newTodo') {
-      $on(this.$newTodo, 'change', () => {
-        handler(this.$newTodo.value)
+      $on(that.$newTodo, 'change', function() {
+        handler(that.$newTodo.value)
       })
 
     } else if (event === 'removeCompleted') {
-      $on(this.$clearCompleted, 'click', () => {
+      $on(that.$clearCompleted, 'click', function() {
         handler()
       })
 
     } else if (event === 'toggleAll') {
-      $on(this.$toggleAll, 'click', () => {
+      $on(that.$toggleAll, 'click', function() {
         handler({completed: this.checked})
       })
 
     } else if (event === 'itemEdit') {
-      $delegate(this.$todoList, 'li label', 'dblclick', () => {
+      $delegate(that.$todoList, 'li label', 'dblclick', function() {
         handler({id: _itemId(this)})
       })
 
     } else if (event === 'itemRemove') {
-      $delegate(this.$todoList, '.destroy', 'click', () => {
+      $delegate(that.$todoList, '.destroy', 'click', function() {
         handler({id: _itemId(this)})
       })
 
     } else if (event === 'itemToggle') {
-      $delegate(this.$todoList, '.toggle', 'click', () => {
+      $delegate(that.$todoList, '.toggle', 'click', function() {
         handler({
           id: _itemId(this),
           completed: this.checked
@@ -153,10 +165,10 @@ class View {
       })
 
     } else if (event === 'itemEditDone') {
-      this._bindItemEditDone(handler)
+      that._bindItemEditDone(handler)
 
     } else if (event === 'itemEditCancel') {
-      this._bindItemEditCancel(handler)
+      that._bindItemEditCancel(handler)
     }
   }
 }
@@ -200,5 +212,3 @@ function _itemId(element) {
   var li = $parent(element, 'li')
   return parseInt(li.dataset.id, 10)
 }
-
-export default View