From df9aac5b6406bf192f2e4e0987e25d0de88480df Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Thu, 5 Nov 2020 18:16:52 +0100 Subject: Tags separator: vintage theme compatibility --- assets/vintage/js/base.js | 45 ++++++++++++++++++++++++++------------------- 1 file changed, 26 insertions(+), 19 deletions(-) (limited to 'assets/vintage') diff --git a/assets/vintage/js/base.js b/assets/vintage/js/base.js index 66830b59..15b664ce 100644 --- a/assets/vintage/js/base.js +++ b/assets/vintage/js/base.js @@ -2,29 +2,36 @@ import Awesomplete from 'awesomplete'; import 'awesomplete/awesomplete.css'; (() => { - const awp = Awesomplete.$; const autocompleteFields = document.querySelectorAll('input[data-multiple]'); + const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]'); + const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || " " : " "; + [...autocompleteFields].forEach((autocompleteField) => { - const awesomplete = new Awesomplete(awp(autocompleteField)); - awesomplete.filter = (text, input) => Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]); - awesomplete.replace = (text) => { - const before = awesomplete.input.value.match(/^.+ \s*|/)[0]; - awesomplete.input.value = `${before}${text} `; - }; - awesomplete.minChars = 1; + const awesome = new Awesomplete(Awesomplete.$(autocompleteField)); - autocompleteField.addEventListener('input', () => { - const proposedTags = autocompleteField.getAttribute('data-list').replace(/,/g, '').split(' '); - const reg = /(\w+) /g; - let match; - while ((match = reg.exec(autocompleteField.value)) !== null) { - const id = proposedTags.indexOf(match[1]); - if (id !== -1) { - proposedTags.splice(id, 1); + // Tags are separated by separator + awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS( + text, + input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]) + ; + // Insert new selected tag in the input + awesome.replace = (text) => { + const before = awesome.input.value.match(new RegExp(`^.+${tagsSeparator}+|`))[0]; + awesome.input.value = `${before}${text}${tagsSeparator}`; + }; + // Highlight found items + awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]); + // Don't display already selected items + const reg = new RegExp(`/(\w+)${tagsSeparator}/g`); + let match; + awesome.data = (item, input) => { + while ((match = reg.exec(input))) { + if (item === match[1]) { + return ''; } } - - awesomplete.list = proposedTags; - }); + return item; + }; + awesome.minChars = 1; }); })(); -- cgit v1.2.3 From 8a1ce1da15fdbae99b24700b06f2008c7a657603 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Thu, 5 Nov 2020 19:08:38 +0100 Subject: ESLint --- assets/vintage/js/base.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'assets/vintage') diff --git a/assets/vintage/js/base.js b/assets/vintage/js/base.js index 15b664ce..55f1c37d 100644 --- a/assets/vintage/js/base.js +++ b/assets/vintage/js/base.js @@ -4,7 +4,7 @@ import 'awesomplete/awesomplete.css'; (() => { const autocompleteFields = document.querySelectorAll('input[data-multiple]'); const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]'); - const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || " " : " "; + const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' '; [...autocompleteFields].forEach((autocompleteField) => { const awesome = new Awesomplete(Awesomplete.$(autocompleteField)); @@ -12,8 +12,8 @@ import 'awesomplete/awesomplete.css'; // Tags are separated by separator awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS( text, - input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]) - ; + input.match(new RegExp(`[^${tagsSeparator}]*$`))[0], + ); // Insert new selected tag in the input awesome.replace = (text) => { const before = awesome.input.value.match(new RegExp(`^.+${tagsSeparator}+|`))[0]; @@ -21,8 +21,10 @@ import 'awesomplete/awesomplete.css'; }; // Highlight found items awesome.item = (text, input) => Awesomplete.ITEM(text, input.match(new RegExp(`[^${tagsSeparator}]*$`))[0]); + // Don't display already selected items - const reg = new RegExp(`/(\w+)${tagsSeparator}/g`); + // WARNING: pseudo classes does not seem to work with string litterals... + const reg = new RegExp(`([^${tagsSeparator}]+)${tagsSeparator}`, 'g'); let match; awesome.data = (item, input) => { while ((match = reg.exec(input))) { -- cgit v1.2.3 From 1e49a65a2a930390cf00114cc30d8516626331c2 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Mon, 9 Nov 2020 12:36:04 +0100 Subject: Vintage theme: support async metadata retrieval --- assets/vintage/css/shaarli.css | 51 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) (limited to 'assets/vintage') diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css index 1688dce0..5b02ab5b 100644 --- a/assets/vintage/css/shaarli.css +++ b/assets/vintage/css/shaarli.css @@ -1248,3 +1248,54 @@ ul.errors { width: 0%; height: 10px; } + +.loading-input { + position: relative; +} + +@keyframes around { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +.loading-input .icon-container { + position: absolute; + right: 60px; + top: calc(50% - 10px); +} + +.loading-input .loader { + position: relative; + height: 20px; + width: 20px; + display: inline-block; + animation: around 5.4s infinite; +} + +.loading-input .loader::after, +.loading-input .loader::before { + content: ""; + background: #eee; + position: absolute; + display: inline-block; + width: 100%; + height: 100%; + border-width: 2px; + border-color: #333 #333 transparent transparent; + border-style: solid; + border-radius: 20px; + box-sizing: border-box; + top: 0; + left: 0; + animation: around 0.7s ease-in-out infinite; +} + +.loading-input .loader::after { + animation: around 0.7s ease-in-out 0.1s infinite; + background: transparent; +} -- cgit v1.2.3 From 336f15e8baeaba0c1605985cdd7f05980cf80696 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Mon, 9 Nov 2020 12:46:24 +0100 Subject: Vintage theme: display global messages --- assets/vintage/css/shaarli.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'assets/vintage') diff --git a/assets/vintage/css/shaarli.css b/assets/vintage/css/shaarli.css index 5b02ab5b..33e178af 100644 --- a/assets/vintage/css/shaarli.css +++ b/assets/vintage/css/shaarli.css @@ -1122,6 +1122,16 @@ ul.errors { float: left; } +ul.warnings { + color: orange; + float: left; +} + +ul.successes { + color: green; + float: left; +} + #pluginsadmin { width: 80%; padding: 20px 0 0 20px; -- cgit v1.2.3