]>
Commit | Line | Data |
---|---|---|
4cf3564d A |
1 | import he from 'he'; |
2 | ||
21e72da9 A |
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 | */ | |
4cf3564d A |
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 | ||
21e72da9 A |
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 | ||
4cf3564d | 57 | (() => { |
21e72da9 | 58 | const basePath = document.querySelector('input[name="js_base_path"]').value; |
21e72da9 A |
59 | |
60 | /* | |
61 | * METADATA FOR EDIT BOOKMARK PAGE | |
62 | */ | |
5d8de758 A |
63 | const inputTitles = document.querySelectorAll('input[name="lf_title"]'); |
64 | if (inputTitles != null) { | |
65 | [...inputTitles].forEach((inputTitle) => { | |
66 | const form = inputTitle.closest('form[name="linkform"]'); | |
67 | const loaders = form.querySelectorAll('.loading-input'); | |
68 | ||
69 | if (inputTitle.value.length > 0) { | |
70 | clearLoaders(loaders); | |
71 | return; | |
72 | } | |
4cf3564d | 73 | |
5d8de758 | 74 | const url = form.querySelector('input[name="lf_url"]').value; |
4cf3564d | 75 | |
5d8de758 A |
76 | const xhr = new XMLHttpRequest(); |
77 | xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true); | |
78 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | |
79 | xhr.onload = () => { | |
80 | const result = JSON.parse(xhr.response); | |
81 | Object.keys(result).forEach((key) => { | |
82 | if (result[key] !== null && result[key].length) { | |
83 | const element = form.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`); | |
84 | if (element != null && element.value.length === 0) { | |
85 | element.value = he.decode(result[key]); | |
86 | } | |
21e72da9 | 87 | } |
5d8de758 A |
88 | }); |
89 | clearLoaders(loaders); | |
90 | }; | |
4cf3564d | 91 | |
5d8de758 A |
92 | xhr.send(); |
93 | }); | |
21e72da9 A |
94 | } |
95 | ||
96 | /* | |
97 | * METADATA FOR THUMBNAIL RETRIEVAL | |
98 | */ | |
99 | const thumbsToLoad = document.querySelectorAll('div[data-async-thumbnail]'); | |
100 | if (thumbsToLoad != null) { | |
101 | [...thumbsToLoad].forEach((divElement) => { | |
102 | const { id } = divElement.closest('[data-id]').dataset; | |
103 | ||
104 | updateThumb(basePath, divElement, id); | |
105 | }); | |
106 | } | |
4cf3564d | 107 | })(); |