Fixes #360 - Auto-complete more than one tag in tag filter field
* Group awesomplete for multi data in a single JS file. * Use it in editlink and linklist. * Move awesomplete JS lib at the end of page in editlink.
This commit is contained in:
ArthurHoaro
parent
44d60adc5e
commit
b39b1bc2ee
3 changed files with 62 additions and 43 deletions
35
inc/awesomplete-multiple-tags.js
Normal file
35
inc/awesomplete-multiple-tags.js
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
$ = Awesomplete.$;
|
||||||
|
awesomplete = new Awesomplete($('input[data-multiple]'), {
|
||||||
|
filter: function(text, input) {
|
||||||
|
return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
|
||||||
|
},
|
||||||
|
replace: function(text) {
|
||||||
|
var before = this.input.value.match(/^.+ \s*|/)[0];
|
||||||
|
this.input.value = before + text + " ";
|
||||||
|
},
|
||||||
|
minChars: 1
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove already selected items from autocompletion list.
|
||||||
|
* HTML list is never updated, so removing a tag will add it back to awesomplete.
|
||||||
|
*
|
||||||
|
* FIXME: This a workaround waiting for awesomplete to handle this.
|
||||||
|
* https://github.com/LeaVerou/awesomplete/issues/16749
|
||||||
|
*/
|
||||||
|
function awesompleteUniqueTag(selector) {
|
||||||
|
var input = document.querySelector(selector);
|
||||||
|
input.addEventListener('input', function()
|
||||||
|
{
|
||||||
|
proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' ');
|
||||||
|
reg = /(\w+) /g;
|
||||||
|
while((match = reg.exec(input.value)) !== null) {
|
||||||
|
id = proposedTags.indexOf(match[1]);
|
||||||
|
if(id != -1 ) {
|
||||||
|
proposedTags.splice(id, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
awesomplete.list = proposedTags;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>{include="includes"}
|
<head>{include="includes"}
|
||||||
<link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
|
<link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
|
||||||
<script src="inc/awesomplete.min.js#"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
|
{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
|
||||||
|
|
@ -45,40 +44,10 @@
|
||||||
{include="page.footer"}
|
{include="page.footer"}
|
||||||
{/if}
|
{/if}
|
||||||
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
|
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
|
||||||
|
<script src="inc/awesomplete.min.js#"></script>
|
||||||
|
<script src="inc/awesomplete-multiple-tags.js#"></script>
|
||||||
<script>
|
<script>
|
||||||
$ = Awesomplete.$;
|
awesompleteUniqueTag('#lf_tags');
|
||||||
awesomplete = new Awesomplete($('input[data-multiple]'), {
|
|
||||||
filter: function(text, input) {
|
|
||||||
return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
|
|
||||||
},
|
|
||||||
replace: function(text) {
|
|
||||||
var before = this.input.value.match(/^.+ \s*|/)[0];
|
|
||||||
this.input.value = before + text + " ";
|
|
||||||
},
|
|
||||||
minChars: 1
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove already selected items from autocompletion list.
|
|
||||||
* HTML list is never updated, so removing a tag will add it back to awesomplete.
|
|
||||||
*
|
|
||||||
* FIXME: This a workaround waiting for awesomplete to handle this.
|
|
||||||
* https://github.com/LeaVerou/awesomplete/issues/16749
|
|
||||||
*/
|
|
||||||
var input = document.querySelector('#lf_tags');
|
|
||||||
input.addEventListener('input', function()
|
|
||||||
{
|
|
||||||
proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' ');
|
|
||||||
reg = /(\w+) /g;
|
|
||||||
while((match = reg.exec(input.value)) !== null) {
|
|
||||||
id = proposedTags.indexOf(match[1]);
|
|
||||||
if(id != -1 ) {
|
|
||||||
proposedTags.splice(id, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
awesomplete.list = proposedTags;
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
{/if}
|
{/if}
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,13 @@
|
||||||
{include="page.header"}
|
{include="page.header"}
|
||||||
<div id="headerform" class="search">
|
<div id="headerform" class="search">
|
||||||
<form method="GET" class="searchform" name="searchform">
|
<form method="GET" class="searchform" name="searchform">
|
||||||
<input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" value=""> <input type="submit" value="Search" class="bigbutton"></form>
|
<input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" value="">
|
||||||
|
<input type="submit" value="Search" class="bigbutton">
|
||||||
|
</form>
|
||||||
<form method="GET" class="tagfilter" name="tagfilter">
|
<form method="GET" class="tagfilter" name="tagfilter">
|
||||||
<input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value="" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1">
|
<input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value=""
|
||||||
<datalist id="tagsList">
|
autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
|
||||||
{loop="$tags"}<option>{$key}</option>{/loop}
|
data-list="{loop="$tags"}{$key}, {/loop}">
|
||||||
</datalist>
|
|
||||||
<input type="submit" value="Search" class="bigbutton">
|
<input type="submit" value="Search" class="bigbutton">
|
||||||
</form>
|
</form>
|
||||||
{loop="$plugins_header.fields_toolbar"}
|
{loop="$plugins_header.fields_toolbar"}
|
||||||
|
|
@ -42,7 +43,9 @@
|
||||||
{if="$search_type=='tags'"}
|
{if="$search_type=='tags'"}
|
||||||
<div id="searchcriteria">{$result_count} results for tags <i>
|
<div id="searchcriteria">{$result_count} results for tags <i>
|
||||||
{loop="search_crits"}
|
{loop="search_crits"}
|
||||||
<span class="linktag" title="Remove tag"><a href="?removetag={$value}">{$value} <span class="remove">x</span></a></span>
|
<span class="linktag" title="Remove tag">
|
||||||
|
<a href="?removetag={$value}">{$value} <span class="remove">x</span></a>
|
||||||
|
</span>
|
||||||
{/loop}</i></div>
|
{/loop}</i></div>
|
||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
@ -54,9 +57,17 @@
|
||||||
<div class="linkcontainer">
|
<div class="linkcontainer">
|
||||||
{if="isLoggedIn()"}
|
{if="isLoggedIn()"}
|
||||||
<div class="linkeditbuttons">
|
<div class="linkeditbuttons">
|
||||||
<form method="GET" class="buttoneditform"><input type="hidden" name="edit_link" value="{$value.linkdate}"><input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"></form><br>
|
<form method="GET" class="buttoneditform">
|
||||||
<form method="POST" class="buttoneditform"><input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
|
<input type="hidden" name="edit_link" value="{$value.linkdate}">
|
||||||
<input type="hidden" name="token" value="{$token}"><input type="hidden" name="delete_link"><input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" class="button_delete" onClick="return confirmDeleteLink();"></form>
|
<input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit">
|
||||||
|
</form><br>
|
||||||
|
<form method="POST" class="buttoneditform">
|
||||||
|
<input type="hidden" name="lf_linkdate" value="{$value.linkdate}">
|
||||||
|
<input type="hidden" name="token" value="{$token}">
|
||||||
|
<input type="hidden" name="delete_link">
|
||||||
|
<input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete"
|
||||||
|
class="button_delete" onClick="return confirmDeleteLink();">
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title}</a></span>
|
<span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title}</a></span>
|
||||||
|
|
@ -98,5 +109,9 @@
|
||||||
{include="page.footer"}
|
{include="page.footer"}
|
||||||
|
|
||||||
<script src="inc/awesomplete.min.js#"></script>
|
<script src="inc/awesomplete.min.js#"></script>
|
||||||
|
<script src="inc/awesomplete-multiple-tags.js#"></script>
|
||||||
|
<script>
|
||||||
|
awesompleteUniqueTag('#tagfilter_value');
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue