From bed85f621edd86857aa8cb77023f2aa2ba7d5f9d Mon Sep 17 00:00:00 2001 From: Ivan Polyakov Date: Wed, 4 May 2022 22:56:05 +0300 Subject: [PATCH] scrollbar styling by get parameters --- src/scripts/webapps/scrollbar.js | 164 +++++++++++++++++++++---------- 1 file changed, 111 insertions(+), 53 deletions(-) diff --git a/src/scripts/webapps/scrollbar.js b/src/scripts/webapps/scrollbar.js index 9cdcea7..fcfa9bc 100644 --- a/src/scripts/webapps/scrollbar.js +++ b/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 . */ -// @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,62 +41,67 @@ var settingsForm = { bar: { - width: document.getElementById('sbw'), + inputs: { + width: document.getElementById('sbw'), + }, getStyle() { - return "--sb-w:" + this.width.value + ";"; + return "--sb-w:" + this.inputs.width.value + ";"; }, }, thumb: { - color: document.getElementById('thumbclr'), - colortxt: document.getElementById('thumbclrtxt'), - bstl: document.getElementById('thumbbstl'), - bw: document.getElementById('thumbbw'), - bclr: document.getElementById('thumbbclr'), - bclrtxt: document.getElementById('thumbbclrtxt'), - brad: document.getElementById('thumbbrad'), + inputs: { + color: document.getElementById('thumbclr'), + colortxt: document.getElementById('thumbclrtxt'), + bstl: document.getElementById('thumbbstl'), + bw: document.getElementById('thumbbw'), + bclr: document.getElementById('thumbbclr'), + bclrtxt: document.getElementById('thumbbclrtxt'), + brad: document.getElementById('thumbbrad'), + }, init() { - this.colortxt.oninput = () => { - this.color.value = this.colortxt.value; + this.inputs.colortxt.oninput = () => { + this.inputs.color.value = this.inputs.colortxt.value; } - this.color.oninput = () => { - this.colortxt.value = this.color.value; + this.inputs.color.oninput = () => { + this.inputs.colortxt.value = this.inputs.color.value; } - this.bclr.oninput = () => { - this.bclrtxt.value = this.bclr.value; + this.inputs.bclr.oninput = () => { + this.inputs.bclrtxt.value = this.inputs.bclr.value; } - this.bclrtxt.oninput = () => { - this.bclr.value = this.bclrtxt.value; + this.inputs.bclrtxt.oninput = () => { + this.inputs.bclr.value = this.inputs.bclrtxt.value; } }, getStyle() { - return "--thumb-clr:" + this.color.value + ";" - + "--thumb-bstl:" + this.bstl.value + ";" - + "--thumb-bw:" + this.bw.value + ";" - + "--thumb-bclr:" + this.bclr.value + ";" - + "--thumb-brad:" + this.brad.value + ";"; + return "--thumb-clr:" + this.inputs.color.value + ";" + + "--thumb-bstl:" + this.inputs.bstl.value + ";" + + "--thumb-bw:" + this.inputs.bw.value + ";" + + "--thumb-bclr:" + this.inputs.bclr.value + ";" + + "--thumb-brad:" + this.inputs.brad.value + ";"; }, }, track: { - color: document.getElementById('trackclr'), - colortxt: document.getElementById('trackclrtxt'), - colorout: document.getElementById('trackclrout'), - brad: document.getElementById('trackbrad'), - mt: document.getElementById('trackmt'), - mb: document.getElementById('trackmb'), + inputs: { + color: document.getElementById('trackclr'), + colortxt: document.getElementById('trackclrtxt'), + brad: document.getElementById('trackbrad'), + mt: document.getElementById('trackmt'), + mb: document.getElementById('trackmb'), + }, init() { - this.colortxt.oninput = () => { - this.color.value = this.colortxt.value; + this.inputs.colortxt.oninput = () => { + this.inputs.color.value = this.inputs.colortxt.value; } - this.color.oninput = () => { - this.colortxt.value = this.color.value; + this.inputs.color.oninput = () => { + this.inputs.colortxt.value = this.inputs.color.value; } }, getStyle() { - return "--track-clr: " + this.color.value + ";" - + "--track-brad:" + this.brad.value + ";" - + "--track-mt:" + this.mt.value + ";" - + "--track-mb:" + this.mb.value + ";"; + return "--track-clr: " + this.inputs.color.value + ";" + + "--track-brad:" + this.inputs.brad.value + ";" + + "--track-mt:" + this.inputs.mt.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 + - " " + this.track.color.value + ";\n" + + " scrollbar-color: " + this.thumb.inputs.color.value + + " " + 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" + - " border-radius: " + this.track.brad.value + ";\n" + - " margin-top: " + this.track.mt.value + ";\n" + - " margin-bottom: " + this.track.mb.value + ";" + + " background-color: " + this.track.inputs.color.value + ";\n" + + " border-radius: " + this.track.inputs.brad.value + ";\n" + + " margin-top: " + this.track.inputs.mt.value + ";\n" + + " margin-bottom: " + this.track.inputs.mb.value + ";" + "\n }\n" + "\n &::-webkit-scrollbar-thumb {\n" + - " background-color: " + this.thumb.color.value + ";\n" + - " border: " + this.thumb.bw.value + " " + this.thumb.bstl.value + " " + this.thumb.bclr.value + ";\n" + - " border-radius: " + this.thumb.brad.value + ";" + + " background-color: " + this.thumb.inputs.color.value + ";\n" + + " border: " + this.thumb.inputs.bw.value + " " + this.thumb.inputs.bstl.value + " " + this.thumb.inputs.bclr.value + ";\n" + + " 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() { - settingsForm.upd(textArea); + updBtn.onclick = settingsForm.upd.bind(settingsForm, 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() { - settingsForm.output.textContent = ""; - settingsForm.output.style = "display:none;"; + if (settingsForm[obj].inputs[input].value !== val) { + updNeeded = true; + } + } + }); + if (updNeeded) { + settingsForm.upd(textArea); } })(); // @license-end