From cb9ccc98adb78d3e9ad99de52edf48227831f89e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me?= Date: Wed, 24 Feb 2021 16:32:57 +0100 Subject: [PATCH 1/7] Override default settings through url parameters --- src/js/page/main-controller.js | 7 ++++- src/js/page/ui/settings.js | 50 ++++++++++++++++++++++++++++++++-- 2 files changed, 53 insertions(+), 4 deletions(-) diff --git a/src/js/page/main-controller.js b/src/js/page/main-controller.js index fd751d8b7..b11d70b32 100644 --- a/src/js/page/main-controller.js +++ b/src/js/page/main-controller.js @@ -250,7 +250,12 @@ export default class MainController { } async _loadSettings() { - const settings = await storage.get('settings'); + let settings = await storage.get('settings'); + settings = Object.assign( + {}, + settings, + this._settingsUi.getSettingsOverride(), + ); if (settings) this._settingsUi.setSettings(settings); } diff --git a/src/js/page/ui/settings.js b/src/js/page/ui/settings.js index 22605dae0..cb9fad490 100644 --- a/src/js/page/ui/settings.js +++ b/src/js/page/ui/settings.js @@ -76,18 +76,32 @@ export default class Settings { _onReset() { this._resetRipple.animate(); const oldSettings = this.getSettings(); + const overrides = this.getSettingsOverride(); // Set all inputs according to their initial attributes for (const inputEl of this._globalInputs) { if (inputEl.type === 'checkbox') { - inputEl.checked = inputEl.hasAttribute('checked'); + inputEl.checked = Object.prototype.hasOwnProperty.call( + overrides, + inputEl.name, + ) + ? overrides[inputEl.name] + : inputEl.hasAttribute('checked'); } else if (inputEl.type === 'range') { - this._sliderMap.get(inputEl).value = inputEl.getAttribute('value'); + this._sliderMap.get(inputEl).value = + Object.prototype.hasOwnProperty.call(overrides, inputEl.name) + ? overrides[inputEl.name] + : inputEl.getAttribute('value'); } } for (const inputEl of this._pluginInputs) { - inputEl.checked = inputEl.hasAttribute('checked'); + inputEl.checked = Object.prototype.hasOwnProperty.call( + overrides.plugins, + inputEl.name, + ) + ? overrides.plugins[inputEl.name] + : inputEl.hasAttribute('checked'); } this.emitter.emit('reset', oldSettings); @@ -140,4 +154,34 @@ export default class Settings { return output; } + + getSettingsOverride() { + const searchParams = new URLSearchParams(window.location.search); + + const overrides = { + plugins: {}, + }; + + for (const inputEl of this._globalInputs) { + if (!searchParams.has(inputEl.name) || inputEl.name === 'original') + continue; + + const value = searchParams.get(inputEl.name); + if (inputEl.type === 'checkbox' && ['true', 'false'].includes(value)) { + overrides[inputEl.name] = value === 'true'; + } else if (inputEl.type === 'range') { + const rangeValue = Number.parseInt(value, 10); + if (rangeValue < inputEl.min || inputEl.max < rangeValue) continue; + overrides[inputEl.name] = rangeValue; + } + } + + for (const inputEl of this._pluginInputs) { + const value = searchParams.get(inputEl.name); + if (!['true', 'false'].includes(value)) continue; + overrides.plugins[inputEl.name] = value === 'true'; + } + + return overrides; + } } From edd1eac9e9013a4f76fd73ffd28f7836d7a276ea Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 4 Nov 2021 13:50:53 +0200 Subject: [PATCH 2/7] CI: split test steps (#360) --- .github/workflows/ci.yml | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index cb6e22bc8..f1bd3b8a7 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -27,8 +27,11 @@ jobs: - name: Install npm dependencies run: npm ci - - name: Test - run: npm test + - name: Lint + run: npm run lint + + - name: Build + run: npm run build - name: Upload build files uses: actions/upload-artifact@v2 From 3c6302ec2186779b1b3fc4c96d1fef88f90199c5 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 4 Nov 2021 13:56:02 +0200 Subject: [PATCH 3/7] Remove title from inline SVGs (#359) The parent element already has the title set. Also, add `aria-hidden="true"` in the SVGs. --- src/index.html | 2 +- src/js/page/ui/bg-fill-button.js | 3 +-- src/js/page/ui/copy-button.js | 3 +-- src/js/page/ui/download-button.js | 3 +-- src/partials/icons/menu.svg | 2 +- 5 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index 66adc5ff5..f7766fc7b 100644 --- a/src/index.html +++ b/src/index.html @@ -86,7 +86,7 @@

SVGOMG

-
diff --git a/src/js/page/ui/bg-fill-button.js b/src/js/page/ui/bg-fill-button.js index 22d922a4c..5460671f5 100644 --- a/src/js/page/ui/bg-fill-button.js +++ b/src/js/page/ui/bg-fill-button.js @@ -8,8 +8,7 @@ export default class BgFillButton extends FloatingActionButton { title, iconSvg: // prettier-ignore - '' + - `${title}` + + '', }); diff --git a/src/js/page/ui/copy-button.js b/src/js/page/ui/copy-button.js index 9a715da60..b0a3bb09e 100644 --- a/src/js/page/ui/copy-button.js +++ b/src/js/page/ui/copy-button.js @@ -8,8 +8,7 @@ export default class CopyButton extends FloatingActionButton { title, iconSvg: // prettier-ignore - '' + - `${title}` + + '', }); diff --git a/src/js/page/ui/download-button.js b/src/js/page/ui/download-button.js index e4e7b8758..0e56377b9 100644 --- a/src/js/page/ui/download-button.js +++ b/src/js/page/ui/download-button.js @@ -10,8 +10,7 @@ export default class DownloadButton extends FloatingActionButton { href: './', iconSvg: // prettier-ignore - '' + - `${title}` + + '', major: true, diff --git a/src/partials/icons/menu.svg b/src/partials/icons/menu.svg index 6f8405a7d..47492924e 100644 --- a/src/partials/icons/menu.svg +++ b/src/partials/icons/menu.svg @@ -1 +1 @@ -Menu + From 6941e502ba0d3a77d341c499ce9d89dd48b267e1 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 4 Nov 2021 14:00:29 +0200 Subject: [PATCH 4/7] .output-switcher: stop setting the filter property (#358) --- src/css/_main-layout.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/css/_main-layout.scss b/src/css/_main-layout.scss index 26e4b654a..be642d66d 100644 --- a/src/css/_main-layout.scss +++ b/src/css/_main-layout.scss @@ -154,19 +154,17 @@ } .output-switcher { - filter: contrast(0) brightness(150%) saturate(100%); opacity: 0; &.transition { - transition: filter 0.5s ease-out 0.5s, opacity 0.5s ease-out 0.5s; + transition: opacity 0.5s ease-out 0.5s; @media (min-width: 640px) and (max-width: 900px) { - transition: filter 0.5s ease-out 0.6s, opacity 0.5s ease-out 0.6s; + transition: opacity 0.5s ease-out 0.6s; } } &.active { opacity: 1; - filter: none; } } From 1fdee2a2557e19e6eef5f884560c3dbdd27a7b6b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 4 Nov 2021 14:08:57 +0200 Subject: [PATCH 5/7] floating buttons: stop transitioning `box-shadow` (#357) --- src/css/components/_floating-action-button.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/css/components/_floating-action-button.scss b/src/css/components/_floating-action-button.scss index 23456c18f..593fa0686 100644 --- a/src/css/components/_floating-action-button.scss +++ b/src/css/components/_floating-action-button.scss @@ -11,7 +11,7 @@ display: flex; align-items: center; justify-content: center; - transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; + transition: transform 0.1s ease-out; @media (min-width: 640px) { box-shadow: 0 4px 11px rgba(0, 0, 0, 0.3); @@ -20,7 +20,6 @@ &:hover, &.key-focused { transform: scale(1.15); - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } &:focus { From 5c4d7f7b27c26d0ebbe8cd2de5cfe975b7a3dbfc Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 4 Nov 2021 14:24:34 +0200 Subject: [PATCH 6/7] settings.js: remove workaround (#355) --- src/js/page/ui/settings.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/js/page/ui/settings.js b/src/js/page/ui/settings.js index cb9fad490..530f39355 100644 --- a/src/js/page/ui/settings.js +++ b/src/js/page/ui/settings.js @@ -35,7 +35,6 @@ export default class Settings { this.container.addEventListener('input', (event) => this._onChange(event), ); - scroller.addEventListener('wheel', (event) => this._onMouseWheel(event)); resetBtn.addEventListener('click', () => this._onReset()); // TODO: revisit this @@ -49,16 +48,6 @@ export default class Settings { }); } - _onMouseWheel(event) { - // Prevents bounce effect on desktop. - // Firefox uses pixels on a mouse wheel, ignore it - // 1 is "lines", 0 is "pixels" - if (event.deltaMode === 0) { - event.preventDefault(); - event.currentTarget.scrollTop += event.deltaY; - } - } - _onChange(event) { clearTimeout(this._throttleTimeout); From 8588932e81c7718c0a866d2fd7d7c7e4e05a7afb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me?= Date: Wed, 24 Feb 2021 16:32:57 +0100 Subject: [PATCH 7/7] Override default settings through url parameters --- src/js/page/main-controller.js | 10 ++++------ src/js/page/ui/settings.js | 26 +++++++++----------------- 2 files changed, 13 insertions(+), 23 deletions(-) diff --git a/src/js/page/main-controller.js b/src/js/page/main-controller.js index b11d70b32..2c30462d3 100644 --- a/src/js/page/main-controller.js +++ b/src/js/page/main-controller.js @@ -250,12 +250,10 @@ export default class MainController { } async _loadSettings() { - let settings = await storage.get('settings'); - settings = Object.assign( - {}, - settings, - this._settingsUi.getSettingsOverride(), - ); + const settings = { + ...(await storage.get('settings')), + ...this._settingsUi.getSettingsOverride(), + }; if (settings) this._settingsUi.setSettings(settings); } diff --git a/src/js/page/ui/settings.js b/src/js/page/ui/settings.js index 530f39355..96e84d1c1 100644 --- a/src/js/page/ui/settings.js +++ b/src/js/page/ui/settings.js @@ -45,6 +45,9 @@ export default class Settings { if (event.target.closest('input[type=range]')) return; event.preventDefault(); }); + + const settingsOverride = this.getSettingsOverride(); + if (settingsOverride) this.setSettings(settingsOverride); }); } @@ -65,34 +68,23 @@ export default class Settings { _onReset() { this._resetRipple.animate(); const oldSettings = this.getSettings(); - const overrides = this.getSettingsOverride(); // Set all inputs according to their initial attributes for (const inputEl of this._globalInputs) { if (inputEl.type === 'checkbox') { - inputEl.checked = Object.prototype.hasOwnProperty.call( - overrides, - inputEl.name, - ) - ? overrides[inputEl.name] - : inputEl.hasAttribute('checked'); + inputEl.checked = inputEl.hasAttribute('checked'); } else if (inputEl.type === 'range') { - this._sliderMap.get(inputEl).value = - Object.prototype.hasOwnProperty.call(overrides, inputEl.name) - ? overrides[inputEl.name] - : inputEl.getAttribute('value'); + this._sliderMap.get(inputEl).value = inputEl.getAttribute('value'); } } for (const inputEl of this._pluginInputs) { - inputEl.checked = Object.prototype.hasOwnProperty.call( - overrides.plugins, - inputEl.name, - ) - ? overrides.plugins[inputEl.name] - : inputEl.hasAttribute('checked'); + inputEl.checked = inputEl.hasAttribute('checked'); } + const settingsOverride = this.getSettingsOverride(); + if (settingsOverride) this.setSettings(settingsOverride); + this.emitter.emit('reset', oldSettings); this.emitter.emit('change'); }