aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/default/js/base.js28
-rw-r--r--assets/default/scss/shaarli.scss10
2 files changed, 26 insertions, 12 deletions
diff --git a/assets/default/js/base.js b/assets/default/js/base.js
index 66badfb2..e7bf4909 100644
--- a/assets/default/js/base.js
+++ b/assets/default/js/base.js
@@ -42,19 +42,20 @@ function refreshToken(basePath, callback) {
42 xhr.send(); 42 xhr.send();
43} 43}
44 44
45function createAwesompleteInstance(element, tags = []) { 45function createAwesompleteInstance(element, separator, tags = []) {
46 const awesome = new Awesomplete(Awesomplete.$(element)); 46 const awesome = new Awesomplete(Awesomplete.$(element));
47 // Tags are separated by a space 47
48 awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]); 48 // Tags are separated by separator
49 awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS(text, input.match(new RegExp(`[^${separator}]*$`))[0]);
49 // Insert new selected tag in the input 50 // Insert new selected tag in the input
50 awesome.replace = (text) => { 51 awesome.replace = (text) => {
51 const before = awesome.input.value.match(/^.+ \s*|/)[0]; 52 const before = awesome.input.value.match(new RegExp(`^.+${separator}+|`))[0];
52 awesome.input.value = `${before}${text} `; 53 awesome.input.value = `${before}${text}${separator}`;
53 }; 54 };
54 // Highlight found items 55 // Highlight found items
55 awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(/[^ ]*$/)[0]); 56 awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(new RegExp(`[^${separator}]*$`))[0]);
56 // Don't display already selected items 57 // Don't display already selected items
57 const reg = /(\w+) /g; 58 const reg = new RegExp(`/(\w+)${separator}/g`);
58 let match; 59 let match;
59 awesome.data = (item, input) => { 60 awesome.data = (item, input) => {
60 while ((match = reg.exec(input))) { 61 while ((match = reg.exec(input))) {
@@ -78,13 +79,14 @@ function createAwesompleteInstance(element, tags = []) {
78 * @param selector CSS selector 79 * @param selector CSS selector
79 * @param tags Array of tags 80 * @param tags Array of tags
80 * @param instances List of existing awesomplete instances 81 * @param instances List of existing awesomplete instances
82 * @param separator Tags separator character
81 */ 83 */
82function updateAwesompleteList(selector, tags, instances) { 84function updateAwesompleteList(selector, tags, instances, separator) {
83 if (instances.length === 0) { 85 if (instances.length === 0) {
84 // First load: create Awesomplete instances 86 // First load: create Awesomplete instances
85 const elements = document.querySelectorAll(selector); 87 const elements = document.querySelectorAll(selector);
86 [...elements].forEach((element) => { 88 [...elements].forEach((element) => {
87 instances.push(createAwesompleteInstance(element, tags)); 89 instances.push(createAwesompleteInstance(element, separator, tags));
88 }); 90 });
89 } else { 91 } else {
90 // Update awesomplete tag list 92 // Update awesomplete tag list
@@ -214,6 +216,8 @@ function init(description) {
214 216
215(() => { 217(() => {
216 const basePath = document.querySelector('input[name="js_base_path"]').value; 218 const basePath = document.querySelector('input[name="js_base_path"]').value;
219 const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]');
220 const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || '\s' : '\s';
217 221
218 /** 222 /**
219 * Handle responsive menu. 223 * Handle responsive menu.
@@ -575,7 +579,7 @@ function init(description) {
575 579
576 // Refresh awesomplete values 580 // Refresh awesomplete values
577 existingTags = existingTags.map((tag) => (tag === fromtag ? totag : tag)); 581 existingTags = existingTags.map((tag) => (tag === fromtag ? totag : tag));
578 awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); 582 awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes, tagsSeparator);
579 } 583 }
580 }; 584 };
581 xhr.send(`renametag=1&fromtag=${fromtagUrl}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`); 585 xhr.send(`renametag=1&fromtag=${fromtagUrl}&totag=${encodeURIComponent(totag)}&token=${refreshedToken}`);
@@ -615,14 +619,14 @@ function init(description) {
615 refreshToken(basePath); 619 refreshToken(basePath);
616 620
617 existingTags = existingTags.filter((tagItem) => tagItem !== tag); 621 existingTags = existingTags.filter((tagItem) => tagItem !== tag);
618 awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes); 622 awesomepletes = updateAwesompleteList('.rename-tag-input', existingTags, awesomepletes, tagsSeparator);
619 } 623 }
620 }); 624 });
621 }); 625 });
622 626
623 const autocompleteFields = document.querySelectorAll('input[data-multiple]'); 627 const autocompleteFields = document.querySelectorAll('input[data-multiple]');
624 [...autocompleteFields].forEach((autocompleteField) => { 628 [...autocompleteFields].forEach((autocompleteField) => {
625 awesomepletes.push(createAwesompleteInstance(autocompleteField)); 629 awesomepletes.push(createAwesompleteInstance(autocompleteField, tagsSeparator));
626 }); 630 });
627 631
628 const exportForm = document.querySelector('#exportform'); 632 const exportForm = document.querySelector('#exportform');
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index a7f091e9..ed774a9d 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -139,6 +139,16 @@ body,
139 } 139 }
140} 140}
141 141
142.page-form,
143.pure-alert {
144 code {
145 display: inline-block;
146 padding: 0 2px;
147 color: $dark-grey;
148 background-color: var(--background-color);
149 }
150}
151
142// Make pure-extras alert closable. 152// Make pure-extras alert closable.
143.pure-alert-closable { 153.pure-alert-closable {
144 .fa-times { 154 .fa-times {