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) => { loader.classList.remove('loading-input'); }); } } /** * 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) { if (inputTitle.value.length > 0) { clearLoaders(loaders); return; } 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]); } } }); clearLoaders(loaders); }; 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); }); } })();