-
Notifications
You must be signed in to change notification settings - Fork 0
/
options.js
177 lines (153 loc) · 5.17 KB
/
options.js
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
(async () => {
const { getSearches } = await import(chrome.runtime.getURL('./js/getSearches.js'));
const { setStorageSyncValue } = await import(chrome.runtime.getURL('./js/setStorageSyncValue.js'));
function createRow(search) {
const row = document.createElement('tr');
const titleTD = document.createElement('td');
const titleInput = document.createElement('input');
titleInput.setAttribute('type', 'text');
titleInput.setAttribute('placeholder', 'DuckDuckGo %s');
titleInput.setAttribute('value', search.title);
titleTD.appendChild(titleInput);
const urlTD = document.createElement('td');
const urlInput = document.createElement('input');
urlInput.setAttribute('type', 'textarea');
urlInput.setAttribute('placeholder', 'https://duckduckgo.com/?q={0}');
urlInput.setAttribute('value', search.url);
urlTD.appendChild(urlInput);
const disableTD = document.createElement('td');
const disableCheckbox = document.createElement('input');
disableCheckbox.setAttribute('type', 'checkbox');
disableCheckbox.checked = search.disabled;
disableTD.appendChild(disableCheckbox);
const deleteTD = document.createElement('td');
const deleteBtn = document.createElement('button');
deleteBtn.dataset.action = 'delete-row';
deleteBtn.textContent = 'Delete';
deleteTD.append(deleteBtn);
const moveUpTD = document.createElement('td');
const moveUpBtn = document.createElement('button');
moveUpBtn.dataset.action = 'move-row-up';
moveUpBtn.textContent = 'Move up';
moveUpTD.append(moveUpBtn);
const moveDownTD = document.createElement('td');
const moveDownBtn = document.createElement('button');
moveDownBtn.dataset.action = 'move-row-down';
moveDownBtn.textContent = 'Move down';
moveDownTD.append(moveDownBtn);
row.append(titleTD, urlTD, disableTD, deleteTD, moveUpTD, moveDownTD);
return row;
}
function deleteRow(event) {
const toDelete = confirm('Delete the row?');
if (!toDelete) {
return;
}
const row = event.target.parentElement.parentElement;
if (row) {
row.remove();
toggleUpDownButtons();
}
}
function moveRowUp(event) {
const row = event.target.parentElement.parentElement;
const prevRow = row.previousElementSibling;
if (prevRow) {
const tbody = row.parentElement;
tbody.insertBefore(row, prevRow);
toggleUpDownButtons();
}
}
function moveRowDown(event) {
const row = event.target.parentElement.parentElement;
const nextRow = row.nextElementSibling;
if (nextRow) {
const tbody = row.parentElement;
tbody.insertBefore(nextRow, row);
toggleUpDownButtons();
}
}
function addRow(event) {
event.preventDefault();
const titleInput = document.getElementById('title');
const urlInput = document.getElementById('url');
if (titleInput && urlInput) {
const title = titleInput.value;
const url = urlInput.value;
if (title && url) {
const newSearch = { title, url };
const newRow = createRow(newSearch);
const tableBody = document.querySelector('tbody');
tableBody.appendChild(newRow);
titleInput.value = '';
urlInput.value = '';
toggleUpDownButtons();
} else {
alert('Fill in Title and URL first.');
}
}
}
function toggleUpDownButtons() {
const moveUpBtnSelector = 'button[data-action="move-row-up"]';
const moveDownBtnSelector = 'button[data-action="move-row-down"]';
const disabledMoveUpBtns = document.querySelectorAll(moveUpBtnSelector + ':disabled');
if (disabledMoveUpBtns) {
disabledMoveUpBtns.forEach((disabledMoveUpBtn) => {
disabledMoveUpBtn.disabled = false;
});
}
const moveUpBtns = document.querySelectorAll(moveUpBtnSelector);
if (moveUpBtns) {
moveUpBtns[0].disabled = true;
}
const disabledMoveDownBtns = document.querySelectorAll(moveDownBtnSelector + ':disabled');
if (disabledMoveDownBtns) {
disabledMoveDownBtns.forEach((disabledMoveDownBtn) => {
disabledMoveDownBtn.disabled = false;
});
}
const moveDownBtns = document.querySelectorAll(moveDownBtnSelector);
if (moveDownBtns) {
moveDownBtns[moveDownBtns.length - 1].disabled = true;
}
}
function serializeSearches() {
const rows = document.querySelectorAll('tbody tr');
if (rows) {
return Array.from(rows).map((row, index) => {
const id = index;
const title = row.children[0].children[0].value;
const url = row.children[1].children[0].value;
const disabled = row.children[2].children[0].checked;
return { id, title, url, disabled };
});
}
return [];
}
async function saveChanges() {
const newSearches = serializeSearches();
await setStorageSyncValue({ 'searches': newSearches });
alert('Saved');
}
const searches = await getSearches();
const rows = Object.values(searches).map(createRow);
const tableBody = document.querySelector('tbody');
if (tableBody) {
tableBody.append(...rows);
toggleUpDownButtons();
}
document.addEventListener('click', (event) => {
const action = event.target.dataset.action;
if (action === 'add-row') {
addRow(event);
} else if (action === 'move-row-up') {
moveRowUp(event);
} else if (action === 'move-row-down') {
moveRowDown(event);
} else if (action === 'delete-row') {
deleteRow(event);
} else if (action === 'save-changes') {
saveChanges();
}
});
})();