Close GH-862: Vanilla js improvements.

vanilla-examples/vanillajs/index.html

@@ -20,7 +20,7 @@
 				<span id="todo-count"></span>
 				<ul id="filters">
 					<li>
-						<a href="#/">All</a>
+						<a href="#/" class="selected">All</a>
 					</li>
 					<li>
 						<a href="#/active">Active</a>

vanilla-examples/vanillajs/js/helpers.js

@@ -2,9 +2,13 @@
 (function (window) {
 	'use strict';
 
-	// Cache the querySelector/All for easier and faster reuse
-	window.$ = document.querySelectorAll.bind(document);
-	window.$$ = document.querySelector.bind(document);
+	// Get element(s) by CSS selector:
+	window.qs = function (selector, scope) {
+		return (scope || document).querySelector(selector);
+	};
+	window.qsa = function (selector, scope) {
+		return (scope || document).querySelectorAll(selector);
+	};
 
 	// Register events on elements that may or may not exist yet:
 	// $live('div a', 'click', function (event) {});
@@ -15,11 +19,11 @@
 			var targetElement = event.target;
 
 			eventRegistry[event.type].forEach(function (entry) {
-				var potentialElements = document.querySelectorAll(entry.selector);
+				var potentialElements = window.qsa(entry.selector);
 				var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
 
 				if (hasMatch) {
-					entry.handler(event);
+					entry.handler.call(targetElement, event);
 				}
 			});
 		}
@@ -38,7 +42,7 @@
 	}());
 
 	// Find the element's parent with the given tag name:
-	// $parent($$('a'), 'div');
+	// $parent(qs('a'), 'div');
 	window.$parent = function (element, tagName) {
 		if (!element.parentNode) {
 			return;
@@ -50,6 +54,6 @@
 	};
 
 	// Allow for looping on nodes by chaining:
-	// $('.foo').forEach(function () {})
+	// qsa('.foo').forEach(function () {})
 	NodeList.prototype.forEach = Array.prototype.forEach;
 })(window);

vanilla-examples/vanillajs/js/view.js

