var todo = (function(){ | |
var tasks = []; | |
var STATE_P = '진행'; | |
var STATE_C = '완료'; | |
var addTask = (function(){ | |
var id = 0; | |
return function(title){ | |
var result = id; | |
tasks.push({id:id++, title:title, state:STATE_P}); | |
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_P) changeState(id, STATE_C); | |
else changeState(id, STATE_P); | |
break; | |
} | |
} | |
} | |
} | |
})(); | |
var con = (function(){ | |
var host; | |
return { | |
init: function(todo){ | |
host = todo; | |
console.clear(); | |
}, | |
render: function(tasks, STATE_P, STATE_C){ | |
var task; | |
console.log('진행'); | |
for(var i = 0; i < tasks.length; i++){ | |
task = tasks[i]; | |
if(task.state === STATE_P){ | |
console.log(task.id+'.', task.title+'('+task.state+')'); | |
} | |
} | |
console.log('완료'); | |
for(var i = 0; i < tasks.length; i++){ | |
task = tasks[i]; | |
if(task.state === STATE_C){ | |
console.log(task.id+'.', task.title+'('+task.state+')'); | |
} | |
} | |
} | |
} | |
}); | |
var html = (function(){ | |
var completeLi, progressLi; | |
var host; | |
return { | |
init: function(todo){ | |
host = todo; | |
progressLi = document.querySelector('#todo .progress li'); | |
completeLi = document.querySelector('#todo .complete li'); | |
progressLi.parentNode.removeChild(progressLi); | |
completeLi.parentNode.removeChild(completeLi); | |
}, | |
render: function(tasks, STATE_P, STATE_C){ | |
if(typeof completeLi === 'undefined' || typeof progressLi === 'undefined') { | |
return; | |
} | |
var progress = document.querySelector('#todo .progress'); | |
var complete = document.querySelector('#todo .complete'); | |
progress.innerHTML = ''; | |
complete.innerHTML = ''; | |
var task, child, inputs; | |
for(var i = 0; i < tasks.length; i++){ | |
task = tasks[i]; | |
if(task.state === STATE_P){ | |
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 if(task.state === STATE_C){ | |
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')); | |
}; | |
complete.appendChild(child); | |
} | |
} | |
console.log('// 할일 입력창을 비운다.'); | |
} | |
} | |
})(); | |
todo.setRenderer(html); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment