113 lines
2.3 KiB
JavaScript
113 lines
2.3 KiB
JavaScript
(function(VT, window) {
|
|
|
|
"use strict";
|
|
|
|
// Déclaration des variables
|
|
var _rootEl; // Élement racine de notre application
|
|
var _todos = []; // Notre liste de todos
|
|
|
|
// API publique
|
|
|
|
/*
|
|
* "Monte" l'application VanillaTodo sur l'élément du DOM
|
|
* correspondant au sélecteur CSS donné
|
|
*/
|
|
VT.mount = function(selector) {
|
|
|
|
_rootEl = window.document.querySelector(selector);
|
|
|
|
if(!_rootEl) {
|
|
throw new Error('Invalid selector "'+selector+'" !');
|
|
}
|
|
|
|
_initHandlers();
|
|
_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);
|
|
//searchInput.addEventListener('change', _searchInputChangeHandler);
|
|
|
|
}
|
|
|
|
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 = {
|
|
text: newTodoInput.value
|
|
};
|
|
|
|
newTodoInput.value = '';
|
|
|
|
_todos.push(todo);
|
|
|
|
_renderTodos(_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');
|
|
return cell;
|
|
}
|
|
|
|
|
|
}(this.VanillaTodos = this.VanillaTodos || {}, window));
|