Javascript-форум - Показать сообщение отдельно

FreeStyler · #3 (**permalink**) 11.03.2020, 19:06

cheysler80,
как-то так, особо париться не стал, если нужно сам переделай в голый жс. По-моему выглядит оверинжинирингово, я бы всё проще и топорнее сделал.
Хотя я сам тот ещё кодер

А вообще рони по делу сказал, но мне лень был так мутить

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Список дел</title>
    <link rel="stylesheet" href="material-icons.css">
    <link rel="stylesheet" href="main.css"
</head>
<body>
<div id="root">
    <div class="container">

        <div class="tabs">
            <div class="tab">
                <input type="radio" id="tab1" name="tab-group" checked>
                <label for="tab1" class="tab-title">Добавить</label>
                <section class="tab-content">
                    <h3>Добавить дело</h3>
                    <input id="new-task" type="text">
                    <button id="add">Добавить</button>
                </section>
            </div>
            <div class="tab">
                <input type="radio" id="tab2" name="tab-group">
                <label for="tab2" class="tab-title">Список дел</label>
                <section class="tab-content">
                    <h3>Список дел</h3>
                    <ul id="unfinished-tasks">
                </section>
            </div>
            <div class="tab">
                <input type="radio" id="tab3" name="tab-group">
                <label for="tab3" class="tab-title">Завершенные</label>
                <section class="tab-content">
                    </ul>
                    <h3>Завершенные дела</h3>
                    <ul id="finished-tasks">
                    </ul>
                </section>
            </div>
            <div class="tab">
                <input type="radio" id="tab4" name="tab-group">
                <label for="tab4" class="tab-title">Удаленные</label>
                <section class="tab-content">
                    </ul>
                    <h3>Удаленные дела</h3>
                    <ul id="rec-tasks">
                    </ul>
                </section>
            </div>
        </div>

    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  cl = console.log;

var addButton = document.getElementById('add');
var inputTask = document.getElementById('new-task');
var unfinishedTasks = document.getElementById('unfinished-tasks');
var finishedTasks = document.getElementById('finished-tasks');
var recTasks = document.getElementById( 'rec-tasks');


function createNewElementD(task, finished,) {
    var listItem = document.createElement('li');
    var checkbox = document.createElement('button');

    if(finished){
        checkbox.className = "material-icons checkbox";
        checkbox.innerHTML = "<i class='material-icons'>check_box</i>";
    }else {
        checkbox.className = "material-icons checkbox";
        checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>";
    }

    var label = document.createElement('label');
    label.innerText = task;
    var input = document.createElement('input');
    input.type = "text";
    var editButton = document.createElement('button');
    editButton.className = "material-icons edit";
    editButton.innerHTML = "<i class='material-icons'>edit</i>";
    var deleteButton = document.createElement('button');
    deleteButton.className = "material-icons deleteF";
    deleteButton.innerHTML = "<i class='material-icons'>delete</i>";

    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(input);
    listItem.appendChild(deleteButton);
    listItem.appendChild(editButton);

    return listItem;
}

function createNewElement(task, finished,) {
    var listItem = document.createElement('li');
    var checkbox = document.createElement('button');

    if(finished){
        checkbox.className = "material-icons checkbox";
        checkbox.innerHTML = "<i class='material-icons'>check_box</i>";
    }else {
        checkbox.className = "material-icons checkbox";
        checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>";
    }


    var label = document.createElement('label');
    label.innerText = task;
    var input = document.createElement('input');
    input.type = "text";
    var editButton = document.createElement('button');
    editButton.className = "material-icons edit";
    editButton.innerHTML = "<i class='material-icons'>edit</i>";
    var deleteButton = document.createElement('button');
    deleteButton.className = "material-icons delete";
    deleteButton.innerHTML = "<i class='material-icons'>delete</i>";

    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(input);
    listItem.appendChild(deleteButton);
    listItem.appendChild(editButton);

    return listItem;
}

function addTask() {
    if (inputTask.value) {
        var listItem = createNewElement(inputTask.value, false);
        unfinishedTasks.appendChild(listItem);
        bindTaskEvents(listItem, finishTask)
        inputTask.value = "";
    }
    save();
}
addButton.onclick = addTask;

function savedel(){
    var deleted = [];
    $.each($('#rec-tasks').find('label'), function(){
      deleted.push($(this).html());
    });
    localStorage.setItem('todo-del', JSON.stringify(deleted));  
}

