aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/common/js/metadata.js50
-rw-r--r--assets/common/js/shaare-batch.js121
-rw-r--r--assets/default/js/base.js29
-rw-r--r--assets/default/scss/shaarli.scss72
4 files changed, 249 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..557325ee
--- /dev/null
+++ b/assets/common/js/shaare-batch.js
@@ -0,0 +1,121 @@
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.closest('.edit-link-container').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.closest('.edit-link-container').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 forms = [...getForms()];
84 const nbForm = forms.length;
85 let current = 0;
86 const progressBar = document.querySelector('.progressbar > div');
87 const progressBarCurrent = document.querySelector('.progressbar-current');
88
89 document.querySelector('.dark-layer').style.display = 'block';
90 document.querySelector('.progressbar-max').innerHTML = nbForm;
91 progressBarCurrent.innerHTML = current;
92
93 const promises = [];
94 forms.forEach((formElement) => {
95 promises.push(sendBookmarkForm(basePath, formElement).then(() => {
96 current += 1;
97 progressBar.style.width = `${(current * 100) / nbForm}%`;
98 progressBarCurrent.innerHTML = current;
99 }));
100 });
101
102 Promise.all(promises).then(() => {
103 window.location.href = basePath || '/';
104 });
105 });
106 });
107 }
108
109 const deleteButtons = document.querySelectorAll('[name="delete_link"]');
110 if (deleteButtons != null) {
111 [...deleteButtons].forEach((deleteButton) => {
112 deleteButton.addEventListener('click', (e) => {
113 e.preventDefault();
114
115 const formElement = e.target.closest('form[name="linkform"]');
116 sendBookmarkDelete(e.target, formElement)
117 .then(() => redirectIfEmptyBatch(basePath, getForms(), '/'));
118 });
119 });
120 }
121})();
diff --git a/assets/default/js/base.js b/assets/default/js/base.js
index 7f6b9637..4163577d 100644
--- a/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@ -634,4 +634,33 @@ function init(description) {
634 }); 634 });
635 }); 635 });
636 } 636 }
637
638 const bulkCreationButton = document.querySelector('.addlink-batch-show-more-block');
639 if (bulkCreationButton != null) {
640 const toggleBulkCreationVisibility = (showMoreBlockElement, formElement) => {
641 if (bulkCreationButton.classList.contains('pure-u-0')) {
642 showMoreBlockElement.classList.remove('pure-u-0');
643 formElement.classList.add('pure-u-0');
644 } else {
645 showMoreBlockElement.classList.add('pure-u-0');
646 formElement.classList.remove('pure-u-0');
647 }
648 };
649
650 const bulkCreationForm = document.querySelector('.addlink-batch-form-block');
651
652 toggleBulkCreationVisibility(bulkCreationButton, bulkCreationForm);
653 bulkCreationButton.querySelector('a').addEventListener('click', (e) => {
654 e.preventDefault();
655 toggleBulkCreationVisibility(bulkCreationButton, bulkCreationForm);
656 });
657
658 // Force to send falsy value if the checkbox is not checked.
659 const privateButton = bulkCreationForm.querySelector('input[type="checkbox"][name="private"]');
660 const privateHiddenButton = bulkCreationForm.querySelector('input[type="hidden"][name="private"]');
661 privateButton.addEventListener('click', () => {
662 privateHiddenButton.disabled = !privateHiddenButton.disabled;
663 });
664 privateHiddenButton.disabled = privateButton.checked;
665 }
637})(); 666})();
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 7dc61903..a7f091e9 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1023,6 +1023,10 @@ body,
1023 &.button-red { 1023 &.button-red {
1024 background: $red; 1024 background: $red;
1025 } 1025 }
1026
1027 &.button-grey {
1028 background: $light-grey;
1029 }
1026 } 1030 }
1027 1031
1028 .submit-buttons { 1032 .submit-buttons {
@@ -1083,6 +1087,11 @@ body,
1083 position: absolute; 1087 position: absolute;
1084 right: 5%; 1088 right: 5%;
1085 } 1089 }
1090
1091 &.button-grey {
1092 position: absolute;
1093 left: 5%;
1094 }
1086 } 1095 }
1087 } 1096 }
1088 } 1097 }
@@ -1750,6 +1759,69 @@ form {
1750 } 1759 }
1751} 1760}
1752 1761
1762// Batch creation
1763input[name='save_edit_batch'] {
1764 @extend %page-form-button;
1765}
1766
1767.addlink-batch-show-more {
1768 display: flex;
1769 align-items: center;
1770 margin: 20px 0 8px;
1771
1772 a {
1773 color: var(--main-color);
1774 text-decoration: none;
1775 }
1776
1777 &::before,
1778 &::after {
1779 content: "";
1780 flex-grow: 1;
1781 background: rgba(0, 0, 0, 0.35);
1782 height: 1px;
1783 font-size: 0;
1784 line-height: 0;
1785 }
1786
1787 &::before {
1788 margin: 0 16px 0 0;
1789 }
1790
1791 &::after {
1792 margin: 0 0 0 16px;
1793 }
1794}
1795
1796.dark-layer {
1797 display: none;
1798 position: fixed;
1799 height: 100%;
1800 width: 100%;
1801 z-index: 998;
1802 background-color: rgba(0, 0, 0, .75);
1803 color: #fff;
1804
1805 .screen-center {
1806 display: flex;
1807 flex-direction: column;
1808 justify-content: center;
1809 align-items: center;
1810 text-align: center;
1811 min-height: 100vh;
1812 }
1813
1814 .progressbar {
1815 width: 33%;
1816 }
1817}
1818
1819.addlink-batch-form-block {
1820 .pure-alert {
1821 margin: 25px 0 0 0;
1822 }
1823}
1824
1753// Print rules 1825// Print rules
1754@media print { 1826@media print {
1755 .shaarli-menu { 1827 .shaarli-menu {