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
|
/**
* Script used in the thumbnails update page.
*
* It retrieves the list of link IDs to update, and execute AJAX requests
* to update their thumbnails, while updating the progress bar.
*/
/**
* Update the thumbnail of the link with the current i index in ids.
* It contains a recursive call to retrieve the thumb of the next link when it succeed.
* It also update the progress bar and other visual feedback elements.
*
* @param {array} ids List of LinkID to update
* @param {int} i Current index in ids
* @param {object} elements List of DOM element to avoid retrieving them at each iteration
*/
function updateThumb(ids, i, elements) {
const xhr = new XMLHttpRequest();
xhr.open('POST', './?do=ajax_thumb_update');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.responseType = 'json';
xhr.onload = () => {
if (xhr.status !== 200) {
alert(`An error occurred. Return code: ${xhr.status}`);
} else {
const { response } = xhr;
i += 1;
elements.progressBar.style.width = `${(i * 100) / ids.length}%`;
elements.current.innerHTML = i;
elements.title.innerHTML = response.title;
if (response.thumbnail !== false) {
elements.thumbnail.innerHTML = `<img src="${response.thumbnail}">`;
}
if (i < ids.length) {
updateThumb(ids, i, elements);
}
}
};
xhr.send(`id=${ids[i]}`);
}
(() => {
const ids = document.getElementsByName('ids')[0].value.split(',');
const elements = {
progressBar: document.querySelector('.progressbar > div'),
current: document.querySelector('.progress-current'),
thumbnail: document.querySelector('.thumbnail-placeholder'),
title: document.querySelector('.thumbnail-link-title'),
};
updateThumb(ids, 0, elements);
})();
|
