Merge pull request #2314 from wallabag/assets

Assets work

.bowerrc

@@ -1,4 +0,0 @@
-{
-  "directory" : "app/Resources/static/lib",
-  "json" : "bower.json"
-}

.eslintrc.json

@@ -1,4 +1,4 @@
 {
     "extends": "airbnb",
-    "installedESLint": true,
+    "parser": "babel-eslint"
 }

.gitignore

@@ -48,4 +48,4 @@ composer.lock
 app/Resources/static/lib/*
 /bin
 !/src/Wallabag/CoreBundle/Resources/public
-/src/Wallabag/CoreBundle/Resources/public/*
+/src/Wallabag/CoreBundle/Resources/public/*

.stylelintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

Gruntfile.js

@@ -4,6 +4,7 @@ module.exports = function (grunt) {
   grunt.initConfig({
     appDir: 'app/Resources/static',
     buildDir: 'web/bundles/wallabagcore',
+    modulesDir: 'node_modules',
 
     postcss: {
       material: {
@@ -41,27 +42,6 @@ module.exports = function (grunt) {
       options: {
         separator: ';',
       },
-      jsMaterial: {
-        src: [
-          '<%= appDir %>/themes/material/js/init.js',
-          '<%= appDir %>/themes/_global/js/restoreScroll.js',
-          'node_modules/jquery.tinydot/src/jquery.tinydot.js',
-        ],
-        dest: '<%= buildDir %>/material.js',
-      },
-      jsBaggy: {
-        src: [
-          '<%= appDir %>/themes/baggy/js/init.js',
-          '<%= appDir %>/themes/_global/js/restoreScroll.js',
-          '<%= appDir %>/themes/baggy/js/autoClose.js',
-          '<%= appDir %>/themes/baggy/js/autoCompleteTags.js',
-          '<%= appDir %>/themes/baggy/js/closeMessage.js',
-          '<%= appDir %>/themes/baggy/js/popupForm.js',
-          // Save link is no more used for now
-          // '<%= appDir %>/themes/baggy/js/saveLink.js',
-        ],
-        dest: '<%= buildDir %>/baggy.js',
-      },
       cssMaterial: {
         src: [
           'node_modules/materialize-css/bin/materialize.css',
@@ -77,8 +57,37 @@ module.exports = function (grunt) {
       },
     },
     browserify: {
-      '<%= buildDir %>/material.browser.js': ['<%= buildDir %>/material.js'],
+      dist: {
-      '<%= buildDir %>/baggy.browser.js': ['<%= buildDir %>/baggy.js'],
+        files: {
+          '<%= buildDir %>/material.browser.js': ['<%= appDir %>/themes/material/js/init.js'],
+          '<%= buildDir %>/baggy.browser.js': ['<%= appDir %>/themes/baggy/js/init.js']
+        }
+      },
+      options: {
+        sourceType: "module",
+        transform: [
+          ["babelify", {
+          presets: ["es2015"]
+        }], ["browserify-shim", {
+            "jquery": {
+              "exports": "$"
+            },
+            "materialize": "materialize",
+            "jquery-ui": {
+              "depends": "jquery",
+              "exports": null
+            }
+          }]
+        ],
+        browserifyOptions: {
+          browser: {
+            "jQuery": "./node_modules/jquery/dist/jquery.js",
+            "jquery.tinydot": "./node_modules/jquery.tinydot/src/jquery.tinydot.js",
+            "jquery.ui": "./node_modules/jquery-ui-browserify/dist/jquery-ui.js"
+          }
+        }
+      }
+
     },
     uglify: {
       material: {
@@ -103,13 +112,13 @@ module.exports = function (grunt) {
     copy: {
       pickerjs: {
         expand: true,
-        cwd: 'node_modules/pickadate/lib',
+        cwd: '<%= modulesDir %>/pickadate/lib',
         src: 'picker.js',
         dest: '<%= buildDir %>',
       },
       annotator: {
         expand: true,
-        cwd: 'node_modules/annotator/pkg',
+        cwd: '<%= modulesDir %>/annotator/pkg',
         src: 'annotator.min.js',
         dest: '<%= buildDir %>/themes/_global/js/',
       },
@@ -120,14 +129,21 @@ module.exports = function (grunt) {
           {
             expand: true,
             overwrite: true,
-            cwd: '<%= appDir %>/lib/icomoon-bower/',
+            cwd: '<%= modulesDir %>/icomoon-free-npm/Font',
-            src: 'fonts',
+            src: 'IcoMoon-Free.ttf',
-            dest: '<%= buildDir %>/themes/baggy/',
+            dest: '<%= buildDir %>/themes/baggy/fonts/',
           },
           {
             expand: true,
             overwrite: true,
-            cwd: '<%= appDir %>/lib/bower-pt-sans/fonts',
+            cwd: '<%= modulesDir %>/ptsans-npm-webfont/fonts',
+            src: '*',
+            dest: '<%= buildDir %>/themes/baggy/fonts/',
+          },
+          {
+            expand: true,
+            overwrite: true,
+            cwd: '<%= modulesDir %>/material-design-icons-iconfont/dist/fonts/',
             src: '*',
             dest: '<%= buildDir %>/themes/baggy/fonts/',
           },
@@ -138,28 +154,28 @@ module.exports = function (grunt) {
           {
             expand: true,
             overwrite: true,
-            cwd: '<%= appDir %>/lib/icomoon-bower/',
+            cwd: '<%= modulesDir %>/icomoon-free-npm/Font',
-            src: 'fonts',
+            src: 'IcoMoon-Free.ttf',
-            dest: '<%= buildDir %>/themes/material/',
+            dest: '<%= buildDir %>/themes/material/fonts',
           },
           {
             expand: true,
             overwrite: true,
-            cwd: 'node_modules/materialize-css/',
+            cwd: '<%= modulesDir %>/materialize-css/',
             src: 'font',
             dest: '<%= buildDir %>/themes/material',
           },
           {
             expand: true,
             overwrite: true,
-            cwd: '<%= appDir %>/lib/roboto-fontface/fonts/',
+            cwd: '<%= modulesDir %>/roboto-fontface/fonts/Roboto',
             src: '*',
-            dest: '<%= buildDir %>/themes/material/fonts/roboto/',
+            dest: '<%= buildDir %>/themes/material/fonts/',
           },
           {
             expand: true,
             overwrite: true,
-            cwd: '<%= appDir %>/lib/material-design-icons-iconfont/dist/fonts/',
+            cwd: '<%= modulesDir %>/material-design-icons-iconfont/dist/fonts/',
             src: '*',
             dest: '<%= buildDir %>/themes/material/fonts/',
           },
@@ -199,7 +215,7 @@ module.exports = function (grunt) {
   grunt.registerTask(
     'js',
     'Build and install js files',
-    ['clean:js', 'copy:pickerjs', 'concat:jsMaterial', 'concat:jsBaggy', 'browserify', 'uglify']
+    ['clean:js', 'copy:pickerjs', 'browserify', 'uglify']
     );
 
   grunt.registerTask(

app/Resources/static/themes/_global/js/bookmarklet.js

@@ -1,2 +1,6 @@
 
-top["bookmarklet-url@wallabag.org"]=""+"<!DOCTYPE html>"+"<html>"+"<head>"+"<title>bag it!</title>"+'<link rel="icon" href="tpl/img/favicon.ico" />'+"</head>"+"<body>"+"<script>"+"window.onload=function(){"+"window.setTimeout(function(){"+"history.back();"+"},250);"+"};"+"</scr"+"ipt>"+"</body>"+"</html>"
+top['bookmarklet-url@wallabag.org'] =
+    '<!DOCTYPE html><html><head><title>bag it!</title>' +
+    '<link rel="icon" href="tpl/img/favicon.ico" />' +
+    '</head><body><script>window.onload=function(){window.setTimeout' +
+    '(function(){history.back();},250);};</script></body></html>';

app/Resources/static/themes/_global/js/restoreScroll.js

@@ -1,25 +0,0 @@
-function supportsLocalStorage() {
-  try {
-    return 'localStorage' in window && window.localStorage !== null;
-  } catch (e) {
-    return false;
-  }
-}
-
-function savePercent(id, percent) {
-  if (!supportsLocalStorage()) { return false; }
-  localStorage['wallabag.article.' + id + '.percent'] = percent;
-  return true;
-}
-
-function retrievePercent(id) {
-  if (!supportsLocalStorage()) { return false; }
-
-  var bheight = $(document).height();
-  var percent = localStorage['wallabag.article.' + id + '.percent'];
-  var scroll = bheight * percent;
-
-  $('html,body').animate({ scrollTop: scroll }, 'fast');
-
-  return true;
-}

app/Resources/static/themes/_global/js/tools.js

@@ -0,0 +1,50 @@
+const $ = require('jquery');
+
+function supportsLocalStorage() {
+  try {
+    return 'localStorage' in window && window.localStorage !== null;
+  } catch (e) {
+    return false;
+  }
+}
+
+function savePercent(id, percent) {
+  if (!supportsLocalStorage()) { return false; }
+  localStorage[`wallabag.article.${id}.percent`] = percent;
+  return true;
+}
+
+function retrievePercent(id) {
+  if (!supportsLocalStorage()) { return false; }
+
+  const bheight = $(document).height();
+  const percent = localStorage[`wallabag.article.${id}.percent`];
+  const scroll = bheight * percent;
+
+  $('html,body').animate({ scrollTop: scroll }, 'fast');
+
+  return true;
+}
+
+function initFilters() {
+  // no display if filters not available
+  if ($('div').is('#filters')) {
+    $('#button_filters').show();
+    $('.button-collapse-right').sideNav({ edge: 'right' });
+    $('#clear_form_filters').on('click', () => {
+      $('#filters input').val('');
+      $('#filters :checked').removeAttr('checked');
+      return false;
+    });
+  }
+}
+
+function initExport() {
+  // no display if export not available
+  if ($('div').is('#export')) {
+    $('#button_export').show();
+    $('.button-collapse-right').sideNav({ edge: 'right' });
+  }
+}
+
+export { savePercent, retrievePercent, initFilters, initExport };

app/Resources/static/themes/baggy/css/font.css

@@ -2,5 +2,5 @@
   font-family: "PT Sans";
   font-style: normal;
   font-weight: 700;
-  src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/pt_sans/regular/PTS55F.woff") format("woff");
+  src: local("PT Sans Bold"), local("PTSans-Bold"), url("../fonts/ptsansbold.woff") format("woff");
 }

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 {
@@ -735,12 +732,7 @@ a.add-to-wallabag-link-after::after {
 
 @font-face {
   font-family: icomoon;
-  src: url("../fonts/icomoon.eot?-s0mcsx");
+  src: url("../fonts/IcoMoon-Free.ttf");
-  src:
-    url("../fonts/icomoon.eot?#iefix-s0mcsx")   format("embedded-opentype"),
-    url("../fonts/icomoon.woff?-s0mcsx")        format("woff"),
-    url("../fonts/icomoon.ttf?-s0mcsx")         format("truetype"),
-    url("../fonts/icomoon.svg?-s0mcsx#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -1071,7 +1063,7 @@ pre code {
   font-family: "Courier New", Courier, monospace;
 }
 
-#filter-form {
+#filters {
   position: fixed;
   width: 20%;
   height: 100%;
@@ -1086,7 +1078,7 @@ pre code {
   min-width: 300px;
 }
 
-#filter-form form .filter-group {
+#filters form .filter-group {
   margin: 5px;
 }
 
@@ -1125,9 +1117,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 +1131,7 @@ pre code {
   #article {
     width: 80%;
   }
+
   .topPosF {
     right: 2.5em;
   }
@@ -1147,6 +1142,7 @@ pre code {
     width: 100%;
     margin-left: 0;
   }
+
   #display-mode {
     display: none;
   }
@@ -1197,7 +1193,6 @@ pre code {
     height: auto;
     top: 0.5em;
     width: 75px;
-    height: 75px;
     margin-left: -37.5px;
   }
 
@@ -1214,6 +1209,7 @@ pre code {
     background-color: #999;
     font-size: 1.2em;
   }
+
   .desktopHide:hover,
   .desktopHide:focus {
     background-color: #fff;

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;
 }

app/Resources/static/themes/baggy/js/autoClose.js

@@ -1,8 +0,0 @@
-var $ = global.jquery = require('jquery');
-
-$(document).ready(function () {
-  var currentUrl = window.location.href;
-  if (currentUrl.match('&closewin=true')) {
-    window.close();
-  }
-});

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 ($) {
+export { split, extractLast };
-  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;
-    },
-  });
-});

app/Resources/static/themes/baggy/js/closeMessage.js

@@ -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;
-  });
-});

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');
+require('jquery-ui-browserify');
-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 () {
+$.fn.ready(() => {
-  var $listmode = $('#listmode');
+  const $listmode = $('#listmode');
-  var $listentries = $('#list-entries');
+  const $listentries = $('#list-entries');
 
   /* ==========================================================================
      Menu
      ========================================================================== */
 
