aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/common
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2020-10-10 17:40:26 +0200
committerArthurHoaro <arthur@hoa.ro>2020-10-27 20:11:30 +0100
commit5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1 (patch)
tree2236e571035332a63f87a09222f2278b93f63515 /assets/common
parentb8e5a253ab5521ce2be6c0d3e04e0101527df3c1 (diff)
downloadShaarli-5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1.tar.gz
Shaarli-5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1.tar.zst
Shaarli-5d8de7587d67b5c3e5d1fed8562d9b87ecde80c1.zip
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
Diffstat (limited to 'assets/common')
-rw-r--r--assets/common/js/metadata.js50
-rw-r--r--assets/common/js/shaare-batch.js107
2 files changed, 134 insertions, 23 deletions
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) {
56 56
57(() => { 57(() => {
58 const basePath = document.querySelector('input[name="js_base_path"]').value; 58 const basePath = document.querySelector('input[name="js_base_path"]').value;
59 const loaders = document.querySelectorAll('.loading-input');
60 59
61 /* 60 /*
62 * METADATA FOR EDIT BOOKMARK PAGE 61 * METADATA FOR EDIT BOOKMARK PAGE
63 */ 62 */
64 const inputTitle = document.querySelector('input[name="lf_title"]'); 63 const inputTitles = document.querySelectorAll('input[name="lf_title"]');
65 if (inputTitle != null) { 64 if (inputTitles != null) {
66 if (inputTitle.value.length > 0) { 65 [...inputTitles].forEach((inputTitle) => {
67 clearLoaders(loaders); 66 const form = inputTitle.closest('form[name="linkform"]');
68 return; 67 const loaders = form.querySelectorAll('.loading-input');
69 } 68
69 if (inputTitle.value.length > 0) {
70 clearLoaders(loaders);
71 return;
72 }
70 73
71 const url = document.querySelector('input[name="lf_url"]').value; 74 const url = form.querySelector('input[name="lf_url"]').value;
72 75
73 const xhr = new XMLHttpRequest(); 76 const xhr = new XMLHttpRequest();
74 xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true); 77 xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true);
75 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 78 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
76 xhr.onload = () => { 79 xhr.onload = () => {
77 const result = JSON.parse(xhr.response); 80 const result = JSON.parse(xhr.response);
78 Object.keys(result).forEach((key) => { 81 Object.keys(result).forEach((key) => {
79 if (result[key] !== null && result[key].length) { 82 if (result[key] !== null && result[key].length) {
80 const element = document.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`); 83 const element = form.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`);
81 if (element != null && element.value.length === 0) { 84 if (element != null && element.value.length === 0) {
82 element.value = he.decode(result[key]); 85 element.value = he.decode(result[key]);
86 }
83 } 87 }
84 } 88 });
85 }); 89 clearLoaders(loaders);
86 clearLoaders(loaders); 90 };
87 };
88 91
89 xhr.send(); 92 xhr.send();
93 });
90 } 94 }
91 95
92 /* 96 /*
diff --git a/assets/common/js/shaare-batch.js b/assets/common/js/shaare-batch.js
new file mode 100644
index 00000000..9f612993
--- /dev/null
+++ b/assets/common/js/shaare-batch.js
@@ -0,0 +1,107 @@
1const sendBookmarkForm = (basePath, formElement) => {
2 const inputs = formElement
3 .querySelectorAll('input[type="text"], textarea, input[type="checkbox"], input[type="hidden"]');
4
5 const formData = new FormData();
6 [...inputs].forEach((input) => {
7 formData.append(input.getAttribute('name'), input.value);
8 });
9
10 return new Promise((resolve, reject) => {
11 const xhr = new XMLHttpRequest();
12 xhr.open('POST', `${basePath}/admin/shaare`);
13 xhr.onload = () => {
14 if (xhr.status !== 200) {
15 alert(`An error occurred. Return code: ${xhr.status}`);
16 reject();
17 } else {
18 formElement.remove();
19 resolve();
20 }
21 };
22 xhr.send(formData);
23 });
24};
25
26const sendBookmarkDelete = (buttonElement, formElement) => (
27 new Promise((resolve, reject) => {
28 const xhr = new XMLHttpRequest();
29 xhr.open('GET', buttonElement.href);
30 xhr.onload = () => {
31 if (xhr.status !== 200) {
32 alert(`An error occurred. Return code: ${xhr.status}`);
33 reject();
34 } else {
35 formElement.remove();
36 resolve();
37 }
38 };
39 xhr.send();
40 })
41);
42
43const redirectIfEmptyBatch = (basePath, formElements, path) => {
44 if (formElements == null || formElements.length === 0) {
45 window.location.href = `${basePath}${path}`;
46 }
47};
48
49(() => {
50 const basePath = document.querySelector('input[name="js_base_path"]').value;
51 const getForms = () => document.querySelectorAll('form[name="linkform"]');
52
53 const cancelButtons = document.querySelectorAll('[name="cancel-batch-link"]');
54 if (cancelButtons != null) {
55 [...cancelButtons].forEach((cancelButton) => {
56 cancelButton.addEventListener('click', (e) => {
57 e.preventDefault();
58 e.target.closest('form[name="linkform"]').remove();
59 redirectIfEmptyBatch(basePath, getForms(), '/admin/add-shaare');
60 });
61 });
62 }
63
64 const saveButtons = document.querySelectorAll('[name="save_edit"]');
65 if (saveButtons != null) {
66 [...saveButtons].forEach((saveButton) => {
67 saveButton.addEventListener('click', (e) => {
68 e.preventDefault();
69
70 const formElement = e.target.closest('form[name="linkform"]');
71 sendBookmarkForm(basePath, formElement)
72 .then(() => redirectIfEmptyBatch(basePath, getForms(), '/'));
73 });
74 });
75 }
76
77 const saveAllButtons = document.querySelectorAll('[name="save_edit_batch"]');
78 if (saveAllButtons != null) {
79 [...saveAllButtons].forEach((saveAllButton) => {
80 saveAllButton.addEventListener('click', (e) => {
81 e.preventDefault();
82
83 const promises = [];
84 [...getForms()].forEach((formElement) => {
85 promises.push(sendBookmarkForm(basePath, formElement));
86 });
87
88 Promise.all(promises).then(() => {
89 window.location.href = basePath || '/';
90 });
91 });
92 });
93 }
94
95 const deleteButtons = document.querySelectorAll('[name="delete_link"]');
96 if (deleteButtons != null) {
97 [...deleteButtons].forEach((deleteButton) => {
98 deleteButton.addEventListener('click', (e) => {
99 e.preventDefault();
100
101 const formElement = e.target.closest('form[name="linkform"]');
102 sendBookmarkDelete(e.target, formElement)
103 .then(() => redirectIfEmptyBatch(basePath, getForms(), '/'));
104 });
105 });
106 }
107})();