Skip to content

Instantly share code, notes, and snippets.

/STATE 객체 생성

Created Jun 15, 2017
Embed
What would you like to do?
var STATE = (function() {
var c = {toString: function () {return '완료';}};
var p = {toString: function () {return '진행';}};
return {
COMPLETE: function(){return c;},
PROGRESS: function(){return p;}
}
})();
var todo = (function(){
var tasks = [];
var addTask = (function(){
var id = 0;
return function(title){
var result = id;
tasks.push({id:id++, title:title, state:STATE.PROGRESS()});
render();
return result;
}
})();
var removeTask = function(id){
var isRemoved = false;
for(var i =0; i< tasks.length; i++){
if(tasks[i].id === id){
tasks.splice(i,1);
isRemoved = true;
break;
}
}
if(!isRemoved) {
warning('삭제된거 없음(removeTask : invalid id)');
}
render();
};
var changeState = function(id, state){
var ID = false, STATE;
for(var i = 0; i < tasks.length; i++){
if(tasks[i].id === id){
ID = id;
break;
}
}
if(ID === false) {
warning('changeState : invalid id - ' + id);
return;
}
STATE = state;
for(var i =0; i< tasks.length; i++){
if(tasks[i].id === ID){
tasks[i].state = STATE;
break;
}
}
render();
};
var warning = console.log;
var target;
var render = function(){
target.render(Object.assign(tasks));
};
return{
setRenderer: function(renderer){
if(typeof renderer.init !== 'function' || typeof renderer.render !== 'function') return;
target = renderer;
target.init(todo);
},
add:addTask,
remove:removeTask,
toggle:function(id){
for(var i = 0; i<tasks.length;i++){
if(tasks[i].id === id){
if(tasks[i].state === STATE.PROGRESS()) changeState(id, STATE.COMPLETE());
else changeState(id, STATE.PROGRESS());
break;
}
}
}
}
})();
var con = (function(){
return {
init: function(todo){
console.clear();
},
render: function(tasks){
console.log('진행');
var task;
for(var i = 0; i < tasks.length; i++){
task = tasks[i];
if(task.state === STATE.PROGRESS()){
console.log(task.id+'.', task.title+'('+task.state.toString()+')');
}
}
console.log('완료');
for(var i = 0; i < tasks.length; i++){
task = tasks[i];
if(task.state === STATE.COMPLETE()){
console.log(task.id+'.', task.title+'('+task.state.toString()+')');
}
}
}
}
})();
var html = (function(){
var completeLi, progressLi;
var host;
return {
init: function(todo){
progressLi = document.querySelector('#todo .progress li');
completeLi = document.querySelector('#todo .complete li');
host = todo;
progressLi.parentNode.removeChild(progressLi);
completeLi.parentNode.removeChild(completeLi);
console.log('form 안의 input 을 연결');//host.add
},
render: function(tasks){
if(typeof completeLi === 'undefined' || typeof progressLi === 'undefined') {
return;
}
console.log('//각 리스트를 비운다.');
document.querySelector('#todo .progress').innerHTML = '';
document.querySelector('#todo .complete').innerHTML = '';
console.log('//진행을 채운다.');
console.log('//완료를 채운다.');
var progress = document.querySelector('#todo .progress');
var complete = document.querySelector('#todo .complete');
var task, child, inputs;
for(var i = 0; i < tasks.length; i++){
task = tasks[i];
if(task.state === STATE.PROGRESS()){
child = progressLi.cloneNode(true); // true 를 하면 노드의 자식까지 모두 복제
child.querySelector('p').innerHTML = task.title;
inputs = child.querySelectorAll('input');
inputs[0].setAttribute('data-task-id', task.id);
inputs[0].onclick = function(){
host.toggle(this.getAttribute('data-task-id'));
};
inputs[1].setAttribute('data-task-id', task.id);
inputs[1].onclick = function(){
host.remove(this.getAttribute('data-task-id'));
};
progress.appendChild(child);
}else{
child = completeLi.cloneNode(true); // true 를 하면 노드의 자식까지 모두 복제
child.querySelector('p').innerHTML = task.title;
inputs = child.querySelectorAll('input');
inputs[0].setAttribute('data-task-id', task.id);
inputs[0].onclick = function(){
host.toggle(this.getAttribute('data-task-id'));
};
inputs[1].setAttribute('data-task-id', task.id);
inputs[1].onclick = function(){
host.remove(this.getAttribute('data-task-id'));
};
complete.appendChild(child);
}
}
console.log('//인풋 박스를 비운다.');
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment