From 2bf06beae5765668352741595984b6fe282f3cbb Mon Sep 17 00:00:00 2001 From: hackademix Date: Thu, 12 Jul 2018 00:04:53 +0200 Subject: Autosize preset buttons final. --- src/ui/ui.css | 15 +++++++------ src/ui/ui.js | 71 ++++++++++++++++++++++++++++++++--------------------------- 2 files changed, 47 insertions(+), 39 deletions(-) diff --git a/src/ui/ui.css b/src/ui/ui.css index 96f7179..b27597f 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -199,17 +199,18 @@ input.preset:active, input.preset:focus, input.preset:hover { #presets-sizer { visibility: hidden; - - overflow: hidden !important; - border: 1px solid red; + position: absolute; + display: block; + width: 5000px; + height: 500px; + top: -5000px; } -#presets-sizer td.site { - display: none; -} -#presets-sizer span.url { +#presets-sizer span.preset { display: block; + } + .presets input.preset:checked, #presets input.preset, #presets-sizer input.preset { opacity: 1; transform: none; diff --git a/src/ui/ui.js b/src/ui/ui.js index 286d95c..e367f74 100644 --- a/src/ui/ui.js +++ b/src/ui/ui.js @@ -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; } -- cgit v1.2.3