priduck-color-theme-cli-js/examples/example.js

144 lines
4.1 KiB
JavaScript

// Set up the hue slider.
const slider = document.getElementById("hue-selector");
const output = document.getElementById("hue");
const box = document.getElementById("hue-box");
output.innerHTML = slider.value; // Display the default slider value
// If we have a query parameter, select that.
const urlParams = new URLSearchParams(window.location.search);
const hueParam = urlParams.get("hue");
if (hueParam) {
window.setTimeout(() => setHue(hueParam));
}
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
setHue(this.value);
};
window.setTimeout(() => update(), 250);
// Color Theme
var autoColorTheme = document.getElementById("auto-color-scheme");
var lightColorTheme = document.getElementById("light-color-scheme");
var darkColorTheme = document.getElementById("dark-color-scheme");
autoColorTheme.onclick = function () {
document.documentElement.removeAttribute("data-prefers-color-scheme");
};
lightColorTheme.onclick = function () {
document.documentElement.setAttribute("data-prefers-color-scheme", "light");
};
darkColorTheme.onclick = function () {
document.documentElement.setAttribute("data-prefers-color-scheme", "dark");
};
// Prefers Contrast
var autoContrast = document.getElementById("auto-contrast-selector");
var moreContrast = document.getElementById("more-contrast-selector");
var lessContrast = document.getElementById("less-contrast-selector");
autoContrast.onclick = function () {
document.documentElement.removeAttribute("data-prefers-contrast");
};
moreContrast.onclick = function () {
document.documentElement.setAttribute("data-prefers-contrast", "more");
};
lessContrast.onclick = function () {
document.documentElement.setAttribute("data-prefers-contrast", "less");
};
// Translating colors. We use a canvas to paint the color and then get the
// RGB from there for programs that need it (Inkscape and Gimp).
//
// https://stackoverflow.com/a/76469049
const canvas = document.createElement("canvas");
canvas.width = canvas.height = 1;
const ctx = canvas.getContext("2d", { willReadFrequently: true });
function getRgb(style) {
ctx.fillStyle = style;
ctx.fillRect(0, 0, 1, 1);
const colors = ctx.getImageData(0, 0, 1, 1).data;
const r = colors[0].toString(16).padStart(2, "0").toLowerCase();
const g = colors[1].toString(16).padStart(2, "0").toLowerCase();
const b = colors[2].toString(16).padStart(2, "0").toLowerCase();
const channels = [colors[0], colors[1], colors[2]];
return [channels.join(" "), `#${r}${g}${b}`];
}
/**
* Implements a simple debounce function.
*
* @param func
* @param {number} timeout
* @returns
*/
function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
// Used to avoid hammering the CPU while we calculate colors.
const update = debounce(_update);
/**
* Sets the hue slider to the given color.
*
* @param {string} hue
*/
function setHue(hue) {
// Set the hue on the screen.
console.log("setting hue", hue);
document.documentElement.style.setProperty("--color-priduck-hue", hue);
output.innerHTML = hue;
update();
}
/**
* Updates all of the boxes and copy icons.
*/
function _update() {
// Set the history URL.
console.log("setting url");
const url = new URL(location);
const hue = output.innerHTML;
url.searchParams.set("hue", hue);
history.pushState({}, "", url);
// Update the controls.
const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const c of range) {
for (const b of range) {
const id = `c${c}b${b}`;
const cb = document.getElementById(id);
const style = window.getComputedStyle(cb, null);
const lch = style["background-color"];
const [colors, rgb] = getRgb(lch);
cb.innerHTML = `
<div class='color-name'>${id}</div>
<div class='color-lch'>${lch}</div>
<div class='color-rgb'>${rgb}</div>
<div class='color-rgb'>${rgb}ff</div>
<div class='color-rgb'>${colors}</div>
`;
}
}
}