157 lines
3.4 KiB
JavaScript
157 lines
3.4 KiB
JavaScript
(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
|
|
|
|
/*
|
|
* API publique
|
|
*/
|
|
|
|
/*
|
|
* "Monte" l'application VanillaTodo sur l'élément du DOM
|
|
* correspondant au sélecteur CSS donné
|
|
*/
|
|
VT.mount = function(selector) {
|
|
|
|
_rootEl = document.querySelector(selector);
|
|
|
|
if(!_rootEl) {
|
|
throw new Error('Invalid selector "'+selector+'" !');
|
|
}
|
|
|
|
_initHandlers();
|
|
_todos = _loadTodos();
|
|
if(_todos.length > 0) {
|
|
_renderTodos();
|
|
}
|
|
|
|
};
|
|
|
|
/*
|
|
* API privée
|
|
*/
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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(),
|
|
text: newTodoInput.value
|
|
};
|
|
|
|
newTodoInput.value = '';
|
|
|
|
_todos.push(todo);
|
|
|
|
_renderTodos(_todos);
|
|
|
|
_saveTodos(_todos);
|
|
|
|
}
|
|
|
|
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);
|
|
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);
|
|
}
|
|
|
|
|
|
}(this.VanillaTodos = this.VanillaTodos || {}, window));
|