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/default/js/base.js | 2 +- assets/vintage/js/base.js | 45 +++++++++++++++++++++++++------------------- tpl/vintage/includes.html | 4 ++-- tpl/vintage/linklist.html | 2 +- tpl/vintage/page.footer.html | 6 ++++-- 5 files changed, 34 insertions(+), 25 deletions(-) diff --git a/assets/default/js/base.js b/assets/default/js/base.js index e7bf4909..37069d69 100644 --- a/assets/default/js/base.js +++ b/assets/default/js/base.js @@ -217,7 +217,7 @@ function init(description) { (() => { const basePath = document.querySelector('input[name="js_base_path"]').value; const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]'); - const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || '\s' : '\s'; + const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' '; /** * Handle responsive menu. 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; }); })(); diff --git a/tpl/vintage/includes.html b/tpl/vintage/includes.html index eac05701..2ce9da42 100644 --- a/tpl/vintage/includes.html +++ b/tpl/vintage/includes.html @@ -5,13 +5,13 @@ - + {if="$formatter==='markdown'"} {/if} {loop="$plugins_includes.css_files"} - + {/loop} {if="is_file('data/user.css')"}{/if} {$search_term} {/if} {if="!empty($search_tags)"} - {$exploded_tags=explode(' ', $search_tags)} + {$exploded_tags=tags_str2array($search_tags, $tags_separator)} tagged {loop="$exploded_tags"} diff --git a/tpl/vintage/page.footer.html b/tpl/vintage/page.footer.html index 0fe4c736..be709aeb 100644 --- a/tpl/vintage/page.footer.html +++ b/tpl/vintage/page.footer.html @@ -23,8 +23,6 @@ {/if} - - {if="$is_logged_in"} {/if} @@ -34,3 +32,7 @@ {/loop} + + + + -- cgit v1.2.3