aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/common/js/metadata.js39
-rw-r--r--assets/default/js/base.js12
-rw-r--r--assets/default/scss/shaarli.scss51
3 files changed, 92 insertions, 10 deletions
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 @@
1import he from 'he';
2
3function clearLoaders(loaders) {
4 if (loaders != null && loaders.length > 0) {
5 [...loaders].forEach((loader) => {
6 loader.classList.remove('loading-input');
7 });
8 }
9}
10
11(() => {
12 const loaders = document.querySelectorAll('.loading-input');
13 const inputTitle = document.querySelector('input[name="lf_title"]');
14 if (inputTitle != null && inputTitle.value.length > 0) {
15 clearLoaders(loaders);
16 return;
17 }
18
19 const url = document.querySelector('input[name="lf_url"]').value;
20 const basePath = document.querySelector('input[name="js_base_path"]').value;
21
22 const xhr = new XMLHttpRequest();
23 xhr.open('GET', `${basePath}/admin/metadata?url=${encodeURI(url)}`, true);
24 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
25 xhr.onload = () => {
26 const result = JSON.parse(xhr.response);
27 Object.keys(result).forEach((key) => {
28 if (result[key] !== null && result[key].length) {
29 const element = document.querySelector(`input[name="lf_${key}"], textarea[name="lf_${key}"]`);
30 if (element != null && element.value.length === 0) {
31 element.value = he.decode(result[key]);
32 }
33 }
34 });
35 clearLoaders(loaders);
36 };
37
38 xhr.send();
39})();
diff --git a/assets/default/js/base.js b/assets/default/js/base.js
index be986ae0..31688815 100644
--- a/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@ -1,4 +1,5 @@
1import Awesomplete from 'awesomplete'; 1import Awesomplete from 'awesomplete';
2import he from 'he';
2 3
3/** 4/**
4 * Find a parent element according to its tag and its attributes 5 * Find a parent element according to its tag and its attributes
@@ -96,15 +97,6 @@ function updateAwesompleteList(selector, tags, instances) {
96} 97}
97 98
98/** 99/**
99 * html_entities in JS
100 *
101 * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript
102 */
103function htmlEntities(str) {
104 return str.replace(/[\u00A0-\u9999<>&]/gim, (i) => `&#${i.charCodeAt(0)};`);
105}
106
107/**
108 * Add the class 'hidden' to city options not attached to the current selected continent. 100 * Add the class 'hidden' to city options not attached to the current selected continent.
109 * 101 *
110 * @param cities List of <option> elements 102 * @param cities List of <option> elements
@@ -569,7 +561,7 @@ function init(description) {
569 input.setAttribute('name', totag); 561 input.setAttribute('name', totag);
570 input.setAttribute('value', totag); 562 input.setAttribute('value', totag);
571 findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none'; 563 findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none';
572 block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); 564 block.querySelector('a.tag-link').innerHTML = he.encode(totag);
573 block 565 block
574 .querySelector('a.tag-link') 566 .querySelector('a.tag-link')
575 .setAttribute('href', `${basePath}/?searchtags=${encodeURIComponent(totag)}`); 567 .setAttribute('href', `${basePath}/?searchtags=${encodeURIComponent(totag)}`);
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index a528adb0..df9c867b 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1269,6 +1269,57 @@ form {
1269 } 1269 }
1270} 1270}
1271 1271
1272.loading-input {
1273 position: relative;
1274
1275 @keyframes around {
1276 0% {
1277 transform: rotate(0deg);
1278 }
1279
1280 100% {
1281 transform: rotate(360deg);
1282 }
1283 }
1284
1285 .icon-container {
1286 position: absolute;
1287 right: 60px;
1288 top: calc(50% - 10px);
1289 }
1290
1291 .loader {
1292 position: relative;
1293 height: 20px;
1294 width: 20px;
1295 display: inline-block;
1296 animation: around 5.4s infinite;
1297
1298 &::after,
1299 &::before {
1300 content: "";
1301 background: $form-input-background;
1302 position: absolute;
1303 display: inline-block;
1304 width: 100%;
1305 height: 100%;
1306 border-width: 2px;
1307 border-color: #333 #333 transparent transparent;
1308 border-style: solid;
1309 border-radius: 20px;
1310 box-sizing: border-box;
1311 top: 0;
1312 left: 0;
1313 animation: around 0.7s ease-in-out infinite;
1314 }
1315
1316 &::after {
1317 animation: around 0.7s ease-in-out 0.1s infinite;
1318 background: transparent;
1319 }
1320 }
1321}
1322
1272// LOGIN 1323// LOGIN
1273.login-form-container { 1324.login-form-container {
1274 .remember-me { 1325 .remember-me {