Asynchronous retrieval of bookmark's thumbnails

This feature is based general.enable_async_metadata setting and works with existing metadata.js file.
The script is compatible with any template:
   - the thumbnail div bloc must have  attribute
   - the bookmark bloc must have  attribute with the bookmark ID as value

Fixes #1564

1 files changed, 85 insertions, 21 deletions

diff --git a/assets/common/js/metadata.js b/assets/common/js/metadata.js
index 5200b481..2b013364 100644
--- a/assets/common/js/metadata.js
+++ b/assets/common/js/metadata.js
@@ -1,5 +1,19 @@
 import he from 'he';
 
+/**
+ * This script is used to retrieve bookmarks metadata asynchronously:
+ *    - title, description and keywords while creating a new bookmark
+ *    - thumbnails while visiting the bookmark list
+ *
+ * Note: it should only be included if the user is logged in
+ *       and the setting general.enable_async_metadata is enabled.
+ */
+
+/**
+ * Removes given input loaders - used in edit link template.
+ *
+ * @param {object} loaders List of input DOM element that need to be cleared
+ */
 function clearLoaders(loaders) {
   if (loaders != null && loaders.length > 0) {
     [...loaders].forEach((loader) => {
@@ -8,32 +22,82 @@ function clearLoaders(loaders) {
   }
 }
 
+/**
+ * AJAX request to update the thumbnail of a bookmark with the provided ID.
+ * If a thumbnail is retrieved, it updates the divElement with the image src, and displays it.
+ *
+ * @param {string} basePath   Shaarli subfolder for XHR requests
+ * @param {object} divElement Main <div> DOM element containing the thumbnail placeholder
+ * @param {int}    id         Bookmark ID to update
+ */
+function updateThumb(basePath, divElement, id) {
+  const xhr = new XMLHttpRequest();
+  xhr.open('PATCH', `${basePath}/admin/shaare/${id}/update-thumbnail`);
+  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;
+
+      if (response.thumbnail !== false) {
+        const imgElement = divElement.querySelector('img');
+
+        imgElement.src = response.thumbnail;
+        imgElement.dataset.src = response.thumbnail;
+        imgElement.style.opacity = '1';
+        divElement.classList.remove('hidden');
+      }
+    }
+  };
+  xhr.send();
+}
+
 (() => {
+  const basePath = document.querySelector('input[name="js_base_path"]').value;
   const loaders = document.querySelectorAll('.loading-input');
+
+  /*
+   * METADATA FOR EDIT BOOKMARK PAGE
+   */
   const inputTitle = document.querySelector('input[name="lf_title"]');
-  if (inputTitle != null && inputTitle.value.length > 0) {
-    clearLoaders(loaders);
-    return;
-  }
+  if (inputTitle != null) {
+    if (inputTitle.value.length > 0) {
+      clearLoaders(loaders);
+      return;
+    }
 
-  const url = document.querySelector('input[name="lf_url"]').value;
-  const basePath = document.querySelector('input[name="js_base_path"]').value;
+    const url = document.querySelector('input[name="lf_url"]').value;
 
-  const xhr = new XMLHttpRequest();
-  xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true);
-  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-  xhr.onload = () => {
-    const result = JSON.parse(xhr.response);
-    Object.keys(result).forEach((key) => {
-      if (result[key] !== null && result[key].length) {
-        const element = document.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`);
-        if (element != null && element.value.length === 0) {
-          element.value = he.decode(result[key]);
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true);
+    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+    xhr.onload = () => {
+      const result = JSON.parse(xhr.response);
+      Object.keys(result).forEach((key) => {
+        if (result[key] !== null && result[key].length) {
+          const element = document.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`);
+          if (element != null && element.value.length === 0) {
+            element.value = he.decode(result[key]);
+          }
         }
-      }
-    });
-    clearLoaders(loaders);
-  };
+      });
+      clearLoaders(loaders);
+    };
 
-  xhr.send();
+    xhr.send();
+  }
+
+  /*
+   * METADATA FOR THUMBNAIL RETRIEVAL
+   */
+  const thumbsToLoad = document.querySelectorAll('div[data-async-thumbnail]');
+  if (thumbsToLoad != null) {
+    [...thumbsToLoad].forEach((divElement) => {
+      const { id } = divElement.closest('[data-id]').dataset;
+
+      updateThumb(basePath, divElement, id);
+    });
+  }
 })();