Mirrors
/
noscript
mirror of https://github.com/hackademix/noscript.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Autosize preset buttons final.

This commit is contained in:
hackademix 2018-07-12 00:04:53 +02:00
parent 9815e0f7cf
commit 2bf06beae5
2 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/ui/ui.css
View File

@ -199,17 +199,18 @@ input.preset:active, input.preset:focus, input.preset:hover {
#presets-sizer {
visibility: hidden;
overflow: hidden !important;
border: 1px solid red;
}
#presets-sizer td.site {
display: none;
}
#presets-sizer span.url {
position: absolute;
display: block;
width: 5000px;
height: 500px;
top: -5000px;
}
#presets-sizer span.preset {
display: block;
}
.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
opacity: 1;
transform: none;

71
src/ui/ui.js
View File

@ -215,38 +215,6 @@ var UI = (() => {
}
if (!document.getElementById("presets-sizer")) {
// adapt button to label if needed
let sizer = table.cloneNode(true);
sizer.id = "presets-sizer";
document.body.appendChild(sizer);
let presetWidth = sizer.querySelector("input.preset").offsetWidth;
let labelWidth = 0;
for (let l of sizer.querySelectorAll("label.preset")) {
let lw = l.offsetWidth;
debug("lw", l.textContent, lw);
if (lw > labelWidth) labelWidth = lw;
}
debug(`Preset: %s Label: %s`, presetWidth, labelWidth);
labelWidth += 16;
if (presetWidth < labelWidth) {
for (let ss of document.styleSheets) {
if (ss.href.endsWith("/ui.css")) {
for (let r of ss.cssRules) {
if (/input\.preset:checked.*min-width:/.test(r.cssText)) {
r.style.minWidth = (labelWidth) + "px";
break;
}
}
}
}
}
sizer.style.visibility = "visible";
// setTimeout( () => sizer.style.display = "none");
}
}
// URL
@ -278,6 +246,44 @@ var UI = (() => {
return row;
}
correctSize() {
if (!(UI.mobile || document.getElementById("presets-sizer"))) {
// adapt button to label if needed
let presets = document.querySelector(".presets");
let sizer = document.createElement("div");
sizer.id = "presets-sizer";
sizer.appendChild(presets.cloneNode(true));
document.body.appendChild(sizer);
setTimeout(async () => {
let presetWidth = sizer.querySelector("input.preset").offsetWidth;
let labelWidth = 0;
for (let l of sizer.querySelectorAll("label.preset")) {
let lw = l.offsetWidth;
debug("lw", l.textContent, lw);
if (lw > labelWidth) labelWidth = lw;
}
debug(`Preset: %s Label: %s`, presetWidth, labelWidth);
labelWidth += 16;
if (presetWidth < labelWidth) {
for (let ss of document.styleSheets) {
if (ss.href.endsWith("/ui.css")) {
for (let r of ss.cssRules) {
if (/input\.preset:checked.*min-width:/.test(r.cssText)) {
r.style.minWidth = (labelWidth) + "px";
break;
}
}
}
}
}
sizer.style.display = "none";
}, 100);
}
}
allSiteRows() {
return this.table.querySelectorAll("tr.site");
}
@ -440,6 +446,7 @@ var UI = (() => {
root.addEventListener("change", this, true);
root.wiredBy = this;
}
this.correctSize();
return root;
}