rhi/yummy.cricket
1
0
Fork 0
Code Issues Releases Activity

show/hide ui buttons

Browse source
This commit is contained in:
Rhiannon Morris 2024-12-10 05:19:14 +01:00
parent 578176c845
commit 621827c6aa
6 changed files with 107 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

59
rainbow-quox/script/quox.ts
View file

@ -206,13 +206,13 @@ applyState(data: LayerData, opts: Partial<ApplyStateOpts>): Promise<State> {
await recolorLayers(data, rgb);
updateBg(oklch);
updatePalette(oklch, rgb);
updateSvgs(oklch, rgb);
updateLabel(initState);
updateUrl(initState);
if (firstLoad) {
await instantUpdateImage(side, await ensureComposed(buf, data));
} else {
updateUrl(initState);
await animateUpdateImage(buf, side, data, done ?? (() => {}));
}
@ -289,33 +289,40 @@ function updateLabel(st: State) {
if (stateLabel) stateLabel.innerHTML = `${st}`;
}
function updatePalette(oklch: Color.Colors, rgb: Color.Rgbs) {
function updateSvgs(oklch: Color.Colors, rgb: Color.Rgbs) {
const paletteObj = document.getElementById('palette') as HTMLObjectElement;
const palette = paletteObj.contentDocument as XMLDocument | null;
if (!palette) return;
if (palette) {
palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
const get = (id: string) => palette.getElementById(id);
palette.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
const get = (id: string) => palette.getElementById(id);
for (const layer of Color.allLayers) {
let col = rgb[layer].css();
let elem;
for (const layer of Color.allLayers) {
let col = rgb[layer].css();
let elem;
// main group
if (elem = get(`i-${layer}`)) {
if (oklch[layer].l < 0.6) {
elem.classList.add('light'); elem.classList.remove('dark');
} else {
elem.classList.add('dark'); elem.classList.remove('light');
// main group
if (elem = get(`i-${layer}`)) {
if (oklch[layer].l < 0.6) {
elem.classList.add('light'); elem.classList.remove('dark');
} else {
elem.classList.add('dark'); elem.classList.remove('light');
}
elem.style.setProperty('--col', col);
}
elem.style.setProperty('--col', col);
}
// label
if (elem = get(`c-${layer}`)) elem.innerHTML = col;
// minor swatch, if applicable
if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col);
// label
if (elem = get(`c-${layer}`)) elem.innerHTML = col;
// minor swatch, if applicable
if (elem = get(`s-${layer}`)) elem.style.setProperty('--col', col);
}
}
const showuiObj = document.getElementById('showui') as HTMLObjectElement;
const showui = showuiObj.contentDocument as XMLDocument | null;
if (showui) {
showui.documentElement.style.setProperty('--hue', `${oklch.outer.h}`);
}
}
@ -335,6 +342,14 @@ async function setup() {
const swap = document.getElementById('swap')!;
addListeners();
// these ones don't need to be toggled
document.getElementById('hideui')?.addEventListener('click', () => {
document.documentElement.dataset.state = 'fullquox';
});
document.getElementById('showui')?.addEventListener('click', () => {
document.documentElement.dataset.state = 'ready';
});
document.documentElement.dataset.state = 'ready';
async function run(task: (k: Done) => Promise<void>): Promise<void> {