feat: use input type number for counter

This commit is contained in:
max_richter 2023-08-11 17:17:38 +02:00
parent 8d53e4cd68
commit 3aa96dcef3
2 changed files with 18 additions and 20 deletions

View File

@ -18,6 +18,7 @@ export default function Counter(props: CounterProps) {
</Button> </Button>
<input <input
class="text-3xl bg-transparent inline text-center -mx-4" class="text-3xl bg-transparent inline text-center -mx-4"
type="number"
size={props.count.toString().length} size={props.count.toString().length}
value={props.count} value={props.count}
onInput={(ev) => props.count.value = ev.target?.value} onInput={(ev) => props.count.value = ev.target?.value}

View File

@ -41,16 +41,16 @@ function thumbHashToRGBA(hash) {
} }
return ac; return ac;
}; };
let l_ac = decodeChannel(lx, ly, l_scale); const l_ac = decodeChannel(lx, ly, l_scale);
let p_ac = decodeChannel(3, 3, p_scale * 1.25); const p_ac = decodeChannel(3, 3, p_scale * 1.25);
let q_ac = decodeChannel(3, 3, q_scale * 1.25); const q_ac = decodeChannel(3, 3, q_scale * 1.25);
let a_ac = hasAlpha && decodeChannel(5, 5, a_scale); const a_ac = hasAlpha && decodeChannel(5, 5, a_scale);
// Decode using the DCT into RGB // Decode using the DCT into RGB
let ratio = thumbHashToApproximateAspectRatio(hash); const ratio = thumbHashToApproximateAspectRatio(hash);
let w = round(ratio > 1 ? 32 : 32 * ratio); const w = round(ratio > 1 ? 32 : 32 * ratio);
let h = round(ratio > 1 ? 32 / ratio : 32); const h = round(ratio > 1 ? 32 / ratio : 32);
let rgba = new Uint8Array(w * h * 4), fx = [], fy = []; const rgba = new Uint8Array(w * h * 4), fx = [], fy = [];
for (let y = 0, i = 0; y < h; y++) { for (let y = 0, i = 0; y < h; y++) {
for (let x = 0; x < w; x++, i += 4) { for (let x = 0; x < w; x++, i += 4) {
let l = l_dc, p = p_dc, q = q_dc, a = a_dc; let l = l_dc, p = p_dc, q = q_dc, a = a_dc;
@ -77,7 +77,7 @@ function thumbHashToRGBA(hash) {
// Decode P and Q // Decode P and Q
for (let cy = 0, j = 0; cy < 3; cy++) { for (let cy = 0, j = 0; cy < 3; cy++) {
for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) { for (let cx = cy ? 0 : 1, fy2 = fy[cy] * 2; cx < 3 - cy; cx++, j++) {
let f = fx[cx] * fy2; const f = fx[cx] * fy2;
p += p_ac[j] * f; p += p_ac[j] * f;
q += q_ac[j] * f; q += q_ac[j] * f;
} }
@ -93,9 +93,9 @@ function thumbHashToRGBA(hash) {
} }
// Convert to RGB // Convert to RGB
let b = l - 2 / 3 * p; const b = l - 2 / 3 * p;
let r = (3 * l - b + q) / 2; const r = (3 * l - b + q) / 2;
let g = r - q; const g = r - q;
rgba[i] = max(0, 255 * min(1, r)); rgba[i] = max(0, 255 * min(1, r));
rgba[i + 1] = max(0, 255 * min(1, g)); rgba[i + 1] = max(0, 255 * min(1, g));
rgba[i + 2] = max(0, 255 * min(1, b)); rgba[i + 2] = max(0, 255 * min(1, b));
@ -106,9 +106,9 @@ function thumbHashToRGBA(hash) {
} }
function rgbaToDataURL(w, h, rgba) { function rgbaToDataURL(w, h, rgba) {
let row = w * 4 + 1; const row = w * 4 + 1;
let idat = 6 + h * (5 + row); const idat = 6 + h * (5 + row);
let bytes = [ const bytes = [
137, 137,
80, 80,
78, 78,
@ -153,7 +153,7 @@ function rgbaToDataURL(w, h, rgba) {
120, 120,
1, 1,
]; ];
let table = [ const table = [
0, 0,
498536548, 498536548,
997073096, 997073096,
@ -226,9 +226,6 @@ function rgbaToDataURL(w, h, rgba) {
return "data:image/png;base64," + btoa(String.fromCharCode(...bytes)); return "data:image/png;base64," + btoa(String.fromCharCode(...bytes));
} }
function thumbHashToDataURL(hash) {
}
document.querySelectorAll("[data-thumb]").forEach((entry) => { document.querySelectorAll("[data-thumb]").forEach((entry) => {
const hash = entry.getAttribute("data-thumb"); const hash = entry.getAttribute("data-thumb");
@ -251,8 +248,8 @@ document.querySelectorAll("[data-thumb]").forEach((entry) => {
const child = entry.querySelector("img[data-thumb-img]"); const child = entry.querySelector("img[data-thumb-img]");
if (child && !child.complete) { if (child && !child.complete) {
child.style.opacity = 0; child.style.opacity = 0;
child.style.transition = "opacity 0.3s ease";
child.addEventListener("load", () => { child.addEventListener("load", () => {
child.style.transition = "opacity 0.3s ease";
child.style.opacity = 1; child.style.opacity = 1;
}); });
} }