diff --git a/javascript/base/exercices/vanilla-todos/index.html b/javascript/base/exercices/vanilla-todos/index.html index 33d3cb9..ac1689f 100644 --- a/javascript/base/exercices/vanilla-todos/index.html +++ b/javascript/base/exercices/vanilla-todos/index.html @@ -1,32 +1,33 @@ +
-

Vanilla Todos

+

Vanilla Todos

- + - + diff --git a/javascript/base/exercices/vanilla-todos/style.css b/javascript/base/exercices/vanilla-todos/style.css index f4099e8..264b49f 100644 --- a/javascript/base/exercices/vanilla-todos/style.css +++ b/javascript/base/exercices/vanilla-todos/style.css @@ -1,4 +1,62 @@ +body { + font-family: "Droid Sans", "sans-serif"; + font-size: 16px; + background-color: #F8F8F8; + color: #333; +} + .container { - + margin: 0 auto; + width: 80%; +} + +.logo { + transform: rotate(45deg); + height: 40px; + display: inline-block; + vertical-align: bottom; + margin-right: 5px; +} + +#vanilla-todos { + width: 100%; +} + +#vanilla-todos table { + width: 100%; + text-align: left; + border-collapse: collapse; +} + +#vanilla-todos tr { + height: 40px; +} + +#vanilla-todos tr:hover { + background-color: #f4F4F4; +} + +#vanilla-todos tbody td { + border-bottom: 1px solid #CCC; +} + +#vanilla-todos tbody tr:last-child td { + border-bottom: none; +} + +#vanilla-todos table td:last-child { + width: 100px; +} + +#vanilla-todos .no-todo { + text-align: center; +} + +#vanilla-todos input[type="text"] { + border-radius: 3px; + border: 1px solid #ccc; + height: 40px; + padding: 3px 10px; + width: 100%; } diff --git a/javascript/base/exercices/vanilla-todos/vanilla-todos.js b/javascript/base/exercices/vanilla-todos/vanilla-todos.js index 515f84b..ad64f47 100644 --- a/javascript/base/exercices/vanilla-todos/vanilla-todos.js +++ b/javascript/base/exercices/vanilla-todos/vanilla-todos.js @@ -5,8 +5,11 @@ // Déclaration des variables var _rootEl; // Élement racine de notre application var _todos = []; // Notre liste de todos + var document = window.document; // Alias - // API publique + /* + * API publique + */ /* * "Monte" l'application VanillaTodo sur l'élément du DOM @@ -14,18 +17,23 @@ */ VT.mount = function(selector) { - _rootEl = window.document.querySelector(selector); + _rootEl = document.querySelector(selector); if(!_rootEl) { throw new Error('Invalid selector "'+selector+'" !'); } _initHandlers(); - _renderTodos(); + _todos = _loadTodos(); + if(_todos.length > 0) { + _renderTodos(); + } }; - // API privée + /* + * API privée + */ function _initHandlers() { @@ -34,8 +42,25 @@ var searchInput = _rootEl.querySelector('.search-todos'); searchInput.addEventListener('keyup', _searchInputChangeHandler); - //searchInput.addEventListener('change', _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) { @@ -64,6 +89,7 @@ var newTodoInput = evt.currentTarget; var todo = { + id: Date.now(), text: newTodoInput.value }; @@ -73,6 +99,8 @@ _renderTodos(_todos); + _saveTodos(_todos); + } function _renderTodos(todos) { @@ -105,8 +133,24 @@ 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)); diff --git a/javascript/base/fonctions-4.md b/javascript/base/fonctions-4.md index 8d8c4fd..7edb1fe 100644 --- a/javascript/base/fonctions-4.md +++ b/javascript/base/fonctions-4.md @@ -9,13 +9,13 @@ var showThisAndArgs = function() { showThisAndArgs(); // -> Window, [] -// Lier un fonction à un contexte +// Lier une fonction à un contexte var myContext = {}; var bound = showThisAndArgs.bind(myContext); bound(); // -> myContext, [] -// Invoquer une fonction en modifiant son contexte et/en injectant des arguments +// Invoquer une fonction en modifiant son contexte et/ou en injectant des arguments showThisAndArgs.call(myContext, 'arg1', 'arg2'); // -> myContext, ['arg1', 'arg2'] showThisAndArgs.apply(myContext, ['arg1', 'arg2']); // -> myContext, ['arg1', 'arg2'] diff --git a/javascript/base/modularisation-2.md b/javascript/base/modularisation-2.md index 7705635..58dd954 100644 --- a/javascript/base/modularisation-2.md +++ b/javascript/base/modularisation-2.md @@ -3,5 +3,5 @@ .cadoles-list[ - Javascript (jusqu'à ES6) n'intègre pas de mécanisme particulier afin de modulariser le code. - L'envergure des projets Javascript devenant de plus en plus importante, différentes méthodes ont vu le jour dans les projets portées par la communauté. -- Certaines sont accompagnées de spécification facilitant l'inter-opérabilité des projets, d'autres tiennent plus de la convention. +- Certaines sont accompagnées de spécification facilitant l'interopérabilité des projets, d'autres tiennent plus de la convention. ] diff --git a/javascript/base/modularisation-4.md b/javascript/base/modularisation-4.md index 7c98582..7962342 100644 --- a/javascript/base/modularisation-4.md +++ b/javascript/base/modularisation-4.md @@ -4,7 +4,8 @@ - Simple à mettre en place, méthode très répandue (ex: jQuery) - Peu de surcoût d'exécution - Pas de transformation à apporter au code pour le rendre exécutable dans le navigateur +- Interopérable avec les autres systèmes de modularisation via [UMD](https://github.com/umdjs/umd) **Désavantages** - Beaucoup de variantes, avec parfois des comportements légèrement différents -- Ne gère par les dépendances +- Ne gère pas directement les dépendances diff --git a/javascript/base/modularisation-6.md b/javascript/base/modularisation-6.md index f9be356..b2b356d 100644 --- a/javascript/base/modularisation-6.md +++ b/javascript/base/modularisation-6.md @@ -2,7 +2,7 @@ **Avantages** - Gestion et injection des dépendances -- Inter-opérable avec les autres méthodes de modularisation via configuration +- Interopérable avec les autres méthodes de modularisation via configuration - Véritable [spécification](https://github.com/amdjs/amdjs-api/blob/master/AMD.md), de nombreux "loaders" (Exemple: [requirejs](http://requirejs.org/)) compatibles existent - "Lazy-loading" possible de certaines parties du code - Possibilité de charger des ressources autres que du Javascript via un mécanisme de plugin (ressources type texte, templates, etc...) diff --git a/javascript/base/structures-1.md b/javascript/base/structures-1.md index 5c5af38..bab47ea 100644 --- a/javascript/base/structures-1.md +++ b/javascript/base/structures-1.md @@ -9,7 +9,7 @@ var test = 1; if(test < 1) { console.log('test est strictement inférieur à 1'); } else if(test > 1) { - console.log('test est strictement supérieur à 2'); + console.log('test est strictement supérieur à 1'); } else { console.log('test est égal à 1'); }
- +
TodoMes tâches Actions
Aucune todo pour le moment !Pas de tâches pour le moment !
- +