assets/common/js/thumbnails-update.js

   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  */
  17 function 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 })();