diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/common/js/metadata.js | 39 | ||||
-rw-r--r-- | assets/default/js/base.js | 12 | ||||
-rw-r--r-- | assets/default/scss/shaarli.scss | 51 |
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 @@ | |||
1 | import he from 'he'; | ||
2 | |||
3 | function 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 @@ | |||
1 | import Awesomplete from 'awesomplete'; | 1 | import Awesomplete from 'awesomplete'; |
2 | import 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 | */ | ||
103 | function 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 { |