diff options
Diffstat (limited to 'assets/default')
-rw-r--r-- | assets/default/js/base.js | 73 | ||||
-rw-r--r-- | assets/default/scss/shaarli.scss | 66 |
2 files changed, 97 insertions, 42 deletions
diff --git a/assets/default/js/base.js b/assets/default/js/base.js index d5c29c69..be986ae0 100644 --- a/assets/default/js/base.js +++ b/assets/default/js/base.js | |||
@@ -10,7 +10,7 @@ import Awesomplete from 'awesomplete'; | |||
10 | * @returns Found element or null. | 10 | * @returns Found element or null. |
11 | */ | 11 | */ |
12 | function findParent(element, tagName, attributes) { | 12 | function findParent(element, tagName, attributes) { |
13 | const parentMatch = key => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1; | 13 | const parentMatch = (key) => attributes[key] !== '' && element.getAttribute(key).indexOf(attributes[key]) !== -1; |
14 | while (element) { | 14 | while (element) { |
15 | if (element.tagName.toLowerCase() === tagName) { | 15 | if (element.tagName.toLowerCase() === tagName) { |
16 | if (Object.keys(attributes).find(parentMatch)) { | 16 | if (Object.keys(attributes).find(parentMatch)) { |
@@ -25,12 +25,18 @@ function findParent(element, tagName, attributes) { | |||
25 | /** | 25 | /** |
26 | * Ajax request to refresh the CSRF token. | 26 | * Ajax request to refresh the CSRF token. |
27 | */ | 27 | */ |
28 | function refreshToken() { | 28 | function refreshToken(basePath, callback) { |
29 | const xhr = new XMLHttpRequest(); | 29 | const xhr = new XMLHttpRequest(); |
30 | xhr.open('GET', '?do=token'); | 30 | xhr.open('GET', `${basePath}/admin/token`); |
31 | xhr.onload = () => { | 31 | xhr.onload = () => { |
32 | const token = document.getElementById('token'); | 32 | const elements = document.querySelectorAll('input[name="token"]'); |
33 | token.setAttribute('value', xhr.responseText); | 33 | [...elements].forEach((element) => { |
34 | element.setAttribute('value', xhr.responseText); | ||
35 | }); | ||
36 | |||
37 | if (callback) { | ||
38 | callback(xhr.response); | ||
39 | } | ||
34 | }; | 40 | }; |
35 | xhr.send(); | 41 | xhr.send(); |
36 | } | 42 | } |
@@ -95,7 +101,7 @@ function updateAwesompleteList(selector, tags, instances) { | |||
95 | * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript | 101 | * @see http://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript |
96 | */ | 102 | */ |
97 | function htmlEntities(str) { | 103 | function htmlEntities(str) { |
98 | return str.replace(/[\u00A0-\u9999<>&]/gim, i => `&#${i.charCodeAt(0)};`); | 104 | return str.replace(/[\u00A0-\u9999<>&]/gim, (i) => `&#${i.charCodeAt(0)};`); |
99 | } | 105 | } |
100 | 106 | ||
101 | /** | 107 | /** |
@@ -188,8 +194,8 @@ function removeClass(element, classname) { | |||
188 | function init(description) { | 194 | function init(description) { |
189 | function resize() { | 195 | function resize() { |
190 | /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */ | 196 | /* Fix jumpy resizing: https://stackoverflow.com/a/18262927/1484919 */ |
191 | const scrollTop = window.pageYOffset || | 197 | const scrollTop = window.pageYOffset |
192 | (document.documentElement || document.body.parentNode || document.body).scrollTop; | 198 | || (document.documentElement || document.body.parentNode || document.body).scrollTop; |
193 | 199 | ||
194 | description.style.height = 'auto'; | 200 | description.style.height = 'auto'; |
195 | description.style.height = `${description.scrollHeight + 10}px`; | 201 | description.style.height = `${description.scrollHeight + 10}px`; |
@@ -215,6 +221,8 @@ function init(description) { | |||
215 | } | 221 | } |
216 | 222 | ||
217 | (() => { | 223 | (() => { |
224 | const basePath = document.querySelector('input[name="js_base_path"]').value; | ||
225 | |||
218 | /** | 226 | /** |
219 | * Handle responsive menu. | 227 | * Handle responsive menu. |
220 | * Source: http://purecss.io/layouts/tucked-menu-vertical/ | 228 | * Source: http://purecss.io/layouts/tucked-menu-vertical/ |
@@ -461,7 +469,7 @@ function init(description) { | |||
461 | }); | 469 | }); |
462 | 470 | ||
463 | if (window.confirm(message)) { | 471 | if (window.confirm(message)) { |
464 | window.location = `?delete_link&lf_linkdate=${ids.join('+')}&token=${token.value}`; | 472 | window.location = `${basePath}/admin/shaare/delete?id=${ids.join('+')}&token=${token.value}`; |
465 | } | 473 | } |
466 | }); | 474 | }); |
467 | } | 475 | } |
@@ -482,8 +490,10 @@ function init(description) { | |||
482 | }); | 490 | }); |
483 | }); | 491 | }); |
484 | 492 | ||
485 | const ids = links.map(item => item.id); | 493 | const ids = links.map((item) => item.id); |
486 | window.location = `?change_visibility&token=${token.value}&newVisibility=${visibility}&ids=${ids.join('+')}`; | 494 | window.location = ( |
495 | `${basePath}/admin/shaare/visibility?token=${token.value}&newVisibility=${visibility}&id=${ids.join('+')}` | ||
496 | ); | ||
487 | }); | 497 | }); |
488 | }); | 498 | }); |
489 | } | 499 | } |
@@ -545,8 +555,9 @@ function init(description) { | |||
545 | } | 555 | } |
546 | const refreshedToken = document.getElementById('token').value; | 556 | const refreshedToken = document.getElementById('token').value; |
547 | const fromtag = block.getAttribute('data-tag'); | 557 | const fromtag = block.getAttribute('data-tag'); |
558 | const fromtagUrl = block.getAttribute('data-tag-url'); | ||
548 | const xhr = new XMLHttpRequest(); | 559 | const xhr = new XMLHttpRequest(); |
549 | xhr.open('POST', '?do=changetag'); | 560 | xhr.open('POST', `${basePath}/admin/tags`); |
550 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | 561 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); |
551 | xhr.onload = () => { | 562 | xhr.onload = () => { |
552 | if (xhr.status !== 200) { | 563 | if (xhr.status !== 200) { |
@@ -554,20 +565,28 @@ function init(description) { | |||
554 | location.reload(); | 565 | location.reload(); |
555 | } else { | 566 | } else { |
556 | block.setAttribute('data-tag', totag); | 567 | block.setAttribute('data-tag', totag); |
568 | block.setAttribute('data-tag-url', encodeURIComponent(totag)); | ||
557 | input.setAttribute('name', totag); | 569 | input.setAttribute('name', totag); |
558 | input.setAttribute('value', totag); | 570 | input.setAttribute('value', totag); |
559 | findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none'; | 571 | findParent(input, 'div', { class: 'rename-tag-form' }).style.display = 'none'; |
560 | block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); | 572 | block.querySelector('a.tag-link').innerHTML = htmlEntities(totag); |
561 | block.querySelector('a.tag-link').setAttribute('href', `?searchtags=${encodeURIComponent(totag)}`); | 573 | block |
562 | block.querySelector('a.rename-tag').setAttribute('href', `?do=changetag&fromtag=${encodeURIComponent(totag)}`); | 574 | .querySelector('a.tag-link') |
575 | .setAttribute('href', `${basePath}/?searchtags=${encodeURIComponent(totag)}`); | ||
576 | block | ||
577 | .querySelector('a.count') | ||
578 | .setAttribute('href', `${basePath}/add-tag/${encodeURIComponent(totag)}`); | ||
579 | block | ||
580 | .querySelector('a.rename-tag') | ||
581 | .setAttribute('href', `${basePath}/admin/tags?fromtag=${encodeURIComponent(totag)}`); | ||
563 | 582 | ||
564 | // Refresh awesomplete values | 583 | // Refresh awesomplete values |
565 | existingTags = existingTags.map(tag => (tag === fromtag ? totag : tag)); | 584 | existingTags = existingTags.map((tag) => (tag === fromtag ? totag : tag)); |
566 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); | 585 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); |
567 | } | 586 | } |
568 | }; | 587 | }; |
569 | xhr.send(`renametag=1&fromtag=${encodeURIComponent(fromtag)}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`); | 588 | xhr.send(`renametag=1&fromtag=${fromtagUrl}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`); |
570 | refreshToken(); | 589 | refreshToken(basePath); |
571 | }); | 590 | }); |
572 | }); | 591 | }); |
573 | 592 | ||
@@ -589,19 +608,20 @@ function init(description) { | |||
589 | event.preventDefault(); | 608 | event.preventDefault(); |
590 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); | 609 | const block = findParent(event.target, 'div', { class: 'tag-list-item' }); |
591 | const tag = block.getAttribute('data-tag'); | 610 | const tag = block.getAttribute('data-tag'); |
611 | const tagUrl = block.getAttribute('data-tag-url'); | ||
592 | const refreshedToken = document.getElementById('token').value; | 612 | const refreshedToken = document.getElementById('token').value; |
593 | 613 | ||
594 | if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) { | 614 | if (confirm(`Are you sure you want to delete the tag "${tag}"?`)) { |
595 | const xhr = new XMLHttpRequest(); | 615 | const xhr = new XMLHttpRequest(); |
596 | xhr.open('POST', '?do=changetag'); | 616 | xhr.open('POST', `${basePath}/admin/tags`); |
597 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); | 617 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); |
598 | xhr.onload = () => { | 618 | xhr.onload = () => { |
599 | block.remove(); | 619 | block.remove(); |
600 | }; | 620 | }; |
601 | xhr.send(encodeURI(`deletetag=1&fromtag=${tag}&token=${refreshedToken}`)); | 621 | xhr.send(`deletetag=1&fromtag=${tagUrl}&token=${refreshedToken}`); |
602 | refreshToken(); | 622 | refreshToken(basePath); |
603 | 623 | ||
604 | existingTags = existingTags.filter(tagItem => tagItem !== tag); | 624 | existingTags = existingTags.filter((tagItem) => tagItem !== tag); |
605 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); | 625 | awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); |
606 | } | 626 | } |
607 | }); | 627 | }); |
@@ -611,4 +631,15 @@ function init(description) { | |||
611 | [...autocompleteFields].forEach((autocompleteField) => { | 631 | [...autocompleteFields].forEach((autocompleteField) => { |
612 | awesomepletes.push(createAwesompleteInstance(autocompleteField)); | 632 | awesomepletes.push(createAwesompleteInstance(autocompleteField)); |
613 | }); | 633 | }); |
634 | |||
635 | const exportForm = document.querySelector('#exportform'); | ||
636 | if (exportForm != null) { | ||
637 | exportForm.addEventListener('submit', (event) => { | ||
638 | event.preventDefault(); | ||
639 | |||
640 | refreshToken(basePath, () => { | ||
641 | event.target.submit(); | ||
642 | }); | ||
643 | }); | ||
644 | } | ||
614 | })(); | 645 | })(); |
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss index 61e382b6..a528adb0 100644 --- a/assets/default/scss/shaarli.scss +++ b/assets/default/scss/shaarli.scss | |||
@@ -69,20 +69,22 @@ pre { | |||
69 | font-family: 'Roboto'; | 69 | font-family: 'Roboto'; |
70 | font-weight: 400; | 70 | font-weight: 400; |
71 | font-style: normal; | 71 | font-style: normal; |
72 | src: local('Roboto'), | 72 | src: |
73 | local('Roboto-Regular'), | 73 | local('Roboto'), |
74 | url('../fonts/Roboto-Regular.woff2') format('woff2'), | 74 | local('Roboto-Regular'), |
75 | url('../fonts/Roboto-Regular.woff') format('woff'); | 75 | url('../fonts/Roboto-Regular.woff2') format('woff2'), |
76 | url('../fonts/Roboto-Regular.woff') format('woff'); | ||
76 | } | 77 | } |
77 | 78 | ||
78 | @font-face { | 79 | @font-face { |
79 | font-family: 'Roboto'; | 80 | font-family: 'Roboto'; |
80 | font-weight: 700; | 81 | font-weight: 700; |
81 | font-style: normal; | 82 | font-style: normal; |
82 | src: local('Roboto'), | 83 | src: |
83 | local('Roboto-Bold'), | 84 | local('Roboto'), |
84 | url('../fonts/Roboto-Bold.woff2') format('woff2'), | 85 | local('Roboto-Bold'), |
85 | url('../fonts/Roboto-Bold.woff') format('woff'); | 86 | url('../fonts/Roboto-Bold.woff2') format('woff2'), |
87 | url('../fonts/Roboto-Bold.woff') format('woff'); | ||
86 | } | 88 | } |
87 | 89 | ||
88 | body, | 90 | body, |
@@ -375,7 +377,7 @@ body, | |||
375 | } | 377 | } |
376 | 378 | ||
377 | @media screen and (max-width: 64em) { | 379 | @media screen and (max-width: 64em) { |
378 | .header-search , | 380 | .header-search, |
379 | .header-search * { | 381 | .header-search * { |
380 | visibility: hidden; | 382 | visibility: hidden; |
381 | } | 383 | } |
@@ -490,6 +492,10 @@ body, | |||
490 | } | 492 | } |
491 | } | 493 | } |
492 | 494 | ||
495 | .header-alert-message { | ||
496 | text-align: center; | ||
497 | } | ||
498 | |||
493 | // CONTENT - GENERAL | 499 | // CONTENT - GENERAL |
494 | .container { | 500 | .container { |
495 | position: relative; | 501 | position: relative; |
@@ -550,7 +556,6 @@ body, | |||
550 | color: $dark-grey; | 556 | color: $dark-grey; |
551 | font-size: .9em; | 557 | font-size: .9em; |
552 | 558 | ||
553 | |||
554 | a { | 559 | a { |
555 | display: inline-block; | 560 | display: inline-block; |
556 | margin: 3px 0; | 561 | margin: 3px 0; |
@@ -612,6 +617,11 @@ body, | |||
612 | padding: 5px; | 617 | padding: 5px; |
613 | text-decoration: none; | 618 | text-decoration: none; |
614 | color: $dark-grey; | 619 | color: $dark-grey; |
620 | |||
621 | &.selected { | ||
622 | background: var(--main-color); | ||
623 | color: $white; | ||
624 | } | ||
615 | } | 625 | } |
616 | 626 | ||
617 | input { | 627 | input { |
@@ -1236,8 +1246,19 @@ form { | |||
1236 | color: $dark-grey; | 1246 | color: $dark-grey; |
1237 | } | 1247 | } |
1238 | 1248 | ||
1239 | .page404-container { | 1249 | .page-error-container { |
1240 | color: $dark-grey; | 1250 | color: $dark-grey; |
1251 | |||
1252 | h2 { | ||
1253 | margin: 70px 0 25px; | ||
1254 | } | ||
1255 | |||
1256 | pre { | ||
1257 | margin: 0 20%; | ||
1258 | padding: 20px 0; | ||
1259 | text-align: left; | ||
1260 | line-height: .7em; | ||
1261 | } | ||
1241 | } | 1262 | } |
1242 | 1263 | ||
1243 | // EDIT LINK | 1264 | // EDIT LINK |
@@ -1436,6 +1457,8 @@ form { | |||
1436 | -webkit-transition: opacity 500ms ease-in-out; | 1457 | -webkit-transition: opacity 500ms ease-in-out; |
1437 | -moz-transition: opacity 500ms ease-in-out; | 1458 | -moz-transition: opacity 500ms ease-in-out; |
1438 | -o-transition: opacity 500ms ease-in-out; | 1459 | -o-transition: opacity 500ms ease-in-out; |
1460 | min-width: 1px; | ||
1461 | min-height: 1px; | ||
1439 | 1462 | ||
1440 | &.b-loaded { | 1463 | &.b-loaded { |
1441 | opacity: 1; | 1464 | opacity: 1; |
@@ -1535,11 +1558,11 @@ form { | |||
1535 | text-align: center; | 1558 | text-align: center; |
1536 | 1559 | ||
1537 | a { | 1560 | a { |
1561 | background: $almost-white; | ||
1538 | display: inline-block; | 1562 | display: inline-block; |
1539 | margin: 0 15px; | 1563 | padding: 5px; |
1540 | text-decoration: none; | 1564 | text-decoration: none; |
1541 | color: $white; | 1565 | color: $dark-grey; |
1542 | font-weight: bold; | ||
1543 | } | 1566 | } |
1544 | } | 1567 | } |
1545 | 1568 | ||
@@ -1587,13 +1610,14 @@ form { | |||
1587 | 1610 | ||
1588 | > div { | 1611 | > div { |
1589 | border-radius: 10px; | 1612 | border-radius: 10px; |
1590 | background: repeating-linear-gradient( | 1613 | background: |
1591 | -45deg, | 1614 | repeating-linear-gradient( |
1592 | $almost-white, | 1615 | -45deg, |
1593 | $almost-white 6px, | 1616 | $almost-white, |
1594 | var(--background-color) 6px, | 1617 | $almost-white 6px, |
1595 | var(--background-color) 12px | 1618 | var(--background-color) 6px, |
1596 | ); | 1619 | var(--background-color) 12px |
1620 | ); | ||
1597 | width: 0%; | 1621 | width: 0%; |
1598 | height: 10px; | 1622 | height: 10px; |
1599 | } | 1623 | } |