function deleteTask() {
    var listItem = this.parentNode;
    var ul = listItem.parentNode;

    var $this = $(this);
    var l = $this.parent().find('label').html();

    var deleted = JSON.parse(localStorage.getItem('todo-del'));
    if(!deleted) deleted = [];
    deleted.push(l);

    localStorage.setItem('todo-del', JSON.stringify(deleted));

    ul.removeChild(listItem);
    loaddel();
    save();
}

function editTask() {
    console.log(2);
    var editButton = this;
    var listItem = this.parentNode;
    var label = listItem.querySelector('label');
    var input = listItem.querySelector('input[type=text]');

    var containsClass = listItem.classList.contains('editMode');

    if (containsClass) {
        label.innerText = input.value;
        editButton.className = "material-icons edit";
        editButton.innerHTML = "<i class='material-icons'>edit</i>";
        save();
        savedel();
    } else {
        input.value = label.innerText;
        editButton.className = "material-icons save";
        editButton.innerHTML = "<i class='material-icons'>save</i>";

    }
    listItem.classList.toggle('editMode');
}

function finishTask() {
    var listItem = this.parentNode;
    var checkbox = listItem.querySelector('button.checkbox');
    checkbox.className = "material-icons checkbox";
    checkbox.innerHTML = "<i class='material-icons'>check_box</i>";
    finishedTasks.appendChild(listItem);
    bindTaskEvents(listItem, unfinishTask);
    save();
    savedel();
}

function unfinishTask() {
    var listItem = this.parentNode;
    var checkbox = listItem.querySelector('button.checkbox');
    checkbox.className = "material-icons checkbox";
    checkbox.innerHTML = "<i class='material-icons'>check_box_outline_blank</i>";

    unfinishedTasks.appendChild(listItem);
    bindTaskEvents(listItem, finishTask)
    save();
}

function bindTaskEvents(listItem, checkboxEvent) {
    var checkbox = listItem.querySelector('button.checkbox');
    var editButton = listItem.querySelector('button.edit');
    var deleteButton = listItem.querySelector('button.delete');

    checkbox.onclick = checkboxEvent;
    editButton.onclick = editTask;
    if(deleteButton) deleteButton.onclick = deleteTask;

}
function save() {

    var unfinishedTasksArr = [];
    for (var i = 0; i < unfinishedTasks.children.length; i++) {
        unfinishedTasksArr.push(unfinishedTasks.children[i].getElementsByTagName('label')[0].innerText);
    }

    var finishedTasksArr = [];
    for (var i = 0; i < finishedTasks.children.length; i++) {
        finishedTasksArr.push(finishedTasks.children[i].getElementsByTagName('label')[0].innerText);
    }

    localStorage.removeItem('todo');
    localStorage.setItem('todo', JSON.stringify({
        unfinishedTasks: unfinishedTasksArr,
        finishedTasks: finishedTasksArr
    }));

}

function load(){
    return JSON.parse(localStorage.getItem('todo'));
}

var data=load();

function loaddel(){
  var deleted = JSON.parse(localStorage.getItem('todo-del'));
  if(!deleted) deleted = [];

  $('#rec-tasks').html('');
  for(var i=0; i<deleted.length;i++){
      var listItem=createNewElementD(deleted[i], false);
      $('#rec-tasks')[0].appendChild(listItem);
      bindTaskEvents(listItem, finishTask);
  }
}

$('body').on('click', '.deleteF', function(){
    var $this = $(this);
    var $listpar = $this.parent().parent();
    $this.parent().remove();

    var deleted = [];
    $.each($listpar.find('label'), function(){
      deleted.push($(this).html());
    });

    localStorage.setItem('todo-del', JSON.stringify(deleted));
});

loaddel();

for(var i=0; i<data.unfinishedTasks.length;i++){
    var listItem=createNewElement(data.unfinishedTasks[i], false);
    unfinishedTasks.appendChild(listItem);
    bindTaskEvents(listItem, finishTask);
}

for(var i=0; i<data.finishedTasks.length; i++){
    var listItem=createNewElement(data.finishedTasks[i], true);
    finishedTasks.appendChild(listItem);
    bindTaskEvents(listItem, unfinishTask);
}
</script>

</body>
</html>