diff --git a/.gitignore b/.gitignore index 8cd6a2922..ea9619e9a 100644 --- a/.gitignore +++ b/.gitignore @@ -29,7 +29,7 @@ web/uploads/ !/web/bundles/.gitkeep /web/assets/images/* !web/assets/images/.gitkeep -/web/wallassets/* +/web/build/* # Build /app/build diff --git a/CHANGELOG.md b/CHANGELOG.md index 67aac594d..e6ea39762 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/app/config/webpack/common.js b/app/config/webpack/common.js index bd4f3845d..e2c194677 100644 --- a/app/config/webpack/common.js +++ b/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: [ diff --git a/assets/_global/index.js b/assets/_global/index.js deleted file mode 100644 index 06664e939..000000000 --- a/assets/_global/index.js +++ /dev/null @@ -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(); - }); -}); diff --git a/assets/_global/js/bookmarklet.js b/assets/_global/js/bookmarklet.js deleted file mode 100644 index e1ee92234..000000000 --- a/assets/_global/js/bookmarklet.js +++ /dev/null @@ -1,4 +0,0 @@ -top['bookmarklet-url@wallabag.org'] = 'bag it!' - + '' - + ''; diff --git a/assets/_global/js/shortcuts/entry.js b/assets/_global/js/shortcuts/entry.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/assets/_global/js/shortcuts/main.js b/assets/_global/js/shortcuts/main.js deleted file mode 100644 index b99fa802a..000000000 --- a/assets/_global/js/shortcuts/main.js +++ /dev/null @@ -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'); }); diff --git a/assets/_global/js/tools.js b/assets/_global/js/tools.js deleted file mode 100644 index 7e5a2b271..000000000 --- a/assets/_global/js/tools.js +++ /dev/null @@ -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 }; diff --git a/assets/_global/share.js b/assets/_global/share.js deleted file mode 100644 index d70786165..000000000 --- a/assets/_global/share.js +++ /dev/null @@ -1 +0,0 @@ -import './share.scss'; diff --git a/assets/_global/img/icons/diaspora-icon--black.png b/assets/img/icons/diaspora-icon--black.png similarity index 100% rename from assets/_global/img/icons/diaspora-icon--black.png rename to assets/img/icons/diaspora-icon--black.png diff --git a/assets/_global/img/icons/linkding.svg b/assets/img/icons/linkding.svg similarity index 100% rename from assets/_global/img/icons/linkding.svg rename to assets/img/icons/linkding.svg diff --git a/assets/_global/img/icons/scuttle.png b/assets/img/icons/scuttle.png similarity index 100% rename from assets/_global/img/icons/scuttle.png rename to assets/img/icons/scuttle.png diff --git a/assets/_global/img/icons/shaarli.png b/assets/img/icons/shaarli.png similarity index 100% rename from assets/_global/img/icons/shaarli.png rename to assets/img/icons/shaarli.png diff --git a/assets/_global/img/icons/unmark-icon--black.png b/assets/img/icons/unmark-icon--black.png similarity index 100% rename from assets/_global/img/icons/unmark-icon--black.png rename to assets/img/icons/unmark-icon--black.png diff --git a/assets/material/index.js b/assets/index.js similarity index 65% rename from assets/material/index.js rename to assets/index.js index 473a55c65..83852e250 100755 --- a/assets/material/index.js +++ b/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 = { diff --git a/assets/_global/js/highlight.js b/assets/js/highlight.js similarity index 100% rename from assets/_global/js/highlight.js rename to assets/js/highlight.js diff --git a/assets/material/js/shortcuts/entry.js b/assets/js/shortcuts/entry.js similarity index 100% rename from assets/material/js/shortcuts/entry.js rename to assets/js/shortcuts/entry.js diff --git a/assets/material/js/shortcuts/main.js b/assets/js/shortcuts/main.js similarity index 74% rename from assets/material/js/shortcuts/main.js rename to assets/js/shortcuts/main.js index 771cfb783..8033d9651 100644 --- a/assets/material/js/shortcuts/main.js +++ b/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'); diff --git a/assets/material/js/tools.js b/assets/js/tools.js similarity index 65% rename from assets/material/js/tools.js rename to assets/js/tools.js index c497dee38..2fdd1c38d 100644 --- a/assets/material/js/tools.js +++ b/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, diff --git a/assets/material/css/article.scss b/assets/scss/_article.scss similarity index 100% rename from assets/material/css/article.scss rename to assets/scss/_article.scss diff --git a/assets/material/css/cards.scss b/assets/scss/_cards.scss similarity index 100% rename from assets/material/css/cards.scss rename to assets/scss/_cards.scss diff --git a/assets/material/css/dark_theme.scss b/assets/scss/_dark_theme.scss similarity index 100% rename from assets/material/css/dark_theme.scss rename to assets/scss/_dark_theme.scss diff --git a/assets/material/css/entries.scss b/assets/scss/_entries.scss similarity index 100% rename from assets/material/css/entries.scss rename to assets/scss/_entries.scss diff --git a/assets/material/css/filters.scss b/assets/scss/_filters.scss similarity index 100% rename from assets/material/css/filters.scss rename to assets/scss/_filters.scss diff --git a/assets/material/css/fonts.scss b/assets/scss/_fonts.scss similarity index 100% rename from assets/material/css/fonts.scss rename to assets/scss/_fonts.scss diff --git a/assets/material/css/icons.scss b/assets/scss/_icons.scss similarity index 87% rename from assets/material/css/icons.scss rename to assets/scss/_icons.scss index f2e307434..4b96da0cf 100644 --- a/assets/material/css/icons.scss +++ b/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%; } } diff --git a/assets/material/css/layout.scss b/assets/scss/_layout.scss similarity index 100% rename from assets/material/css/layout.scss rename to assets/scss/_layout.scss diff --git a/assets/_global/global.scss b/assets/scss/_material-icons.scss similarity index 100% rename from assets/_global/global.scss rename to assets/scss/_material-icons.scss diff --git a/assets/material/css/media_queries.scss b/assets/scss/_media_queries.scss similarity index 100% rename from assets/material/css/media_queries.scss rename to assets/scss/_media_queries.scss diff --git a/assets/material/css/nav.scss b/assets/scss/_nav.scss similarity index 100% rename from assets/material/css/nav.scss rename to assets/scss/_nav.scss diff --git a/assets/material/css/print.scss b/assets/scss/_print.scss similarity index 100% rename from assets/material/css/print.scss rename to assets/scss/_print.scss diff --git a/assets/material/css/sidenav.scss b/assets/scss/_sidenav.scss similarity index 100% rename from assets/material/css/sidenav.scss rename to assets/scss/_sidenav.scss diff --git a/assets/material/css/variables.scss b/assets/scss/_variables.scss similarity index 100% rename from assets/material/css/variables.scss rename to assets/scss/_variables.scss diff --git a/assets/material/css/various.scss b/assets/scss/_various.scss similarity index 100% rename from assets/material/css/various.scss rename to assets/scss/_various.scss diff --git a/assets/material/css/index.scss b/assets/scss/index.scss similarity index 91% rename from assets/material/css/index.scss rename to assets/scss/index.scss index c90def53e..81f5b578f 100644 --- a/assets/material/css/index.scss +++ b/assets/scss/index.scss @@ -1,3 +1,4 @@ +@use "material-icons"; @use "variables"; /* Style */ diff --git a/assets/_global/share.scss b/assets/scss/share.scss similarity index 100% rename from assets/_global/share.scss rename to assets/scss/share.scss diff --git a/assets/share.js b/assets/share.js new file mode 100644 index 000000000..b4815d817 --- /dev/null +++ b/assets/share.js @@ -0,0 +1 @@ +import './scss/share.scss'; diff --git a/templates/Entry/share.html.twig b/templates/Entry/share.html.twig index c8cf32eaf..ecf94d547 100644 --- a/templates/Entry/share.html.twig +++ b/templates/Entry/share.html.twig @@ -18,9 +18,9 @@ {% if app.debug %} - + {% else %} - + {% endif %} diff --git a/templates/layout.html.twig b/templates/layout.html.twig index 98e1adfaa..1ac6769ed 100644 --- a/templates/layout.html.twig +++ b/templates/layout.html.twig @@ -3,13 +3,13 @@ {% block css %} {{ parent() }} {% if not app.debug %} - + {% endif %} {% endblock %} {% block scripts %} {{ parent() }} - + {% endblock %} {% block header %}