feat: use input type number for counter
This commit is contained in:
parent
8d53e4cd68
commit
3aa96dcef3
@ -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}
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user