diff options
| author | ArthurHoaro <arthur@hoa.ro> | 2015-11-13 20:24:12 +0100 |
|---|---|---|
| committer | ArthurHoaro <arthur@hoa.ro> | 2015-11-17 20:03:21 +0100 |
| commit | b39b1bc2eeebcb52f37f33f63fa645db014130c3 (patch) | |
| tree | 3a507ab718cb261f8ec2f4e27bded606a6e6b2e3 /tpl/editlink.html | |
| parent | 44d60adc5e2fa547bc49620f7e647794f0cad631 (diff) | |
| download | Shaarli-b39b1bc2eeebcb52f37f33f63fa645db014130c3.tar.gz Shaarli-b39b1bc2eeebcb52f37f33f63fa645db014130c3.tar.zst Shaarli-b39b1bc2eeebcb52f37f33f63fa645db014130c3.zip | |
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.
Diffstat (limited to 'tpl/editlink.html')
| -rw-r--r-- | tpl/editlink.html | 37 |
1 files changed, 3 insertions, 34 deletions
diff --git a/tpl/editlink.html b/tpl/editlink.html index 889d913d..14a2e6c8 100644 --- a/tpl/editlink.html +++ b/tpl/editlink.html | |||
| @@ -2,7 +2,6 @@ | |||
| 2 | <html> | 2 | <html> |
| 3 | <head>{include="includes"} | 3 | <head>{include="includes"} |
| 4 | <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" /> | 4 | <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" /> |
| 5 | <script src="inc/awesomplete.min.js#"></script> | ||
| 6 | </head> | 5 | </head> |
| 7 | <body | 6 | <body |
| 8 | {if="$link.title==''"}onload="document.linkform.lf_title.focus();" | 7 | {if="$link.title==''"}onload="document.linkform.lf_title.focus();" |
| @@ -45,40 +44,10 @@ | |||
| 45 | {include="page.footer"} | 44 | {include="page.footer"} |
| 46 | {/if} | 45 | {/if} |
| 47 | {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"} | 46 | {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"} |
| 47 | <script src="inc/awesomplete.min.js#"></script> | ||
| 48 | <script src="inc/awesomplete-multiple-tags.js#"></script> | ||
| 48 | <script> | 49 | <script> |
| 49 | $ = Awesomplete.$; | 50 | awesompleteUniqueTag('#lf_tags'); |
| 50 | awesomplete = new Awesomplete($('input[data-multiple]'), { | ||
| 51 | filter: function(text, input) { | ||
| 52 | return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]); | ||
| 53 | }, | ||
| 54 | replace: function(text) { | ||
| 55 | var before = this.input.value.match(/^.+ \s*|/)[0]; | ||
| 56 | this.input.value = before + text + " "; | ||
| 57 | }, | ||
| 58 | minChars: 1 | ||
| 59 | }); | ||
| 60 | |||
| 61 | /** | ||
| 62 | * Remove already selected items from autocompletion list. | ||
| 63 | * HTML list is never updated, so removing a tag will add it back to awesomplete. | ||
| 64 | * | ||
| 65 | * FIXME: This a workaround waiting for awesomplete to handle this. | ||
| 66 | * https://github.com/LeaVerou/awesomplete/issues/16749 | ||
| 67 | */ | ||
| 68 | var input = document.querySelector('#lf_tags'); | ||
| 69 | input.addEventListener('input', function() | ||
| 70 | { | ||
| 71 | proposedTags = input.getAttribute('data-list').replace(/,/g, '').split(' '); | ||
| 72 | reg = /(\w+) /g; | ||
| 73 | while((match = reg.exec(input.value)) !== null) { | ||
| 74 | id = proposedTags.indexOf(match[1]); | ||
| 75 | if(id != -1 ) { | ||
| 76 | proposedTags.splice(id, 1); | ||
| 77 | } | ||
| 78 | } | ||
| 79 | |||
| 80 | awesomplete.list = proposedTags; | ||
| 81 | }); | ||
| 82 | </script> | 51 | </script> |
| 83 | {/if} | 52 | {/if} |
| 84 | </body> | 53 | </body> |