aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/editlink.html
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2015-03-06 21:29:56 +0100
committerArthurHoaro <arthur@hoa.ro>2015-03-12 20:27:16 +0100
commitbdd1715b249561ed919e4f03a06aec1f4c327335 (patch)
treeeb21225e95b1fd849a8404c7bfe9bff6f970a8cb /tpl/editlink.html
parent3a10fa0e3f0d0978dc359d1407b93fe425f44b25 (diff)
downloadShaarli-bdd1715b249561ed919e4f03a06aec1f4c327335.tar.gz
Shaarli-bdd1715b249561ed919e4f03a06aec1f4c327335.tar.zst
Shaarli-bdd1715b249561ed919e4f03a06aec1f4c327335.zip
Use awesomplete as autocomplete lib and remove jQuery - shaarli/Shaarli#148
* Add awesomplete dependancy (source + min + CSS) * Remove jQuery and jQuery-UI dependancy * Few CSS ajustements * Use tags complete list as RainTPL var (and display it as HTML) * Remove "disable jQuery" feature * Remove tag list web service
Diffstat (limited to 'tpl/editlink.html')
-rw-r--r--tpl/editlink.html30
1 files changed, 20 insertions, 10 deletions
diff --git a/tpl/editlink.html b/tpl/editlink.html
index ecab443d..b737b990 100644
--- a/tpl/editlink.html
+++ b/tpl/editlink.html
@@ -1,7 +1,8 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3<head>{include="includes"} 3<head>{include="includes"}
4{if="empty($GLOBALS['disablejquery'])"}<script src="inc/jquery-1.11.2.min.js#"></script><script src="inc/jquery-ui-1.11.2.min.js#"></script>{/if} 4 <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
5 <script src="inc/awesomplete.min.js#"></script>
5</head> 6</head>
6<body 7<body
7{if="$link.title==''"}onload="document.linkform.lf_title.focus();" 8{if="$link.title==''"}onload="document.linkform.lf_title.focus();"
@@ -12,10 +13,12 @@
12 <div id="editlinkform"> 13 <div id="editlinkform">
13 <form method="post" name="linkform"> 14 <form method="post" name="linkform">
14 <input type="hidden" name="lf_linkdate" value="{$link.linkdate}"> 15 <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
15 <i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" class="lf_input"><br> 16 <label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url|htmlspecialchars}" class="lf_input"><br>
16 <i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" class="lf_input"><br> 17 <label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title|htmlspecialchars}" class="lf_input"><br>
17 <i>Description</i><br><textarea name="lf_description" rows="4" cols="25">{$link.description|htmlspecialchars}</textarea><br> 18 <label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description|htmlspecialchars}</textarea><br>
18 <i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" class="lf_input"><br> 19 <label for="lf_tags"><i>Tags</i></label><br>
20 <input type="text" id="lf_tags" name="lf_tags" id="lf_tags" value="{$link.tags|htmlspecialchars}" class="lf_input"
21 data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
19 {if="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"} 22 {if="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
20 <input type="checkbox" checked="checked" name="lf_private" id="lf_private"> 23 <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
21 &nbsp;<label for="lf_private"><i>Private</i></label><br> 24 &nbsp;<label for="lf_private"><i>Private</i></label><br>
@@ -32,12 +35,19 @@
32 </div> 35 </div>
33</div> 36</div>
34{include="page.footer"} 37{include="page.footer"}
35{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"} 38{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
36<script> 39<script>
37$(document).ready(function() 40 $ = Awesomplete.$;
38{ 41 new Awesomplete($('input[data-multiple]'), {
39 $('#lf_tags').autocomplete({source:'{$source}?ws=tags',minLength:1}); 42 filter: function(text, input) {
40}); 43 return Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
44 },
45 replace: function(text) {
46 var before = this.input.value.match(/^.+ \s*|/)[0];
47 this.input.value = before + text + " ";
48 },
49 minChars: 1
50 });
41</script> 51</script>
42{/if} 52{/if}
43</body> 53</body>