Assets work

* ES6 all the things !

* ESLint checks everything

* CSS fixes (use stylelint)

* Fix #2231

9 files changed, 296 insertions, 288 deletions

diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css
index 7ffaa12c..58f0eb82 100755
--- a/app/Resources/static/themes/baggy/css/main.css
+++ b/app/Resources/static/themes/baggy/css/main.css
@@ -481,9 +481,6 @@ footer a {
   text-transform: none;
   margin-bottom: 0;
   line-height: 1.2;
-  text-align: justify;
-  -moz-text-align-last: center;
-  text-align-last: center;
 }
 
 .entry h2::after {
@@ -1071,7 +1068,7 @@ pre code {
   font-family: "Courier New", Courier, monospace;
 }
 
-#filter-form {
+#filters {
   position: fixed;
   width: 20%;
   height: 100%;
@@ -1086,7 +1083,7 @@ pre code {
   min-width: 300px;
 }
 
-#filter-form form .filter-group {
+#filters form .filter-group {
   margin: 5px;
 }
 
@@ -1125,9 +1122,11 @@ pre code {
   .entry {
     width: 49%;
   }
+
   .entry:nth-child(3n+1) {
     margin-left: 1.5%;
   }
+
   .entry:nth-child(2n+1) {
     margin-left: 0;
   }
@@ -1137,6 +1136,7 @@ pre code {
   #article {
     width: 80%;
   }
+
   .topPosF {
     right: 2.5em;
   }
@@ -1147,6 +1147,7 @@ pre code {
     width: 100%;
     margin-left: 0;
   }
+
   #display-mode {
     display: none;
   }
@@ -1197,7 +1198,6 @@ pre code {
     height: auto;
     top: 0.5em;
     width: 75px;
-    height: 75px;
     margin-left: -37.5px;
   }
 
@@ -1214,6 +1214,7 @@ pre code {
     background-color: #999;
     font-size: 1.2em;
   }
