Tags separator: vintage theme compatibility

This commit is contained in:
ArthurHoaro 2020-11-05 18:16:52 +01:00
parent 67339338af
commit df9aac5b64
5 changed files with 35 additions and 26 deletions

View file

@ -217,7 +217,7 @@ function init(description) {
(() => { (() => {
const basePath = document.querySelector('input[name="js_base_path"]').value; const basePath = document.querySelector('input[name="js_base_path"]').value;
const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]'); const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]');
const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || '\s' : '\s'; const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || ' ' : ' ';
/** /**
* Handle responsive menu. * Handle responsive menu.

View file

@ -2,29 +2,36 @@ import Awesomplete from 'awesomplete';
import 'awesomplete/awesomplete.css'; import 'awesomplete/awesomplete.css';
(() => { (() => {
const awp = Awesomplete.$;
const autocompleteFields = document.querySelectorAll('input[data-multiple]'); const autocompleteFields = document.querySelectorAll('input[data-multiple]');
[...autocompleteFields].forEach((autocompleteField) => { const tagsSeparatorElement = document.querySelector('input[name="tags_separator"]');
const awesomplete = new Awesomplete(awp(autocompleteField)); const tagsSeparator = tagsSeparatorElement ? tagsSeparatorElement.value || " " : " ";
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;
autocompleteField.addEventListener('input', () => { [...autocompleteFields].forEach((autocompleteField) => {
const proposedTags = autocompleteField.getAttribute('data-list').replace(/,/g, '').split(' '); const awesome = new Awesomplete(Awesomplete.$(autocompleteField));
const reg = /(\w+) /g;
let match; // Tags are separated by separator
while ((match = reg.exec(autocompleteField.value)) !== null) { awesome.filter = (text, input) => Awesomplete.FILTER_CONTAINS(
const id = proposedTags.indexOf(match[1]); text,
if (id !== -1) { input.match(new RegExp(`[^${tagsSeparator}]*$`))[0])
proposedTags.splice(id, 1); ;
// 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 '';
} }
} }
return item;
awesomplete.list = proposedTags; };
}); awesome.minChars = 1;
}); });
})(); })();

View file

@ -5,13 +5,13 @@
<meta name="referrer" content="same-origin"> <meta name="referrer" content="same-origin">
<link rel="alternate" type="application/rss+xml" href="{$feedurl}feed/rss?{$searchcrits}#" title="RSS Feed" /> <link rel="alternate" type="application/rss+xml" href="{$feedurl}feed/rss?{$searchcrits}#" title="RSS Feed" />
<link rel="alternate" type="application/atom+xml" href="{$feedurl}feed/atom?{$searchcrits}#" title="ATOM Feed" /> <link rel="alternate" type="application/atom+xml" href="{$feedurl}feed/atom?{$searchcrits}#" title="ATOM Feed" />
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <link href="{$asset_path}/img/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="{$asset_path}/css/shaarli.min.css#" /> <link type="text/css" rel="stylesheet" href="{$asset_path}/css/shaarli.min.css#" />
{if="$formatter==='markdown'"} {if="$formatter==='markdown'"}
<link type="text/css" rel="stylesheet" href="{$asset_path}/css/markdown.min.css?v={$version_hash}#" /> <link type="text/css" rel="stylesheet" href="{$asset_path}/css/markdown.min.css?v={$version_hash}#" />
{/if} {/if}
{loop="$plugins_includes.css_files"} {loop="$plugins_includes.css_files"}
<link type="text/css" rel="stylesheet" href="{$base_path}/{$value}#"/> <link type="text/css" rel="stylesheet" href="{$root_path}/{$value}#"/>
{/loop} {/loop}
{if="is_file('data/user.css')"}<link type="text/css" rel="stylesheet" href="{$base_path}/data/user.css#" />{/if} {if="is_file('data/user.css')"}<link type="text/css" rel="stylesheet" href="{$base_path}/data/user.css#" />{/if}
<link rel="search" type="application/opensearchdescription+xml" href="{$base_path}/open-search#" <link rel="search" type="application/opensearchdescription+xml" href="{$base_path}/open-search#"

View file

@ -61,7 +61,7 @@
for <em>{$search_term}</em> for <em>{$search_term}</em>
{/if} {/if}
{if="!empty($search_tags)"} {if="!empty($search_tags)"}
{$exploded_tags=explode(' ', $search_tags)} {$exploded_tags=tags_str2array($search_tags, $tags_separator)}
tagged tagged
{loop="$exploded_tags"} {loop="$exploded_tags"}
<span class="linktag" title="Remove tag"> <span class="linktag" title="Remove tag">

View file

@ -23,8 +23,6 @@
</div> </div>
{/if} {/if}
<script src="{$asset_path}/js/shaarli.min.js#"></script>
{if="$is_logged_in"} {if="$is_logged_in"}
<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script> <script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
{/if} {/if}
@ -34,3 +32,7 @@
{/loop} {/loop}
<input type="hidden" name="js_base_path" value="{$base_path}" /> <input type="hidden" name="js_base_path" value="{$base_path}" />
<input type="hidden" name="token" value="{$token}" id="token" />
<input type="hidden" name="tags_separator" value="{$tags_separator}" id="tags_separator" />
<script src="{$asset_path}/js/shaarli.min.js#"></script>