Merge pull request #7969 from wallabag/simplify-assets-structure

Simplify assets structure

.gitignore

@@ -29,7 +29,7 @@ web/uploads/
 !/web/bundles/.gitkeep
 /web/assets/images/*
 !web/assets/images/.gitkeep
-/web/wallassets/*
+/web/build/*
 
 # Build
 /app/build

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Upcoming changes
+
+* `wallassets/` folder renamed to `build/`
+
 ## [2.6.10](https://github.com/wallabag/wallabag/tree/2.6.10)
 [Full Changelog](https://github.com/wallabag/wallabag/compare/2.6.9...2.6.10)
 

app/config/webpack/common.js

@@ -6,12 +6,12 @@ const projectDir = path.resolve(__dirname, '../../../');
 
 module.exports = {
   entry: {
-    material: path.join(projectDir, './assets/material/index.js'),
-    public: path.join(projectDir, './assets/_global/share.js'),
+    main: path.join(projectDir, './assets/index.js'),
+    public: path.join(projectDir, './assets/share.js'),
   },
   output: {
     filename: '[name].js',
-    path: path.resolve(projectDir, 'web/wallassets'),
+    path: path.resolve(projectDir, 'web/build'),
     publicPath: '',
   },
   plugins: [

assets/_global/index.js

@@ -1,124 +0,0 @@
-/* jQuery */
-import $ from 'jquery';
-
-/* Annotations */
-import annotator from 'annotator';
-
-import ClipboardJS from 'clipboard';
-import 'mathjax/es5/tex-svg';
-
-/* Fonts */
-import 'material-design-icons-iconfont/dist/material-design-icons.css';
-import 'lato-font/css/lato-font.css';
-import 'open-dyslexic/open-dyslexic-regular.css';
-import '@fontsource/atkinson-hyperlegible';
-import '@fontsource/eb-garamond';
-import '@fontsource/montserrat';
-import '@fontsource/oswald';
-import './global.scss';
-
-/* Shortcuts */
-import './js/shortcuts/entry';
-import './js/shortcuts/main';
-
-/* Highlight */
-import './js/highlight';
-
-import { savePercent, retrievePercent } from './js/tools';
-
-/* ==========================================================================
- Annotations & Remember position
- ========================================================================== */
-
-$(document).ready(() => {
-  if ($('#article').length) {
-    const app = new annotator.App();
-
-    app.include(annotator.ui.main, {
-      element: document.querySelector('article'),
-    });
-
-    const authorization = {
-      permits() { return true; },
-    };
-    app.registry.registerUtility(authorization, 'authorizationPolicy');
-
-    const x = JSON.parse($('#annotationroutes').html());
-    app.include(annotator.storage.http, $.extend({}, x, {
-      onError(msg, xhr) {
-        if (!Object.prototype.hasOwnProperty.call(xhr, 'responseJSON')) {
-          annotator.notification.banner('An error occurred', 'error');
-          return;
-        }
-        $.each(xhr.responseJSON.children, (k, v) => {
-          if (v.errors) {
-            $.each(v.errors, (n, errorText) => {
-              annotator.notification.banner(errorText, 'error');
-            });
-          }
-        });
-      },
-    }));
-
-    app.start().then(() => {
-      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);
-    });
-
-    retrievePercent(x.entryId);
-
-    $(window).resize(() => {
-      retrievePercent(x.entryId, true);
-    });
-  }
-
-  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
-    const current = item;
-    current.wallabag_edit_mode = false;
-    current.onclick = (event) => {
-      const target = event.currentTarget;
-
-      if (target.wallabag_edit_mode === false) {
-        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
-        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
-        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
-        target.querySelector('.material-icons').innerHTML = 'done';
-
-        target.wallabag_edit_mode = true;
-      } else {
-        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
-      }
-    };
-  });
-
-  // mimic radio button because emailTwoFactor is a boolean
-  $('#update_user_googleTwoFactor').on('change', () => {
-    $('#update_user_emailTwoFactor').prop('checked', false);
-  });
-
-  $('#update_user_emailTwoFactor').on('change', () => {
-    $('#update_user_googleTwoFactor').prop('checked', false);
-  });
-
-  // same mimic for super admin
-  $('#user_googleTwoFactor').on('change', () => {
-    $('#user_emailTwoFactor').prop('checked', false);
-  });
-
-  $('#user_emailTwoFactor').on('change', () => {
-    $('#user_googleTwoFactor').prop('checked', false);
-  });
-
-  // handle copy to clipboard for developer stuff
-  const clipboard = new ClipboardJS('.btn');
-  clipboard.on('success', (e) => {
-    e.clearSelection();
-  });
-});

