aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/common/js
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2018-06-08 12:50:49 +0200
committerArthurHoaro <arthur@hoa.ro>2018-07-05 20:34:22 +0200
commit28f26524609338316cc6e51c743058e6e8c7b12b (patch)
treee03f1e5dde3779a47a682cf1461151fbd687e4bb /assets/common/js
parent787faa42f3a2bcbf83a7853f23f3667a6febf9da (diff)
downloadShaarli-28f26524609338316cc6e51c743058e6e8c7b12b.tar.gz
Shaarli-28f26524609338316cc6e51c743058e6e8c7b12b.tar.zst
Shaarli-28f26524609338316cc6e51c743058e6e8c7b12b.zip
Add a page to update all thumbnails through AJAX requests in both templates
Diffstat (limited to 'assets/common/js')
-rw-r--r--assets/common/js/thumbnails-update.js51
1 files changed, 51 insertions, 0 deletions
diff --git a/assets/common/js/thumbnails-update.js b/assets/common/js/thumbnails-update.js
new file mode 100644
index 00000000..b66ca3ae
--- /dev/null
+++ b/assets/common/js/thumbnails-update.js
@@ -0,0 +1,51 @@
1/**
2 * Script used in the thumbnails update page.
3 *
4 * It retrieves the list of link IDs to update, and execute AJAX requests
5 * to update their thumbnails, while updating the progress bar.
6 */
7
8/**
9 * Update the thumbnail of the link with the current i index in ids.
10 * It contains a recursive call to retrieve the thumb of the next link when it succeed.
11 * It also update the progress bar and other visual feedback elements.
12 *
13 * @param {array} ids List of LinkID to update
14 * @param {int} i Current index in ids
15 * @param {object} elements List of DOM element to avoid retrieving them at each iteration
16 */
17function updateThumb(ids, i, elements) {
18 const xhr = new XMLHttpRequest();
19 xhr.open('POST', '?do=ajax_thumb_update');
20 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
21 xhr.responseType = 'json';
22 xhr.onload = () => {
23 if (xhr.status !== 200) {
24 alert(`An error occurred. Return code: ${xhr.status}`);
25 } else {
26 const { response } = xhr;
27 i += 1;
28 elements.progressBar.style.width = `${(i * 100) / ids.length}%`;
29 elements.current.innerHTML = i;
30 elements.title.innerHTML = response.title;
31 if (response.thumbnail !== false) {
32 elements.thumbnail.innerHTML = `<img src="${response.thumbnail}">`;
33 }
34 if (i < ids.length) {
35 updateThumb(ids, i, elements);
36 }
37 }
38 };
39 xhr.send(`id=${ids[i]}`);
40}
41
42(() => {
43 const ids = document.getElementsByName('ids')[0].value.split(',');
44 const elements = {
45 progressBar: document.querySelector('.progressbar > div'),
46 current: document.querySelector('.progress-current'),
47 thumbnail: document.querySelector('.thumbnail-placeholder'),
48 title: document.querySelector('.thumbnail-link-title'),
49 };
50 updateThumb(ids, 0, elements);
51})();