Skip to content

Instantly share code, notes, and snippets.

@sergey-kras

sergey-kras/todo.js

Last active Oct 24, 2019
Embed
What would you like to do?
todoVOVA.js
"use strict";
/** Класс State отвечает за общение между localStorage и DOM
* @initialState заполняет объект данными из localStorage или наоборот выгружает туда заготовку
* @reloadState Выдывается каждый раз при изменении чего либо в стейте, сдедом за собой
* вызывает обновление дома
* @addTask просто добавляет таску
* @addTask просто удаляет таску
* @this tasks временно хранит в себе задачи
* @this state отдает текущие задачи вовне
* */
class State {
tasks = [];
constructor() {
this.initialState();
}
get state() {
return this.tasks;
}
initialState = () => {
if(!localStorage.tasks) {
localStorage.tasks = JSON.stringify(this.tasks);
} else {
this.tasks = JSON.parse(localStorage.tasks);
}
};
reloadState = () => {
localStorage.tasks = JSON.stringify(this.tasks);
DOM.initialDOM(this.tasks);
};
addTask = ({text}) => {
const status = false;
const id = generateId();
this.tasks.push({text, status, id});
this.reloadState();
};
removeTask = id => {
const newState = this.tasks.filter(task => task.id !== id);
this.tasks = newState;
this.reloadState();
};
editTask = ({ id, text, status }) => {
const newState = this.tasks.map(task => {
if (task.id === id) {
return {
id,
text: text || task.text,
status: status
}
}
return task;
});
this.tasks = newState;
this.reloadState();
};
}
/** Класс DOMProvider отвечает за оптимизированного (в идеале, этого еще не сделано) общения с DOM
* @initialDOM берет данные из стейта и инициализирует дом
* @taskTemplate Просто html шаблон таски
* */
class DOMProvider {
container = $('#todoList');
constructor(state) {
this.initialDOM(state);
}
initialDOM = (state) => {
let initObject = '';
state.map((task, index) => {
initObject += this.taskTemplate(task, index);
});
this.container.html(initObject);
};
taskTemplate = ({ text, status, id }, index) => {
const completeMod = status ? '_complete' : '';
return (`<div class="task" data-id="${id}">
<input class="task__check" type="checkbox" class="complete" ${completeMod && 'checked'}>
<div class="task__number">${index}</div>
<div class="task__text ${completeMod}">
${text}
</div>
<button class="task__delete">Удалить</button>
<button class="task__edit">Редактировать</button>
</div>`);
}
}
/** Класс Eventer отвечает запуск прослушивания кликов и сообщения в State
* @startListners Запускает слушателей
* @listenForm Слушает все события в форме
* @listenRemove Слушает все события при клике на удаление
* */
class Eventer {
constructor() {
this.startListners();
}
startListners = () => {
this.listenForm();
this.listenRemove();
this.listenCheck();
};
listenForm = () => {
$("#formAdd").submit(e => {
e.preventDefault();
const input = $('#taskText');
const value = input.val();
input.val('');
STATE.addTask({ text: value });
});
};
listenRemove = () => {
$("#todoList").on('click', '.task__delete', e => {
const taskId = $(e.target).parent('.task').data('id');
STATE.removeTask(taskId);
});
};
listenCheck = () => {
$("#todoList").on('change', '.task__check', e => {
const id = $(e.target).parent('.task').data('id');
const status = $(e.target).prop('checked');
STATE.editTask({ status, id });
});
}
}
/**
* @generateId Вспомогательная функция для генерации id каждому таску
* */
function generateId() {
let rand = 1000000 - 0.5 + Math.random() * (9999999 - 1000000 + 1);
return Math.round(rand);
}
new Eventer();
const STATE = new State();
const DOM = new DOMProvider(STATE.state);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.