+
   .desktopHide:hover,
   .desktopHide:focus {
     background-color: #fff;
diff --git a/app/Resources/static/themes/baggy/css/ratatouille.css b/app/Resources/static/themes/baggy/css/ratatouille.css
index b5aeb54e..a6167f34 100644
--- a/app/Resources/static/themes/baggy/css/ratatouille.css
+++ b/app/Resources/static/themes/baggy/css/ratatouille.css
@@ -63,7 +63,9 @@ pre {
   max-width: 61.25em; /* 980px */
 }
 
-table, img, figure {
+table,
+img,
+figure {
   max-width: 100%;
   height: auto;
 }
diff --git a/app/Resources/static/themes/baggy/js/autoClose.js b/app/Resources/static/themes/baggy/js/autoClose.js
deleted file mode 100644
index b0dafab2..00000000
--- a/app/Resources/static/themes/baggy/js/autoClose.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var $ = global.jquery = require('jquery');
-
-$(document).ready(function () {
-  var currentUrl = window.location.href;
-  if (currentUrl.match('&closewin=true')) {
-    window.close();
-  }
-});
diff --git a/app/Resources/static/themes/baggy/js/autoCompleteTags.js b/app/Resources/static/themes/baggy/js/autoCompleteTags.js
index edd0a421..f287ebfa 100755
--- a/app/Resources/static/themes/baggy/js/autoCompleteTags.js
+++ b/app/Resources/static/themes/baggy/js/autoCompleteTags.js
@@ -1,46 +1,8 @@
-var $ = global.jquery = require('jquery');
+function split(val) {
+  return val.split(/,\s*/);
+}
+function extractLast(term) {
+  return split(term).pop();
+}
 
-jQuery(function ($) {
-  function split(val) {
-    return val.split(/,\s*/);
-  }
-  function extractLast(term) {
-    return split(term).pop();
-  }
-
-
-  $('#value').bind('keydown', function (event) {
-    if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) {
-      event.preventDefault();
-    }
-  }).autocomplete({
-    source: function (request, response) {
-      $.getJSON('./?view=tags', {
-        term: extractLast(request.term),
-        //id: $(':hidden#entry_id').val()
-      }, response);
-    },
-    search: function () {
-      // custom minLength
-      var term = extractLast(this.value);
-      if (term.length < 1) {
-        return false;
-      }
-    },
-    focus: function () {
-      // prevent value inserted on focus
-      return false;
-    },
-    select: function (event, ui) {
-      var terms = split(this.value);
-      // remove the current input
-      terms.pop();
-      // add the selected item
-      terms.push(ui.item.value);
-      // add placeholder to get the comma-and-space at the end
-      terms.push('');
-      this.value = terms.join(', ');
-      return false;
-    },
-  });
-});
+export { split, extractLast };
diff --git a/app/Resources/static/themes/baggy/js/closeMessage.js b/app/Resources/static/themes/baggy/js/closeMessage.js
deleted file mode 100644
index ae4b1791..00000000
--- a/app/Resources/static/themes/baggy/js/closeMessage.js
+++ /dev/null
@@ -1,19 +0,0 @@
-var $ = global.jquery = require('jquery');
-
-$(function () {
-  //---------------------------------------------------------------------------
-  // Show the close icon when the user hover over a message
-  //---------------------------------------------------------------------------
-  // $('.messages').on('mouseenter', function(){
-  //      $(this).find('a.closeMessage').stop(true, true).show();
-  // }).on('mouseleave', function(){
-  //      $(this).find('a.closeMessage').stop(true, true).hide();
-  // });
-  //---------------------------------------------------------------------------
-  // Close the message box when the user clicks the close icon
-  //---------------------------------------------------------------------------
-  $('a.closeMessage').on('click', function () {
-    $(this).parents('div.messages').slideUp(300, function () { $(this).remove(); });
-    return false;
-  });
-});
diff --git a/app/Resources/static/themes/baggy/js/init.js b/app/Resources/static/themes/baggy/js/init.js
index d7d4b166..c6a54f6f 100755
--- a/app/Resources/static/themes/baggy/js/init.js
+++ b/app/Resources/static/themes/baggy/js/init.js
@@ -1,21 +1,25 @@
-var $ = global.jquery = require('jquery');
+const $ = global.jquery = require('jquery');
 require('jquery.cookie');
 require('jquery-ui');
-var annotator = require('annotator');
+const annotator = require('annotator');
+import { savePercent, retrievePercent } from '../../_global/js/tools.js';
+import { split, extractLast } from './autoCompleteTags.js';
+import { toggleSaveLinkForm } from './uiTools.js';
 
 
-$.fn.ready(function () {
-  var $listmode = $('#listmode');
-  var $listentries = $('#list-entries');
+$.fn.ready(() => {
+  const $listmode = $('#listmode');
+  const $listentries = $('#list-entries');
 
   /* ==========================================================================
      Menu
      ========================================================================== */
 
-  $('#menu').click(function () {
+  $('#menu').click(() => {
     $('#links').toggleClass('menu--open');
-    if ($('#content').hasClass('opacity03')) {
-      $('#content').removeClass('opacity03');
+    const content = $('#content');
+    if (content.hasClass('opacity03')) {
+      content.removeClass('opacity03');
     }
   });
 
@@ -23,8 +27,8 @@ $.fn.ready(function () {
      List mode or Table Mode
      ========================================================================== */
 
-  $listmode.click(function () {
-    if (jquery.cookie('listmode') === 1) {
+  $listmode.click(() => {
+    if ($.cookie('listmode') === 1) {
       // Cookie
       $.removeCookie('listmode');
 
@@ -33,7 +37,7 @@ $.fn.ready(function () {
       $listmode.addClass('listmode');
     } else {
       // Cookie
-      jquery.cookie('listmode', 1, { expires: 365 });
+      $.cookie('listmode', 1, { expires: 365 });
 
       $listentries.addClass('listmode');
       $listmode.removeClass('listmode');
@@ -45,7 +49,7 @@ $.fn.ready(function () {
      Cookie listmode
      ========================================================================== */
 
-  if (jquery.cookie('listmode') === 1) {
+  if ($.cookie('listmode') === 1) {
     $listentries.addClass('listmode');
     $listmode.removeClass('listmode');
     $listmode.addClass('tablemode');
@@ -56,43 +60,250 @@ $.fn.ready(function () {
      ========================================================================== */
 
 
-  $('#nav-btn-add-tag').on('click', function () {
+  $('#nav-btn-add-tag').on('click', () => {
     $('.nav-panel-add-tag').toggle(100);
     $('.nav-panel-menu').addClass('hidden');
     $('#tag_label').focus();
     return false;
   });
 
+  /**
+   * Filters & Export
+   */
+  // no display if filters not available
+  if ($('div').is('#filters')) {
+    $('#button_filters').show();
+    $('#clear_form_filters').on('click', () => {
+      $('#filters input').val('');
+      $('#filters :checked').removeAttr('checked');
+      return false;
+    });
+  }
+
   /* ==========================================================================
      Annotations & Remember position
      ========================================================================== */
 
-    if ($('article').length) {
-      var app = new annotator.App();
+  if ($('article').length) {
+    const app = new annotator.App();
+
+    app.include(annotator.ui.main, {
+      element: document.querySelector('article'),
+    });
 
-      app.include(annotator.ui.main, {
-        element: document.querySelector('article'),
-      });
+    const x = JSON.parse($('#annotationroutes').html());
+    app.include(annotator.storage.http, x);
 
-      var x = JSON.parse($('#annotationroutes').html());
-      app.include(annotator.storage.http, x);
+    app.start().then(() => {
+      app.annotations.load({ entry: x.entryId });
+    });
 
-      app.start().then(function () {
-        app.annotations.load({ entry: x.entryId });
-      });
+    $(window).scroll(() => {
+      const scrollTop = $(window).scrollTop();
+      const docHeight = $(document).height();
+      const scrollPercent = (scrollTop) / (docHeight);
+      const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
+      savePercent(x.entryId, scrollPercentRounded);
+    });
 
-      $(window).scroll(function (e) {
-        var scrollTop = $(window).scrollTop();
-        var docHeight = $(document).height();
-        var scrollPercent = (scrollTop) / (docHeight);
-        var scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
-        savePercent(x.entryId, scrollPercentRounded);
-      });
+    retrievePercent(x.entryId);
 
+    $(window).resize(() => {
       retrievePercent(x.entryId);
+    });
+  }
+
+  /**
+   * Close window after adding entry if popup
+   */
+  const currentUrl = window.location.href;
+  if (currentUrl.match('&closewin=true')) {
+    window.close();
+  }
+
+  /**
+   * Tags autocomplete
+   */
+  $('#value').bind('keydown', (event) => {
+    if (event.keyCode === $.ui.keyCode.TAB && $(this).data('ui-autocomplete').menu.active) {
+      event.preventDefault();
+    }
+  }).autocomplete({
+    source: function source(request, response) {
+      $.getJSON('./?view=tags', {
+        term: extractLast(request.term),
+        //id: $(':hidden#entry_id').val()
+      }, response);
+    },
+    search: function search() {
+      // custom minLength
+      const term = extractLast(this.value);
+      return term.length >= 1;
+    },
+    focus: function focus() {
+      // prevent value inserted on focus
+      return false;
+    },
+    select: function select(event, ui) {
+      const terms = split(this.value);
+      // remove the current input
+      terms.pop();
+      // add the selected item
+      terms.push(ui.item.value);
+      // add placeholder to get the comma-and-space at the end
+      terms.push('');
+      this.value = terms.join(', ');
+      return false;
+    },
+  });
+
+  //---------------------------------------------------------------------------
+  // Close the message box when the user clicks the close icon
+  //---------------------------------------------------------------------------
+  $('a.closeMessage').on('click', () => {
+    $(this).parents('div.messages').slideUp(300, () => { $(this).remove(); });
+    return false;
+  });
+
+  $('#search-form').hide();
+  $('#bagit-form').hide();
+  $('#filters').hide();
+  $('#download-form').hide();
 
-      $(window).resize(function () {
-          retrievePercent(x.entryId);
-      });
+  //---------------------------------------------------------------------------
+  // Toggle the 'Search' popup in the sidebar
+  //---------------------------------------------------------------------------
+  function toggleSearch() {
+    $('#search-form').toggle();
+    $('#search').toggleClass('current');
+    $('#search').toggleClass('active-current');
+    $('#search-arrow').toggleClass('arrow-down');
+    if ($('#search').hasClass('current')) {
+      $('#content').addClass('opacity03');
+    } else {
+      $('#content').removeClass('opacity03');
+    }
+  }
+
+  //---------------------------------------------------------------------------
+  // Toggle the 'Filter' popup on entries list
+  //---------------------------------------------------------------------------
+  function toggleFilter() {
+    $('#filters').toggle();
+  }
+
+  //---------------------------------------------------------------------------
+  // Toggle the 'Download' popup on entries list
+  //---------------------------------------------------------------------------
+  function toggleDownload() {
+    $('#download-form').toggle();
+  }
+
+  //---------------------------------------------------------------------------
+  // Toggle the 'Save a Link' popup in the sidebar
+  //---------------------------------------------------------------------------
+  function toggleBagit() {
+    $('#bagit-form').toggle();
+    $('#bagit').toggleClass('current');
+    $('#bagit').toggleClass('active-current');
+    $('#bagit-arrow').toggleClass('arrow-down');
+    if ($('#bagit').hasClass('current')) {
+      $('#content').addClass('opacity03');
+    } else {
+      $('#content').removeClass('opacity03');
     }
+  }
+
+  //---------------------------------------------------------------------------
+  // Close all #links popups in the sidebar
+  //---------------------------------------------------------------------------
+  function closePopups() {
+    $('#links .messages').hide();
+    $('#links > li > a').removeClass('active-current');
+    $('#links > li > a').removeClass('current');
+    $('[id$=-arrow]').removeClass('arrow-down');
+    $('#content').removeClass('opacity03');
+  }
+
+  $('#search').click(() => {
+    closePopups();
+    toggleSearch();
+    $('#searchfield').focus();
+  });
+
+  $('.filter-btn').click(() => {
+    closePopups();
+    toggleFilter();
+  });
+
+  $('.download-btn').click(() => {
+    closePopups();
+    toggleDownload();
+  });
+
+  $('#bagit').click(() => {
+    closePopups();
+    toggleBagit();
+    $('#plainurl').focus();
+  });
+
+  $('#search-form-close').click(() => {
+    toggleSearch();
+  });
+
+  $('#filter-form-close').click(() => {
+    toggleFilter();
+  });
+
+  $('#download-form-close').click(() => {
+    toggleDownload();
+  });
+
+  $('#bagit-form-close').click(() => {
+    toggleBagit();
+  });
+
+  const $bagitFormForm = $('#bagit-form-form');
+
+  /* ==========================================================================
+   bag it link and close button
+   ========================================================================== */
+
+  // send 'bag it link' form request via ajax
+  $bagitFormForm.submit((event) => {
+    $('body').css('cursor', 'wait');
+    $('#add-link-result').empty();
+
+    $.ajax({
+      type: $bagitFormForm.attr('method'),
+      url: $bagitFormForm.attr('action'),
+      data: $bagitFormForm.serialize(),
+      success: function success() {
+        $('#add-link-result').html('Done!');
+        $('#plainurl').val('');
+        $('#plainurl').blur('');
+        $('body').css('cursor', 'auto');
+      },
+      error: function error() {
+        $('#add-link-result').html('Failed!');
+        $('body').css('cursor', 'auto');
+      },
+    });
+
+    event.preventDefault();
+  });
+
+  /* ==========================================================================
+   Process all links inside an article
+   ========================================================================== */
+
+  $('article a[href^="http"]').after(
+      () => `<a href="${$(this).attr('href')}" class="add-to-wallabag-link-after" ` +
+      'alt="add to wallabag" title="add to wallabag"></a>'
+  );
+
+  $('.add-to-wallabag-link-after').click((event) => {
+    toggleSaveLinkForm($(this).attr('href'), event);
+    event.preventDefault();
+  });
 });
diff --git a/app/Resources/static/themes/baggy/js/popupForm.js b/app/Resources/static/themes/baggy/js/popupForm.js
deleted file mode 100644
index 95ba60ee..00000000
--- a/app/Resources/static/themes/baggy/js/popupForm.js
+++ /dev/null
@@ -1,101 +0,0 @@
-var $ = global.jquery = require('jquery');
-
-$(document).ready(function () {
-  $('#search-form').hide();
-  $('#bagit-form').hide();
-  $('#filter-form').hide();
-  $('#download-form').hide();
-
-  //---------------------------------------------------------------------------
-  // Toggle the 'Search' popup in the sidebar
-  //---------------------------------------------------------------------------
-  function toggleSearch() {
-    $('#search-form').toggle();
-    $('#search').toggleClass('current');
-    $('#search').toggleClass('active-current');
-    $('#search-arrow').toggleClass('arrow-down');
-    if ($('#search').hasClass('current')) {
-      $('#content').addClass('opacity03');
-    } else {
-      $('#content').removeClass('opacity03');
-    }
-  }
-
-  //---------------------------------------------------------------------------
-  // Toggle the 'Filter' popup on entries list
-  //---------------------------------------------------------------------------
-  function toggleFilter() {
-    $('#filter-form').toggle();
-  }
-
-  //---------------------------------------------------------------------------
-  // Toggle the 'Download' popup on entries list
-  //---------------------------------------------------------------------------
-  function toggleDownload() {
-    $('#download-form').toggle();
-  }
-
-  //---------------------------------------------------------------------------
-  // Toggle the 'Save a Link' popup in the sidebar
-  //---------------------------------------------------------------------------
-  function toggleBagit() {
-    $('#bagit-form').toggle();
-    $('#bagit').toggleClass('current');
-    $('#bagit').toggleClass('active-current');
-    $('#bagit-arrow').toggleClass('arrow-down');
-    if ($('#bagit').hasClass('current')) {
-      $('#content').addClass('opacity03');
-    } else {
-      $('#content').removeClass('opacity03');
-    }
-  }
-
-  //---------------------------------------------------------------------------
-  // Close all #links popups in the sidebar
-  //---------------------------------------------------------------------------
-  function closePopups() {
-    $('#links .messages').hide();
-    $('#links > li > a').removeClass('active-current');
-    $('#links > li > a').removeClass('current');
-    $('[id$=-arrow]').removeClass('arrow-down');
-    $('#content').removeClass('opacity03');
-  }
-
-  $('#search').click(function () {
-    closePopups();
-    toggleSearch();
-    $('#searchfield').focus();
-  });
-
-  $('.filter-btn').click(function () {
-    closePopups();
-    toggleFilter();
-  });
-
-  $('.download-btn').click(function () {
-    closePopups();
-    toggleDownload();
-  });
-
-  $('#bagit').click(function () {
-    closePopups();
-    toggleBagit();
-    $('#plainurl').focus();
-  });
-
-  $('#search-form-close').click(function () {
-    toggleSearch();
-  });
-
-  $('#filter-form-close').click(function () {
-    toggleFilter();
-  });
-
-  $('#download-form-close').click(function () {
-    toggleDownload();
-  });
-
-  $('#bagit-form-close').click(function () {
-    toggleBagit();
-  });
-});
diff --git a/app/Resources/static/themes/baggy/js/saveLink.js b/app/Resources/static/themes/baggy/js/saveLink.js
deleted file mode 100755
index 5c720886..00000000
--- a/app/Resources/static/themes/baggy/js/saveLink.js
+++ /dev/null
@@ -1,75 +0,0 @@
-var $ = global.jquery = require('jquery');
-
-$.fn.ready(function () {
-  var $bagit = $('#bagit');
-  var $bagitForm = $('#bagit-form');
-  var $bagitFormForm = $('#bagit-form-form');
-
-  /* ==========================================================================
-   bag it link and close button
-   ========================================================================== */
-
-  function toggleSaveLinkForm(url, event) {
-    $('#add-link-result').empty();
-
-    $bagit.toggleClass('active-current');
-
-    // only if bag-it link is not presented on page
-    if ($bagit.length === 0) {
-      if (event !== 'undefined' && event) {
-        $bagitForm.css({ position: 'absolute', top: event.pageY, left: event.pageX - 200 });
-      } else {
-        $bagitForm.css({ position: 'relative', top: 'auto', left: 'auto' });
-      }
-    }
-
-    if ($('#search-form').length !== 0) {
-      $('#search').removeClass('current');
-      $('#search-arrow').removeClass('arrow-down');
-      $('#search-form').hide();
-    }
-    $bagitForm.toggle();
-    $('#content').toggleClass('opacity03');
-    if (url !== 'undefined' && url) {
-      $('#plainurl').val(url);
-    }
-    $('#plainurl').focus();
-  }
-
-  // send 'bag it link' form request via ajax
-  $bagitFormForm.submit(function (event) {
-    $('body').css('cursor', 'wait');
-    $('#add-link-result').empty();
-
-    $.ajax({
-      type: $bagitFormForm.attr('method'),
-      url: $bagitFormForm.attr('action'),
-      data: $bagitFormForm.serialize(),
-      success: function (data) {
-        $('#add-link-result').html('Done!');
-        $('#plainurl').val('');
-        $('#plainurl').blur('');
-        $('body').css('cursor', 'auto');
-      },
-      error: function (data) {
-        $('#add-link-result').html('Failed!');
-        $('body').css('cursor', 'auto');
-      },
-    });
-
-    event.preventDefault();
-  });
-
-  /* ==========================================================================
-   Process all links inside an article
-   ========================================================================== */
-
-  $('article a[href^="http"]').after(function () {
-    return ' <a href="' + $(this).attr('href') + '" class="add-to-wallabag-link-after" alt="add to wallabag" title="add to wallabag"></a> ';
-  });
-
-  $('.add-to-wallabag-link-after').click(function (event) {
-    toggleSaveLinkForm($(this).attr('href'), event);
-    event.preventDefault();
-  });
-});
diff --git a/app/Resources/static/themes/baggy/js/uiTools.js b/app/Resources/static/themes/baggy/js/uiTools.js
new file mode 100644
index 00000000..900b2707
--- /dev/null
+++ b/app/Resources/static/themes/baggy/js/uiTools.js
@@ -0,0 +1,35 @@
+const $ = require('jquery');
+
+function toggleSaveLinkForm(url, event) {
+  $('#add-link-result').empty();
+
+  const $bagit = $('#bagit');
+  const $bagitForm = $('#bagit-form');
+
+  $bagit.toggleClass('active-current');
+
+  // only if bag-it link is not presented on page
+  if ($bagit.length === 0) {
+    if (event !== 'undefined' && event) {
+      $bagitForm.css({ position: 'absolute', top: event.pageY, left: event.pageX - 200 });
+    } else {
+      $bagitForm.css({ position: 'relative', top: 'auto', left: 'auto' });
+    }
+  }
+
+  const searchForm = $('#search-form');
+  const plainUrl = $('#plainurl');
+  if (searchForm.length !== 0) {
+    $('#search').removeClass('current');
+    $('#search-arrow').removeClass('arrow-down');
+    searchForm.hide();
+  }
+  $bagitForm.toggle();
+  $('#content').toggleClass('opacity03');
+  if (url !== 'undefined' && url) {
+    plainUrl.val(url);
+  }
+  plainUrl.focus();
+}
+
+export { toggleSaveLinkForm };