Remove inline JS and add LibreJS headers in JS files

Fixes #33 (wow!)
Relates to #395

14 files changed, 286 insertions, 110 deletions

diff --git a/COPYING b/COPYING
index 4bbdf2b3..05202152 100644
--- a/COPYING
+++ b/COPYING
@@ -46,6 +46,10 @@ Files: plugins/wallabag/wallabag.png
 License: MIT License (http://opensource.org/licenses/MIT)
 Copyright: (C) 2015 Nicolas Lœuillet - https://github.com/wallabag/wallabag
 
+Files: tpl/default/sad_star.png
+License: MIT License (http://opensource.org/licenses/MIT)
+Copyright: (C) 2015 kalvn - https://github.com/kalvn/Shaarli-Material
+
 ----------------------------------------------------
 ZLIB/LIBPNG LICENSE
 
diff --git a/inc/awesomplete-multiple-tags.js b/inc/awesomplete-multiple-tags.js
index faecb417..c38dc38e 100644
--- a/inc/awesomplete-multiple-tags.js
+++ b/inc/awesomplete-multiple-tags.js
@@ -1,3 +1,31 @@
+/** @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ *   Copyright: (c) 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
+ *              (c) 2011-2017 The Shaarli Community, see AUTHORS
+ *
+ *   This software is provided 'as-is', without any express or implied warranty.
+ *   In no event will the authors be held liable for any damages arising from
+ *   the use of this software.
+ *
+ *   Permission is granted to anyone to use this software for any purpose,
+ *   including commercial applications, and to alter it and redistribute it
+ *   freely, subject to the following restrictions:
+ *
+ *   1. The origin of this software must not be misrepresented; you must not
+ *   claim that you wrote the original software. If you use this software
+ *   in a product, an acknowledgment in the product documentation would
+ *   be appreciated but is not required.
+ *
+ *   2. Altered source versions must be plainly marked as such, and must
+ *   not be misrepresented as being the original software.
+ *
+ *   3. This notice may not be removed or altered from any source distribution.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
 var awp = Awesomplete.$;
 var autocompleteFields = document.querySelectorAll('input[data-multiple]');
 [].forEach.call(autocompleteFields, function(autocompleteField) {
diff --git a/inc/plugin_admin.js b/inc/plugin_admin.js
index 055ac285..4b55e0f3 100644
--- a/inc/plugin_admin.js
+++ b/inc/plugin_admin.js
@@ -1,3 +1,31 @@
+/** @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ *   Copyright: (c) 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
+ *              (c) 2011-2017 The Shaarli Community, see AUTHORS
+ *
+ *   This software is provided 'as-is', without any express or implied warranty.
+ *   In no event will the authors be held liable for any damages arising from
+ *   the use of this software.
+ *
+ *   Permission is granted to anyone to use this software for any purpose,
+ *   including commercial applications, and to alter it and redistribute it
+ *   freely, subject to the following restrictions:
+ *
+ *   1. The origin of this software must not be misrepresented; you must not
+ *   claim that you wrote the original software. If you use this software
+ *   in a product, an acknowledgment in the product documentation would
+ *   be appreciated but is not required.
+ *
+ *   2. Altered source versions must be plainly marked as such, and must
+ *   not be misrepresented as being the original software.
+ *
+ *   3. This notice may not be removed or altered from any source distribution.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
 /**
  * Change the position counter of a row.
  *
diff --git a/plugins/piwik/piwik.html b/plugins/piwik/piwik.html
index 0881d7c8..f4bc358a 100644
--- a/plugins/piwik/piwik.html
+++ b/plugins/piwik/piwik.html
@@ -1,5 +1,33 @@
 <!-- Piwik -->
 <script type="text/javascript">
+  /** @licstart  The following is the entire license notice for the
+   *  JavaScript code in this page.
+   *
+   *   Copyright: (c) 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
+   *              (c) 2011-2017 The Shaarli Community, see AUTHORS
+   *
+   *   This software is provided 'as-is', without any express or implied warranty.
+   *   In no event will the authors be held liable for any damages arising from
+   *   the use of this software.
+   *
+   *   Permission is granted to anyone to use this software for any purpose,
+   *   including commercial applications, and to alter it and redistribute it
+   *   freely, subject to the following restrictions:
+   *
+   *   1. The origin of this software must not be misrepresented; you must not
+   *   claim that you wrote the original software. If you use this software
+   *   in a product, an acknowledgment in the product documentation would
+   *   be appreciated but is not required.
+   *
+   *   2. Altered source versions must be plainly marked as such, and must
+   *   not be misrepresented as being the original software.
+   *
+   *   3. This notice may not be removed or altered from any source distribution.
+   *
+   *  @licend  The above is the entire license notice
+   *  for the JavaScript code in this page.
+   */
+
   var _paq = _paq || [];
   _paq.push(['trackPageView']);
   _paq.push(['enableLinkTracking']);
diff --git a/plugins/playvideos/youtube_playlist.js b/plugins/playvideos/youtube_playlist.js
index be8d63af..3b608a5d 100644
--- a/plugins/playvideos/youtube_playlist.js
+++ b/plugins/playvideos/youtube_playlist.js
@@ -1,3 +1,31 @@
+/** @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ *   Copyright: (c) 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
+ *              (c) 2011-2017 The Shaarli Community, see AUTHORS
+ *
+ *   This software is provided 'as-is', without any express or implied warranty.
+ *   In no event will the authors be held liable for any damages arising from
+ *   the use of this software.
+ *
+ *   Permission is granted to anyone to use this software for any purpose,
+ *   including commercial applications, and to alter it and redistribute it
+ *   freely, subject to the following restrictions:
+ *
+ *   1. The origin of this software must not be misrepresented; you must not
+ *   claim that you wrote the original software. If you use this software
+ *   in a product, an acknowledgment in the product documentation would
+ *   be appreciated but is not required.
+ *
+ *   2. Altered source versions must be plainly marked as such, and must
+ *   not be misrepresented as being the original software.
+ *
+ *   3. This notice may not be removed or altered from any source distribution.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
 var run_playideos = (function () {
     var e, n, t, o, r, i = [].indexOf || function (e) {
             for (var n = 0, t = this.length; n < t; n++) {
diff --git a/plugins/qrcode/shaarli-qrcode.js b/plugins/qrcode/shaarli-qrcode.js
index 615f54c7..fe77c4cd 100644
--- a/plugins/qrcode/shaarli-qrcode.js
+++ b/plugins/qrcode/shaarli-qrcode.js
@@ -1,3 +1,31 @@
+/** @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ *   Copyright: (c) 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
+ *              (c) 2011-2017 The Shaarli Community, see AUTHORS
+ *
+ *   This software is provided 'as-is', without any express or implied warranty.
+ *   In no event will the authors be held liable for any damages arising from
+ *   the use of this software.
+ *
+ *   Permission is granted to anyone to use this software for any purpose,
+ *   including commercial applications, and to alter it and redistribute it
+ *   freely, subject to the following restrictions:
+ *
+ *   1. The origin of this software must not be misrepresented; you must not
+ *   claim that you wrote the original software. If you use this software
+ *   in a product, an acknowledgment in the product documentation would
+ *   be appreciated but is not required.
+ *
+ *   2. Altered source versions must be plainly marked as such, and must
+ *   not be misrepresented as being the original software.
+ *
+ *   3. This notice may not be removed or altered from any source distribution.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
 // Show the QR-Code of a permalink (when the QR-Code icon is clicked).
 function showQrCode(caller,loading)
 { 
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index 2f54a085..f24ac435 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -222,19 +222,6 @@
 </form>
 
 {include="page.footer"}
-
-<script>
-  (function (window, document) {
-    var toRemove = document.getElementById('timezone-remove');
-    var firstSelect = toRemove.getElementsByTagName('select')[0];
-    var secondSelect = toRemove.getElementsByTagName('select')[1];
-    toRemove.parentNode.removeChild(toRemove);
-    var toAdd = document.getElementById('timezone-add');
-    var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
-    newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
-    toAdd.innerHTML = newTimezone;
-  })(this, this.document);
-</script>
 </body>
 </html>
 
diff --git a/tpl/default/editlink.html b/tpl/default/editlink.html
index 2180c080..491f1da0 100644
--- a/tpl/default/editlink.html
+++ b/tpl/default/editlink.html
@@ -4,11 +4,7 @@
   {include="includes"}
 </head>
 <body>
-  {if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
-    {include="page.header"}
-  {else}
-    <div class="center">Shaare to: {$shaarlititle}</div>
-  {/if}
+  {include="page.header"}
   <div id="editlinkform" class="pure-g">
     <div class="pure-u-lg-1-5 pure-u-1-24"></div>
     <form method="post" name="linkform" class="page-form pure-u-lg-3-5 pure-u-22-24 page-form page-form-light">
@@ -21,25 +17,25 @@
         <label for="lf_url">{'URL'|t}</label>
       </div>
       <div>
-        <input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input">
+        <input type="text" name="lf_url" id="lf_url" value="{$link.url}" class="lf_input autofocus">
       </div>
       <div>
       <label for="lf_title">{'Title'|t}</label>
       </div>
       <div>
-        <input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input">
+        <input type="text" name="lf_title" id="lf_title" value="{$link.title}" class="lf_input autofocus">
       </div>
       <div>
         <label for="lf_description">{'Description'|t}</label>
       </div>
       <div>
-        <textarea name="lf_description" id="lf_description">{$link.description}</textarea>
+        <textarea name="lf_description" id="lf_description" class="autofocus">{$link.description}</textarea>
       </div>
       <div>
         <label for="lf_tags">{'Tags'|t}</label>
       </div>
       <div>
-        <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input"
+        <input type="text" name="lf_tags" id="lf_tags" value="{$link.tags}" class="lf_input autofocus"
           data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" >
       </div>
 
@@ -74,18 +70,6 @@
       {/if}
     </form>
   </div>
-  {if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
-    {include="page.footer"}
-  {/if}
-<script>
-  awesompleteUniqueTag('#lf_tags');
-  if (!document.linkform.lf_title.value) {
-    document.linkform.lf_title.focus();
-  } else if (!document.linkform.lf_description.value) {
-    document.linkform.lf_description.focus();
-  } else {
-    document.linkform.lf_tags.focus();
-  }
-</script>
+  {include="page.footer"}
 </body>
 </html>
diff --git a/tpl/default/install.html b/tpl/default/install.html
index 0bd8a635..33f8a453 100644
--- a/tpl/default/install.html
+++ b/tpl/default/install.html
@@ -105,18 +105,5 @@
 </div>
 </form>
 {include="page.footer"}
-<script>
-  // FIXME!
-  (function (window, document) {
-    var toRemove = document.getElementById('timezone-remove');
-    var firstSelect = toRemove.getElementsByTagName('select')[0];
-    var secondSelect = toRemove.getElementsByTagName('select')[1];
-    toRemove.parentNode.removeChild(toRemove);
-    var toAdd = document.getElementById('timezone-add');
-    var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
-    newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
-    toAdd.innerHTML = newTimezone;
-  })(this, this.document);
-</script>
 </body>
 </html>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index f7de0a49..30d8ed6f 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -1,3 +1,31 @@
+/** @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ *   Copyright: (c) 2011-2015 Sébastien SAUVAGE <sebsauvage@sebsauvage.net>
+ *              (c) 2011-2017 The Shaarli Community, see AUTHORS
+ *
+ *   This software is provided 'as-is', without any express or implied warranty.
+ *   In no event will the authors be held liable for any damages arising from
+ *   the use of this software.
+ *
+ *   Permission is granted to anyone to use this software for any purpose,
+ *   including commercial applications, and to alter it and redistribute it
+ *   freely, subject to the following restrictions:
+ *
+ *   1. The origin of this software must not be misrepresented; you must not
+ *   claim that you wrote the original software. If you use this software
+ *   in a product, an acknowledgment in the product documentation would
+ *   be appreciated but is not required.
+ *
+ *   2. Altered source versions must be plainly marked as such, and must
+ *   not be misrepresented as being the original software.
+ *
+ *   3. This notice may not be removed or altered from any source distribution.
+ *
+ *  @licend  The above is the entire license notice
+ *  for the JavaScript code in this page.
+ */
+
 window.onload = function () {
 
     /**
@@ -185,9 +213,13 @@ window.onload = function () {
     /**
      * Autofocus text fields
      */
-    var autofocusElements = document.querySelector('.autofocus');
-    if (autofocusElements != null) {
-        autofocusElements.focus();
+    // ES6 syntax
+    let autofocusElements = document.querySelectorAll('.autofocus');
+    for (let autofocusElement of autofocusElements) {
+        if (autofocusElement.value == '') {
+            autofocusElement.focus();
+            break;
+        }
     }
 
     /**
@@ -266,4 +298,96 @@ window.onload = function () {
             }
         });
     }
+
+    /**
+     * TimeZome select
+     * FIXME! way too hackish
+     */
+    var toRemove = document.getElementById('timezone-remove');
+    if (toRemove != null) {
+        var firstSelect = toRemove.getElementsByTagName('select')[0];
+        var secondSelect = toRemove.getElementsByTagName('select')[1];
+        toRemove.parentNode.removeChild(toRemove);
+        var toAdd = document.getElementById('timezone-add');
+        var newTimezone = '<span class="timezone-continent">Continent ' + firstSelect.outerHTML + '</span>';
+        newTimezone += ' <span class="timezone-country">Country ' + secondSelect.outerHTML + '</span>';
+        toAdd.innerHTML = newTimezone;
+    }
+
+    /**
+     * Awesomplete trigger.
+     */
+    var tags = document.getElementById('lf_tags');
+    if (tags != null) {
+        awesompleteUniqueTag('#lf_tags');
+    }
+
+    /**
+     * bLazy trigger
+     */
+    var picwall = document.getElementById('picwall_container');
+    if (picwall != null) {
+        var bLazy = new Blazy();
+    }
+
+    /**
+     * Bookmarklet alert
+     */
+    var bookmarkletLinks = document.querySelectorAll('.bookmarklet-link');
+    var bkmMessage = document.getElementById('bookmarklet-alert');
+    [].forEach.call(bookmarkletLinks, function(link) {
+        link.addEventListener('click', function(event) {
+            event.preventDefault();
+            alert(bkmMessage.value);
+        });
+    });
+
+    /**
+     * Firefox Social
+     */
+    var ffButton = document.getElementById('ff-social-button');
+    if (ffButton != null) {
+        ffButton.addEventListener('click', function(event) {
+            activateFirefoxSocial(event.target);
+        });
+    }
+
+    /**
+     * Plugin admin order
+     */
+    var orderPA = document.querySelectorAll('.order');
+    [].forEach.call(orderPA, function(link) {
+        link.addEventListener('click', function(event) {
+            event.preventDefault();
+            if (event.target.classList.contains('order-up')) {
+                return orderUp(event.target.parentNode.parentNode.getAttribute('data-order'));
+            } else if (event.target.classList.contains('order-down')) {
+                return orderDown(event.target.parentNode.parentNode.getAttribute('data-order'));
+            }
+        });
+    });
 };
+
+function activateFirefoxSocial(node) {
+    var loc = location.href;
+    var baseURL = loc.substring(0, loc.lastIndexOf("/"));
+
+    // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
+    var data = {
+        name: "{$shaarlititle}",
+        description: "The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community.",
+        author: "Shaarli",
+        version: "1.0.0",
+
+        iconURL: baseURL + "/images/favicon.ico",
+        icon32URL: baseURL + "/images/favicon.ico",
+        icon64URL: baseURL + "/images/favicon.ico",
+
+        shareURL: baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi{/noparse}",
+        homepageURL: baseURL
+    };
+    node.setAttribute("data-service", JSON.stringify(data));
+
+    var activate = new CustomEvent("ActivateSocialFeature");
+    node.dispatchEvent(activate);
+}
diff --git a/tpl/default/loginform.html b/tpl/default/loginform.html
index 2ad3fe9c..eb6d8378 100644
--- a/tpl/default/loginform.html
+++ b/tpl/default/loginform.html
@@ -26,7 +26,7 @@
              {if="!empty($username)"}value="{$username}"{/if} class="autofocus" tabindex="20">
         </div>
         <div>
-          <input type="password" name="password" placeholder="{'Password'|t}" tabindex="21">
+          <input type="password" name="password" placeholder="{'Password'|t}" class="autofocus" tabindex="21">
         </div>
         <div class="remember-me">
           <input type="checkbox" name="longlastingsession" id="longlastingsessionform"
@@ -45,15 +45,6 @@
 {/if}
 
 {include="page.footer"}
-<script>
-  {if="ban_canLogin($conf) && ! empty($username)"}
-    // Focus password on load if the username is set.
-    var passwords = document.getElementsByName('password');
-    if (passwords.length == 2) {
-        passwords[1].focus();
-    }
-  {/if}
-</script>
 </body>
 </html>
 
diff --git a/tpl/default/picwall.html b/tpl/default/picwall.html
index b9ae2f2e..248e56df 100644
--- a/tpl/default/picwall.html
+++ b/tpl/default/picwall.html
@@ -40,11 +40,6 @@
 
 {include="page.footer"}
 <script src="inc/blazy-1.3.1.min.js#"></script>
-<script>
-  window.onload = function() {
-    var bLazy = new Blazy();
-  }
-</script>
 </body>
 </html>
 
diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index 92af2eef..5cc1802f 100644
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -48,14 +48,8 @@
                   <td><div class="pure-u-0 pure-u-lg-visible"><label for="{$key}">{$value.description}</label></div></td>
                   <td class="center">
                     {if="count($enabledPlugins)>1"}
-                    <a href="#" class="order"
-                       onclick="return orderUp(this.parentNode.parentNode.getAttribute('data-order'));">
-                      ▲
-                    </a>
-                    <a href="#" class="order"
-                       onclick="return orderDown(this.parentNode.parentNode.getAttribute('data-order'));">
-                      ▼
-                    </a>
+                    <a href="#" class="order order-up">▲</a>
+                    <a href="#" class="order order-down">▼</a>
                     {/if}
                     <input type="hidden" name="order_{$key}" value="{$counter}">
                   </td>
diff --git a/tpl/default/tools.html b/tpl/default/tools.html
index b9df32d9..baa033af 100644
--- a/tpl/default/tools.html
+++ b/tpl/default/tools.html
@@ -67,7 +67,7 @@
     <div class="tools-item">
       <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t},
                 {'then click ✚Shaare link button in any page you want to share'|t}"
-         onclick="return alertBookmarklet();"
+         class="bookmarklet-link"
          href="javascript:(
           function(){
             var%20url%20=%20location.href;
@@ -86,8 +86,8 @@
     <div class="tools-item">
       <a title="{'Drag this link to your bookmarks toolbar or right-click it and Bookmark This Link'|t},
                 {'Then click ✚Add Note button anytime to start composing a private Note (text post) to your Shaarli'|t}"
-         onclick="return alertBookmarklet();"
-         href="?private=1&amp;post=">
+         href="?private=1&amp;post="
+         class="bookmarklet-link">
         <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add Note'|t}</span>
       </a>
     </div>
@@ -103,7 +103,7 @@
 
       <div class="tools-item">
         <a title="{'Click on this button to add Shaarli to the 'Share this page' button in Firefox"
-           onclick="activateFirefoxSocial(this)">
+           id="ff-social-button">
         <span class="pure-button pure-u-lg-2-3 pure-u-3-4">✚ {'Add to'|t} Firefox Social</span>
         </a>
       </div>
@@ -142,38 +142,8 @@
 </div>
 
 {include="page.footer"}
-
-<script>
-  {if="$sslenabled"}
-    function activateFirefoxSocial(node) {
-      var loc = location.href;
-      var baseURL = loc.substring(0, loc.lastIndexOf("/"));
-
-      // Keeping the data separated (ie. not in the DOM) so that it's maintainable and diffable.
-      var data = {
-        name: "{$shaarlititle}",
-        description: "The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community.",
-        author: "Shaarli",
-        version: "1.0.0",
-
-        iconURL: baseURL + "/images/favicon.ico",
-        icon32URL: baseURL + "/images/favicon.ico",
-        icon64URL: baseURL + "/images/favicon.ico",
-
-        shareURL: baseURL + "{noparse}?post=%{url}&title=%{title}&description=%{text}&source=firefoxsocialapi{/noparse}",
-        homepageURL: baseURL
-      };
-      node.setAttribute("data-service", JSON.stringify(data));
-
-      var activate = new CustomEvent("ActivateSocialFeature");
-      node.dispatchEvent(activate);
-    }
-  {/if}
-  function alertBookmarklet() {
-    alert({"'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'"|t});
-    return false;
-  }
-</script>
+<input type="hidden" id="bookmarklet-alert"
+       value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}">
 </body>
 </html>