assets/_global/js/bookmarklet.js

@@ -1,4 +0,0 @@
-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>';

assets/_global/js/shortcuts/main.js

@@ -1,15 +0,0 @@
-import Mousetrap from 'mousetrap';
-
-/* Shortcuts */
-
-/* Go to */
-Mousetrap.bind('g u', () => { window.location.href = Routing.generate('homepage'); });
-Mousetrap.bind('g s', () => { window.location.href = Routing.generate('starred'); });
-Mousetrap.bind('g r', () => { window.location.href = Routing.generate('archive'); });
-Mousetrap.bind('g a', () => { window.location.href = Routing.generate('all'); });
-Mousetrap.bind('g t', () => { window.location.href = Routing.generate('tag'); });
-Mousetrap.bind('g c', () => { window.location.href = Routing.generate('config'); });
-Mousetrap.bind('g i', () => { window.location.href = Routing.generate('import'); });
-Mousetrap.bind('g d', () => { window.location.href = Routing.generate('developer'); });
-Mousetrap.bind('?', () => { window.location.href = Routing.generate('howto'); });
-Mousetrap.bind('g l', () => { window.location.href = Routing.generate('fos_user_security_logout'); });

assets/_global/js/tools.js

@@ -1,36 +0,0 @@
-import $ from 'jquery';
-import './shortcuts/main';
-import './shortcuts/entry';
-
-/* Allows inline call qr-code call */
-import jrQrcode from 'jr-qrcode'; // eslint-disable-line
-
-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, resized) {
-  if (!supportsLocalStorage()) { return false; }
-
-  const bheight = $(document).height();
-  const percent = localStorage[`wallabag.article.${id}.percent`];
-  const scroll = bheight * percent;
-
-  if (!resized) {
-    $('html,body').animate({ scrollTop: scroll }, 'fast');
-  }
-
-  return true;
-}
-
-export { savePercent, retrievePercent };

assets/_global/share.js

@@ -1 +0,0 @@
-import './share.scss';

assets/index.js

@@ -4,12 +4,27 @@ import $ from 'jquery';
 import 'materialize-css/dist/css/materialize.css';
 import 'materialize-css/dist/js/materialize';
 
-/* Global imports */
-import '../_global/index';
+/* Annotations */
+import annotator from 'annotator';
+
+import ClipboardJS from 'clipboard';
+import 'mathjax/es5/tex-svg';
+
+/* Fonts */
+import 'material-design-icons-iconfont/dist/material-design-icons.css';
+import 'lato-font/css/lato-font.css';
+import 'open-dyslexic/open-dyslexic-regular.css';
+import '@fontsource/atkinson-hyperlegible';
+import '@fontsource/eb-garamond';
+import '@fontsource/montserrat';
+import '@fontsource/oswald';
+
+/* Highlight */
+import './js/highlight';
 
 /* Tools */
 import {
-  initExport, initFilters, initRandom, initPreviewText,
+  savePercent, retrievePercent, initExport, initFilters, initRandom, initPreviewText,
 } from './js/tools';
 
 /* Import shortcuts */
