assets/common/js/metadata.js

   1 import he from 'he';
   2
   3 /**
   4  * This script is used to retrieve bookmarks metadata asynchronously:
   5  *    - title, description and keywords while creating a new bookmark
   6  *    - thumbnails while visiting the bookmark list
   7  *
   8  * Note: it should only be included if the user is logged in
   9  *       and the setting general.enable_async_metadata is enabled.
  10  */
  11
  12 /**
  13  * Removes given input loaders - used in edit link template.
  14  *
  15  * @param {object} loaders List of input DOM element that need to be cleared
  16  */
  17 function clearLoaders(loaders) {
  18   if (loaders != null && loaders.length > 0) {
  19     [...loaders].forEach((loader) => {
  20       loader.classList.remove('loading-input');
  21     });
  22   }
  23 }
  24
  25 /**
  26  * AJAX request to update the thumbnail of a bookmark with the provided ID.
  27  * If a thumbnail is retrieved, it updates the divElement with the image src, and displays it.
  28  *
  29  * @param {string} basePath   Shaarli subfolder for XHR requests
  30  * @param {object} divElement Main <div> DOM element containing the thumbnail placeholder
  31  * @param {int}    id         Bookmark ID to update
  32  */
  33 function updateThumb(basePath, divElement, id) {
  34   const xhr = new XMLHttpRequest();
  35   xhr.open('PATCH', `${basePath}/admin/shaare/${id}/update-thumbnail`);
  36   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  37   xhr.responseType = 'json';
  38   xhr.onload = () => {
  39     if (xhr.status !== 200) {
  40       alert(`An error occurred. Return code: ${xhr.status}`);
  41     } else {
  42       const { response } = xhr;
  43
  44       if (response.thumbnail !== false) {
  45         const imgElement = divElement.querySelector('img');
  46
  47         imgElement.src = response.thumbnail;
  48         imgElement.dataset.src = response.thumbnail;
  49         imgElement.style.opacity = '1';
  50         divElement.classList.remove('hidden');
  51       }
  52     }
  53   };
  54   xhr.send();
  55 }
  56
  57 (() => {
  58   const basePath = document.querySelector('input[name="js_base_path"]').value;
  59   const loaders = document.querySelectorAll('.loading-input');
  60
  61   /*
  62    * METADATA FOR EDIT BOOKMARK PAGE
  63    */
  64   const inputTitle = document.querySelector('input[name="lf_title"]');
  65   if (inputTitle != null) {
  66     if (inputTitle.value.length > 0) {
  67       clearLoaders(loaders);
  68       return;
  69     }
  70
  71     const url = document.querySelector('input[name="lf_url"]').value;
  72
  73     const xhr = new XMLHttpRequest();
  74     xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true);
  75     xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  76     xhr.onload = () => {
  77       const result = JSON.parse(xhr.response);
  78       Object.keys(result).forEach((key) => {
  79         if (result[key] !== null && result[key].length) {
  80           const element = document.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`);
  81           if (element != null && element.value.length === 0) {
  82             element.value = he.decode(result[key]);
  83           }
  84         }
  85       });
  86       clearLoaders(loaders);
  87     };
  88
  89     xhr.send();
  90   }
  91
  92   /*
  93    * METADATA FOR THUMBNAIL RETRIEVAL
  94    */
  95   const thumbsToLoad = document.querySelectorAll('div[data-async-thumbnail]');
  96   if (thumbsToLoad != null) {
  97     [...thumbsToLoad].forEach((divElement) => {
  98       const { id } = divElement.closest('[data-id]').dataset;
  99
 100       updateThumb(basePath, divElement, id);
 101     });
 102   }
 103 })();