Skip to content

T
todomvc
Commit 8d004d8f authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Vanillajs app: Enforce code style

parent 3c9b36b4
Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 112 deletions
vanilla-examples/vanillajs/js/app.js
View file @ 8d004d8f
...@@ -2,8 +2,7 @@ var todos = [], ...@@ -2,8 +2,7 @@ var todos = [],
stat = {}, stat = {},
ENTER_KEY = 13; 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.id = getUuid();
...@@ -17,7 +16,6 @@ function Stat() { ...@@ -17,7 +16,6 @@ function Stat() {
this.totalTodo = 0; this.totalTodo = 0;
} }
function windowLoadHandler() { function windowLoadHandler() {
loadTodos(); loadTodos();
refreshData(); refreshData();
...@@ -25,54 +23,48 @@ function windowLoadHandler() { ...@@ -25,54 +23,48 @@ function windowLoadHandler() {
} }
function addEventListeners() { function addEventListeners() {
document.getElementById( 'new-todo' ).addEventListener( "keypress", newTodoKeyPressHandler, false ); document.getElementById('new-todo').addEventListener( 'keypress', newTodoKeyPressHandler, false );
document.getElementById( 'toggle-all' ).addEventListener( "change", toggleAllChangeHandler, false ); document.getElementById('toggle-all').addEventListener( 'change', toggleAllChangeHandler, false );
} }
function inputEditTodoKeyPressHandler( event ) { function inputEditTodoKeyPressHandler( event ) {
var inputEditTodo, var inputEditTodo = event.target,
trimmedText, trimmedText = inputEditTodo.value.trim(),
todoId;
inputEditTodo = event.target;
trimmedText = inputEditTodo.value.trim();
todoId = event.target.id.slice( 6 ); todoId = event.target.id.slice( 6 );
if ( trimmedText ) { if ( trimmedText ) {
if ( event.keyCode === ENTER_KEY ) { if ( event.keyCode === ENTER_KEY ) {
editTodo( todoId, trimmedText ); editTodo( todoId, trimmedText );
} }
} } else {
else {
removeTodoById( todoId ); removeTodoById( todoId );
refreshData(); refreshData();
} }
} }
function inputEditTodoBlurHandler( event ) { function inputEditTodoBlurHandler( event ) {
var inputEditTodo, var inputEditTodo = event.target,
todoId;
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 ) { function newTodoKeyPressHandler( event ) {
if ( event.keyCode === ENTER_KEY ) { if ( event.keyCode === ENTER_KEY ) {
addTodo( document.getElementById( 'new-todo' ).value ); addTodo( document.getElementById('new-todo').value );
} }
} }
function toggleAllChangeHandler( event ) { function toggleAllChangeHandler( event ) {
for ( var i in todos ) { for ( var i in todos ) {
todos[i].completed = event.target.checked; todos[ i ].completed = event.target.checked;
} }
refreshData(); refreshData();
} }
function spanDeleteClickHandler( event ) { function spanDeleteClickHandler( event ) {
removeTodoById( event.target.getAttribute( 'data-todo-id' ) ); removeTodoById( event.target.getAttribute('data-todo-id') );
refreshData(); refreshData();
} }
...@@ -82,36 +74,28 @@ function hrefClearClickHandler() { ...@@ -82,36 +74,28 @@ function hrefClearClickHandler() {
} }
function todoContentHandler( event ) { function todoContentHandler( event ) {
var todoId, var todoId = event.target.getAttribute('data-todo-id'),
div, div = document.getElementById( 'li_' + todoId ),
inputEditTodo; inputEditTodo = document.getElementById( 'input_' + todoId );
todoId = event.target.getAttribute( 'data-todo-id' );
div = document.getElementById( 'li_'+todoId );
div.className = 'editing'; div.className = 'editing';
inputEditTodo = document.getElementById( 'input_' + todoId );
inputEditTodo.select(); inputEditTodo.select();
} }
function checkboxChangeHandler( event ) { function checkboxChangeHandler( event ) {
var checkbox, var checkbox = event.target,
todo; todo = getTodoById( checkbox.getAttribute('data-todo-id') );
checkbox = event.target;
todo = getTodoById( checkbox.getAttribute( 'data-todo-id' ) );
todo.completed = checkbox.checked; todo.completed = checkbox.checked;
refreshData(); refreshData();
} }
function loadTodos() { function loadTodos() {
if ( !localStorage.getItem( 'todos-vanillajs' ) ) { if ( !localStorage.getItem('todos-vanillajs') ) {
localStorage.setItem( 'todos-vanillajs', JSON.stringify( [] ) ); 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 ) {
...@@ -125,42 +109,44 @@ function addTodo( text ) { ...@@ -125,42 +109,44 @@ function addTodo( text ) {
} }
function editTodo( todoId, text ) { function editTodo( todoId, text ) {
var i; var i, l;
for ( i=0; i < todos.length; i++ ) { for ( i = 0, l = todos.length; i < l; i++ ) {
if ( todos[i].id === todoId ) { if ( todos[ i ].id === todoId ) {
todos[i].title = text; todos[ i ].title = text;
} }
} }
refreshData(); refreshData();
} }
function removeTodoById( id ) { function removeTodoById( id ) {
var i; var i, l;
for ( i=0; i < todos.length; i++ ) { for ( i = 0, l = todos.length; i < l; i++ ) {
if ( todos[i].id === id ) { if ( todos[ i ].id === id ) {
todos.splice( i, 1 ); todos.splice( i, 1 );
} }
} }
} }
function removeTodosCompleted() { function removeTodosCompleted() {
var i = todos.length-1; var i = todos.length;
while ( i >= 0 ) {
if ( todos[i].completed ) { while ( i-- ) {
console.log(i);
if ( todos[ i ].completed ) {
todos.splice( i, 1 ); todos.splice( i, 1 );
} }
--i;
} }
} }
function getTodoById( id ) { function getTodoById( id ) {
var i; var i, l;
for ( i=0; i < todos.length; i++ ) { for ( i = 0, l = todos.length; i < l; i++ ) {
if ( todos[i].id === id ) { if ( todos[ i ].id === id ) {
return todos[i]; return todos[ i ];
} }
} }
} }
...@@ -178,62 +164,55 @@ function saveTodos() { ...@@ -178,62 +164,55 @@ function saveTodos() {
} }
function computeStats() { function computeStats() {
var i; var i, l;
stat = new Stat(); stat = new Stat();
stat.totalTodo = todos.length; stat.totalTodo = todos.length;
for ( i=0; i < todos.length; i++ ) {
if ( todos[i].completed ) { for ( i = 0, l = todos.length; i < l; i++ ) {
stat.todoCompleted += 1; if ( todos[ i ].completed ) {
stat.todoCompleted++;
} }
} }
stat.todoLeft = stat.totalTodo - stat.todoCompleted; stat.todoLeft = stat.totalTodo - stat.todoCompleted;
} }
function redrawTodosUI() { function redrawTodosUI() {
var ul, var todo, checkbox, label, deleteLink, divDisplay, inputEditTodo, li, i, l,
todo, ul = document.getElementById('todo-list');
checkbox,
label,
deleteLink,
divDisplay,
inputEditTodo,
li,
i;
ul = document.getElementById( 'todo-list' );
document.getElementById( 'main' ).style.display = todos.length ? 'block' : 'none'; document.getElementById('main').style.display = todos.length ? 'block' : 'none';
ul.innerHTML = ""; ul.innerHTML = '';
document.getElementById( 'new-todo' ).value = ''; document.getElementById('new-todo').value = '';
for ( i= 0; i < todos.length; i++ ) { for ( i = 0, l = todos.length; i < l; i++ ) {
todo = todos[i]; todo = todos[ i ];
// create checkbox // create checkbox
checkbox = document.createElement( 'input' ); checkbox = document.createElement('input');
checkbox.className = 'toggle'; checkbox.className = 'toggle';
checkbox.setAttribute( 'data-todo-id', todo.id ); checkbox.setAttribute( 'data-todo-id', todo.id );
checkbox.type = 'checkbox'; checkbox.type = 'checkbox';
checkbox.addEventListener( 'change', checkboxChangeHandler ); checkbox.addEventListener( 'change', checkboxChangeHandler );
// create div text // create div text
label = document.createElement( 'label' ); label = document.createElement('label');
label.setAttribute( 'data-todo-id', todo.id ); label.setAttribute( 'data-todo-id', todo.id );
label.appendChild( document.createTextNode( todo.title ) ); label.appendChild( document.createTextNode( todo.title ) );
// create delete button // create delete button
deleteLink = document.createElement( 'button' ); deleteLink = document.createElement('button');
deleteLink.className = 'destroy'; deleteLink.className = 'destroy';
deleteLink.setAttribute( 'data-todo-id', todo.id ); deleteLink.setAttribute( 'data-todo-id', todo.id );
deleteLink.addEventListener( 'click', spanDeleteClickHandler ); deleteLink.addEventListener( 'click', spanDeleteClickHandler );
// create divDisplay // create divDisplay
divDisplay = document.createElement( 'div' ); divDisplay = document.createElement('div');
divDisplay.className = 'view'; divDisplay.className = 'view';
divDisplay.setAttribute( 'data-todo-id', todo.id ); divDisplay.setAttribute( 'data-todo-id', todo.id );
divDisplay.appendChild( checkbox ); divDisplay.appendChild( checkbox );
...@@ -243,7 +222,7 @@ function redrawTodosUI() { ...@@ -243,7 +222,7 @@ function redrawTodosUI() {
// create todo input // create todo input
inputEditTodo = document.createElement( 'input' ); inputEditTodo = document.createElement('input');
inputEditTodo.id = 'input_' + todo.id; inputEditTodo.id = 'input_' + todo.id;
inputEditTodo.className = 'edit'; inputEditTodo.className = 'edit';
inputEditTodo.value = todo.title; inputEditTodo.value = todo.title;
...@@ -252,89 +231,72 @@ function redrawTodosUI() { ...@@ -252,89 +231,72 @@ function redrawTodosUI() {
// create li // create li
li = document.createElement( 'li' ); li = document.createElement('li');
li.id = 'li_' + todo.id; li.id = 'li_' + todo.id;
li.appendChild( divDisplay ); li.appendChild( divDisplay );
li.appendChild( inputEditTodo ); li.appendChild( inputEditTodo );
if ( todo.completed ) if ( todo.completed ) {
{
li.className += 'complete'; li.className += 'complete';
checkbox.checked = true; checkbox.checked = true;
} }
ul.appendChild( li ); ul.appendChild( li );
} }
} }
function changeToggleAllCheckboxState() { function changeToggleAllCheckboxState() {
var toggleAll = document.getElementById( 'toggle-all' ); var toggleAll = document.getElementById('toggle-all');
if ( stat.todoCompleted === todos.length ) {
toggleAll.checked = true; toggleAll.checked = stat.todoCompleted === todos.length;
} else {
toggleAll.checked = false;
}
} }
function redrawStatsUI() { function redrawStatsUI() {
removeChildren( document.getElementsByTagName( 'footer' )[ 0 ] ); removeChildren( document.getElementsByTagName('footer')[0] );
document.getElementById( 'footer' ).style.display = todos.length ? 'block' : 'none'; document.getElementById('footer').style.display = todos.length ? 'block' : 'none';
if ( stat.todoCompleted > 0 ) { if ( stat.todoCompleted ) {
drawTodoClear(); drawTodoClear();
} }
if ( stat.totalTodo > 0 ) { if ( stat.totalTodo ) {
drawTodoCount(); drawTodoCount();
} }
} }
function drawTodoCount() { function drawTodoCount() {
var number = document.createElement('strong'),
remaining = document.createElement('span'),
text = ' ' + ( stat.todoLeft === 1 ? 'item' : 'items' ) + ' left';
var number,
theText,
remaining;
// create remaining count // create remaining count
number = document.createElement( 'strong' );
number.innerHTML = stat.todoLeft; number.innerHTML = stat.todoLeft;
theText = ' item';
if ( stat.todoLeft !== 1 ) {
theText += 's';
}
theText += ' left';
remaining = document.createElement( 'span' );
remaining.id = 'todo-count'; remaining.id = 'todo-count';
remaining.appendChild( number ); remaining.appendChild( number );
remaining.appendChild( document.createTextNode( theText ) ); remaining.appendChild( document.createTextNode( text ) );
document.getElementsByTagName( 'footer' )[ 0 ].appendChild( remaining ); document.getElementsByTagName('footer')[0].appendChild( remaining );
} }
function drawTodoClear() { function drawTodoClear() {
var buttonClear = document.createElement('button');
var buttonClear = document.createElement( 'button' );
buttonClear.id = 'clear-completed'; buttonClear.id = 'clear-completed';
buttonClear.addEventListener( 'click', hrefClearClickHandler ); buttonClear.addEventListener( 'click', hrefClearClickHandler );
buttonClear.innerHTML = 'Clear completed (' + stat.todoCompleted + ')'; 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 = ''; node.innerHTML = '';
} }
function getUuid() { function getUuid() {
var uuid = '', var i, random,
i, uuid = '';
random;
for ( i = 0; i < 32; i++ ) { for ( i = 0; i < 32; i++ ) {
random = Math.random() * 16 | 0; random = Math.random() * 16 | 0;
......
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