@@ -17,10 +32,107 @@ import './js/shortcuts/main';
 import './js/shortcuts/entry';
 
 /* Theme style */
-import './css/index.scss';
+import './scss/index.scss';
 
 const mobileMaxWidth = 993;
 
+/* ==========================================================================
+ Annotations & Remember position
+ ========================================================================== */
+
+$(document).ready(() => {
+  if ($('#article').length) {
+    const app = new annotator.App();
+
+    app.include(annotator.ui.main, {
+      element: document.querySelector('article'),
+    });
+
+    const authorization = {
+      permits() { return true; },
+    };
+    app.registry.registerUtility(authorization, 'authorizationPolicy');
+
+    const x = JSON.parse($('#annotationroutes').html());
+    app.include(annotator.storage.http, $.extend({}, x, {
+      onError(msg, xhr) {
+        if (!Object.prototype.hasOwnProperty.call(xhr, 'responseJSON')) {
+          annotator.notification.banner('An error occurred', 'error');
+          return;
+        }
+        $.each(xhr.responseJSON.children, (k, v) => {
+          if (v.errors) {
+            $.each(v.errors, (n, errorText) => {
+              annotator.notification.banner(errorText, 'error');
+            });
+          }
+        });
+      },
+    }));
+
+    app.start().then(() => {
+      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);
+    });
+
+    retrievePercent(x.entryId);
+
+    $(window).resize(() => {
+      retrievePercent(x.entryId, true);
+    });
+  }
+
+  document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
+    const current = item;
+    current.wallabag_edit_mode = false;
+    current.onclick = (event) => {
+      const target = event.currentTarget;
+
+      if (target.wallabag_edit_mode === false) {
+        $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
+        $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
+        target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
+        target.querySelector('.material-icons').innerHTML = 'done';
+
+        target.wallabag_edit_mode = true;
+      } else {
+        target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
+      }
+    };
+  });
+
+  // mimic radio button because emailTwoFactor is a boolean
+  $('#update_user_googleTwoFactor').on('change', () => {
+    $('#update_user_emailTwoFactor').prop('checked', false);
+  });
+
+  $('#update_user_emailTwoFactor').on('change', () => {
+    $('#update_user_googleTwoFactor').prop('checked', false);
+  });
+
+  // same mimic for super admin
+  $('#user_googleTwoFactor').on('change', () => {
+    $('#user_emailTwoFactor').prop('checked', false);
+  });
+
+  $('#user_emailTwoFactor').on('change', () => {
+    $('#user_googleTwoFactor').prop('checked', false);
+  });
+
+  // handle copy to clipboard for developer stuff
+  const clipboard = new ClipboardJS('.btn');
+  clipboard.on('success', (e) => {
+    e.clearSelection();
+  });
+});
+
 (function darkTheme() {
   const rootEl = document.querySelector('html');
   const themeDom = {

assets/js/shortcuts/main.js

@@ -1,6 +1,18 @@
 import Mousetrap from 'mousetrap';
 import $ from 'jquery';
 
+/* Go to */
+Mousetrap.bind('g u', () => { window.location.href = Routing.generate('homepage'); });
+Mousetrap.bind('g s', () => { window.location.href = Routing.generate('starred'); });
+Mousetrap.bind('g r', () => { window.location.href = Routing.generate('archive'); });
+Mousetrap.bind('g a', () => { window.location.href = Routing.generate('all'); });
+Mousetrap.bind('g t', () => { window.location.href = Routing.generate('tag'); });
+Mousetrap.bind('g c', () => { window.location.href = Routing.generate('config'); });
+Mousetrap.bind('g i', () => { window.location.href = Routing.generate('import'); });
+Mousetrap.bind('g d', () => { window.location.href = Routing.generate('developer'); });
+Mousetrap.bind('?', () => { window.location.href = Routing.generate('howto'); });
+Mousetrap.bind('g l', () => { window.location.href = Routing.generate('fos_user_security_logout'); });
+
 function toggleFocus(cardToToogleFocus) {
   if (cardToToogleFocus) {
     $(cardToToogleFocus).toggleClass('z-depth-4');

assets/js/tools.js

@@ -1,5 +1,36 @@
 import $ from 'jquery';
 
+/* Allows inline call qr-code call */
+import jrQrcode from 'jr-qrcode'; // eslint-disable-line
+
+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, resized) {
+  if (!supportsLocalStorage()) { return false; }
+
+  const bheight = $(document).height();
+  const percent = localStorage[`wallabag.article.${id}.percent`];
+  const scroll = bheight * percent;
+
+  if (!resized) {
+    $('html,body').animate({ scrollTop: scroll }, 'fast');
+  }
+
+  return true;
+}
+
 function initFilters() {
   // no display if filters not available
   if ($('div').is('#filters')) {
@@ -46,6 +77,8 @@ function initPreviewText() {
 }
 
 export {
+  savePercent,
+  retrievePercent,
   initExport,
   initFilters,
   initRandom,

assets/scss/_icons.scss

@@ -125,24 +125,24 @@ a.icon-image {
   }
 
   &.diaspora::before {
-    background: url("../../_global/img/icons/diaspora-icon--black.png") no-repeat center/80%;
+    background: url("../img/icons/diaspora-icon--black.png") no-repeat center/80%;
   }
 
   &.unmark::before {
-    background: url("../../_global/img/icons/unmark-icon--black.png") no-repeat center/80%;
+    background: url("../img/icons/unmark-icon--black.png") no-repeat center/80%;
   }
 
   &.linkding::before {
-    background: url("../../_global/img/icons/linkding.svg") no-repeat center/80%;
+    background: url("../img/icons/linkding.svg") no-repeat center/80%;
     filter: grayscale(1);
   }
 
   &.shaarli::before {
-    background: url("../../_global/img/icons/shaarli.png") no-repeat center/80%;
+    background: url("../img/icons/shaarli.png") no-repeat center/80%;
   }
 
   &.scuttle::before {
-    background: url("../../_global/img/icons/scuttle.png") no-repeat center/80%;
+    background: url("../img/icons/scuttle.png") no-repeat center/80%;
   }
 }
 

assets/scss/index.scss

@@ -1,3 +1,4 @@
+@use "material-icons";
 @use "variables";
 
 /* Style */

assets/share.js

@@ -0,0 +1 @@
+import './scss/share.scss';

templates/Entry/share.html.twig

@@ -18,9 +18,9 @@
         <meta name="twitter:title" content="{{ entry.title|e|raw }}" />
         <meta name="twitter:description" content="{{ entry.content|striptags|slice(0, 300)|raw }}&hellip;" />
         {% if app.debug %}
-            <script src="{{ asset('wallassets/public.dev.js') }}"></script>
+            <script src="{{ asset('build/public.dev.js') }}"></script>
         {% else %}
-            <link rel="stylesheet" href="{{ asset('wallassets/public.css') }}">
+            <link rel="stylesheet" href="{{ asset('build/public.css') }}">
         {% endif %}
 
     </head>

templates/layout.html.twig

@@ -3,13 +3,13 @@
 {% block css %}
     {{ parent() }}
     {% if not app.debug %}
-        <link rel="stylesheet" href="{{ asset('wallassets/material.css') }}">
+        <link rel="stylesheet" href="{{ asset('build/main.css') }}">
     {% endif %}
 {% endblock %}
 
 {% block scripts %}
     {{ parent() }}
-    <script src="{{ asset('wallassets/material' ~ (app.debug ? '.dev' : '') ~ '.js') }}"></script>
+    <script src="{{ asset('build/main' ~ (app.debug ? '.dev' : '') ~ '.js') }}"></script>
 {% endblock %}
 
 {% block header %}