Webpack / Rewrite all JS to ES6 Syntax

assets/common/js/picwall.js

@@ -0,0 +1,10 @@
+import Blazy from 'blazy';
+
+(() => {
+  const picwall = document.getElementById('picwall_container');
+  if (picwall != null) {
+    // Suppress ESLint error because that's how bLazy works
+    /* eslint-disable no-new */
+    new Blazy();
+  }
+})();

assets/default/js/plugins-admin.js

@@ -1,44 +1,14 @@
-/** @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.
  *
  * @param elem  Element Node to change.
  * @param toPos int     New position.
  */
-function changePos(elem, toPos)
-{
-    var elemName = elem.getAttribute('data-line')
-
-    elem.setAttribute('data-order', toPos);
-    var hiddenInput = document.querySelector('[name="order_'+ elemName +'"]');
-    hiddenInput.setAttribute('value', toPos);
+function changePos(elem, toPos) {
+  const elemName = elem.getAttribute('data-line');
+  elem.setAttribute('data-order', toPos);
+  const hiddenInput = document.querySelector(`[name="order_${elemName}"]`);
+  hiddenInput.setAttribute('value', toPos);
 }
 
 /**
@@ -47,25 +17,23 @@ function changePos(elem, toPos)
  * @param pos  Element Node to move.
  * @param move int     Move: +1 (down) or -1 (up)
  */
-function changeOrder(pos, move)
-{
-    var newpos = parseInt(pos) + move;
-    var lines = document.querySelectorAll('[data-order="'+ pos +'"]');
-    var changelines = document.querySelectorAll('[data-order="'+ newpos +'"]');
+function changeOrder(pos, move) {
+  const newpos = parseInt(pos, 10) + move;
+  let lines = document.querySelectorAll(`[data-order="${pos}"]`);
+  const changelines = document.querySelectorAll(`[data-order="${newpos}"]`);
 
-    // If we go down reverse lines to preserve the rows order
-    if (move > 0) {
-        lines = [].slice.call(lines).reverse();
-    }
-
-    for (var i = 0 ; i < lines.length ; i++) {
-        var parent = changelines[0].parentNode;
-        changePos(lines[i], newpos);
-        changePos(changelines[i], parseInt(pos));
-        var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
-        parent.insertBefore(lines[i], changeItem);
-    }
+  // If we go down reverse lines to preserve the rows order
+  if (move > 0) {
+    lines = [].slice.call(lines).reverse();
+  }
 
+  for (let i = 0; i < lines.length; i += 1) {
+    const parent = changelines[0].parentNode;
+    changePos(lines[i], newpos);
+    changePos(changelines[i], parseInt(pos, 10));
+    const changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
+    parent.insertBefore(lines[i], changeItem);
+  }
 }
 
 /**
@@ -73,15 +41,12 @@ function changeOrder(pos, move)
  *
  * @param pos int row counter.
  *
- * @returns false
+ * @return false
  */
-function orderUp(pos)
-{
-    if (pos == 0) {
-        return false;
-    }
+function orderUp(pos) {
+  if (pos !== 0) {
     changeOrder(pos, -1);
-    return false;
+  }
 }
 
 /**
@@ -91,13 +56,26 @@ function orderUp(pos)
  *
  * @returns false
  */
-function orderDown(pos)
-{
-    var lastpos = document.querySelector('[data-order]:last-child').getAttribute('data-order');
-    if (pos == lastpos) {
-        return false;
-    }
-
-    changeOrder(pos, +1);
-    return false;
+function orderDown(pos) {
+  const lastpos = parseInt(document.querySelector('[data-order]:last-child').getAttribute('data-order'), 10);
+  if (pos !== lastpos) {
+    changeOrder(pos, 1);
+  }
 }
+
+(() => {
+  /**
+   * Plugin admin order
+   */
+  const orderPA = document.querySelectorAll('.order');
+  [...orderPA].forEach((link) => {
+    link.addEventListener('click', (event) => {
+      event.preventDefault();
+      if (event.target.classList.contains('order-up')) {
+        orderUp(parseInt(event.target.parentNode.parentNode.getAttribute('data-order'), 10));
+      } else if (event.target.classList.contains('order-down')) {
+        orderDown(parseInt(event.target.parentNode.parentNode.getAttribute('data-order'), 10));
+      }
+    });
+  });
+})();

assets/default/scss/shaarli.scss

@@ -1,3 +1,11 @@
+$fa-font-path: "~font-awesome/fonts";
+
+@import "~font-awesome/scss/font-awesome.scss";
+@import '~purecss/build/pure.css';
+@import '~purecss/build/grids-responsive.css';
+@import '~pure-extras/css/pure-extras.css';
+@import '~awesomplete/awesomplete.css';
+
 /**
  * General
  */
@@ -39,10 +47,10 @@ pre {
     font-weight: 400;
     font-style: normal;
     src:
-    local('Roboto'),
-    local('Roboto-Regular'),
-    url('../fonts/Roboto-Regular.woff2') format('woff2'),
-    url('../fonts/Roboto-Regular.woff') format('woff');
+            local('Roboto'),
+            local('Roboto-Regular'),
+            url('../fonts/Roboto-Regular.woff2') format('woff2'),
+            url('../fonts/Roboto-Regular.woff') format('woff');
 }
 
 @font-face {
@@ -50,10 +58,10 @@ pre {
     font-weight: 700;
     font-style: normal;
     src:
-    local('Roboto'),
-    local('Roboto-Bold'),
-    url('../fonts/Roboto-Bold.woff2') format('woff2'),
-    url('../fonts/Roboto-Bold.woff') format('woff');
+            local('Roboto'),
+            local('Roboto-Bold'),
+            url('../fonts/Roboto-Bold.woff2') format('woff2'),
+            url('../fonts/Roboto-Bold.woff') format('woff');
 }
 
 body, .pure-g [class*="pure-u"] {
@@ -873,10 +881,6 @@ body, .pure-g [class*="pure-u"] {
 /**
  * PAGE FORM - COMPLETE
  */
-.page-form-complete {
-    #background: #f5f5f5;
-}
-
 .page-form-complete div, .page-form-complete p {
     color: #252525;
 }

assets/vintage/js/base.js

@@ -1,32 +1,30 @@
-window.onload = function () {
-    var continent = document.getElementById('continent');
-    var city = document.getElementById('city');
-    if (continent != null && city != null) {
-        continent.addEventListener('change', function(event) {
-            hideTimezoneCities(city, continent.options[continent.selectedIndex].value, true);
-        });
-        hideTimezoneCities(city, continent.options[continent.selectedIndex].value, false);
-    }
-};
+import Awesomplete from 'awesomplete';
+import 'awesomplete/awesomplete.css';
 
-/**
- * Add the class 'hidden' to city options not attached to the current selected continent.
- *
- * @param cities           List of <option> elements
- * @param currentContinent Current selected continent
- * @param reset            Set to true to reset the selected value
- */
-function hideTimezoneCities(cities, currentContinent, reset = false) {
-    var first = true;
-    [].forEach.call(cities, function(option) {
-        if (option.getAttribute('data-continent') != currentContinent) {
-            option.className = 'hidden';
-        } else {
-            option.className = '';
-            if (reset === true && first === true) {
-                option.setAttribute('selected', 'selected');
-                first = false;
-            }
+(() => {
+  const awp = Awesomplete.$;
+  const autocompleteFields = document.querySelectorAll('input[data-multiple]');
+  [...autocompleteFields].forEach((autocompleteField) => {
+    const awesomplete = new Awesomplete(awp(autocompleteField));
+    awesomplete.filter = (text, input) => Awesomplete.FILTER_CONTAINS(text, input.match(/[^ ]*$/)[0]);
+    awesomplete.replace = (text) => {
+      const before = awesomplete.input.value.match(/^.+ \s*|/)[0];
+      awesomplete.input.value = `${before}${text} `;
+    };
+    awesomplete.minChars = 1;
+
+    autocompleteField.addEventListener('input', () => {
+      const proposedTags = autocompleteField.getAttribute('data-list').replace(/,/g, '').split(' ');
+      const reg = /(\w+) /g;
+      let match;
+      while ((match = reg.exec(autocompleteField.value)) !== null) {
+        const id = proposedTags.indexOf(match[1]);
+        if (id !== -1) {
+          proposedTags.splice(id, 1);
         }
+      }
+
+      awesomplete.list = proposedTags;
     });
-}
+  });
+})();