Skip to content

T
todomvc
Commit 5c1a0455 authored by Daniel Hug's avatar Daniel Hug Committed by Sindre Sorhus
Browse files
Options

Close GH-862: Vanilla js improvements.

parent 67b8062c
Show whitespace changes
Inline Side-by-side
Showing with 105 additions and 122 deletions
vanilla-examples/vanillajs/index.html
View file @ 5c1a0455
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<span id="todo-count"></span> <span id="todo-count"></span>
<ul id="filters"> <ul id="filters">
<li> <li>
<a href="#/">All</a> <a href="#/" class="selected">All</a>
</li> </li>
<li> <li>
<a href="#/active">Active</a> <a href="#/active">Active</a>
......
vanilla-examples/vanillajs/js/helpers.js
View file @ 5c1a0455
...@@ -2,9 +2,13 @@ ...@@ -2,9 +2,13 @@
(function (window) { (function (window) {
'use strict'; 'use strict';
// Cache the querySelector/All for easier and faster reuse // Get element(s) by CSS selector:
window.$ = document.querySelectorAll.bind(document); window.qs = function (selector, scope) {
window.$$ = document.querySelector.bind(document); 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: // Register events on elements that may or may not exist yet:
// $live('div a', 'click', function (event) {}); // $live('div a', 'click', function (event) {});
...@@ -15,11 +19,11 @@ ...@@ -15,11 +19,11 @@
var targetElement = event.target; var targetElement = event.target;
eventRegistry[event.type].forEach(function (entry) { 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; var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0;
if (hasMatch) { if (hasMatch) {
entry.handler(event); entry.handler.call(targetElement, event);
} }
}); });
} }
...@@ -38,7 +42,7 @@ ...@@ -38,7 +42,7 @@
}()); }());
// Find the element's parent with the given tag name: // Find the element's parent with the given tag name:
// $parent($$('a'), 'div'); // $parent(qs('a'), 'div');
window.$parent = function (element, tagName) { window.$parent = function (element, tagName) {
if (!element.parentNode) { if (!element.parentNode) {
return; return;
...@@ -50,6 +54,6 @@ ...@@ -50,6 +54,6 @@
}; };
// Allow for looping on nodes by chaining: // Allow for looping on nodes by chaining:
// $('.foo').forEach(function () {}) // qsa('.foo').forEach(function () {})
NodeList.prototype.forEach = Array.prototype.forEach; NodeList.prototype.forEach = Array.prototype.forEach;
})(window); })(window);
vanilla-examples/vanillajs/js/view.js
View file @ 5c1a0455
/*global $, $$, $parent, $live */ /*global qs, qsa, $parent, $live */
(function (window) { (function (window) {
'use strict'; 'use strict';
...@@ -18,17 +18,17 @@ ...@@ -18,17 +18,17 @@
this.ENTER_KEY = 13; this.ENTER_KEY = 13;
this.ESCAPE_KEY = 27; this.ESCAPE_KEY = 27;
this.$todoList = $$('#todo-list'); this.$todoList = qs('#todo-list');
this.$todoItemCounter = $$('#todo-count'); this.$todoItemCounter = qs('#todo-count');
this.$clearCompleted = $$('#clear-completed'); this.$clearCompleted = qs('#clear-completed');
this.$main = $$('#main'); this.$main = qs('#main');
this.$footer = $$('#footer'); this.$footer = qs('#footer');
this.$toggleAll = $$('#toggle-all'); this.$toggleAll = qs('#toggle-all');
this.$newTodo = $$('#new-todo'); this.$newTodo = qs('#new-todo');
} }
View.prototype._removeItem = function (id) { View.prototype._removeItem = function (id) {
var elem = $$('[data-id="' + id + '"]'); var elem = qs('[data-id="' + id + '"]');
if (elem) { if (elem) {
this.$todoList.removeChild(elem); this.$todoList.removeChild(elem);
...@@ -41,19 +41,12 @@ ...@@ -41,19 +41,12 @@
}; };
View.prototype._setFilter = function (currentPage) { View.prototype._setFilter = function (currentPage) {
// Remove all other selected states. We loop through all of them in case the qs('#filters .selected').className = '';
// UI gets in a funky state with two selected. qs('#filters [href="#/' + currentPage + '"]').className = 'selected';
$('#filters .selected').forEach(function (item) {
item.className = '';
});
$('#filters [href="#/' + currentPage + '"]').forEach(function (item) {
item.className = 'selected';
});
}; };
View.prototype._elementComplete = function (id, completed) { View.prototype._elementComplete = function (id, completed) {
var listItem = $$('[data-id="' + id + '"]'); var listItem = qs('[data-id="' + id + '"]');
if (!listItem) { if (!listItem) {
return; return;
...@@ -62,11 +55,11 @@ ...@@ -62,11 +55,11 @@
listItem.className = completed ? 'completed' : ''; listItem.className = completed ? 'completed' : '';
// In case it was toggled from an event and not by clicking the checkbox // 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) { View.prototype._editItem = function (id, title) {
var listItem = $$('[data-id="' + id + '"]'); var listItem = qs('[data-id="' + id + '"]');
if (!listItem) { if (!listItem) {
return; return;
...@@ -83,18 +76,18 @@ ...@@ -83,18 +76,18 @@
}; };
View.prototype._editItemDone = function (id, title) { View.prototype._editItemDone = function (id, title) {
var listItem = $$('[data-id="' + id + '"]'); var listItem = qs('[data-id="' + id + '"]');
if (!listItem) { if (!listItem) {
return; return;
} }
var input = listItem.querySelector('input.edit'); var input = qs('input.edit', listItem);
listItem.removeChild(input); listItem.removeChild(input);
listItem.className = listItem.className.replace('editing', ''); listItem.className = listItem.className.replace('editing', '');
listItem.querySelectorAll('label').forEach(function (label) { qsa('label', listItem).forEach(function (label) {
label.textContent = title; label.textContent = title;
}); });
}; };
...@@ -140,97 +133,83 @@ ...@@ -140,97 +133,83 @@
viewCommands[viewCmd](); viewCommands[viewCmd]();
}; };
View.prototype._itemIdForEvent = function (e) { View.prototype._itemId = function (element) {
var element = e.target;
var li = $parent(element, 'li'); var li = $parent(element, 'li');
var id = li.dataset.id; return li.dataset.id;
return id;
}; };
View.prototype._bindItemEditDone = function (handler) { View.prototype._bindItemEditDone = function (handler) {
$live('#todo-list li .edit', 'blur', function (e) { var that = this;
var input = e.target; $live('#todo-list li .edit', 'blur', function () {
var id = this._itemIdForEvent(e); if (!this.dataset.iscanceled) {
if (!input.dataset.iscanceled) {
handler({ handler({
id: id, id: that._itemId(this),
title: input.value title: this.value
}); });
} }
}.bind(this)); });
$live('#todo-list li .edit', 'keypress', function (e) { $live('#todo-list li .edit', 'keypress', function (event) {
var input = e.target; if (event.keyCode === that.ENTER_KEY) {
if (e.keyCode === this.ENTER_KEY) {
// Remove the cursor from the input when you hit enter just like if it // Remove the cursor from the input when you hit enter just like if it
// were a real form // were a real form
input.blur(); this.blur();
} }
}.bind(this)); });
}; };
View.prototype._bindItemEditCancel = function (handler) { View.prototype._bindItemEditCancel = function (handler) {
$live('#todo-list li .edit', 'keyup', function (e) { var that = this;
var input = e.target; $live('#todo-list li .edit', 'keyup', function (event) {
var id = this._itemIdForEvent(e); if (event.keyCode === that.ESCAPE_KEY) {
this.dataset.iscanceled = true;
if (e.keyCode === this.ESCAPE_KEY) { this.blur();
input.dataset.iscanceled = true;
input.blur();
handler({id: id}); handler({id: that._itemId(this)});
} }
}.bind(this)); });
}; };
View.prototype.bind = function (event, handler) { View.prototype.bind = function (event, handler) {
var that = this;
if (event === 'newTodo') { if (event === 'newTodo') {
this.$newTodo.addEventListener('change', function () { that.$newTodo.addEventListener('change', function () {
handler(this.$newTodo.value); handler(that.$newTodo.value);
}.bind(this)); });
} else if (event === 'removeCompleted') { } else if (event === 'removeCompleted') {
this.$clearCompleted.addEventListener('click', function () { that.$clearCompleted.addEventListener('click', function () {
handler(); handler();
}.bind(this)); });
} else if (event === 'toggleAll') { } else if (event === 'toggleAll') {
this.$toggleAll.addEventListener('click', function (e) { that.$toggleAll.addEventListener('click', function () {
var input = e.target; handler({completed: this.checked});
});
handler({completed: input.checked});
}.bind(this));
} else if (event === 'itemEdit') { } else if (event === 'itemEdit') {
$live('#todo-list li label', 'dblclick', function (e) { $live('#todo-list li label', 'dblclick', function () {
var id = this._itemIdForEvent(e); handler({id: that._itemId(this)});
});
handler({id: id});
}.bind(this));
} else if (event === 'itemRemove') { } else if (event === 'itemRemove') {
$live('#todo-list .destroy', 'click', function (e) { $live('#todo-list .destroy', 'click', function () {
var id = this._itemIdForEvent(e); handler({id: that._itemId(this)});
});
handler({id: id});
}.bind(this));
} else if (event === 'itemToggle') { } else if (event === 'itemToggle') {
$live('#todo-list .toggle', 'click', function (e) { $live('#todo-list .toggle', 'click', function () {
var input = e.target; handler({
var id = this._itemIdForEvent(e); id: that._itemId(this),
completed: this.checked
handler({id: id, completed: input.checked}); });
}.bind(this)); });
} else if (event === 'itemEditDone') { } else if (event === 'itemEditDone') {
this._bindItemEditDone(handler); that._bindItemEditDone(handler);
} else if (event === 'itemEditCancel') { } else if (event === 'itemEditCancel') {
this._bindItemEditCancel(handler); that._bindItemEditCancel(handler);
} }
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7