]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - assets/vintage/js/base.js
1 import Awesomplete
from 'awesomplete';
2 import 'awesomplete/awesomplete.css';
5 const autocompleteFields
= document
.querySelectorAll('input[data-multiple]');
6 const tagsSeparatorElement
= document
.querySelector('input[name="tags_separator"]');
7 const tagsSeparator
= tagsSeparatorElement
? tagsSeparatorElement
.value
|| ' ' : ' ';
9 [...autocompleteFields
].forEach((autocompleteField
) => {
10 const awesome
= new Awesomplete(Awesomplete
.$(autocompleteField
));
12 // Tags are separated by separator
13 awesome
.filter
= (text
, input
) => Awesomplete
.FILTER_CONTAINS(
15 input
.match(new RegExp(`[^${tagsSeparator}]*$`))[0],
17 // Insert new selected tag in the input
18 awesome
.replace
= (text
) => {
19 const before
= awesome
.input
.value
.match(new RegExp(`^.+${tagsSeparator}+|`))[0];
20 awesome
.input
.value
= `${before}${text}${tagsSeparator}`;
22 // Highlight found items
23 awesome
.item
= (text
, input
) => Awesomplete
.ITEM(text
, input
.match(new RegExp(`[^${tagsSeparator}]*$`))[0]);
25 // Don't display already selected items
26 // WARNING: pseudo classes does not seem to work with string litterals...
27 const reg
= new RegExp(`([^${tagsSeparator}]+)${tagsSeparator}`, 'g');
29 awesome
.data
= (item
, input
) => {
30 while ((match
= reg
.exec(input
))) {
31 if (item
=== match
[1]) {