From 4cf3564d28dc8e4d08a3e64f09ad045ffbde97ae Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Fri, 25 Sep 2020 13:29:36 +0200 Subject: Add a setting to retrieve bookmark metadata asynchrounously - There is a new standalone script (metadata.js) which requests a new controller to get bookmark metadata and fill the form async - This feature is enabled with the new setting: general.enable_async_metadata (enabled by default) - general.retrieve_description is now enabled by default - A small rotating loader animation has a been added to bookmark inputs when metadata is being retrieved (default template) - Custom JS htmlentities has been removed and mathiasbynens/he library is used instead Fixes #1563 --- assets/common/js/metadata.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 assets/common/js/metadata.js (limited to 'assets/common/js/metadata.js') diff --git a/assets/common/js/metadata.js b/assets/common/js/metadata.js new file mode 100644 index 00000000..5200b481 --- /dev/null +++ b/assets/common/js/metadata.js @@ -0,0 +1,39 @@ +import he from 'he'; + +function clearLoaders(loaders) { + if (loaders != null && loaders.length > 0) { + [...loaders].forEach((loader) => { + loader.classList.remove('loading-input'); + }); + } +} + +(() => { + const loaders = document.querySelectorAll('.loading-input'); + const inputTitle = document.querySelector('input[name="lf_title"]'); + if (inputTitle != null && 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 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); + }; + + xhr.send(); +})(); -- cgit v1.2.3 From 21e72da9ee34cec56b10c83ae0c75b4bf320dfcb Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Thu, 15 Oct 2020 11:46:24 +0200 Subject: 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 --- assets/common/js/metadata.js | 106 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 85 insertions(+), 21 deletions(-) (limited to 'assets/common/js/metadata.js') 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
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); + }); + } })(); -- cgit v1.2.3 From 5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sat, 10 Oct 2020 17:40:26 +0200 Subject: Feature: bulk creation of bookmarks This changes creates a new form in addlink page allowing to create multiple bookmarks at once more easily. It focuses on re-using as much existing code and template component as possible. These changes includes: - a new form in addlink (hidden behind a button by default), containing a text area for URL, and tags/private status to apply to created links - this form displays a new template called editlink.batch, itself including editlink template multiple times - User interation in this new templates are handle by a new JS script (shaare-batch.js) making AJAX requests, and therefore does not need page reloading - ManageShaareController has been split into 3 distinct controllers: + ShaareAdd: displays addlink template + ShaareManage: various operation applied on existing shaares (change visibility, pin, deletion, etc.) + ShaarePublish: handles creation/edit forms and saving Shaare's form - Updated translations Fixes #137 --- assets/common/js/metadata.js | 50 ++++++++++++++++++++++++-------------------- 1 file changed, 27 insertions(+), 23 deletions(-) (limited to 'assets/common/js/metadata.js') diff --git a/assets/common/js/metadata.js b/assets/common/js/metadata.js index 2b013364..d5a28a35 100644 --- a/assets/common/js/metadata.js +++ b/assets/common/js/metadata.js @@ -56,37 +56,41 @@ function updateThumb(basePath, divElement, id) { (() => { 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) { - if (inputTitle.value.length > 0) { - clearLoaders(loaders); - return; - } + const inputTitles = document.querySelectorAll('input[name="lf_title"]'); + if (inputTitles != null) { + [...inputTitles].forEach((inputTitle) => { + const form = inputTitle.closest('form[name="linkform"]'); + const loaders = form.querySelectorAll('.loading-input'); + + if (inputTitle.value.length > 0) { + clearLoaders(loaders); + return; + } - const url = document.querySelector('input[name="lf_url"]').value; + const url = form.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 = form.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(); + }); } /* -- cgit v1.2.3