|
| 1 | +const todobtn = document.getElementById('todobtn') |
| 2 | +const inprogressbtn = document.getElementById('inprogressbtn') |
| 3 | +const donebtn = document.getElementById('donebtn') |
| 4 | + |
| 5 | +const todo = document.querySelector('#todo .taskcontainer') |
| 6 | +const inprogress = document.querySelector('#inprogress .taskcontainer') |
| 7 | +const done = document.querySelector('#done .taskcontainer') |
| 8 | +let newTasks = document.querySelectorAll('.newtask') |
| 9 | + |
| 10 | +let draggables = document.querySelectorAll('.draggable') |
| 11 | +const taskcontainers = document.querySelectorAll('.taskcontainer') |
| 12 | +let taskId = 0; |
| 13 | + |
| 14 | +(function () { //get tasks from localstorage |
| 15 | + let tasksFromLS = [] |
| 16 | + Object.keys(localStorage).forEach(task => tasksFromLS. |
| 17 | + push(JSON.parse(localStorage.getItem(task)))) |
| 18 | + |
| 19 | + if (localStorage.length > 0) { |
| 20 | + let ids = [] |
| 21 | + tasksFromLS.forEach(task => ids.push(task.id)) |
| 22 | + console.log(ids) |
| 23 | + taskId = Math.max.apply(Math, ids) |
| 24 | + } |
| 25 | + |
| 26 | + let todoTasks = [] |
| 27 | + let inprogressTasks = [] |
| 28 | + let doneTasks = [] |
| 29 | + |
| 30 | + const tasksFromLSMapped = { |
| 31 | + todo: todoTasks, |
| 32 | + inprogress: inprogressTasks, |
| 33 | + done: doneTasks, |
| 34 | + } |
| 35 | + |
| 36 | + tasksFromLS.forEach(task => { |
| 37 | + if (task === null) { |
| 38 | + console.log('no tasks') |
| 39 | + } else if (task.col === 'todoTask') { |
| 40 | + todoTasks.push(task) |
| 41 | + } else if (task.col === 'inprogressTask') { |
| 42 | + inprogressTasks.push(task) |
| 43 | + } else if (task.col === 'doneTask') { |
| 44 | + doneTasks.push(task) |
| 45 | + } |
| 46 | + }) |
| 47 | + |
| 48 | + |
| 49 | + todoTasks.sort((a, b) => sortTasks(a, b)) |
| 50 | + inprogressTasks.sort((a, b) => sortTasks(a, b)) |
| 51 | + doneTasks.sort((a, b) => sortTasks(a, b)) |
| 52 | + |
| 53 | + function sortTasks(a, b) { |
| 54 | + if (a.order < b.order) { |
| 55 | + return -1 |
| 56 | + } |
| 57 | + } |
| 58 | + |
| 59 | + tasksFromLSMapped.todo.forEach(task => todo. |
| 60 | + appendChild(createTextArea(task))) |
| 61 | + tasksFromLSMapped.inprogress.forEach(task => inprogress. |
| 62 | + appendChild(createTextArea(task))) |
| 63 | + tasksFromLSMapped.done.forEach(task => done. |
| 64 | + appendChild(createTextArea(task))) |
| 65 | + |
| 66 | + function createTextArea(task) { |
| 67 | + let textarea = document.createElement('textarea') |
| 68 | + textarea.classList.add('newtask', 'draggable', `${task.col}`) |
| 69 | + textarea.setAttribute('draggable', 'true') |
| 70 | + textarea.innerHTML += `${task.text}` |
| 71 | + textarea.id = task.id |
| 72 | + return textarea |
| 73 | + } |
| 74 | + renewTasksClasses() |
| 75 | +})(); |
| 76 | + |
| 77 | +console.log(taskId) |
| 78 | + |
| 79 | +todobtn.addEventListener('click', () => { |
| 80 | + newTask(todo) |
| 81 | + renewTasksClasses() |
| 82 | +}) |
| 83 | + |
| 84 | +inprogressbtn.addEventListener('click', () => { |
| 85 | + newTask(inprogress) |
| 86 | + renewTasksClasses() |
| 87 | +}) |
| 88 | + |
| 89 | +donebtn.addEventListener('click', () => { |
| 90 | + document.querySelectorAll('.doneTask.draggable').forEach(el => { |
| 91 | + el.remove() |
| 92 | + localStorage.removeItem(`Task${el.id}`) |
| 93 | + }) |
| 94 | +}) |
| 95 | + |
| 96 | +class Task { |
| 97 | + constructor(id, col, order, text) { |
| 98 | + this.id = id |
| 99 | + this.col = col |
| 100 | + this.order = order |
| 101 | + this.text = text |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +function newTask(col) { |
| 106 | + let textarea = document.createElement('textarea') |
| 107 | + const currClass = col.classList[1] |
| 108 | + textarea.classList.add('newtask', 'draggable', `${currClass}`) |
| 109 | + textarea.setAttribute('draggable', 'true') |
| 110 | + textarea.innerHTML += `` |
| 111 | + textarea.id = ++taskId |
| 112 | + col.appendChild(textarea) |
| 113 | + textarea.focus() |
| 114 | +} |
| 115 | + |
| 116 | + |
| 117 | +function getCurrOrder(task, currClass) { |
| 118 | + const taskAllCol = document.querySelectorAll(`.draggable.${currClass}`) |
| 119 | + let taskOrder = 1 |
| 120 | + for (let i = 0; taskAllCol[i].id !== task.id; i++) { |
| 121 | + taskOrder += 1 |
| 122 | + } |
| 123 | + return taskOrder |
| 124 | +} |
| 125 | + |
| 126 | +function renewTasksClasses() { |
| 127 | + draggables = document.querySelectorAll('.draggable') |
| 128 | + newTasks = document.querySelectorAll('.newtask') |
| 129 | + newTasks.forEach((task) => { |
| 130 | + task.addEventListener('input', () => { |
| 131 | + const currClass = task.classList[2] |
| 132 | + const taskValue = task.value |
| 133 | + const taskOrder = getCurrOrder(task, currClass) |
| 134 | + const taskData = new Task(task.id, `${currClass}`, `${taskOrder}`, `${taskValue}`) |
| 135 | + console.log(taskData) |
| 136 | + localStorage.setItem(`Task${task.id}`, JSON.stringify(taskData)) |
| 137 | + }) |
| 138 | + |
| 139 | + }) |
| 140 | + draggables.forEach((draggable) => { |
| 141 | + draggable.addEventListener('dragstart', () => { |
| 142 | + draggable.classList.add('dragging') |
| 143 | + }) |
| 144 | + draggable.addEventListener('dragend', () => { |
| 145 | + draggable.classList.remove('dragging') |
| 146 | + }) |
| 147 | + }) |
| 148 | +} |
| 149 | + |
| 150 | + |
| 151 | +taskcontainers.forEach((container) => { //dragover |
| 152 | + container.addEventListener('dragover', (e) => { |
| 153 | + e.preventDefault() //'e' is event in DOM |
| 154 | + const afterElement = getDragAfterElement(container, e.clientY) |
| 155 | + const draggable = document.querySelector('.dragging') |
| 156 | + draggable.classList.remove('todoTask', 'inprogressTask', 'doneTask') |
| 157 | + const currClass = container.classList[1] //get curr class |
| 158 | + if (afterElement == null) { |
| 159 | + container.appendChild(draggable) |
| 160 | + draggable.classList.add(`${currClass}`) |
| 161 | + defineTasksOrder(currClass) |
| 162 | + } |
| 163 | + else { |
| 164 | + container.insertBefore(draggable, afterElement) |
| 165 | + renewTasksClasses() |
| 166 | + draggable.classList.add(`${currClass}`) |
| 167 | + defineTasksOrder(currClass) |
| 168 | + } |
| 169 | + }) |
| 170 | +}) |
| 171 | + |
| 172 | +function defineTasksOrder(currClass) { //define tasks order and write them in LS |
| 173 | + const taskAllCol = document.querySelectorAll(`.draggable.${currClass}`) |
| 174 | + let taskOrder = 0 |
| 175 | + for (let i = 0; i <= (taskAllCol.length - 1); i++) { |
| 176 | + taskOrder += 1 |
| 177 | + const task = new Task(`${taskAllCol[i].id}`, `${currClass}`, |
| 178 | + `${taskOrder}`, `${taskAllCol[i].value}`) |
| 179 | + localStorage.setItem(`Task${taskAllCol[i].id}`, JSON.stringify(task)) |
| 180 | + } |
| 181 | +} |
| 182 | + |
| 183 | +function getDragAfterElement(container, y) { //finds the position |
| 184 | + const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] |
| 185 | + return draggableElements.reduce((closest, child) => { |
| 186 | + const box = child.getBoundingClientRect() //returns size of element and his position |
| 187 | + const offset = y - box.top - box.height / 2 |
| 188 | + if (offset < 0 && offset > closest.offset) { |
| 189 | + return { offset: offset, element: child } |
| 190 | + } |
| 191 | + else { |
| 192 | + return closest |
| 193 | + } |
| 194 | + }, { offset: Number.NEGATIVE_INFINITY }).element |
| 195 | +} |
0 commit comments