aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/default
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2020-09-25 13:29:36 +0200
committerArthurHoaro <arthur@hoa.ro>2020-10-15 09:08:46 +0200
commit4cf3564d28dc8e4d08a3e64f09ad045ffbde97ae (patch)
tree8f8ef095cdfea3b35953417fd3d8bb6cdbc7cb46 /assets/default
parentf34554c6c2cd8fe99fe2e8907bfc196a4884416a (diff)
downloadShaarli-4cf3564d28dc8e4d08a3e64f09ad045ffbde97ae.tar.gz
Shaarli-4cf3564d28dc8e4d08a3e64f09ad045ffbde97ae.tar.zst
Shaarli-4cf3564d28dc8e4d08a3e64f09ad045ffbde97ae.zip
Add a setting to retrieve bookmark metadata asynchrounously
- There is a new standalone script (metadata.js) which requests a new controller to get bookmark metadata and fill the form async - This feature is enabled with the new setting: general.enable_async_metadata (enabled by default) - general.retrieve_description is now enabled by default - A small rotating loader animation has a been added to bookmark inputs when metadata is being retrieved (default template) - Custom JS htmlentities has been removed and mathiasbynens/he library is used instead Fixes #1563
Diffstat (limited to 'assets/default')
-rw-r--r--assets/default/js/base.js12
-rw-r--r--assets/default/scss/shaarli.scss51
2 files changed, 53 insertions, 10 deletions
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 {