formations/javascript/base/exercices/vanilla-todos/vanilla-todos.js

157 lines
3.4 KiB
JavaScript
Raw Normal View History

2015-04-01 11:17:02 +02:00
(function(VT, window) {
"use strict";
// Déclaration des variables
var _rootEl; // Élement racine de notre application
var _todos = []; // Notre liste de todos
var document = window.document; // Alias
2015-04-01 11:17:02 +02:00
/*
* API publique
*/
2015-04-01 11:17:02 +02:00
/*
* "Monte" l'application VanillaTodo sur l'élément du DOM
* correspondant au sélecteur CSS donné
*/
VT.mount = function(selector) {
_rootEl = document.querySelector(selector);
2015-04-01 11:17:02 +02:00
if(!_rootEl) {
throw new Error('Invalid selector "'+selector+'" !');
}
_initHandlers();
_todos = _loadTodos();
if(_todos.length > 0) {
_renderTodos();
}
2015-04-01 11:17:02 +02:00
};
/*
* API privée
*/
2015-04-01 11:17:02 +02:00
function _initHandlers() {
var saveButton = _rootEl.querySelector('.new-todo');
saveButton.addEventListener('keydown', _saveNewTodoHandler);
var searchInput = _rootEl.querySelector('.search-todos');
searchInput.addEventListener('keyup', _searchInputChangeHandler);
// Délégation d'évènement, voir _removeTodoClickHandler
_rootEl.addEventListener('click', _removeTodoClickHandler);
2015-04-01 11:17:02 +02:00
}
function _removeTodoClickHandler(evt){
if(evt.target.matches('a.remove-todo')) {
var todoId = evt.target.dataset.todoId;
var todo;
for(var i = 0; i < _todos.length; ++i) {
todo = _todos[i];
if(todo.id == todoId) {
_todos.splice(i, 1);
_renderTodos(_todos);
_saveTodos(_todos);
}
}
}
}
2015-04-01 11:17:02 +02:00
function _searchInputChangeHandler(evt) {
var searchInput = evt.currentTarget;
var searchText = searchInput.value.toLowerCase();
var todos;
if(searchText) {
todos = _todos.filter(function(todo) {
if(todo.text.toLowerCase().indexOf(searchText) !== -1) {
return true;
}
});
}
_renderTodos(todos);
}
function _saveNewTodoHandler(evt) {
if(evt.keyCode !== 13) return; // Enter
var newTodoInput = evt.currentTarget;
var todo = {
id: Date.now(),
2015-04-01 11:17:02 +02:00
text: newTodoInput.value
};
newTodoInput.value = '';
_todos.push(todo);
_renderTodos(_todos);
_saveTodos(_todos);
2015-04-01 11:17:02 +02:00
}
function _renderTodos(todos) {
todos = todos || _todos;
var todosList = _rootEl.querySelector('.todos-list');
todosList.innerHTML = '';
todos.forEach(function(todo, i) {
var row = _createTodoRow(todo);
todosList.appendChild(row);
});
}
function _createTodoRow(todo) {
var row = document.createElement('tr');
row.appendChild( _createTodoCell(todo) );
row.appendChild( _createActionsCell(todo) );
return row;
}
function _createTodoCell(todo) {
var cell = document.createElement('td');
cell.innerHTML = todo.text;
return cell;
}
function _createActionsCell(todo) {
var cell = document.createElement('td');
var removeLink = document.createElement('a');
removeLink.href = '#';
removeLink.className = "remove-todo";
removeLink.dataset.todoId = todo.id;
removeLink.innerHTML = 'Supprimer';
cell.appendChild(removeLink);
2015-04-01 11:17:02 +02:00
return cell;
}
function _loadTodos() {
var todosStr = window.localStorage.getItem('vanillaTodos.todos');
return JSON.parse(todosStr || '[]');
}
function _saveTodos(todos) {
var todosStr = JSON.stringify(todos);
window.localStorage.setItem('vanillaTodos.todos', todosStr);
}
2015-04-01 11:17:02 +02:00
}(this.VanillaTodos = this.VanillaTodos || {}, window));