Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Use awesomplete as autocomplete lib and remove jQuery -

Browse source 
* 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
This commit is contained in:
ArthurHoaro 2015-03-06 21:29:56 +01:00
parent 3a10fa0e3f
commit bdd1715b24
13 changed files with 562 additions and 27028 deletions

35
tpl/changetag.html
View file

@ -1,27 +1,34 @@
<!DOCTYPE html>
<html>
<head>{include="includes"}
{if="empty($GLOBALS['disablejquery'])"}<script src="inc/jquery.min.js#"></script><script src="inc/jquery-ui.min.js#"></script>{/if}
<link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
<script src="inc/awesomplete.min.js#"></script>
</head>
<body onload="document.changetag.fromtag.focus();">
<div id="pageheader">
{include="page.header"}
<form method="POST" action="" name="changetag" id="changetag">
<input type="hidden" name="token" value="{$token}">
Tag: <input type="text" name="fromtag" id="fromtag">
<input type="text" name="totag" id="totag">
<input type="submit" name="renametag" value="Rename tag" class="bigbutton">
&nbsp;&nbsp;or&nbsp; <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();"><br>(Case sensitive)</form>
<input type="hidden" name="token" value="{$token}">
<div>
<label for="fromtag">Tag:</label>
</div>
<div>
<input type="text" name="fromtag" id="fromtag" list="tagsList" autocomplete="off" class="awesomplete" data-minChars="1" />
<datalist id="tagsList">
{loop="$tags"}<option>{$key}</option>{/loop}
</datalist>
</div>
<div>
<input type="text" name="totag" id="totag">
<input type="submit" name="renametag" value="Rename tag" class="bigbutton">
&nbsp;&nbsp;or&nbsp; <input type="submit" name="deletetag" value="Delete tag" class="bigbutton" onClick="return confirmDeleteTag();">
</div>
</form>
<div class="clear white">(Case sensitive)</div>
</div>
<script>function confirmDeleteTag() { var agree=confirm("Are you sure you want to delete this tag from all links ?"); if (agree) return true ; else return false ; }</script>
</div>
{include="page.footer"}
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
<script>
$(document).ready(function()
{
$('#fromtag').autocomplete({source:'{$source}?ws=singletag',minLength:1});
});
</script>
{/if}
</body>
</html>

3
tpl/configure.html
View file

@ -18,9 +18,6 @@
<tr><td><b>Security:</b></td><td><input type="checkbox" name="disablesessionprotection" id="disablesessionprotection" {if="!empty($GLOBALS['disablesessionprotection'])"}checked{/if}><label for="disablesessionprotection">&nbsp;Disable session cookie hijacking protection (Check this if you get disconnected often or if your IP address changes often.)</label></td></tr>
<tr><td><b>Features:</b></td><td>
<input type="checkbox" name="disablejquery" id="disablejquery" {if="!empty($GLOBALS['disablejquery'])"}checked{/if}><label for="disablejquery">&nbsp;Disable jQuery and all heavy JavaScript (for example: Autocomplete in tags. Useful for slow computers.)</label>
</td></tr>
<tr><td valign="top"><b>New link:</b></td><td>
<input type="checkbox" name="privateLinkByDefault" id="privateLinkByDefault" {if="!empty($GLOBALS['privateLinkByDefault'])"}checked{/if}/><label for="privateLinkByDefault">&nbsp;All new links are private by default</label></td>
</tr>

30
tpl/editlink.html
View file

@ -1,7 +1,8 @@
<!DOCTYPE html>
<html>
<head>{include="includes"}
{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}
<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();"
@ -12,10 +13,12 @@
<div id="editlinkform">
<form method="post" name="linkform">
<input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
<i>URL</i><br><input type="text" name="lf_url" value="{$link.url|htmlspecialchars}" class="lf_input"><br>
<i>Title</i><br><input type="text" name="lf_title" value="{$link.title|htmlspecialchars}" class="lf_input"><br>
<i>Description</i><br><textarea name="lf_description" rows="4" cols="25">{$link.description|htmlspecialchars}</textarea><br>
<i>Tags</i><br><input type="text" id="lf_tags" name="lf_tags" value="{$link.tags|htmlspecialchars}" class="lf_input"><br>
<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>
<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>
<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>
<label for="lf_tags"><i>Tags</i></label><br>
<input type="text" id="lf_tags" name="lf_tags" id="lf_tags" value="{$link.tags|htmlspecialchars}" class="lf_input"
data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
{if="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
<input type="checkbox" checked="checked" name="lf_private" id="lf_private">
&nbsp;<label for="lf_private"><i>Private</i></label><br>
@ -32,12 +35,19 @@
</div>
</div>
{include="page.footer"}
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn()) && empty($GLOBALS['disablejquery'])"}
{if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
<script>
$(document).ready(function()
{
$('#lf_tags').autocomplete({source:'{$source}?ws=tags',minLength:1});
});
$ = 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
});
</script>
{/if}
</body>