diff --git a/app/views/footer.php b/app/views/footer.php index c089893b..e2bdf90e 100644 --- a/app/views/footer.php +++ b/app/views/footer.php @@ -12,11 +12,11 @@ isAuthenticated()): ?> - - + + - - + + diff --git a/app/views/header.php b/app/views/header.php index 77eee069..25828f09 100644 --- a/app/views/header.php +++ b/app/views/header.php @@ -6,11 +6,7 @@ - get('theme') !== 'auto'): ?> - - get('theme') === 'auto'): ?> - - + diff --git a/frontEndSrc/build-js.js b/frontEndSrc/build-js.js new file mode 100644 index 00000000..a4cc6199 --- /dev/null +++ b/frontEndSrc/build-js.js @@ -0,0 +1,71 @@ +import compiler from '@ampproject/rollup-plugin-closure-compiler'; +import { terser } from 'rollup-plugin-terser'; + +const plugins = [ + compiler({ + assumeFunctionWrapper: true, + compilationLevel: 'WHITESPACE_ONLY', //'ADVANCED', + createSourceMap: true, + env: 'BROWSER', + languageIn: 'ECMASCRIPT_2018', + languageOut: 'ES3' + }) +]; + +const defaultOutput = { + format: 'iife', + sourcemap: true, +} + +const nonModules = [{ + input: './js/anon.js', + output: { + ...defaultOutput, + file: '../public/js/anon.min.js', + sourcemapFile: '../public/js/anon.min.js.map', + }, + plugins, +}, { + input: './js/index.js', + output: { + ...defaultOutput, + file: '../public/js/scripts.min.js', + sourcemapFile: '../public/js/scripts.min.js.map', + }, + plugins, +}, { + input: './js/base/sort-tables.js', + output: { + ...defaultOutput, + file: '../public/js/tables.min.js', + sourcemapFile: '../public/js/tables.min.js.map', + }, + plugins, +}]; + +const moduleOutput = { + format: 'es', + sourcemap: false, +} + +let modules = [{ + input: './js/anon.js', + output: { + ...moduleOutput, + file: '../public/es/anon.min.js', + }, + plugins: [terser()], +}, { + input: './js/index.js', + output: { + ...moduleOutput, + file: '../public/es/scripts.min.js', + }, + plugins: [terser()], +}]; + +// Return the config array for rollup +export default [ + ...nonModules, + ...modules, +]; \ No newline at end of file diff --git a/public/tools/css.js b/frontEndSrc/css.js similarity index 50% rename from public/tools/css.js rename to frontEndSrc/css.js index 7877a57a..4b02f04e 100644 --- a/public/tools/css.js +++ b/frontEndSrc/css.js @@ -7,8 +7,9 @@ const atImport = require('postcss-import'); const cssNext = require('postcss-preset-env'); const cssNano = require('cssnano'); -const css = fs.readFileSync('css/src/all.css', 'utf-8'); +const lightCss = fs.readFileSync('css/light.css', 'utf-8'); const darkCss = fs.readFileSync('css/src/dark-override.css', 'utf-8'); +const fullDarkCss = fs.readFileSync('css/dark.css', 'utf-8'); const minOptions = { autoprefixer: false, @@ -29,28 +30,37 @@ const processOptions = { (async () => { // Basic theme - const light = await postcss() + const lightMin = await postcss() .use(atImport()) .use(cssNext(processOptions)) .use(cssNano(minOptions)) - .process(css, { - from: 'css/src/all.css', - to: 'css/app.min.css', + .process(lightCss, { + from: 'css/light.css', + to: '/public/css/light.min.css', }); - fs.writeFileSync('css/app.min.css', light); + fs.writeFileSync('../public/css/light.min.css', lightMin); // Dark theme - const dark = await postcss() + const darkFullMin = await postcss() + .use(atImport()) + .use(cssNext(processOptions)) + .use(cssNano(minOptions)) + .process(fullDarkCss, { + from: 'css/dark.css', + to: '/public/css/dark.min.css', + }); + fs.writeFileSync('../public/css/dark.min.css', darkFullMin); + + // Dark override + const darkMin = await postcss() .use(atImport()) .use(cssNext(processOptions)) .use(cssNano(minOptions)) .process(darkCss, { from: 'css/dark-override.css', - to: 'css/dark.min.css', + to: '/public/css/dark.min.css', }); - fs.writeFileSync('css/dark.min.css', dark); - - const autoDarkCss = `${light} @media (prefers-color-scheme: dark) { ${dark} }` - fs.writeFileSync('css/dark-auto.min.css', autoDarkCss) + const autoDarkCss = `${lightMin} @media (prefers-color-scheme: dark) { ${darkMin} }` + fs.writeFileSync('../public/css/auto.min.css', autoDarkCss) })(); \ No newline at end of file diff --git a/frontEndSrc/css/auto.css b/frontEndSrc/css/auto.css new file mode 100644 index 00000000..37eca657 --- /dev/null +++ b/frontEndSrc/css/auto.css @@ -0,0 +1,3 @@ +@media (prefers-color-scheme: dark) { + @import "src/dark-override.css"; +} \ No newline at end of file diff --git a/frontEndSrc/css/dark.css b/frontEndSrc/css/dark.css new file mode 100644 index 00000000..3b4f7a82 --- /dev/null +++ b/frontEndSrc/css/dark.css @@ -0,0 +1,5 @@ +@import "src/-marx-.css"; +@import "src/general.css"; +@import "src/components.css"; +@import "src/responsive.css"; +@import "src/dark-override.css"; \ No newline at end of file diff --git a/frontEndSrc/css/light.css b/frontEndSrc/css/light.css new file mode 100644 index 00000000..6c328380 --- /dev/null +++ b/frontEndSrc/css/light.css @@ -0,0 +1,4 @@ +@import "src/-marx-.css"; +@import "src/general.css"; +@import "src/components.css"; +@import "src/responsive.css"; diff --git a/public/css/src/marx.css b/frontEndSrc/css/src/-marx-.css similarity index 100% rename from public/css/src/marx.css rename to frontEndSrc/css/src/-marx-.css diff --git a/public/css/src/components.css b/frontEndSrc/css/src/components.css similarity index 100% rename from public/css/src/components.css rename to frontEndSrc/css/src/components.css diff --git a/public/css/src/dark-override.css b/frontEndSrc/css/src/dark-override.css similarity index 100% rename from public/css/src/dark-override.css rename to frontEndSrc/css/src/dark-override.css diff --git a/public/css/src/general.css b/frontEndSrc/css/src/general.css similarity index 100% rename from public/css/src/general.css rename to frontEndSrc/css/src/general.css diff --git a/public/css/src/responsive.css b/frontEndSrc/css/src/responsive.css similarity index 100% rename from public/css/src/responsive.css rename to frontEndSrc/css/src/responsive.css diff --git a/public/tools/cssfilter.js b/frontEndSrc/cssfilter.js similarity index 100% rename from public/tools/cssfilter.js rename to frontEndSrc/cssfilter.js diff --git a/public/js/src/base/AnimeClient.js b/frontEndSrc/js/anime-client.js similarity index 98% rename from public/js/src/base/AnimeClient.js rename to frontEndSrc/js/anime-client.js index e77739af..04869dba 100644 --- a/public/js/src/base/AnimeClient.js +++ b/frontEndSrc/js/anime-client.js @@ -3,9 +3,9 @@ // ------------------------------------------------------------------------- const matches = (elm, selector) => { - let matches = (elm.document || elm.ownerDocument).querySelectorAll(selector), - i = matches.length; - while (--i >= 0 && matches.item(i) !== elm) {}; + let m = (elm.document || elm.ownerDocument).querySelectorAll(selector); + let i = matches.length; + while (--i >= 0 && m.item(i) !== elm) {}; return i > -1; } diff --git a/public/js/src/anime.js b/frontEndSrc/js/anime.js similarity index 98% rename from public/js/src/anime.js rename to frontEndSrc/js/anime.js index 27e1f94c..cdf1ac7e 100644 --- a/public/js/src/anime.js +++ b/frontEndSrc/js/anime.js @@ -1,4 +1,4 @@ -import _ from './base/AnimeClient.js' +import _ from './anime-client.js' import { renderAnimeSearchResults } from './template-helpers.js' const search = (query) => { diff --git a/public/js/src/index.js b/frontEndSrc/js/anon.js similarity index 89% rename from public/js/src/index.js rename to frontEndSrc/js/anon.js index 88d68d5b..89a7bdbc 100644 --- a/public/js/src/index.js +++ b/frontEndSrc/js/anon.js @@ -1,4 +1,4 @@ -import './base/events.js'; +import './events.js'; if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(reg => { diff --git a/public/js/src/base/classList.js b/frontEndSrc/js/base/class-list.js similarity index 100% rename from public/js/src/base/classList.js rename to frontEndSrc/js/base/class-list.js diff --git a/public/js/src/base/sort_tables.js b/frontEndSrc/js/base/sort-tables.js similarity index 100% rename from public/js/src/base/sort_tables.js rename to frontEndSrc/js/base/sort-tables.js diff --git a/public/js/src/base/events.js b/frontEndSrc/js/events.js similarity index 52% rename from public/js/src/base/events.js rename to frontEndSrc/js/events.js index 70182d37..2a8adfab 100644 --- a/public/js/src/base/events.js +++ b/frontEndSrc/js/events.js @@ -1,31 +1,61 @@ -import _ from './AnimeClient.js'; -/** - * Event handlers - */ -// Close event for messages -_.on('header', 'click', '.message', (e) => { - _.hide(e.target); -}); +import _ from './anime-client.js'; -// Confirm deleting of list or library items -_.on('form.js-delete', 'submit', (event) => { +// ---------------------------------------------------------------------------- +// Event subscriptions +// ---------------------------------------------------------------------------- +_.on('header', 'click', '.message', hide); +_.on('form.js-delete', 'submit', confirmDelete); +_.on('.js-clear-cache', 'click', clearAPICache); +_.on('.vertical-tabs input', 'change', scrollToSection); +_.on('.media-filter', 'input', filterMedia); + +// ---------------------------------------------------------------------------- +// Handler functions +// ---------------------------------------------------------------------------- + +/** + * Hide the html element attached to the event + * + * @param event + * @return void + */ +function hide (event) { + _.hide(event.target) +} + +/** + * Confirm deletion of an item + * + * @param event + * @return void + */ +function confirmDelete (event) { const proceed = confirm('Are you ABSOLUTELY SURE you want to delete this item?'); if (proceed === false) { event.preventDefault(); event.stopPropagation(); } -}); +} -// Clear the api cache -_.on('.js-clear-cache', 'click', () => { +/** + * Clear the API cache, and show a message if the cache is cleared + * + * @return void + */ +function clearAPICache () { _.get('/cache_purge', () => { _.showMessage('success', 'Successfully purged api cache'); }); -}); +} -// Alleviate some page jumping - _.on('.vertical-tabs input', 'change', (event) => { +/** + * Scroll to the accordion/vertical tab section just opened + * + * @param event + * @return void + */ +function scrollToSection (event) { const el = event.currentTarget.parentElement; const rect = el.getBoundingClientRect(); @@ -35,10 +65,15 @@ _.on('.js-clear-cache', 'click', () => { top, behavior: 'smooth', }); -}); +} -// Filter the current page (cover view) -_.on('.media-filter', 'input', (event) => { +/** + * Filter an anime or manga list + * + * @param event + * @return void + */ +function filterMedia (event) { const rawFilter = event.target.value; const filter = new RegExp(rawFilter, 'i'); @@ -72,4 +107,4 @@ _.on('.media-filter', 'input', (event) => { _.show('article.media'); _.show('table.media-wrap tbody tr'); } -}); +} diff --git a/public/js/src/index-authed.js b/frontEndSrc/js/index.js similarity index 67% rename from public/js/src/index-authed.js rename to frontEndSrc/js/index.js index 5d852c20..6cad73e4 100644 --- a/public/js/src/index-authed.js +++ b/frontEndSrc/js/index.js @@ -1,4 +1,4 @@ -import './index.js'; +import './anon.js'; import './anime.js'; import './manga.js'; diff --git a/public/js/src/manga.js b/frontEndSrc/js/manga.js similarity index 98% rename from public/js/src/manga.js rename to frontEndSrc/js/manga.js index 120b69e5..6af89f93 100644 --- a/public/js/src/manga.js +++ b/frontEndSrc/js/manga.js @@ -1,4 +1,4 @@ -import _ from './base/AnimeClient.js' +import _ from './anime-client.js' import { renderMangaSearchResults } from './template-helpers.js' const search = (query) => { diff --git a/public/js/src/template-helpers.js b/frontEndSrc/js/template-helpers.js similarity index 98% rename from public/js/src/template-helpers.js rename to frontEndSrc/js/template-helpers.js index 4de89e8b..d9038c22 100644 --- a/public/js/src/template-helpers.js +++ b/frontEndSrc/js/template-helpers.js @@ -1,4 +1,4 @@ -import _ from './base/AnimeClient.js'; +import _ from './anime-client.js'; // Click on hidden MAL checkbox so // that MAL id is passed @@ -27,7 +27,7 @@ export function renderAnimeSearchResults (data) { - + ${item.canonicalTitle}
${titles} diff --git a/public/package.json b/frontEndSrc/package.json similarity index 53% rename from public/package.json rename to frontEndSrc/package.json index 00d00c0a..7970de82 100644 --- a/public/package.json +++ b/frontEndSrc/package.json @@ -2,20 +2,21 @@ "license": "MIT", "scripts": { "build": "npm run build:css && npm run build:js", - "build:css": "node ./tools/css.js", - "build:js": "rollup -c ./tools/build-js.js", - "watch:css": "watch 'npm run build:css' --filter=./tools/cssfilter.js", + "build:css": "node ./css.js", + "build:js": "rollup -c ./build-js.js", + "watch:css": "watch 'npm run build:css' --filter=./cssfilter.js", "watch:js": "watch 'npm run build:js' ./js/src", "watch": "concurrently \"npm:watch:css\" \"npm:watch:js\" --kill-others" }, "devDependencies": { - "@ampproject/rollup-plugin-closure-compiler": "^0.9.0", - "concurrently": "^4.1.1", + "@ampproject/rollup-plugin-closure-compiler": "^0.24.0", + "concurrently": "^5.1.0", "cssnano": "^4.1.10", - "postcss": "^7.0.17", + "postcss": "^7.0.27", "postcss-import": "^12.0.1", "postcss-preset-env": "^6.7.0", - "rollup": "^1.16.7", + "rollup": "^2.4.0", + "rollup-plugin-terser": "^5.3.0", "watch": "^1.0.2" } } diff --git a/public/test/ajax.php b/frontEndSrc/test/ajax.php similarity index 100% rename from public/test/ajax.php rename to frontEndSrc/test/ajax.php diff --git a/public/test/index.html b/frontEndSrc/test/index.html similarity index 71% rename from public/test/index.html rename to frontEndSrc/test/index.html index 93cdb56c..7afcc145 100644 --- a/public/test/index.html +++ b/frontEndSrc/test/index.html @@ -3,7 +3,7 @@ Hummingbird AnimeClient Front-end Testsuite - +
@@ -20,8 +20,8 @@ - - + + - + - - + +