-/*global $, $$, $parent, $live */
+/*global qs, qsa, $parent, $live */
 
 (function (window) {
     'use strict';
@@ -18,17 +18,17 @@
         this.ENTER_KEY = 13;
         this.ESCAPE_KEY = 27;
 
-        this.$todoList = $$('#todo-list');
-        this.$todoItemCounter = $$('#todo-count');
-        this.$clearCompleted = $$('#clear-completed');
-        this.$main = $$('#main');
-        this.$footer = $$('#footer');
-        this.$toggleAll = $$('#toggle-all');
-        this.$newTodo = $$('#new-todo');
+        this.$todoList = qs('#todo-list');
+        this.$todoItemCounter = qs('#todo-count');
+        this.$clearCompleted = qs('#clear-completed');
+        this.$main = qs('#main');
+        this.$footer = qs('#footer');
+        this.$toggleAll = qs('#toggle-all');
+        this.$newTodo = qs('#new-todo');
     }
 
     View.prototype._removeItem = function (id) {
-        var elem = $$('[data-id="' + id + '"]');
+        var elem = qs('[data-id="' + id + '"]');
 
         if (elem) {
             this.$todoList.removeChild(elem);
@@ -41,19 +41,12 @@
     };
 
     View.prototype._setFilter = function (currentPage) {
-        // Remove all other selected states. We loop through all of them in case the
-        // UI gets in a funky state with two selected.
-        $('#filters .selected').forEach(function (item) {
-            item.className = '';
-        });
-
-        $('#filters [href="#/' + currentPage + '"]').forEach(function (item) {
-            item.className = 'selected';
-        });
+        qs('#filters .selected').className = '';
+        qs('#filters [href="#/' + currentPage + '"]').className = 'selected';
     };
 
     View.prototype._elementComplete = function (id, completed) {
-        var listItem = $$('[data-id="' + id + '"]');
+        var listItem = qs('[data-id="' + id + '"]');
 
         if (!listItem) {
             return;
@@ -62,11 +55,11 @@
         listItem.className = completed ? 'completed' : '';
 
         // In case it was toggled from an event and not by clicking the checkbox
-        listItem.querySelector('input').checked = completed;
+        qs('input', listItem).checked = completed;
     };
 
     View.prototype._editItem = function (id, title) {
-        var listItem = $$('[data-id="' + id + '"]');
+        var listItem = qs('[data-id="' + id + '"]');
 
         if (!listItem) {
             return;
@@ -83,18 +76,18 @@
     };
 
     View.prototype._editItemDone = function (id, title) {
-        var listItem = $$('[data-id="' + id + '"]');
+        var listItem = qs('[data-id="' + id + '"]');
 
         if (!listItem) {
             return;
         }
 
-        var input = listItem.querySelector('input.edit');
+        var input = qs('input.edit', listItem);
         listItem.removeChild(input);
 
         listItem.className = listItem.className.replace('editing', '');
 
-        listItem.querySelectorAll('label').forEach(function (label) {
+        qsa('label', listItem).forEach(function (label) {
             label.textContent = title;
         });
     };
@@ -102,135 +95,121 @@
     View.prototype.render = function (viewCmd, parameter) {
         var that = this;
         var viewCommands = {
-                showEntries: function () {
-                    that.$todoList.innerHTML = that.template.show(parameter);
-                },
-                removeItem: function () {
-                    that._removeItem(parameter);
-                },
-                updateElementCount: function () {
-                    that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
-                },
-                clearCompletedButton: function () {
-                    that._clearCompletedButton(parameter.completed, parameter.visible);
-                },
-                contentBlockVisibility: function () {
-                    that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
-                },
-                toggleAll: function () {
-                    that.$toggleAll.checked = parameter.checked;
-                },
-                setFilter: function () {
-                    that._setFilter(parameter);
-                },
-                clearNewTodo: function () {
-                    that.$newTodo.value = '';
-                },
-                elementComplete: function () {
-                    that._elementComplete(parameter.id, parameter.completed);
-                },
-                editItem: function () {
-                    that._editItem(parameter.id, parameter.title);
-                },
-                editItemDone: function () {
-                    that._editItemDone(parameter.id, parameter.title);
-                }
-            };
+            showEntries: function () {
+                that.$todoList.innerHTML = that.template.show(parameter);
+            },
+            removeItem: function () {
+                that._removeItem(parameter);
+            },
+            updateElementCount: function () {
+                that.$todoItemCounter.innerHTML = that.template.itemCounter(parameter);
+            },
+            clearCompletedButton: function () {
+                that._clearCompletedButton(parameter.completed, parameter.visible);
+            },
+            contentBlockVisibility: function () {
+                that.$main.style.display = that.$footer.style.display = parameter.visible ? 'block' : 'none';
+            },
+            toggleAll: function () {
+                that.$toggleAll.checked = parameter.checked;
+            },
+            setFilter: function () {
+                that._setFilter(parameter);
+            },
+            clearNewTodo: function () {
+                that.$newTodo.value = '';
+            },
+            elementComplete: function () {
+                that._elementComplete(parameter.id, parameter.completed);
+            },
+            editItem: function () {
+                that._editItem(parameter.id, parameter.title);
+            },
+            editItemDone: function () {
+                that._editItemDone(parameter.id, parameter.title);
+            }
+        };
 
         viewCommands[viewCmd]();
     };
 
-    View.prototype._itemIdForEvent = function (e) {
-        var element = e.target;
+    View.prototype._itemId = function (element) {
         var li = $parent(element, 'li');
-        var id = li.dataset.id;
-
-        return id;
+        return li.dataset.id;
     };
 
     View.prototype._bindItemEditDone = function (handler) {
-        $live('#todo-list li .edit', 'blur', function (e) {
-            var input = e.target;
-            var id = this._itemIdForEvent(e);
-
-            if (!input.dataset.iscanceled) {
+        var that = this;
+        $live('#todo-list li .edit', 'blur', function () {
+            if (!this.dataset.iscanceled) {
                 handler({
-                    id: id,
-                    title: input.value
+                    id: that._itemId(this),
+                    title: this.value
                 });
             }
-        }.bind(this));
+        });
 
-        $live('#todo-list li .edit', 'keypress', function (e) {
-            var input = e.target;
-            if (e.keyCode === this.ENTER_KEY) {
+        $live('#todo-list 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
-                input.blur();
+                this.blur();
             }
-        }.bind(this));
+        });
     };
 
     View.prototype._bindItemEditCancel = function (handler) {
-        $live('#todo-list li .edit', 'keyup', function (e) {
-            var input = e.target;
-            var id = this._itemIdForEvent(e);
-
-            if (e.keyCode === this.ESCAPE_KEY) {
-
-                input.dataset.iscanceled = true;
-                input.blur();
+        var that = this;
+        $live('#todo-list li .edit', 'keyup', function (event) {
+            if (event.keyCode === that.ESCAPE_KEY) {
+                this.dataset.iscanceled = true;
+                this.blur();
 
-                handler({id: id});
+                handler({id: that._itemId(this)});
             }
-        }.bind(this));
+        });
     };
 
     View.prototype.bind = function (event, handler) {
+        var that = this;
         if (event === 'newTodo') {
-            this.$newTodo.addEventListener('change', function () {
-                handler(this.$newTodo.value);
-            }.bind(this));
+            that.$newTodo.addEventListener('change', function () {
+                handler(that.$newTodo.value);
+            });
 
         } else if (event === 'removeCompleted') {
-            this.$clearCompleted.addEventListener('click', function () {
+            that.$clearCompleted.addEventListener('click', function () {
                 handler();
-            }.bind(this));
+            });
 
         } else if (event === 'toggleAll') {
-            this.$toggleAll.addEventListener('click', function (e) {
-                var input = e.target;
-
-                handler({completed: input.checked});
-            }.bind(this));
+            that.$toggleAll.addEventListener('click', function () {
+                handler({completed: this.checked});
+            });
 
         } else if (event === 'itemEdit') {
-            $live('#todo-list li label', 'dblclick', function (e) {
-                var id = this._itemIdForEvent(e);
-
-                handler({id: id});
-            }.bind(this));
+            $live('#todo-list li label', 'dblclick', function () {
+                handler({id: that._itemId(this)});
+            });
 
         } else if (event === 'itemRemove') {
-            $live('#todo-list .destroy', 'click', function (e) {
-                var id = this._itemIdForEvent(e);
-
-                handler({id: id});
-            }.bind(this));
+            $live('#todo-list .destroy', 'click', function () {
+                handler({id: that._itemId(this)});
+            });
 
         } else if (event === 'itemToggle') {
-            $live('#todo-list .toggle', 'click', function (e) {
-                var input = e.target;
-                var id = this._itemIdForEvent(e);
-
-                handler({id: id, completed: input.checked});
-            }.bind(this));
+            $live('#todo-list .toggle', 'click', function () {
+                handler({
+                    id: that._itemId(this),
+                    completed: this.checked
+                });
+            });
 
         } else if (event === 'itemEditDone') {
-            this._bindItemEditDone(handler);
+            that._bindItemEditDone(handler);
 
         } else if (event === 'itemEditCancel') {
-            this._bindItemEditCancel(handler);
+            that._bindItemEditCancel(handler);
         }
     };