boranton/testcafe-workshop
2
0
Fork 1
Code Issues 2 Pull Requests Releases Wiki Activity

😹 The view is now a class. Boom

Browse Source
This commit is contained in:
Kent C. Dodds 2015-08-10 22:41:13 -06:00
parent 81e82d29bc
commit 78ed269ca4
1 changed files with 160 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
js/view.js
View File

@ -1,6 +1,5 @@
import {qs, qsa, $on, $parent, $delegate} from './helpers';
export default View;
/**
* View that abstracts away the browser's DOM completely.
* It has two simple entry points:
@ -10,7 +9,8 @@ export default View;
* - render(command, parameterObject)
* Renders the given command with the options
*/
function View(template) {
export default class View {
constructor(template) {
this.template = template;
this.ENTER_KEY = 13;
@ -23,57 +23,19 @@ function View(template) {
this.$footer = qs('.footer');
this.$toggleAll = qs('.toggle-all');
this.$newTodo = qs('.new-todo');
}
View.prototype._removeItem = function (id) {
}
_removeItem(id) {
var elem = qs('[data-id="' + id + '"]');
if (elem) {
this.$todoList.removeChild(elem);
}
};
View.prototype._clearCompletedButton = function (completedCount, visible) {
}
_clearCompletedButton(completedCount, visible) {
this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount);
this.$clearCompleted.style.display = visible ? 'block' : 'none';
};
View.prototype._setFilter = function (currentPage) {
qs('.filters .selected').className = '';
qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
};
View.prototype._elementComplete = function (id, completed) {
var listItem = qs('[data-id="' + id + '"]');
if (!listItem) {
return;
}
listItem.className = completed ? 'completed' : '';
// In case it was toggled from an event and not by clicking the checkbox
qs('input', listItem).checked = completed;
};
View.prototype._editItem = function (id, title) {
var listItem = qs('[data-id="' + id + '"]');
if (!listItem) {
return;
}
listItem.className = listItem.className + ' editing';
var input = document.createElement('input');
input.className = 'edit';
listItem.appendChild(input);
input.focus();
input.value = title;
};
View.prototype._editItemDone = function (id, title) {
_editItemDone(id, title) {
var listItem = qs('[data-id="' + id + '"]');
if (!listItem) {
@ -88,9 +50,8 @@ View.prototype._editItemDone = function (id, title) {
qsa('label', listItem).forEach(function (label) {
label.textContent = title;
});
};
View.prototype.render = function (viewCmd, parameter) {
}
render(viewCmd, parameter) {
var that = this;
var viewCommands = {
showEntries: function () {
@ -112,16 +73,16 @@ View.prototype.render = function (viewCmd, parameter) {
that.$toggleAll.checked = parameter.checked;
},
setFilter: function () {
that._setFilter(parameter);
_setFilter(parameter);
},
clearNewTodo: function () {
that.$newTodo.value = '';
},
elementComplete: function () {
that._elementComplete(parameter.id, parameter.completed);
_elementComplete(parameter.id, parameter.completed);
},
editItem: function () {
that._editItem(parameter.id, parameter.title);
_editItem(parameter.id, parameter.title);
},
editItemDone: function () {
that._editItemDone(parameter.id, parameter.title);
@ -129,19 +90,13 @@ View.prototype.render = function (viewCmd, parameter) {
};
viewCommands[viewCmd]();
};
View.prototype._itemId = function (element) {
var li = $parent(element, 'li');
return parseInt(li.dataset.id, 10);
};
View.prototype._bindItemEditDone = function (handler) {
}
_bindItemEditDone(handler) {
var that = this;
$delegate(that.$todoList, 'li .edit', 'blur', function () {
if (!this.dataset.iscanceled) {
handler({
id: that._itemId(this),
id: _itemId(this),
title: this.value
});
}
@ -154,21 +109,19 @@ View.prototype._bindItemEditDone = function (handler) {
this.blur();
}
});
};
View.prototype._bindItemEditCancel = function (handler) {
}
_bindItemEditCancel(handler) {
var that = this;
$delegate(that.$todoList, 'li .edit', 'keyup', function (event) {
if (event.keyCode === that.ESCAPE_KEY) {
this.dataset.iscanceled = true;
this.blur();
handler({id: that._itemId(this)});
handler({id: _itemId(this)});
}
});
};
View.prototype.bind = function (event, handler) {
}
bind(event, handler) {
var that = this;
if (event === 'newTodo') {
$on(that.$newTodo, 'change', function () {
@ -187,18 +140,18 @@ View.prototype.bind = function (event, handler) {
} else if (event === 'itemEdit') {
$delegate(that.$todoList, 'li label', 'dblclick', function () {
handler({id: that._itemId(this)});
handler({id: _itemId(this)});
});
} else if (event === 'itemRemove') {
$delegate(that.$todoList, '.destroy', 'click', function () {
handler({id: that._itemId(this)});
handler({id: _itemId(this)});
});
} else if (event === 'itemToggle') {
$delegate(that.$todoList, '.toggle', 'click', function () {
handler({
id: that._itemId(this),
id: _itemId(this),
completed: this.checked
});
});
@ -209,4 +162,45 @@ View.prototype.bind = function (event, handler) {
} else if (event === 'itemEditCancel') {
that._bindItemEditCancel(handler);
}
};
}
}
function _setFilter(currentPage) {
qs('.filters .selected').className = '';
qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
}
function _elementComplete(id, completed) {
var listItem = qs('[data-id="' + id + '"]');
if (!listItem) {
return;
}
listItem.className = completed ? 'completed' : '';
// In case it was toggled from an event and not by clicking the checkbox
qs('input', listItem).checked = completed;
}
function _editItem(id, title) {
var listItem = qs('[data-id="' + id + '"]');
if (!listItem) {
return;
}
listItem.className = listItem.className + ' editing';
var input = document.createElement('input');
input.className = 'edit';
listItem.appendChild(input);
input.focus();
input.value = title;
}
function _itemId(element) {
var li = $parent(element, 'li');
return parseInt(li.dataset.id, 10);
}