1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import { jsList } from "./list.js";
export function editButton(id) {
const buttonElement = document.createElement('i');
buttonElement.classList.add('edit', 'fa-solid', 'fa-pen-to-square');
buttonElement.setAttribute('title', 'Edit');
buttonElement.addEventListener('click', (clicked) => {
editElement(clicked.target.parentNode, id);
});
return buttonElement;
}
function editElement(element, id) {
const form = document.createElement('form');
const input = document.createElement('input');
input.style.fontSize = '0.9em';
input.focus();
input.value = element.childNodes[0].textContent;
form.appendChild(input);
hide(element);
form.addEventListener('submit', (e) => {
e.preventDefault();
unhide(element, input, form, id);
}, true);
form.addEventListener('focusout', (e) => {
e.preventDefault();
unhide(element, input, form, id);
}, true);
element.appendChild(form);
}
function hide(element) {
element.childNodes[0].textContent = '';
element.childNodes[1].style.display = 'none';
element.childNodes[2].style.display = 'none';
element.childNodes[3].style.display = 'none';
}
function unhide(element, input, form, id) {
element.childNodes[0].textContent = input.value;
element.childNodes[1].style.display = '';
element.childNodes[2].style.display = '';
element.childNodes[3].style.display = '';
input.remove();
form.remove();
id = jsList.findIndex(el => el.id == id);
jsList[id].name = input.value;
localStorage.setItem('jsList', JSON.stringify(jsList));
}
|
