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

(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));