scrollbar styling by get parameters

src/scripts/webapps/scrollbar.js

@@ -1,3 +1,4 @@
+// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 /*
    Copyright (C) 2022 Ivan Polyakov
 
@@ -16,7 +17,6 @@
    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
-// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
 (function() {
     var textArea = document.getElementById('sbTextArea');
     var updBtn = document.getElementById('sbUpdBtn');
@@ -41,12 +41,15 @@
 
     var settingsForm = {
         bar: {
+            inputs: {
                 width: document.getElementById('sbw'),
+            },
             getStyle() {
-                return "--sb-w:" + this.width.value + ";";
+                return "--sb-w:" + this.inputs.width.value + ";";
             },
         },
         thumb: {
+            inputs: {
                 color: document.getElementById('thumbclr'),
                 colortxt: document.getElementById('thumbclrtxt'),
                 bstl: document.getElementById('thumbbstl'),
@@ -54,49 +57,51 @@
                 bclr: document.getElementById('thumbbclr'),
                 bclrtxt: document.getElementById('thumbbclrtxt'),
                 brad: document.getElementById('thumbbrad'),
+            },
             init() {
-                this.colortxt.oninput = () => {
+                this.inputs.colortxt.oninput = () => {
-                    this.color.value = this.colortxt.value;
+                    this.inputs.color.value = this.inputs.colortxt.value;
                 }
-                this.color.oninput = () => {
+                this.inputs.color.oninput = () => {
-                    this.colortxt.value = this.color.value;
+                    this.inputs.colortxt.value = this.inputs.color.value;
                 }
 
-                this.bclr.oninput = () => {
+                this.inputs.bclr.oninput = () => {
-                    this.bclrtxt.value = this.bclr.value;
+                    this.inputs.bclrtxt.value = this.inputs.bclr.value;
                 }
-                this.bclrtxt.oninput = () => {
+                this.inputs.bclrtxt.oninput = () => {
-                    this.bclr.value = this.bclrtxt.value;
+                    this.inputs.bclr.value = this.inputs.bclrtxt.value;
                 }
             },
             getStyle() {
-                return "--thumb-clr:" + this.color.value + ";"
+                return "--thumb-clr:" + this.inputs.color.value + ";"
-                    + "--thumb-bstl:" + this.bstl.value + ";"
+                    + "--thumb-bstl:" + this.inputs.bstl.value + ";"
-                    + "--thumb-bw:" + this.bw.value + ";"
+                    + "--thumb-bw:" + this.inputs.bw.value + ";"
-                    + "--thumb-bclr:" + this.bclr.value + ";"
+                    + "--thumb-bclr:" + this.inputs.bclr.value + ";"
-                    + "--thumb-brad:" + this.brad.value + ";";
+                    + "--thumb-brad:" + this.inputs.brad.value + ";";
             },
         },
         track: {
+            inputs: {
                 color: document.getElementById('trackclr'),
                 colortxt: document.getElementById('trackclrtxt'),
-            colorout: document.getElementById('trackclrout'),
                 brad: document.getElementById('trackbrad'),
                 mt: document.getElementById('trackmt'),
                 mb: document.getElementById('trackmb'),
+            },
             init() {
-                this.colortxt.oninput = () => {
+                this.inputs.colortxt.oninput = () => {
-                    this.color.value = this.colortxt.value;
+                    this.inputs.color.value = this.inputs.colortxt.value;
                 }
-                this.color.oninput = () => {
+                this.inputs.color.oninput = () => {
-                    this.colortxt.value = this.color.value;
+                    this.inputs.colortxt.value = this.inputs.color.value;
                 }
             },
             getStyle() {
-                return "--track-clr: " + this.color.value + ";"
+                return "--track-clr: " + this.inputs.color.value + ";"
-                    + "--track-brad:" + this.brad.value + ";"
+                    + "--track-brad:" + this.inputs.brad.value + ";"
-                    + "--track-mt:" + this.mt.value + ";"
+                    + "--track-mt:" + this.inputs.mt.value + ";"
-                    + "--track-mb:" + this.mb.value + ";";
+                    + "--track-mb:" + this.inputs.mb.value + ";";
             },
         },
         output: document.getElementById('sbScssOut'),
@@ -107,41 +112,94 @@
         upd(el) {
             el.style = this.bar.getStyle() + this.thumb.getStyle()
                 + this.track.getStyle();
+            this.print();
+            this.updateUrl();
         },
         print() {
             this.output.textContent = ".selector {\n" +
-                "  scrollbar-color: " + this.thumb.color.value +
+                "  scrollbar-color: " + this.thumb.inputs.color.value +
-                    " " + this.track.color.value + ";\n" +
+                    " " + this.track.inputs.color.value + ";\n" +
                 "\n  &::-webkit-scrollbar {\n" +
-                "    width: " + this.bar.width.value + ";" +
+                "    width: " + this.bar.inputs.width.value + ";" +
                 "\n  }\n" +
                 "\n  &::-webkit-scrollbar-track {\n" +
-                "    background-color: " + this.track.color.value + ";\n" +
+                "    background-color: " + this.track.inputs.color.value + ";\n" +
-                "    border-radius: " + this.track.brad.value + ";\n" +
+                "    border-radius: " + this.track.inputs.brad.value + ";\n" +
-                "    margin-top: " + this.track.mt.value + ";\n" +
+                "    margin-top: " + this.track.inputs.mt.value + ";\n" +
-                "    margin-bottom: " + this.track.mb.value + ";" +
+                "    margin-bottom: " + this.track.inputs.mb.value + ";" +
                 "\n  }\n" +
                 "\n  &::-webkit-scrollbar-thumb {\n" +
-                "    background-color: " + this.thumb.color.value + ";\n" +
+                "    background-color: " + this.thumb.inputs.color.value + ";\n" +
-                "    border: " + this.thumb.bw.value + " " + this.thumb.bstl.value + " " + this.thumb.bclr.value + ";\n" +
+                "    border: " + this.thumb.inputs.bw.value + " " + this.thumb.inputs.bstl.value + " " + this.thumb.inputs.bclr.value + ";\n" +
-                "    border-radius: " + this.thumb.brad.value + ";" +
+                "    border-radius: " + this.thumb.inputs.brad.value + ";" +
                 "\n  }" +
                 "\n}";
+        },
+        updateUrl() {
+            var _this = this;
+            var url = window.location.origin + window.location.pathname;
+            var isFirst = true;
+            this.iterInputs(function(obj, input) {
+                var ch = isFirst ? "?" : "&";
+                url += ch + obj + input + "=" + _this[obj].inputs[input].value;
+                isFirst = false;
+            });
+            url = url.replace(/\#/g, "%23");
+
+            window.location.href = url;
+            try {
+                throw "";
+                history.pushState(null, null, url);
+            } catch {
+                window.location.href = url;
+            }
+        },
+        showScss() {
             this.output.style = "display:block;"
         },
+        hideScss() {
+            this.output.style = "display:none;"
+        },
+        iterInputs(cb) {
+            var objs = ['bar', 'thumb', 'track'];
+            for (var i = 0; i < objs.length; i++) {
+                var entries = Object.keys(settingsForm[objs[i]].inputs);
+                for (var j = 0; j < entries.length; j++) {
+                    cb(objs[i], entries[j]);
+                }
+            }
+            delete objs;
+        }
     };
 
     settingsForm.init();
 
-    updBtn.onclick = function() {
+    updBtn.onclick = settingsForm.upd.bind(settingsForm, textArea);
-        settingsForm.upd(textArea);
+    printBtn.onclick = settingsForm.showScss.bind(settingsForm);
+    clearBtn.onclick = settingsForm.hideScss.bind(settingsForm);
+
+    function getParameterByName(name, url = window.location.href) {
+        name = name.replace(/[\[\]]/g, '\\$&');
+        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+            results = regex.exec(url);
+        if (!results) return null;
+        if (!results[2]) return '';
+        return decodeURIComponent(results[2].replace(/\+/g, ' '));
     }
 
-    printBtn.onclick = settingsForm.print.bind(settingsForm);
+    var updNeeded = false;
+    settingsForm.iterInputs(function(obj, input) {
+        var val = getParameterByName(obj + input);
+        if (val) {
+            settingsForm[obj].inputs[input].value = val;
 
-    clearBtn.onclick = function() {
+            if (settingsForm[obj].inputs[input].value !== val) {
-        settingsForm.output.textContent = "";
+                updNeeded = true;
-        settingsForm.output.style = "display:none;";
+            }
+        }
+    });
+    if (updNeeded) {
+        settingsForm.upd(textArea);
     }
 })();
 // @license-end