vilor
/
website
generated from vilor/hyde-template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity
Browse Source

scrollbar styling by get parameters

pull/2/head
Ivan Polyakov 3 years ago
parent
c7dca47cbd
commit
bed85f621e
1 changed files with 111 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 164
      src/scripts/webapps/scrollbar.js

164
src/scripts/webapps/scrollbar.js
Unescape View File

@ -1,3 +1,4 @@ @@ -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 @@ @@ -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,62 +41,67 @@ @@ -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 @@ @@ -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

Write Preview
Loading…
Cancel
Save