new design for rendertest #8
@ -276,7 +276,8 @@ body.min { /* split feature */
|
||||
animation: flash var(--animation-duration) infinite;
|
||||
}
|
||||
.block-gold.anim_off,
|
||||
.block-gold.anim_force_off {
|
||||
.block-gold.anim_force_off,
|
||||
.all_diff .block-gold {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@ -308,13 +309,13 @@ body.min { /* split feature */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#fail_images.padding .meta-block {
|
||||
#fail_images.vpadding .meta-block {
|
||||
/*margin-block: 100vh;*/
|
||||
padding-top: calc(var(--height-image));
|
||||
padding-bottom: 2px;
|
||||
/*padding-bottom: calc(50% - var(--height-image) );*/
|
||||
}
|
||||
#fail_images.padding .meta-block h3, .meta-block:first-child h3 {
|
||||
#fail_images.vpadding .meta-block h3, .meta-block:first-child h3 {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
@ -326,11 +327,18 @@ body.min { /* split feature */
|
||||
/*z-index: 10;*/
|
||||
}
|
||||
|
||||
.block-diff.show_diff {
|
||||
.block-diff.show_diff,
|
||||
.all_diff .block-diff {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.diff_separate .block-diff {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
|
||||
.image-container, img, .block {
|
||||
max-width: 100%;
|
||||
@ -411,4 +419,15 @@ details[open] summary:before {
|
||||
.green {
|
||||
color: #6b9a00;
|
||||
color: oklch(62.8% 0.25768330773615683 128.19);
|
||||
}
|
||||
}
|
||||
|
||||
table th:nth-child(3) {
|
||||
text-align: center;
|
||||
}
|
||||
table td:nth-child(3) { /* Δ, % // TODO: add class */
|
||||
text-align: right;
|
||||
font-family: Consolas, monospace;
|
||||
}
|
||||
table td:nth-child(4) { /* Passed // TODO: add class */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -59,11 +59,6 @@ function emojiToTag(string) {
|
||||
}
|
||||
return tagArray;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function channelWithEmoji(value) {
|
||||
const replacements = {
|
||||
"full": "🖼",
|
||||
@ -93,6 +88,8 @@ function channelWithEmoji(value) {
|
||||
}
|
||||
}
|
||||
function colorPct(value) {
|
||||
let fixedPercent = value.toFixed(3);
|
||||
//fixedPercent = (fixedPercent < 10 ? '0' : '') + fixedPercent;
|
||||
let css_class = "";
|
||||
if (value < 1) {
|
||||
css_class = "green";
|
||||
@ -102,9 +99,8 @@ function colorPct(value) {
|
||||
} else {
|
||||
css_class = "red";
|
||||
}
|
||||
return [Tag("span", {"class": css_class}, value.toFixed(3))];
|
||||
return [Tag("span", {"class": css_class}, fixedPercent)];
|
||||
}
|
||||
|
||||
function isPassed(value) {
|
||||
const font = value ? emojiFont("❌") : emojiFont("✔");
|
||||
return [
|
||||
@ -234,7 +230,7 @@ function buildData(table, images, data, sort) {
|
||||
const saveToLocalStorage = debounce((key, value) => {
|
||||
localStorage.setItem(key, value);
|
||||
});
|
||||
const loadFromLocalStorage = (key) => {
|
||||
const loadFromLocalStorage = (key, default_option) => {
|
||||
const value = localStorage.getItem(key);
|
||||
if (isNaN(value)) {
|
||||
switch(value) { // ugly textual localStorage
|
||||
@ -243,10 +239,13 @@ const loadFromLocalStorage = (key) => {
|
||||
case "false":
|
||||
return false;
|
||||
case "null":
|
||||
return null;
|
||||
return default_option ? default_option : null;
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
} else
|
||||
if (value === null) {
|
||||
return default_option ? default_option : null;
|
||||
}
|
||||
return parseFloat(value); // fix !!"0" = true
|
||||
}
|
||||
@ -296,12 +295,16 @@ window.onload = () => {
|
||||
saveToLocalStorage("rendertest_switchfrequency", value);
|
||||
}
|
||||
|
||||
let isPaused = false;
|
||||
let gridContainer, sidebarOptions, numberInput, rangeInput, table, images;
|
||||
|
||||
const tableSort = !!loadFromLocalStorage("rendertest_tablesort");
|
||||
const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos");
|
||||
let gridContainer, sidebarOptions, numberInput, rangeInput, table, images, vpaddin_input;
|
||||
|
||||
const switchFrequency = loadFromLocalStorage("rendertest_switchfrequency", 700);
|
||||
const tableSort = loadFromLocalStorage("rendertest_tablesort", false);
|
||||
const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos", "left");
|
||||
const vpadding = loadFromLocalStorage("rendertest_vpadding", true);
|
||||
const all_diff = loadFromLocalStorage("rendertest_all_diff", false);
|
||||
const sidebarMode = loadFromLocalStorage("rendertest_sidebarmode", "minimize");
|
||||
const diffMode = loadFromLocalStorage("rendertest_diffmode", "click");
|
||||
let isPaused = loadFromLocalStorage("rendertest_paused", false);
|
||||
function uglyChecked(value) { // fast hack
|
||||
return value ? {"checked": "checked"} : {};
|
||||
}
|
||||
@ -323,12 +326,18 @@ window.onload = () => {
|
||||
Text(" Show diff mode on")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "diff_mode", "value": "click", "checked": "checked"}),
|
||||
Tag("input", {"type": "radio", "name": "diff_mode", "value": "click", ...uglyChecked(diffMode === "click")}, null, null, "input", (e) => {
|
||||
images.classList.toggle("diff_separate");
|
||||
saveToLocalStorage("rendertest_diffmode", e.target.value);
|
||||
}),
|
||||
Tag("span", {"class": "emoji"}, "🖱"),
|
||||
Text(" Click (LMB)")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "diff_mode", "value": "separate", "disabled": "disabled"}),
|
||||
Tag("input", {"type": "radio", "name": "diff_mode", "value": "separate", ...uglyChecked(diffMode === "separate")}, null, null, "input", (e) => {
|
||||
images.classList.toggle("diff_separate");
|
||||
saveToLocalStorage("rendertest_diffmode", e.target.value);
|
||||
}),
|
||||
Tag("span", {"class": "emoji"}, "🎏"),
|
||||
Text(" Separate")
|
||||
])
|
||||
@ -354,14 +363,15 @@ window.onload = () => {
|
||||
Tag("span", {"class": "emoji"}, "🎢"),
|
||||
Text(" Speed switch image")
|
||||
]),
|
||||
rangeInput = Tag("input", {"type": "range", "style": "width: 140px;", "min": "10", "max": "1000", "value": "700"}, null, null, "input", syncSliderValues),
|
||||
numberInput = Tag("input", {"type": "number", "size": "5", "min": "10", "max": "1000", "value": "700"}, null, null, "input", syncSliderValues),
|
||||
rangeInput = Tag("input", {"type": "range", "style": "width: 140px;", "min": "10", "max": "1000", "value": switchFrequency}, null, null, "input", syncSliderValues),
|
||||
numberInput = Tag("input", {"type": "number", "size": "5", "min": "10", "max": "1000", "value": switchFrequency}, null, null, "input", syncSliderValues),
|
||||
Text(" ms "),
|
||||
Tag("button", null, "pause", null, "click", (e) => {
|
||||
Tag("button", null, isPaused ? "resume" : "pause", null, "click", (e) => {
|
||||
//e.target.textContent = isPaused ? "❄ pause" : "🔥 resume";
|
||||
e.target.textContent = isPaused ? "pause" : "resume";
|
||||
changeAnimationDuration(isPaused ? numberInput.value : 0);
|
||||
isPaused = !isPaused;
|
||||
saveToLocalStorage("rendertest_paused", isPaused);
|
||||
})
|
||||
]),
|
||||
/* future
|
||||
@ -376,14 +386,17 @@ window.onload = () => {
|
||||
Text(" Sidebar")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "minimize", "checked": "checked"}, null, null, "input", (e) => {
|
||||
sidebarOptions.classList.toggle("sticky")
|
||||
Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "minimize", ...uglyChecked(sidebarMode === "minimize")}, null, null, "input", (e) => {
|
||||
sidebarOptions.classList.toggle("sticky");
|
||||
saveToLocalStorage("rendertest_sidebarmode", e.target.value);
|
||||
|
||||
}),
|
||||
Text(" auto minimize")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "always"}, null, null, "input", (e) => {
|
||||
sidebarOptions.classList.toggle("sticky")
|
||||
Tag("input", {"type": "radio", "name": "sidebar-mode", "value": "always", ...uglyChecked(sidebarMode === "always")}, null, null, "input", (e) => {
|
||||
sidebarOptions.classList.toggle("sticky");
|
||||
saveToLocalStorage("rendertest_sidebarmode", e.target.value);
|
||||
}),
|
||||
Text(" show always")
|
||||
]),
|
||||
@ -416,7 +429,7 @@ window.onload = () => {
|
||||
Text(" default")
|
||||
]),
|
||||
Tag("label", null, null, [
|
||||
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "minimize"}, null, null, "input", (e) => {
|
||||
Tag("input", {"type": "radio", "name": "sidebar-size", "value": "min"}, null, null, "input", (e) => {
|
||||
document.body.classList.toggle("min");
|
||||
}),
|
||||
Text(" mini")
|
||||
@ -441,8 +454,9 @@ window.onload = () => {
|
||||
Tag("span", {"class": "emoji Noto"}, "🖼"),
|
||||
Tag("label", null, null, [
|
||||
Text(" vertical padding"),
|
||||
Tag("input", {"type": "checkbox", "name": "all_diff", "checked": "checked"}, null, null, "input", (e) => {
|
||||
images.classList.toggle("padding");
|
||||
vpaddin_input = Tag("input", {"type": "checkbox", "name": "vpadding", ...uglyChecked(vpadding)}, null, null, "change", (e) => {
|
||||
images.classList.toggle("vpadding");
|
||||
saveToLocalStorage("rendertest_vpadding", e.target.checked);
|
||||
})
|
||||
])
|
||||
])
|
||||
@ -452,7 +466,12 @@ window.onload = () => {
|
||||
Tag("span", {"class": "emoji"}, "📷"),
|
||||
Tag("label", null, null, [
|
||||
Text(" Toggle diff for all"),
|
||||
Tag("input", {"type": "checkbox", "name": "all_diff", "disabled": "disabled"})
|
||||
Tag("input", {"type": "checkbox", "name": "all_diff", ...uglyChecked(all_diff)}, null, null, "change", (e) => {
|
||||
images.classList.toggle("all_diff");
|
||||
vpaddin_input.disabled = !vpaddin_input.disabled;
|
||||
images.classList.toggle("vpadding");
|
||||
saveToLocalStorage("rendertest_all_diff", e.target.checked);
|
||||
})
|
||||
])
|
||||
])
|
||||
]),
|
||||
@ -485,7 +504,7 @@ window.onload = () => {
|
||||
Tag("h2", null, "Summary"),
|
||||
Tag("div", {"id": "summary"}, null, [...buildSummary(data)]),
|
||||
Tag("h2", null, "Images of things that are not perfect"),
|
||||
images = Tag("div", {"id": "fail_images", "class": "padding"})
|
||||
images = Tag("div", {"id": "fail_images", "class": "vpadding"})
|
||||
])
|
||||
])
|
||||
document.body.appendChild(gridContainer);
|
||||
@ -496,8 +515,21 @@ window.onload = () => {
|
||||
if (sidebarPos == "right") {
|
||||
gridContainer.classList.toggle("reversed");
|
||||
}
|
||||
|
||||
|
||||
if (!vpadding) {
|
||||
images.classList.toggle("vpadding");
|
||||
}
|
||||
if (all_diff) { // TODO: better UX
|
||||
images.classList.toggle("all_diff");
|
||||
vpaddin_input.disabled = !vpaddin_input.disabled;
|
||||
images.classList.toggle("vpadding");
|
||||
}
|
||||
if (diffMode == "separate") {
|
||||
images.classList.toggle("diff_separate");
|
||||
}
|
||||
if (sidebarMode == "always") {
|
||||
sidebarOptions.classList.toggle("sticky");
|
||||
}
|
||||
changeAnimationDuration(isPaused ? 0 : numberInput.value);
|
||||
|
||||
// stop animation when not in the viewport
|
||||
function handleIntersection(entries, observer) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user