Liar4u

Untitled

Oct 16th, 2021
1,032
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. 'use strict';
  2. import drag from './drag.js';
  3.  
  4. const container = document.querySelector('main');
  5. const items = container.querySelectorAll('.item');
  6. let tasks;
  7. // let task;
  8. let activeElement;
  9. init();
  10.  
  11. function init() {
  12.   initItems();
  13.   initTasks();
  14.   activeElement = null;
  15. }
  16.  
  17. function initItems() {
  18.   items.forEach((element) => {
  19.     element.addEventListener('dragstart', (event) => drag.start(event));
  20.     element.addEventListener('dragend', (event) => drag.end(event));
  21.   });
  22. }
  23.  
  24. function initTasks() {
  25.   updateTaskList();
  26.   for (let i in tasks) {
  27.     let task = tasks[i].getElementsByClassName('placeholder');
  28.     initCurrentTask(tasks[i]);
  29.   }
  30. }
  31.  
  32. function initCurrentTask(task) {
  33.   const titleElement = task.getElementsByClassName('title')[0];
  34.   const descriptionElement = task.getElementsByClassName('description')[0];
  35.   const placeholder = task.getElementsByClassName('placeholder')[0];
  36.   const delButton = task.getElementsByClassName('delete')[0];
  37.   const editButton = task.getElementsByClassName('edit')[0];
  38.  
  39.   //init changing focus and save function after pressing the 'Enter' key in the input.
  40.   titleElement.addEventListener('keypress', (event) => {
  41.     event.key === 'Enter'
  42.       ? taskSaveOrFocusChange(event, titleElement, descriptionElement)
  43.       : null;
  44.   });
  45.  
  46.   // init placeholder in task
  47.   placeholder.addEventListener('dragover', (event) => drag.over(event));
  48.   placeholder.addEventListener('dragenter', (event) => drag.enter(event));
  49.   placeholder.addEventListener('dragleave', (event) => drag.leave(event));
  50.   placeholder.addEventListener('drop', (event) => drag.drop(event));
  51.  
  52.   // init modify buttons in task
  53.   delButton.addEventListener('click', (event) => {
  54.     event.target
  55.       .closest('.tasks')
  56.       .removeChild(event.target.closest('.task-item'));
  57.     updateTaskList();
  58.   });
  59.   editButton.addEventListener('click', (event) => taskEditor(task));
  60. }
  61.  
  62. function taskEditor(task) {
  63.   const titleElement = task.getElementsByClassName('title')[0];
  64.   const descriptionElement = task.getElementsByClassName('description')[0];
  65.  
  66.   if (titleElement.disabled === true && descriptionElement.disabled === true) {
  67.     titleElement.disabled = false;
  68.     descriptionElement.disabled = false;
  69.  
  70.     titleElement.classList.add('active_input');
  71.     descriptionElement.classList.add('active_input');
  72.   } else {
  73.     taskSaveOrFocusChange(titleElement, descriptionElement);
  74.   }
  75. }
  76.  
  77. function taskSaveOrFocusChange(event, titleElement, descriptionElement) {
  78.   console.log(event);
  79.   titleElement.disabled = true;
  80.   descriptionElement.disabled = true;
  81.  
  82.   titleElement.classList.remove('active_input');
  83.   descriptionElement.classList.remove('active_input');
  84.   // realize focus to Title input, after press ENTER, focus to desc input, then saving after pressing ENTER.
  85. }
  86.  
  87. function whatStatus(task) {
  88.   // returning task status depending on the element inside the placeholder
  89.   // used for checking legality editing task information
  90. }
  91.  
  92. function updateTaskList() {
  93.   tasks = [...document.getElementsByClassName('task-item')];
  94. }
  95.  
  96. // "Add" button logic
  97.  
  98. const btn = document.getElementById('addBtn');
  99. btn.addEventListener('click', (event) => addNewTask());
  100.  
  101. // Adding new tasks
  102.  
  103. function addNewTask() {
  104.   const title = document.getElementById('title').value;
  105.   const description = document.getElementById('description').value;
  106.   const div = document.createElement('div');
  107.   div.setAttribute('class', 'task-item');
  108.   div.innerHTML = `
  109.   <div class="task-info">
  110.     <input type="text" class="title" disabled value="${title}"/>
  111.     <input type="text" class="description" disabled value="${description}"/>
  112.   </div>
  113.   <div class="task-control">
  114.     <div class="placeholder__container">
  115.       <div class="placeholder"></div>
  116.     </div>
  117.     <div class="modify">
  118.       <div class="modify-items">
  119.         <div class="delete"></div>
  120.         <div class="edit"></div>
  121.       </div>
  122.     </div>
  123.   </div >`;
  124.  
  125.   document.querySelector('.tasks').append(div);
  126.   updateTaskList();
  127.   initCurrentTask(div);
  128. }
  129.  
RAW Paste Data