diff options
Diffstat (limited to 'assets/default/js/base.js')
-rw-r--r-- | assets/default/js/base.js | 592 |
1 files changed, 592 insertions, 0 deletions
diff --git a/assets/default/js/base.js b/assets/default/js/base.js new file mode 100644 index 00000000..99e03370 --- /dev/null +++ b/assets/default/js/base.js | |||
@@ -0,0 +1,592 @@ | |||
1 | import Awesomplete from 'awesomplete'; | ||
2 | |||
3 | /** | ||
4 | * Find a parent element according to its tag and its attributes | ||
5 | * | ||
6 | * @param element Element where to start the search | ||
7 | * @param tagName Expected parent tag name | ||
8 | * @param attributes Associative array of expected attributes (name=>value). | ||
9 | * | ||
10 | * @returns Found element or null. | ||
11 | */ | ||
12 | function findParent(element, tagName, attributes) { | ||
13 | const parentMatch = key => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1; | ||
14 | while (element) { | ||
15 | if (element.tagName.toLowerCase() === tagName) { | ||
16 | if (Object.keys(attributes).find(parentMatch)) { | ||
17 | return element; | ||
18 | } | ||
19 | } | ||
20 | element = element.parentElement; | ||
21 | } | ||
22 | return null; | ||
23 | } | ||
24 | |||
25 | /** | ||
26 | * Ajax request to refresh the CSRF token. | ||
27 | */ | ||
28 | function refreshToken() { | ||
29 | const xhr = new XMLHttpRequest(); | ||
30 | xhr.open('GET', '?do=token'); | ||
31 | xhr.onload = () => { | ||
32 | const token = document.getElementById('token'); | ||
33 | token.setAttribute('value', xhr.responseText); | ||
34 | }; | ||
35 | xhr.send(); | ||
36 | } | ||
37 | |||
38 | function createAwesompleteInstance(element, tags = []) { | ||
39 | const awesome = new Awesomplete(Awesomplete.$(element)); | ||
40 | // Tags are separated by a space | ||
41 | awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]); | ||
42 | // Insert new selected tag in the input | ||
43 | awesome.replace = (text) => { | ||
44 | const before = awesome.input.value.match(/^.+ \s*|/)[0]; | ||
45 | awesome.input.value = `${before}${text} `; | ||
46 | }; | ||
47 | // Highlight found items | ||
48 | awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(/[^ ]*$/)[0]); | ||
49 | // Don't display already selected items | ||
50 | const reg = /(\w+) /g; | ||
51 | let match; | ||
52 | awesome.data = (item, input) => { | ||
53 | while ((match = reg.exec(input))) { | ||
54 | if (item === match[1]) { | ||
55 | return ''; | ||
56 | } | ||
57 | } | ||
58 | return item; | ||
59 | }; | ||
60 | awesome.minChars = 1; | ||
61 | if (tags.length) { | ||
62 | awesome.list = tags; | ||
63 | } | ||
64 | |||
65 | return awesome; | ||
66 | } | ||
67 | |||
68 | /** | ||
69 | * Update awesomplete list of tag for all elements matching the given selector | ||
70 | * | ||
71 | * @param selector CSS selector | ||
72 | * @param tags Array of tags | ||
73 | * @param instances List of existing awesomplete instances | ||
74 | */ | ||
75 | function updateAwesompleteList(selector, tags, instances) { | ||
76 | if (instances.length === 0) { | ||
77 | // First load: create Awesomplete instances | ||
78 | const elements = document.querySelectorAll(selector); | ||
79 | [...elements].forEach((element) => { | ||
80 | instances.push(createAwesompleteInstance(element, tags)); | ||
81 | }); | ||
82 | } else { | ||
83 | // Update awesomplete tag list | ||
84 | instances.map((item) => { | ||
85 | item.list = tags; | ||
86 | return item; | ||
87 | }); | ||
88 | } | ||
89 | return instances; | ||
90 | } | ||
91 | |||
92 | /** | ||
93 | * html_entities in JS | ||
94 | * | ||
95 | * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript | ||
96 | */ | ||
97 | function htmlEntities(str) { | ||
98 | return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`); | ||
99 | } | ||
100 | |||
101 | /** | ||
102 | * Add the class 'hidden' to city options not attached to the current selected continent. | ||
103 | * | ||
104 | * @param cities List of <option> elements | ||
105 | * @param currentContinent Current selected continent | ||
106 | * @param reset Set to true to reset the selected value | ||
107 | */ | ||
108 | function hideTimezoneCities(cities, currentContinent, reset = null) { | ||
109 | let first = true; | ||
110 | if (reset == null) { | ||
111 | reset = false; | ||
112 | } | ||
113 | [...cities].forEach((option) => { | ||
114 | if (option.getAttribute('data-continent') !== currentContinent) { | ||
115 | option.className = 'hidden'; | ||
116 | } else { | ||
117 | option.className = ''; | ||
118 | if (reset === true && first === true) { | ||
119 | option.setAttribute('selected', 'selected'); | ||
120 | first = false; | ||
121 | } | ||
122 | } | ||
123 | }); | ||
124 | } | ||
125 | |||
126 | /** | ||
127 | * Retrieve an element up in the tree from its class name. | ||
128 | */ | ||
129 | function getParentByClass(el, className) { | ||
130 | const p = el.parentNode; | ||
131 | if (p == null || p.classList.contains(className)) { | ||
132 | return p; | ||
133 | } | ||
134 | return getParentByClass(p, className); | ||
135 | } | ||
136 | |||
137 | function toggleHorizontal() { | ||
138 | [...document.getElementById('shaarli-menu').querySelectorAll('.menu-transform')].forEach((el) => { | ||
139 | el.classList.toggle('pure-menu-horizontal'); | ||
140 | }); | ||
141 | } | ||
142 | |||
143 | function toggleMenu(menu) { | ||
144 | // set timeout so that the panel has a chance to roll up | ||
145 | // before the menu switches states | ||
146 | if (menu.classList.contains('open')) { | ||
147 | setTimeout(toggleHorizontal, 500); | ||
148 | } else { | ||
149 | toggleHorizontal(); | ||
150 | } | ||
151 | menu.classList.toggle('open'); | ||
152 | document.getElementById('menu-toggle').classList.toggle('x'); | ||
153 | } | ||
154 | |||
155 | function closeMenu(menu) { | ||
156 | if (menu.classList.contains('open')) { | ||
157 | toggleMenu(menu); | ||
158 | } | ||
159 | } | ||
160 | |||
161 | function toggleFold(button, description, thumb) { | ||
162 | // Switch fold/expand - up = fold | ||
163 | if (button.classList.contains('fa-chevron-up')) { | ||
164 | button.title = document.getElementById('translation-expand').innerHTML; | ||
165 | if (description != null) { | ||
166 | description.style.display = 'none'; | ||
167 | } | ||
168 | if (thumb != null) { | ||
169 | thumb.style.display = 'none'; | ||
170 | } | ||
171 | } else { | ||
172 | button.title = document.getElementById('translation-fold').innerHTML; | ||
173 | if (description != null) { | ||
174 | description.style.display = 'block'; | ||
175 | } | ||
176 | if (thumb != null) { | ||
177 | thumb.style.display = 'block'; | ||
178 | } | ||
179 | } | ||
180 | button.classList.toggle('fa-chevron-down'); | ||
181 | button.classList.toggle('fa-chevron-up'); | ||
182 | } | ||
183 | |||
184 | function removeClass(element, classname) { | ||
185 | element.className = element.className.replace(new RegExp(`(?:^|\\s)${classname}(?:\\s|$)`), ' '); | ||
186 | } | ||
187 | |||
188 | function init(description) { | ||
189 | function resize() { | ||
190 | /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */ | ||
191 | const scrollTop = window.pageYOffset || | ||
192 | (document.documentElement || document.body.parentNode || document.body).scrollTop; | ||
193 | |||
194 | description.style.height = 'auto'; | ||
195 | description.style.height = `${description.scrollHeight + 10}px`; | ||
196 | |||
197 | window.scrollTo(0, scrollTop); | ||
198 | } | ||
199 | |||
200 | /* 0-timeout to get the already changed text */ | ||
201 | function delayedResize() { | ||
202 | window.setTimeout(resize, 0); | ||
203 | } | ||
204 | |||
205 | const observe = (element, event, handler) => { | ||
206 | element.addEventListener(event, handler, false); | ||
207 | }; | ||
208 | observe(description, 'change', resize); | ||
209 | observe(description, 'cut', delayedResize); | ||
210 | observe(description, 'paste', delayedResize); | ||
211 | observe(description, 'drop', delayedResize); | ||
212 | observe(description, 'keydown', delayedResize); | ||
213 | |||
214 | resize(); | ||
215 | } | ||
216 | |||
217 | (() => { | ||
218 | /** | ||
219 | * Handle responsive menu. | ||
220 | * Source: http://purecss.io/layouts/tucked-menu-vertical/ | ||
221 | */ | ||
222 | const menu = document.getElementById('shaarli-menu'); | ||
223 | const WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize'; | ||
224 | |||
225 | const menuToggle = document.getElementById('menu-toggle'); | ||
226 | if (menuToggle != null) { | ||
227 | menuToggle.addEventListener('click', () => toggleMenu(menu)); | ||
228 | } | ||
229 | |||
230 | window.addEventListener(WINDOW_CHANGE_EVENT, () => closeMenu(menu)); | ||
231 | |||
232 | /** | ||
233 | * Fold/Expand shaares description and thumbnail. | ||
234 | */ | ||
235 | const foldAllButtons = document.getElementsByClassName('fold-all'); | ||
236 | const foldButtons = document.getElementsByClassName('fold-button'); | ||
237 | |||
238 | [...foldButtons].forEach((foldButton) => { | ||
239 | // Retrieve description | ||
240 | let description = null; | ||
241 | let thumbnail = null; | ||
242 | const linklistItem = getParentByClass(foldButton, 'linklist-item'); | ||
243 | if (linklistItem != null) { | ||
244 | description = linklistItem.querySelector('.linklist-item-description'); | ||
245 | thumbnail = linklistItem.querySelector('.linklist-item-thumbnail'); | ||
246 | if (description != null || thumbnail != null) { | ||
247 | foldButton.style.display = 'inline'; | ||
248 | } | ||
249 | } | ||
250 | |||
251 | foldButton.addEventListener('click', (event) => { | ||
252 | event.preventDefault(); | ||
253 | toggleFold(event.target, description, thumbnail); | ||
254 | }); | ||
255 | }); | ||
256 | |||
257 | if (foldAllButtons != null) { | ||
258 | [].forEach.call(foldAllButtons, (foldAllButton) => { | ||
259 | foldAllButton.addEventListener('click', (event) => { | ||
260 | event.preventDefault(); | ||
261 | const state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') !== -1 ? 'down' : 'up'; | ||
262 | [].forEach.call(foldButtons, (foldButton) => { | ||
263 | if ((foldButton.firstElementChild.classList.contains('fa-chevron-up') && state === 'down') | ||
264 | || (foldButton.firstElementChild.classList.contains('fa-chevron-down') && state === 'up') | ||
265 | ) { | ||
266 | return; | ||
267 | } | ||
268 | // Retrieve description | ||
269 | let description = null; | ||
270 | let thumbnail = null; | ||
271 | const linklistItem = getParentByClass(foldButton, 'linklist-item'); | ||
272 | if (linklistItem != null) { | ||
273 | description = linklistItem.querySelector('.linklist-item-description'); | ||
274 | thumbnail = linklistItem.querySelector('.linklist-item-thumbnail'); | ||
275 | if (description != null || thumbnail != null) { | ||
276 | foldButton.style.display = 'inline'; | ||
277 | } | ||
278 | } | ||
279 | |||
280 | toggleFold(foldButton.firstElementChild, description, thumbnail); | ||
281 | }); | ||
282 | foldAllButton.firstElementChild.classList.toggle('fa-chevron-down'); | ||
283 | foldAllButton.firstElementChild.classList.toggle('fa-chevron-up'); | ||
284 | foldAllButton.title = state === 'down' | ||
285 | ? document.getElementById('translation-fold-all').innerHTML | ||
286 | : document.getElementById('translation-expand-all').innerHTML; | ||
287 | }); | ||
288 | }); | ||
289 | } | ||
290 | |||
291 | /** | ||
292 | * Confirmation message before deletion. | ||
293 | */ | ||
294 | const deleteLinks = document.querySelectorAll('.confirm-delete'); | ||
295 | [...deleteLinks].forEach((deleteLink) => { | ||
296 | deleteLink.addEventListener('click', (event) => { | ||
297 | if (!confirm(document.getElementById('translation-delete-link').innerHTML)) { | ||
298 | event.preventDefault(); | ||
299 | } | ||
300 | }); | ||
301 | }); | ||
302 | |||
303 | /** | ||
304 | * Close alerts | ||
305 | */ | ||
306 | const closeLinks = document.querySelectorAll('.pure-alert-close'); | ||
307 | [...closeLinks].forEach((closeLink) => { | ||
308 | closeLink.addEventListener('click', (event) => { | ||
309 | const alert = getParentByClass(event.target, 'pure-alert-closable'); | ||
310 | alert.style.display = 'none'; | ||
311 | }); | ||
312 | }); | ||
313 | |||
314 | /** | ||
315 | * New version dismiss. | ||
316 | * Hide the message for one week using localStorage. | ||
317 | */ | ||
318 | const newVersionDismiss = document.getElementById('new-version-dismiss'); | ||
319 | const newVersionMessage = document.querySelector('.new-version-message'); | ||
320 | if (newVersionMessage != null | ||
321 | && localStorage.getItem('newVersionDismiss') != null | ||
322 | && parseInt(localStorage.getItem('newVersionDismiss'), 10) + (7 * 24 * 60 * 60 * 1000) > (new Date()).getTime() | ||
323 | ) { | ||
324 | newVersionMessage.style.display = 'none'; | ||
325 | } | ||
326 | if (newVersionDismiss != null) { | ||
327 | newVersionDismiss.addEventListener('click', () => { | ||
328 | localStorage.setItem('newVersionDismiss', (new Date()).getTime().toString()); | ||
329 | }); | ||
330 | } | ||
331 | |||
332 | const hiddenReturnurl = document.getElementsByName('returnurl'); | ||
333 | if (hiddenReturnurl != null) { | ||
334 | hiddenReturnurl.value = window.location.href; | ||
335 | } | ||
336 | |||
337 | /** | ||
338 | * Autofocus text fields | ||
339 | */ | ||
340 | const autofocusElements = document.querySelectorAll('.autofocus'); | ||
341 | let breakLoop = false; | ||
342 | [].forEach.call(autofocusElements, (autofocusElement) => { | ||
343 | if (autofocusElement.value === '' && !breakLoop) { | ||
344 | autofocusElement.focus(); | ||
345 | breakLoop = true; | ||
346 | } | ||
347 | }); | ||
348 | |||
349 | /** | ||
350 | * Handle sub menus/forms | ||
351 | */ | ||
352 | const openers = document.getElementsByClassName('subheader-opener'); | ||
353 | if (openers != null) { | ||
354 | [...openers].forEach((opener) => { | ||
355 | opener.addEventListener('click', (event) => { | ||
356 | event.preventDefault(); | ||
357 | |||
358 | const id = opener.getAttribute('data-open-id'); | ||
359 | const sub = document.getElementById(id); | ||
360 | |||
361 | if (sub != null) { | ||
362 | [...document.getElementsByClassName('subheader-form')].forEach((element) => { | ||
363 | if (element !== sub) { | ||
364 | removeClass(element, 'open'); | ||
365 | } | ||
366 | }); | ||
367 | |||
368 | sub.classList.toggle('open'); | ||
369 | } | ||
370 | }); | ||
371 | }); | ||
372 | } | ||
373 | |||
374 | /** | ||
375 | * Remove CSS target padding (for fixed bar) | ||
376 | */ | ||
377 | if (location.hash !== '') { | ||
378 | const anchor = document.getElementById(location.hash.substr(1)); | ||
379 | if (anchor != null) { | ||
380 | const padsize = anchor.clientHeight; | ||
381 | window.scroll(0, window.scrollY - padsize); | ||
382 | anchor.style.paddingTop = '0'; | ||
383 | } | ||
384 | } | ||
385 | |||
386 | /** | ||
387 | * Text area resizer | ||
388 | */ | ||
389 | const description = document.getElementById('lf_description'); | ||
390 | |||
391 | if (description != null) { | ||
392 | init(description); | ||
393 | // Submit editlink form with CTRL + Enter in the text area. | ||
394 | description.addEventListener('keydown', (event) => { | ||
395 | if (event.ctrlKey && event.keyCode === 13) { | ||
396 | document.getElementById('button-save-edit').click(); | ||
397 | } | ||
398 | }); | ||
399 | } | ||
400 | |||
401 | /** | ||
402 | * Bookmarklet alert | ||
403 | */ | ||
404 | const bookmarkletLinks = document.querySelectorAll('.bookmarklet-link'); | ||
405 | const bkmMessage = document.getElementById('bookmarklet-alert'); | ||
406 | [].forEach.call(bookmarkletLinks, (link) => { | ||
407 | link.addEventListener('click', (event) => { | ||
408 | event.preventDefault(); | ||
409 | alert(bkmMessage.value); | ||
410 | }); | ||
411 | }); | ||
412 | |||
413 | const continent = document.getElementById('continent'); | ||
414 | const city = document.getElementById('city'); | ||
415 | if (continent != null && city != null) { | ||
416 | continent.addEventListener('change', () => { | ||
417 | hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true); | ||
418 | }); | ||
419 | hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false); | ||
420 | } | ||
421 | |||
422 | /** | ||
423 | * Bulk actions | ||
424 | */ | ||
425 | const linkCheckboxes = document.querySelectorAll('.link-checkbox'); | ||
426 | const bar = document.getElementById('actions'); | ||
427 | [...linkCheckboxes].forEach((checkbox) => { | ||
428 | checkbox.style.display = 'inline-block'; | ||
429 | checkbox.addEventListener('change', () => { | ||
430 | const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked'); | ||
431 | const count = [...linkCheckedCheckboxes].length; | ||
432 | if (count === 0 && bar.classList.contains('open')) { | ||
433 | bar.classList.toggle('open'); | ||
434 | } else if (count > 0 && !bar.classList.contains('open')) { | ||
435 | bar.classList.toggle('open'); | ||
436 | } | ||
437 | }); | ||
438 | }); | ||
439 | |||
440 | const deleteButton = document.getElementById('actions-delete'); | ||
441 | const token = document.getElementById('token'); | ||
442 | if (deleteButton != null && token != null) { | ||
443 | deleteButton.addEventListener('click', (event) => { | ||
444 | event.preventDefault(); | ||
445 | |||
446 | const links = []; | ||
447 | const linkCheckedCheckboxes = document.querySelectorAll('.link-checkbox:checked'); | ||
448 | [...linkCheckedCheckboxes].forEach((checkbox) => { | ||
449 | links.push({ | ||
450 | id: checkbox.value, | ||
451 | title: document.querySelector(`.linklist-item[data-id="${checkbox.value}"] .linklist-link`).innerHTML, | ||
452 | }); | ||
453 | }); | ||
454 | |||
455 | let message = `Are you sure you want to delete ${links.length} links?\n`; | ||
456 | message += 'This action is IRREVERSIBLE!\n\nTitles:\n'; | ||
457 | const ids = []; | ||
458 | links.forEach((item) => { | ||
459 | message += ` - ${item.title}\n`; | ||
460 | ids.push(item.id); | ||
461 | }); | ||
462 | |||
463 | if (window.confirm(message)) { | ||
464 | window.location = `?delete_link&lf_linkdate=${ids.join('+')}&token=${token.value}`; | ||
465 | } | ||
466 | }); | ||
467 | } | ||
468 | |||
469 | /** | ||
470 | * Select all button | ||
471 | */ | ||
472 | const selectAllButtons = document.querySelectorAll('.select-all-button'); | ||
473 | [...selectAllButtons].forEach((selectAllButton) => { | ||
474 | selectAllButton.addEventListener('click', (e) => { | ||
475 | e.preventDefault(); | ||
476 | const checked = selectAllButton.classList.contains('filter-off'); | ||
477 | [...selectAllButtons].forEach((selectAllButton2) => { | ||
478 | selectAllButton2.classList.toggle('filter-off'); | ||
479 | selectAllButton2.classList.toggle('filter-on'); | ||
480 | }); | ||
481 | [...linkCheckboxes].forEach((linkCheckbox) => { | ||
482 | linkCheckbox.checked = checked; | ||
483 | linkCheckbox.dispatchEvent(new Event('change')); | ||
484 | }); | ||
485 | }); | ||
486 | }); | ||
487 | |||
488 | /** | ||
489 | * Tag list operations | ||
490 | * | ||
491 | * TODO: support error code in the backend for AJAX requests | ||
492 | */ | ||
493 | const tagList = document.querySelector('input[name="taglist"]'); | ||
494 | let existingTags = tagList ? tagList.value.split(' ') : []; | ||
495 | let awesomepletes = []; | ||
496 | |||
497 | // Display/Hide rename form | ||
498 | const renameTagButtons = document.querySelectorAll('.rename-tag'); | ||
499 | [...renameTagButtons].forEach((rename) => { | ||
500 | rename.addEventListener('click', (event) => { | ||
501 | event.preventDefault(); | ||
502 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); | ||
503 | const form = block.querySelector('.rename-tag-form'); | ||
504 | if (form.style.display === 'none' || form.style.display === '') { | ||
505 | form.style.display = 'block'; | ||
506 | } else { | ||
507 | form.style.display = 'none'; | ||
508 | } | ||
509 | block.querySelector('input').focus(); | ||
510 | }); | ||
511 | }); | ||
512 | |||
513 | // Rename a tag with an AJAX request | ||
514 | const renameTagSubmits = document.querySelectorAll('.validate-rename-tag'); | ||
515 | [...renameTagSubmits].forEach((rename) => { | ||
516 | rename.addEventListener('click', (event) => { | ||
517 | event.preventDefault(); | ||
518 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); | ||
519 | const input = block.querySelector('.rename-tag-input'); | ||
520 | const totag = input.value.replace('/"/g', '\\"'); | ||
521 | if (totag.trim() === '') { | ||
522 | return; | ||
523 | } | ||
524 | const refreshedToken = document.getElementById('token').value; | ||
525 | const fromtag = block.getAttribute('data-tag'); | ||
526 | const xhr = new XMLHttpRequest(); | ||
527 | xhr.open('POST', '?do=changetag'); | ||
528 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | ||
529 | xhr.onload = () => { | ||
530 | if (xhr.status !== 200) { | ||
531 | alert(`An error occurred. Return code: ${xhr.status}`); | ||
532 | location.reload(); | ||
533 | } else { | ||
534 | block.setAttribute('data-tag', totag); | ||
535 | input.setAttribute('name', totag); | ||
536 | input.setAttribute('value', totag); | ||
537 | findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none'; | ||
538 | block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); | ||
539 | block.querySelector('a.tag-link').setAttribute('href', `?searchtags=${encodeURIComponent(totag)}`); | ||
540 | block.querySelector('a.rename-tag').setAttribute('href', `?do=changetag&fromtag=${encodeURIComponent(totag)}`); | ||
541 | |||
542 | // Refresh awesomplete values | ||
543 | existingTags = existingTags.map(tag => (tag === fromtag ? totag : tag)); | ||
544 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); | ||
545 | } | ||
546 | }; | ||
547 | xhr.send(`renametag=1&fromtag=${encodeURIComponent(fromtag)}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`); | ||
548 | refreshToken(); | ||
549 | }); | ||
550 | }); | ||
551 | |||
552 | // Validate input with enter key | ||
553 | const renameTagInputs = document.querySelectorAll('.rename-tag-input'); | ||
554 | [...renameTagInputs].forEach((rename) => { | ||
555 | rename.addEventListener('keypress', (event) => { | ||
556 | if (event.keyCode === 13) { // enter | ||
557 | findParent(event.target, 'div', { class: 'tag-list-item' }).querySelector('.validate-rename-tag').click(); | ||
558 | } | ||
559 | }); | ||
560 | }); | ||
561 | |||
562 | // Delete a tag with an AJAX query (alert popup confirmation) | ||
563 | const deleteTagButtons = document.querySelectorAll('.delete-tag'); | ||
564 | [...deleteTagButtons].forEach((rename) => { | ||
565 | rename.style.display = 'inline'; | ||
566 | rename.addEventListener('click', (event) => { | ||
567 | event.preventDefault(); | ||
568 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); | ||
569 | const tag = block.getAttribute('data-tag'); | ||
570 | const refreshedToken = document.getElementById('token').value; | ||
571 | |||
572 | if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) { | ||
573 | const xhr = new XMLHttpRequest(); | ||
574 | xhr.open('POST', '?do=changetag'); | ||
575 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | ||
576 | xhr.onload = () => { | ||
577 | block.remove(); | ||
578 | }; | ||
579 | xhr.send(encodeURI(`deletetag=1&fromtag=${tag}&token=${refreshedToken}`)); | ||
580 | refreshToken(); | ||
581 | |||
582 | existingTags = existingTags.filter(tagItem => tagItem !== tag); | ||
583 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); | ||
584 | } | ||
585 | }); | ||
586 | }); | ||
587 | |||
588 | const autocompleteFields = document.querySelectorAll('input[data-multiple]'); | ||
589 | [...autocompleteFields].forEach((autocompleteField) => { | ||
590 | awesomepletes.push(createAwesompleteInstance(autocompleteField)); | ||
591 | }); | ||
592 | })(); | ||