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 aadffc13..7f6b9637 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 2f49bbd2..286ac83b 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -1273,6 +1273,57 @@ form {
1273 } 1273 }
1274} 1274}
1275 1275
1276.loading-input {
1277 position: relative;
1278
1279 @keyframes around {
1280 0% {
1281 transform: rotate(0deg);
1282 }
1283
1284 100% {
1285 transform: rotate(360deg);
1286 }
1287 }
1288
1289 .icon-container {
1290 position: absolute;
1291 right: 60px;
1292 top: calc(50% - 10px);
1293 }
1294
1295 .loader {
1296 position: relative;
1297 height: 20px;
1298 width: 20px;
1299 display: inline-block;
1300 animation: around 5.4s infinite;
1301
1302 &::after,
1303 &::before {
1304 content: "";
1305 background: $form-input-background;
1306 position: absolute;
1307 display: inline-block;
1308 width: 100%;
1309 height: 100%;
1310 border-width: 2px;
1311 border-color: #333 #333 transparent transparent;
1312 border-style: solid;
1313 border-radius: 20px;
1314 box-sizing: border-box;
1315 top: 0;
1316 left: 0;
1317 animation: around 0.7s ease-in-out infinite;
1318 }
1319
1320 &::after {
1321 animation: around 0.7s ease-in-out 0.1s infinite;
1322 background: transparent;
1323 }
1324 }
1325}
1326
1276// LOGIN 1327// LOGIN
1277.login-form-container { 1328.login-form-container {
1278 .remember-me { 1329 .remember-me {