-  $('#menu').click(function () {
+  $('#menu').click(() => {
     $('#links').toggleClass('menu--open');
-    if ($('#content').hasClass('opacity03')) {
+    const content = $('#content');
-      $('#content').removeClass('opacity03');
+    if (content.hasClass('opacity03')) {
+      content.removeClass('opacity03');
     }
   });
 
@@ -23,8 +27,8 @@ $.fn.ready(function () {
      List mode or Table Mode
      ========================================================================== */
 
-  $listmode.click(function () {
+  $listmode.click(() => {
-    if (jquery.cookie('listmode') === 1) {
+    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,255 @@ $.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) {
+  if ($('article').length) {
-      var app = new annotator.App();
+    const app = new annotator.App();
 
-      app.include(annotator.ui.main, {
+    app.include(annotator.ui.main, {
-        element: document.querySelector('article'),
+      element: document.querySelector('article'),
-      });
+    });
 
-      var x = JSON.parse($('#annotationroutes').html());
+    const x = JSON.parse($('#annotationroutes').html());
-      app.include(annotator.storage.http, x);
+    app.include(annotator.storage.http, x);
 
-      app.start().then(function () {
+    app.start().then(() => {
-        app.annotations.load({ entry: x.entryId });
+      app.annotations.load({ entry: x.entryId });
-      });
+    });
 
-      $(window).scroll(function (e) {
+    $(window).scroll(() => {
-        var scrollTop = $(window).scrollTop();
+      const scrollTop = $(window).scrollTop();
-        var docHeight = $(document).height();
+      const docHeight = $(document).height();
-        var scrollPercent = (scrollTop) / (docHeight);
+      const scrollPercent = (scrollTop) / (docHeight);
-        var scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
+      const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
-        savePercent(x.entryId, scrollPercentRounded);
+      savePercent(x.entryId, scrollPercentRounded);
-      });
+    });
 
+    retrievePercent(x.entryId);
+
+    $(window).resize(() => {
       retrievePercent(x.entryId);
+    });
+  }
 
-      $(window).resize(function () {
+  /**
-          retrievePercent(x.entryId);
+   * Close window after adding entry if popup
-      });
+   */
+  const currentUrl = window.location.href;
+  if (currentUrl.match('&closewin=true')) {
+    window.close();
+  }
+
+  /**
+   * Tags autocomplete
+   */
+  /**
+   * Not working on v2
+   *
+
+  $('#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();
+
+  //---------------------------------------------------------------------------
+  // 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();
+  });
 });

app/Resources/static/themes/baggy/js/popupForm.js

@@ -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();
-  });
-});

app/Resources/static/themes/baggy/js/saveLink.js

@@ -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();
-  });
-});

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 };

app/Resources/static/themes/material/css/main.css

@@ -19,12 +19,7 @@
 
 @font-face {
   font-family: icomoon;
-  src: url("../fonts/icomoon.eot");
+  src: url("../fonts/IcoMoon-Free.ttf");
-  src:
-    url("../fonts/icomoon.eot#iefix") format("embedded-opentype"),
-    url("../fonts/icomoon.ttf") format("truetype"),
-    url("../fonts/icomoon.woff") format("woff"),
-    url("../fonts/icomoon.svg#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
 }
@@ -174,7 +169,7 @@ div.pagination ul .next.disabled {
 
 footer.page-footer {
   margin-top: 10px;
-  padding-top: 0px;
+  padding-top: 0;
 }
 
 footer .row {
@@ -257,8 +252,9 @@ nav input {
   display: none;
 }
 
-.input-field.nav-panel-add, .input-field.nav-panel-add form {
+.input-field.nav-panel-add,
-    height: 100%;
+.input-field.nav-panel-add form {
+  height: 100%;
 }
 
 /* ==========================================================================
@@ -354,8 +350,9 @@ main ul.row {
   max-height: 64px;
 }
 
-.card .card-content i.right, .card .card-reveal i.right {
+.card .card-content i.right,
-    margin-left: 0;
+.card .card-reveal i.right {
+  margin-left: 0;
 }
 
 .card .card-entry-labels {
@@ -527,30 +524,38 @@ main ul.row {
   footer {
     padding-left: 0;
   }
+
   nav,
   main,
   footer {
     padding-left: 0;
   }
+
   .pagination {
     width: auto;
   }
+
   .reader-mode {
     width: 240px !important;
   }
+
   .reader-mode span {
     opacity: 1;
   }
+
   .tabs {
     display: inline-block;
     height: auto;
   }
+
   .tab {
     min-width: 100%;
   }
+
   .indicator {
     display: none;
   }
+
   .pagination li.prev,
   .pagination li.next {
     width: auto;
@@ -568,38 +573,47 @@ main ul.row {
     width: 25%;
     margin-left: 0;
   }
+
   .row .col.l2 {
     width: 33.33333%;
     margin-left: 0;
   }
+
   .row .col.l3 {
     width: 41.66667%;
     margin-left: 0;
   }
+
   .row .col.l4 {
     width: 50%;
     margin-left: 0;
   }
+
   .row .col.l5 {
     width: 58.33333%;
     margin-left: 0;
   }
+
   .row .col.l6 {
     width: 66.66667%;
     margin-left: 0;
   }
+
   .row .col.l7 {
     width: 75%;
     margin-left: 0;
   }
+
   .row .col.l8 {
     width: 83.33333%;
     margin-left: 0;
   }
+
   .row .col.l9 {
     width: 91.66667%;
     margin-left: 0;
   }
+
   .row .col.l10 {
     width: 100%;
     margin-left: 0;
@@ -645,7 +659,7 @@ main ul.row {
 }
 
 .icon-link::before {
-    content: "\e9cb";
+  content: "\e9cb";
 }
 
 footer [class^="icon-"],
@@ -676,5 +690,5 @@ div.settings div.file-field div {
 }
 
 .input-field label.active {
-    font-size: 1rem;
+  font-size: 1rem;
 }

app/Resources/static/themes/material/css/print.css

@@ -28,10 +28,10 @@
   .messages,
   .entry + .results,
   #slide-out,
-  .progress, .hide-on-large-only,
+  .progress,
+  .hide-on-large-only,
   #article > aside,
-  #article .mbm a
+  #article .mbm a {
-  {
     display: none !important;
   }
 

app/Resources/static/themes/material/js/init.js

@@ -1,29 +1,10 @@
-var $ = require('jquery');
+const $ = require('jquery');
-require('materialize');
+global.jQuery = $;
-var annotator = require('annotator');
+require('materialize'); // eslint-disable-line
+const annotator = require('annotator');
+import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools.js';
 
-function initFilters() {
+$(document).ready(() => {
-  // no display if filters not aviable
-  if ($('div').is('#filters')) {
-    $('#button_filters').show();
-    $('.button-collapse-right').sideNav({ edge: 'right' });
-    $('#clear_form_filters').on('click', function () {
-      $('#filters input').val('');
-      $('#filters :checked').removeAttr('checked');
-      return false;
-    });
-  }
-}
-
-function initExport() {
-  // no display if export not aviable
-  if ($('div').is('#export')) {
-    $('#button_export').show();
-    $('.button-collapse-right').sideNav({ edge: 'right' });
-  }
-}
-
-$(document).ready(function () {
   // sideNav
   $('.button-collapse').sideNav();
   $('select').material_select();
@@ -40,13 +21,13 @@ $(document).ready(function () {
   initFilters();
   initExport();
 
-  $('#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;
   });
-  $('#nav-btn-add').on('click', function () {
+  $('#nav-btn-add').on('click', () => {
     $('.nav-panel-buttom').hide(100);
     $('.nav-panel-add').show(100);
     $('.nav-panels .action').hide(100);
@@ -55,7 +36,7 @@ $(document).ready(function () {
     $('#entry_url').focus();
     return false;
   });
-  $('#nav-btn-search').on('click', function () {
+  $('#nav-btn-search').on('click', () => {
     $('.nav-panel-buttom').hide(100);
     $('.nav-panel-search').show(100);
     $('.nav-panels .action').hide(100);
@@ -64,7 +45,7 @@ $(document).ready(function () {
     $('#searchfield').focus();
     return false;
   });
-  $('.close').on('click', function () {
+  $('.close').on('click', () => {
     $('.nav-panel-add').hide(100);
     $('.nav-panel-search').hide(100);
     $('.nav-panel-buttom').show(100);
@@ -73,12 +54,12 @@ $(document).ready(function () {
     $('.nav-panels').css('background', 'transparent');
     return false;
   });
-  $(window).scroll(function () {
+  $(window).scroll(() => {
-    var s = $(window).scrollTop();
+    const s = $(window).scrollTop();
-    var d = $(document).height();
+    const d = $(document).height();
-    var c = $(window).height();
+    const c = $(window).height();
-    var scrollPercent = (s / (d - c)) * 100;
+    const scrollPercent = (s / (d - c)) * 100;
-    $('.progress .determinate').css('width', scrollPercent + '%');
+    $('.progress .determinate').css('width', `${scrollPercent}%`);
   });
 
 /* ==========================================================================
@@ -86,9 +67,8 @@ $(document).ready(function () {
    ========================================================================== */
 
   if ($('article').length) {
-    var app = new annotator.App();
+    const app = new annotator.App();
-    var x = JSON.parse($('#annotationroutes').html());
+    const x = JSON.parse($('#annotationroutes').html());
-
 
     app.include(annotator.ui.main, {
       element: document.querySelector('article'),
@@ -96,21 +76,21 @@ $(document).ready(function () {
 
     app.include(annotator.storage.http, x);
 
-    app.start().then(function () {
+    app.start().then(() => {
       app.annotations.load({ entry: x.entryId });
     });
 
-    $(window).scroll(function (e) {
+    $(window).scroll(() => {
-      var scrollTop = $(window).scrollTop();
+      const scrollTop = $(window).scrollTop();
-      var docHeight = $(document).height();
+      const docHeight = $(document).height();
-      var scrollPercent = (scrollTop) / (docHeight);
+      const scrollPercent = (scrollTop) / (docHeight);
-      var scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
+      const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
       savePercent(x.entryId, scrollPercentRounded);
     });
 
     retrievePercent(x.entryId);
 
-    $(window).resize(function () {
+    $(window).resize(() => {
       retrievePercent(x.entryId);
     });
   }

bower.json

@@ -1,39 +0,0 @@
-{
-  "name": "wallabag",
-  "version": "2.0.0-beta.1",
-  "homepage": "https://github.com/wallabag/wallabag",
-  "authors": [
-    {
-      "name": "Nicolas Lœuillet",
-      "email": "nicolas@loeuillet.org",
-      "homepage": "http://www.cdetc.fr",
-      "role": "Developer"
-    },
-    {
-      "name": "Thomas Citharel",
-      "homepage": "http://tcit.fr",
-      "role": "Developer"
-    },
-    {
-      "name": "Jérémy Benoist",
-      "homepage": "http://www.j0k3r.net",
-      "role": "Developer"
-    }
-  ],
-  "description": "wallabag is a self hostable application for saving web pages",
-  "license": "MIT",
-  "main": "bower.json",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "icomoon-bower": "^0.1.0",
-    "bower-pt-sans": "pt-sans#*",
-    "roboto-fontface": "^0.4.5",
-    "material-design-icons-iconfont": "^2.0.4"
-  }
-}

install.sh

@@ -5,12 +5,9 @@ if [[ $ASSETS == 'build' ]]; then
     composer install --no-interaction --no-progress --prefer-dist -o
 
     chmod ugo+x vendor/mouf/nodejs-installer/bin/local/npm
-    echo "Downloading javascript librairies through npm..."
+    echo "Downloading librairies through npm..."
     vendor/mouf/nodejs-installer/bin/local/npm install
 
-    echo "Downloading fonts librairies through bower..."
-    node_modules/bower/bin/bower install
-
     echo "Concat, minify and installing assets..."
     node_modules/grunt/bin/grunt
 else

install_dev.sh

@@ -3,12 +3,9 @@
 echo "Installing PHP dependencies (including dev) through Composer..."
 composer install
 
-echo "Downloading javascript librairies through npm..."
+echo "Downloading librairies through npm..."
 npm install
 
-echo "Downloading fonts librairies through bower..."
-bower install
-
 echo "Concat, minify and installing assets..."
 grunt
 

package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "annotator": "git://github.com/wallabag/annotator.git#0f076c7d371ed25eb0793346f46982d90f2c4c85",
     "autoprefixer": "^6.3.6",
-    "bower": "^1.7.7",
+    "babel-preset-es2015": "^6.14.0",
+    "babelify": "^7.3.0",
     "browserify": "^13.0.0",
     "browserify-shim": "^3.8.12",
     "cssnano": "^3.5.2",
@@ -25,17 +26,21 @@
     "grunt-contrib-uglify": "^1.0.0",
     "grunt-postcss": "^0.8.0",
     "hammerjs": "^2.0.6",
-    "jquery": "^2.2.1",
+    "icomoon-free-npm": "0.0.0",
-    "jquery-ui": "^1.10.5",
+    "jquery": "^2.2.4",
+    "jquery-ui-browserify": "^1.11.0-pre-seelio",
     "jquery.cookie": "^1.4.1",
     "jquery.tinydot": "^0.2.1",
     "load-grunt-tasks": "^3.4.1",
+    "material-design-icons-iconfont": "^3.0.0",
     "materialize-css": "0.97.5",
     "npm": "^3.8.3",
     "pickadate": "^3.5.6",
     "pixrem": "^3.0.0",
     "postcss-cssnext": "^2.5.1",
     "prismjs": "^1.4.1",
+    "ptsans-npm-webfont": "0.0.4",
+    "roboto-fontface": "^0.6.0",
     "through": "^2.3.8"
   },
   "engines": {
@@ -47,9 +52,14 @@
     "materialize": "./node_modules/materialize-css/bin/materialize.js"
   },
   "browserify-shim": {
-    "jquery": "$",
+    "jquery": {
-    "jQuery": "jQuery",
+      "exports": "$"
-    "materialize": "materialize"
+    },
+    "materialize": "materialize",
+    "jquery-ui": {
+      "depends": "jquery",
+      "exports": null
+    }
   },
   "browserify": {
     "transform": [
@@ -83,7 +93,10 @@
     "url": "https://github.com/wallabag/wallabag/issues"
   },
   "devDependencies": {
-    "eslint": "^2.11.1",
+    "babel-eslint": "^6.1.2",
-    "eslint-config-airbnb": "^9.0.1"
+    "eslint": "^2.13.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "stylelint": "^7.3.1",
+    "stylelint-config-standard": "^13.0.2"
   }
 }

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entries.html.twig

@@ -67,7 +67,7 @@
 
     <!-- Filter -->
     {% if form is not null %}
-    <aside id="filter-form" class="">
+    <div id="filters" class="">
         <form method="get" action="{{ path('all') }}">
             <h2>{{ 'entry.filters.title'|trans }}</h2>
             <a href="javascript: void(null);" id="filter-form-close" class="close-button--popup close-button">&times;</a>
@@ -147,6 +147,6 @@
                 <button class="btn waves-effect waves-light" type="submit" id="submit-filter" value="filter">{{ 'entry.filters.action.filter'|trans }}</button>
             </div>
         </form>
-    </aside>
+    </div>
     {% endif %}
 {% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/baggy/Entry/entry.html.twig

@@ -82,22 +82,4 @@
         "entryId": "{{ entry.id }}"
     }
     </script>
-    <script src="{{ asset('bundles/wallabagcore/themes/_global/js/restoreScroll.js')}}"></script>
-    <script type="text/javascript">
-        $(document).ready(function() {
-            $(window).scroll(function(e){
-                var scrollTop = $(window).scrollTop();
-                var docHeight = $(document).height();
-                var scrollPercent = (scrollTop) / (docHeight);
-                var scrollPercentRounded = Math.round(scrollPercent*100)/100;
-                savePercent({{ entry.id }}, scrollPercentRounded);
-            });
-
-            retrievePercent({{ entry.id }});
-
-            $(window).resize(function(){
-                retrievePercent({{ entry.id }});
-            });
-        });
-    </script>
 {% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/material/Entry/entries.html.twig

@@ -66,7 +66,7 @@
 
                             <p>{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;</p>
 
-                            <ul class="card-entry-tags">
+                            <ul class="card-entry-labels-hidden">
                                 {% for tag in entry.tags %}
                                     <li>{{ tag.label }}</li>
                                 {% endfor %}