tpl/editlink.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>{include="includes"}
   4     <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
   5     <script src="inc/awesomplete.min.js#"></script>
   6 </head>
   7 <body
   8 {if="$link.title==''"}onload="document.linkform.lf_title.focus();"
   9 {elseif="$link.description==''"}onload="document.linkform.lf_description.focus();"
  10 {else}onload="document.linkform.lf_tags.focus();"{/if} >
  11 <div id="pageheader">
  12         {if="$source !== 'firefoxsocialapi'"}
  13         {include="page.header"}
  14         {/if}
  15         <div id="editlinkform">
  16             <form method="post" name="linkform">
  17                 <input type="hidden" name="lf_linkdate" value="{$link.linkdate}">
  18                 <label for="lf_url"><i>URL</i></label><br><input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input"><br>
  19             <label for="lf_title"><i>Title</i></label><br><input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input"><br>
  20             <label for="lf_description"><i>Description</i></label><br><textarea name="lf_description" id="lf_description" rows="4" cols="25">{$link.description}</textarea><br>
  21             <label for="lf_tags"><i>Tags</i></label><br>
  22             <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
  23                 data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" ><br>
  24
  25             {loop="$edit_link_plugin"}
  26                 {$value}
  27             {/loop}
  28
  29                 {if="($link_is_new && $GLOBALS['privateLinkByDefault']==true) || $link.private == true"}
  30             <input type="checkbox" checked="checked" name="lf_private" id="lf_private">
  31             &nbsp;<label for="lf_private"><i>Private</i></label><br>
  32             {else}
  33             <input type="checkbox"  name="lf_private" id="lf_private">
  34             &nbsp;<label for="lf_private"><i>Private</i></label><br>
  35             {/if}
  36                 <input type="submit" value="Save" name="save_edit" class="bigbutton">
  37                 <input type="submit" value="Cancel" name="cancel_edit" class="bigbutton">
  38                 {if="!$link_is_new"}<input type="submit" value="Delete" name="delete_link" class="bigbutton delete" onClick="return confirmDeleteLink();">{/if}
  39                 <input type="hidden" name="token" value="{$token}">
  40                 {if="$http_referer"}<input type="hidden" name="returnurl" value="{$http_referer}">{/if}
  41             </form>
  42         </div>
  43 </div>
  44 {if="$source !== 'firefoxsocialapi'"}
  45 {include="page.footer"}
  46 {/if}
  47 {if="($GLOBALS['config']['OPEN_SHAARLI'] || isLoggedIn())"}
  48 <script>
  49     $ = Awesomplete.$;
  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>
  83 {/if}
  84 </body>
  85 </html>