* 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.
--- /dev/null
+$ = 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;
+ });
+}
<html>
<head>{include="includes"}
<link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
- <script src="inc/awesomplete.min.js#"></script>
</head>
<body
{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
{include="page.footer"}
{/if}
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
+<script src="inc/awesomplete.min.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
<script>
- $ = 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
- */
- 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;
- });
+ awesompleteUniqueTag('#lf_tags');
</script>
{/if}
</body>
{include="page.header"}
<div id="headerform" class="search">
<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">
- <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value="" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1">
- <datalist id="tagsList">
- {loop="$tags"}<option>{$key}</option>{/loop}
- </datalist>
+ <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" value=""
+ autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+ data-list="{loop="$tags"}{$key}, {/loop}">
<input type="submit" value="Search" class="bigbutton">
</form>
{loop="$plugins_header.fields_toolbar"}
{if="$search_type=='tags'"}
<div id="searchcriteria">{$result_count} results for tags <i>
{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>
{/if}
{/if}
<div class="linkcontainer">
{if="isLoggedIn()"}
<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="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>
+ <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="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>
{/if}
<span class="linktitle"><a href="{$redirector}{$value.url}">{$value.title}</a></span>
{include="page.footer"}
<script src="inc/awesomplete.min.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
+<script>
+ awesompleteUniqueTag('#tagfilter_value');
+</script>
</body>
</html>
projects / github / shaarli / Shaarli.git / commitdiff
