Commit c319fdf6 authored by Pascal Hartig's avatar Pascal Hartig

VanillaJS: Code Style

parent ae3f95e4
(function() {
(function () {
'use strict';
var todos = [],
stat = {},
ENTER_KEY = 13;
window.addEventListener( 'load', windowLoadHandler, false );
window.addEventListener('load', windowLoadHandler, false);
function Todo( title, completed ) {
function Todo(title, completed) {
this.id = getUuid();
this.title = title;
this.completed = completed;
......@@ -26,48 +26,48 @@
}
function addEventListeners() {
document.getElementById('new-todo').addEventListener( 'keypress', newTodoKeyPressHandler, false );
document.getElementById('toggle-all').addEventListener( 'change', toggleAllChangeHandler, false );
document.getElementById('new-todo').addEventListener('keypress', newTodoKeyPressHandler, false);
document.getElementById('toggle-all').addEventListener('change', toggleAllChangeHandler, false);
}
function inputEditTodoKeyPressHandler( event ) {
function inputEditTodoKeyPressHandler(event) {
var inputEditTodo = event.target,
trimmedText = inputEditTodo.value.trim(),
todoId = event.target.id.slice( 6 );
todoId = event.target.id.slice(6);
if ( trimmedText ) {
if ( event.keyCode === ENTER_KEY ) {
editTodo( todoId, trimmedText );
if (trimmedText) {
if (event.keyCode === ENTER_KEY) {
editTodo(todoId, trimmedText);
}
} else {
removeTodoById( todoId );
removeTodoById(todoId);
refreshData();
}
}
function inputEditTodoBlurHandler( event ) {
function inputEditTodoBlurHandler(event) {
var inputEditTodo = event.target,
todoId = event.target.id.slice( 6 );
todoId = event.target.id.slice(6);
editTodo( todoId, inputEditTodo.value );
editTodo(todoId, inputEditTodo.value);
}
function newTodoKeyPressHandler( event ) {
if ( event.keyCode === ENTER_KEY ) {
addTodo( document.getElementById('new-todo').value );
function newTodoKeyPressHandler(event) {
if (event.keyCode === ENTER_KEY) {
addTodo(document.getElementById('new-todo').value);
}
}
function toggleAllChangeHandler( event ) {
for ( var i in todos ) {
todos[ i ].completed = event.target.checked;
function toggleAllChangeHandler(event) {
for (var i in todos) {
todos[i].completed = event.target.checked;
}
refreshData();
}
function spanDeleteClickHandler( event ) {
removeTodoById( event.target.getAttribute('data-todo-id') );
function spanDeleteClickHandler(event) {
removeTodoById(event.target.getAttribute('data-todo-id'));
refreshData();
}
......@@ -76,59 +76,59 @@
refreshData();
}
function todoContentHandler( event ) {
function todoContentHandler(event) {
var todoId = event.target.getAttribute('data-todo-id'),
div = document.getElementById( 'li_' + todoId ),
inputEditTodo = document.getElementById( 'input_' + todoId );
div = document.getElementById('li_' + todoId),
inputEditTodo = document.getElementById('input_' + todoId);
div.className = 'editing';
inputEditTodo.focus();
}
function checkboxChangeHandler( event ) {
function checkboxChangeHandler(event) {
var checkbox = event.target,
todo = getTodoById( checkbox.getAttribute('data-todo-id') );
todo = getTodoById(checkbox.getAttribute('data-todo-id'));
todo.completed = checkbox.checked;
refreshData();
}
function loadTodos() {
if ( !localStorage.getItem('todos-vanillajs') ) {
localStorage.setItem( 'todos-vanillajs', JSON.stringify([]) );
if (!localStorage.getItem('todos-vanillajs')) {
localStorage.setItem('todos-vanillajs', JSON.stringify([]));
}
todos = JSON.parse( localStorage.getItem('todos-vanillajs') );
todos = JSON.parse(localStorage.getItem('todos-vanillajs'));
}
function addTodo( text ) {
function addTodo(text) {
var trimmedText = text.trim();
if ( trimmedText ) {
var todo = new Todo( trimmedText, false );
todos.push( todo );
if (trimmedText) {
var todo = new Todo(trimmedText, false);
todos.push(todo);
refreshData();
}
}
function editTodo( todoId, text ) {
function editTodo(todoId, text) {
var i, l;
for ( i = 0, l = todos.length; i < l; i++ ) {
if ( todos[ i ].id === todoId ) {
todos[ i ].title = text;
for (i = 0, l = todos.length; i < l; i++) {
if (todos[i].id === todoId) {
todos[i].title = text;
}
}
refreshData();
}
function removeTodoById( id ) {
function removeTodoById(id) {
var i = todos.length;
while ( i-- ) {
if ( todos[ i ].id === id ) {
todos.splice( i, 1 );
while (i--) {
if (todos[i].id === id) {
todos.splice(i, 1);
}
}
}
......@@ -136,20 +136,20 @@
function removeTodosCompleted() {
var i = todos.length;
while ( i-- ) {
while (i--) {
console.log(i);
if ( todos[ i ].completed ) {
todos.splice( i, 1 );
if (todos[i].completed) {
todos.splice(i, 1);
}
}
}
}
function getTodoById( id ) {
function getTodoById(id) {
var i, l;
for ( i = 0, l = todos.length; i < l; i++ ) {
if ( todos[ i ].id === id ) {
return todos[ i ];
for (i = 0, l = todos.length; i < l; i++) {
if (todos[i].id === id) {
return todos[i];
}
}
}
......@@ -163,7 +163,7 @@
}
function saveTodos() {
localStorage.setItem( 'todos-vanillajs', JSON.stringify( todos ) );
localStorage.setItem('todos-vanillajs', JSON.stringify(todos));
}
function computeStats() {
......@@ -172,8 +172,8 @@
stat = new Stat();
stat.totalTodo = todos.length;
for ( i = 0, l = todos.length; i < l; i++ ) {
if ( todos[ i ].completed ) {
for (i = 0, l = todos.length; i < l; i++) {
if (todos[i].completed) {
stat.todoCompleted++;
}
}
......@@ -192,59 +192,59 @@
ul.innerHTML = '';
document.getElementById('new-todo').value = '';
for ( i = 0, l = todos.length; i < l; i++ ) {
todo = todos[ i ];
for (i = 0, l = todos.length; i < l; i++) {
todo = todos[i];
// create checkbox
checkbox = document.createElement('input');
checkbox.className = 'toggle';
checkbox.setAttribute( 'data-todo-id', todo.id );
checkbox.setAttribute('data-todo-id', todo.id);
checkbox.type = 'checkbox';
checkbox.addEventListener( 'change', checkboxChangeHandler );
checkbox.addEventListener('change', checkboxChangeHandler);
// create div text
label = document.createElement('label');
label.setAttribute( 'data-todo-id', todo.id );
label.appendChild( document.createTextNode( todo.title ) );
label.addEventListener( 'dblclick', todoContentHandler );
label.setAttribute('data-todo-id', todo.id);
label.appendChild(document.createTextNode(todo.title));
label.addEventListener('dblclick', todoContentHandler);
// create delete button
deleteLink = document.createElement('button');
deleteLink.className = 'destroy';
deleteLink.setAttribute( 'data-todo-id', todo.id );
deleteLink.addEventListener( 'click', spanDeleteClickHandler );
deleteLink.setAttribute('data-todo-id', todo.id);
deleteLink.addEventListener('click', spanDeleteClickHandler);
// create divDisplay
divDisplay = document.createElement('div');
divDisplay.className = 'view';
divDisplay.setAttribute( 'data-todo-id', todo.id );
divDisplay.appendChild( checkbox );
divDisplay.appendChild( label );
divDisplay.appendChild( deleteLink );
divDisplay.setAttribute('data-todo-id', todo.id);
divDisplay.appendChild(checkbox);
divDisplay.appendChild(label);
divDisplay.appendChild(deleteLink);
// create todo input
inputEditTodo = document.createElement('input');
inputEditTodo.id = 'input_' + todo.id;
inputEditTodo.className = 'edit';
inputEditTodo.value = todo.title;
inputEditTodo.addEventListener( 'keypress', inputEditTodoKeyPressHandler );
inputEditTodo.addEventListener( 'blur', inputEditTodoBlurHandler );
inputEditTodo.addEventListener('keypress', inputEditTodoKeyPressHandler);
inputEditTodo.addEventListener('blur', inputEditTodoBlurHandler);
// create li
li = document.createElement('li');
li.id = 'li_' + todo.id;
li.appendChild( divDisplay );
li.appendChild( inputEditTodo );
li.appendChild(divDisplay);
li.appendChild(inputEditTodo);
if ( todo.completed ) {
if (todo.completed) {
li.className += 'complete';
checkbox.checked = true;
}
ul.appendChild( li );
ul.appendChild(li);
}
}
......@@ -255,14 +255,14 @@
}
function redrawStatsUI() {
removeChildren( document.getElementsByTagName('footer')[0] );
removeChildren(document.getElementsByTagName('footer')[0]);
document.getElementById('footer').style.display = todos.length ? 'block' : 'none';
if ( stat.todoCompleted ) {
if (stat.todoCompleted) {
drawTodoClear();
}
if ( stat.totalTodo ) {
if (stat.totalTodo) {
drawTodoCount();
}
}
......@@ -270,29 +270,29 @@
function drawTodoCount() {
var number = document.createElement('strong'),
remaining = document.createElement('span'),
text = ' ' + ( stat.todoLeft === 1 ? 'item' : 'items' ) + ' left';
text = ' ' + (stat.todoLeft === 1 ? 'item' : 'items') + ' left';
// create remaining count
number.innerHTML = stat.todoLeft;
remaining.id = 'todo-count';
remaining.appendChild( number );
remaining.appendChild( document.createTextNode( text ) );
remaining.appendChild(number);
remaining.appendChild(document.createTextNode(text));
document.getElementsByTagName('footer')[0].appendChild( remaining );
document.getElementsByTagName('footer')[0].appendChild(remaining);
}
function drawTodoClear() {
var buttonClear = document.createElement('button');
buttonClear.id = 'clear-completed';
buttonClear.addEventListener( 'click', hrefClearClickHandler );
buttonClear.addEventListener('click', hrefClearClickHandler);
buttonClear.innerHTML = 'Clear completed (' + stat.todoCompleted + ')';
document.getElementsByTagName('footer')[0].appendChild( buttonClear );
document.getElementsByTagName('footer')[0].appendChild(buttonClear);
}
function removeChildren( node ) {
function removeChildren(node) {
node.innerHTML = '';
}
......@@ -300,12 +300,12 @@
var i, random,
uuid = '';
for ( i = 0; i < 32; i++ ) {
for (i = 0; i < 32; i++) {
random = Math.random() * 16 | 0;
if ( i === 8 || i === 12 || i === 16 || i === 20 ) {
if (i === 8 || i === 12 || i === 16 || i === 20) {
uuid += '-';
}
uuid += ( i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random) ).toString( 16 );
uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);
}
return uuid;
}
......
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