(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; } /* * Charge les tâches depuis le localStorage * * Retourne les tâches sous la forme d'un tableau d'objets */ function _loadTodos() { var todosStr = window.localStorage.getItem('vanillaTodos.todos'); return JSON.parse(todosStr || '[]'); } /* * Sauvegarde le tableau de tâches donné dans le localStorage * * Ne retourne rien */ function _saveTodos(todos) { var todosStr = JSON.stringify(todos); window.localStorage.setItem('vanillaTodos.todos', todosStr); } }(this.VanillaTodos = this.VanillaTodos || {}, window));