[Draft] Override default settings through url parameters #174

.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

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

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 {

src/index.html

@@ -86,7 +86,7 @@ <h1>SVGOMG</h1>
       </div>
       <div class="toolbar">
         <div class="menu-toolbar-item">
-          <button class="unbutton menu-btn" type="button">
+          <button class="unbutton menu-btn" type="button" title="Menu">
             {% include "partials/icons/menu.svg" %}
           </button>
         </div>

src/js/page/main-controller.js

@@ -250,7 +250,10 @@ export default class MainController {
   }
 
   async _loadSettings() {
-    const settings = await storage.get('settings');
+    const settings = {
+      ...(await storage.get('settings')),
+      ...this._settingsUi.getSettingsOverride(),
+    };
     if (settings) this._settingsUi.setSettings(settings);
   }
 

src/js/page/ui/bg-fill-button.js

@@ -8,8 +8,7 @@ export default class BgFillButton extends FloatingActionButton {
       title,
       iconSvg:
         // prettier-ignore
-        '<svg class="icon" viewBox="0 0 24 24">' +
-          `<title>${title}</title>` +
+        '<svg aria-hidden="true" class="icon" viewBox="0 0 24 24">' +
           '<path d="M21.143 9.667c-.733-1.392-1.914-3.05-3.617-4.753C14.549 1.936 12.048 1 10.741 1c-.414 0-.708.094-.86.246L8.52 2.606c-1.899-.236-3.42.106-4.294.983-.876.875-1.164 2.159-.792 3.523.492 1.806 2.305 4.049 5.905 5.375.038.323.157.638.405.885.588.588 1.535.586 2.121 0s.588-1.533.002-2.119a1.5 1.5 0 0 0-2.123-.001l-.17.256c-2.031-.765-3.395-1.828-4.232-2.9l3.879-3.875c.496 2.73 6.432 8.676 9.178 9.178l-7.115 7.107c-.234.153-2.798-.316-6.156-3.675-3.393-3.393-3.175-5.271-3.027-5.498L3.96 9.989C3.521 9.63 3.035 8.886 2.819 8.3L.685 10.431C.24 10.877 0 11.495 0 12.251c0 1.634 1.121 3.915 3.713 6.506C6.477 21.521 9.293 23 11.145 23c.648 0 1.18-.195 1.547-.562l8.086-8.078c.91.874-.778 3.538-.778 4.648a2 2 0 0 0 4-.001c0-3.184-1.425-6.81-2.857-9.34zM4.934 4.296c.527-.53 1.471-.791 2.656-.761L4.381 6.741c-.236-.978-.049-1.845.553-2.445zm9.292 4.079-.03-.029C12.904 7.054 10.393 3.99 11.1 3.283c.715-.715 3.488 1.521 5.062 3.096.862.862 2.088 2.247 2.937 3.458-1.717-1.074-3.491-1.469-4.873-1.462z"/>' +
         '</svg>',
     });

src/js/page/ui/copy-button.js

@@ -8,8 +8,7 @@ export default class CopyButton extends FloatingActionButton {
       title,
       iconSvg:
         // prettier-ignore
-        '<svg class="icon" viewBox="0 0 24 24">' +
-          `<title>${title}</title>` +
+        '<svg aria-hidden="true" class="icon" viewBox="0 0 24 24">' +
           '<path d="M16 1H4C3 1 2 2 2 3v14h2V3h12V1zm3 4H8C7 5 6 6 6 7v14c0 1 1 2 2 2h11c1 0 2-1 2-2V7c0-1-1-2-2-2zm0 16H8V7h11v14z"/>' +
         '</svg>',
     });

src/js/page/ui/download-button.js

@@ -10,8 +10,7 @@ export default class DownloadButton extends FloatingActionButton {
       href: './',
       iconSvg:
         // prettier-ignore
-        '<svg class="icon" viewBox="0 0 24 24">' +
-          `<title>${title}</title>` +
+        '<svg aria-hidden="true" class="icon" viewBox="0 0 24 24">' +
           '<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>' +
         '</svg>',
       major: true,

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
@@ -46,17 +45,10 @@ export default class Settings {
         if (event.target.closest('input[type=range]')) return;
         event.preventDefault();
       });
-    });
-  }
 
-  _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;
-    }
+      const settingsOverride = this.getSettingsOverride();
+      if (settingsOverride) this.setSettings(settingsOverride);
+    });
   }
 
   _onChange(event) {
@@ -90,6 +82,9 @@ export default class Settings {
       inputEl.checked = inputEl.hasAttribute('checked');
     }
 
+    const settingsOverride = this.getSettingsOverride();
+    if (settingsOverride) this.setSettings(settingsOverride);
+
     this.emitter.emit('reset', oldSettings);
     this.emitter.emit('change');
   }
@@ -140,4 +135,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;
+  }
 }