zero-hour 1.3.1 → 2.0.0

package/dist/index.cjs

@@ -0,0 +1,607 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/zero-hour.css?inline
+var zero_hour_default = ":host{width:100%;display:block;overflow:hidden;container-type:inline-size}.zh{box-sizing:border-box;align-items:stretch;gap:0;display:flex;position:relative}.zh__group{flex:1 1 0;grid-template-rows:auto;grid-template-columns:1fr 1fr;gap:0;width:100%;min-width:0;display:grid}.zh__sep{flex:0 0 var(--zh-sep-width,4%);width:var(--zh-sep-width,4%);background-image:var(--zh-sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:var(--zh-digit-aspect,9 / 12);width:100%;position:relative;overflow:hidden}.zh__digit-track{flex-direction:column;width:100%;height:100%;display:flex;transform:translateY(0)}.zh--mode-scroll .zh__digit-track{transition:transform var(--zh-scroll-duration,.375s) var(--zh-scroll-timing,cubic-bezier(.445, .05, .55, .95))}.zh__digit-face{background-image:var(--zh-digits-url);background-repeat:no-repeat;background-size:calc(var(--zh-digits-frames,10) * 100%) 100%;background-position:calc(var(--zh-sheet-index,0) * 100% / (var(--zh-digits-frames,10) - 1)) 0;flex:0 0 100%;width:100%;height:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}\n";
+
+//#endregion
+//#region src/index.ts
+const zeroHourCssText = zero_hour_default;
+function digitToSheetIndex(d) {
+	const n = d.charCodeAt(0) - 48;
+	if (n >= 0 && n <= 9) return n;
+	return 0;
+}
+function clampNonNegative(n) {
+	return n < 0 ? 0 : n;
+}
+const DEFAULT_UNITS = {
+	showDays: true,
+	showHours: true,
+	showMinutes: true,
+	showSeconds: true
+};
+const ZERO_TIME = {
+	hours: 0,
+	minutes: 0,
+	seconds: 0
+};
+function supportsAdoptedStyleSheets(root) {
+	return "adoptedStyleSheets" in root;
+}
+function makeConstructableSheet(cssText) {
+	try {
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync(cssText);
+		return sheet;
+	} catch {
+		return null;
+	}
+}
+const DEFAULT_STYLESHEET = makeConstructableSheet(zero_hour_default);
+function msToDhms(ms) {
+	const totalSec = Math.floor(ms / 1e3);
+	const s = totalSec % 60;
+	const m = Math.floor(totalSec / 60) % 60;
+	const hTotal = Math.floor(totalSec / 3600);
+	return {
+		d: Math.floor(hTotal / 24),
+		h: hTotal % 24,
+		m,
+		s,
+		totalSec
+	};
+}
+function pad2(n) {
+	return String(n).padStart(2, "0");
+}
+function toDigitChars(n, minDigits) {
+	return [...String(n).padStart(minDigits, "0")];
+}
+function hasBoolAttr(el, name, defaultValue) {
+	if (!el.hasAttribute(name)) return defaultValue;
+	const raw = el.getAttribute(name);
+	if (raw == null || raw === "") return true;
+	return raw !== "false";
+}
+function parseYmdDate(raw) {
+	if (raw == null) return null;
+	const trimmed = raw.trim();
+	if (!trimmed) return null;
+	const m = trimmed.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+	if (!m) return null;
+	const year = Number(m[1]);
+	const month = Number(m[2]);
+	const day = Number(m[3]);
+	if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) return null;
+	return {
+		year,
+		month,
+		day
+	};
+}
+function parseHmsTime(raw) {
+	if (raw == null) return { ...ZERO_TIME };
+	const trimmed = raw.trim();
+	if (!trimmed) return { ...ZERO_TIME };
+	const parts = trimmed.split(":");
+	const h = Number(parts[0] ?? "0");
+	const m = Number(parts[1] ?? "0");
+	const s = Number(parts[2] ?? "0");
+	return {
+		hours: Number.isFinite(h) ? h : 0,
+		minutes: Number.isFinite(m) ? m : 0,
+		seconds: Number.isFinite(s) ? s : 0
+	};
+}
+function parseHmsTimeStrict(raw) {
+	if (raw == null) return null;
+	const trimmed = raw.trim();
+	if (!trimmed) return null;
+	const m = trimmed.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+	if (!m) return null;
+	const hours = Number(m[1]);
+	const minutes = Number(m[2]);
+	const seconds = Number(m[3] ?? "0");
+	if (!Number.isFinite(hours) || !Number.isFinite(minutes) || !Number.isFinite(seconds)) return null;
+	if (hours < 0 || hours > 23) return null;
+	if (minutes < 0 || minutes > 59) return null;
+	if (seconds < 0 || seconds > 59) return null;
+	return {
+		hours,
+		minutes,
+		seconds
+	};
+}
+function parseUtcOffsetMinutes(raw) {
+	if (raw == null) return null;
+	let trimmed = raw.trim();
+	if (!trimmed) return null;
+	if (/^utc/i.test(trimmed)) trimmed = trimmed.slice(3);
+	let sign = 1;
+	if (trimmed[0] === "+") trimmed = trimmed.slice(1);
+	else if (trimmed[0] === "-") {
+		sign = -1;
+		trimmed = trimmed.slice(1);
+	}
+	if (!trimmed) return null;
+	const [hStr, mStr = "0"] = trimmed.split(":");
+	const h = Number(hStr);
+	const m = Number(mStr);
+	if (!Number.isFinite(h) || !Number.isFinite(m)) return null;
+	const totalMinutes = h * 60 + m;
+	return sign * totalMinutes;
+}
+function readZeroHourQueryOverrides() {
+	if (typeof window === "undefined") return null;
+	if (!("location" in window)) return null;
+	const search = window.location?.search ?? "";
+	if (!search) return null;
+	const sp = new URLSearchParams(search);
+	const overrides = {};
+	const date = sp.get("date")?.trim();
+	if (date) overrides.date = date;
+	const time = sp.get("time")?.trim();
+	if (time) overrides.time = time;
+	const utc = sp.get("utc")?.trim();
+	if (utc) overrides.utc = utc;
+	const units = sp.get("units")?.trim();
+	if (units) overrides.units = units;
+	return Object.keys(overrides).length ? overrides : null;
+}
+function parseUnitsPattern(raw) {
+	const pattern = (raw ?? "").trim().toLowerCase();
+	if (!pattern) return DEFAULT_UNITS;
+	const parts = pattern.split(":").map((p) => p.trim()).filter(Boolean);
+	if (!parts.length) return DEFAULT_UNITS;
+	const set = new Set(parts);
+	const showDays = set.has("d");
+	const showHours = set.has("h");
+	const showMinutes = set.has("m");
+	const showSeconds = set.has("s");
+	if (!showDays && !showHours && !showMinutes && !showSeconds) return DEFAULT_UNITS;
+	return {
+		showDays,
+		showHours,
+		showMinutes,
+		showSeconds
+	};
+}
+var ZeroHour = class ZeroHour extends HTMLElement {
+	static defaultStylesheet = DEFAULT_STYLESHEET;
+	static observedAttributes = [
+		"digits-url",
+		"separator-url",
+		"autostart",
+		"date",
+		"time",
+		"utc",
+		"units",
+		"mode"
+	];
+	shadow = this.attachShadow({ mode: "open" });
+	digitsUrl = null;
+	separatorUrl = null;
+	autostart = true;
+	durationMs = 0;
+	targetEpochMs = null;
+	startEpochMs = null;
+	nextTickTimeout = null;
+	doneFired = false;
+	rootEl;
+	daysEl;
+	hoursEl;
+	minutesEl;
+	secondsEl;
+	a11yEl;
+	sep0El;
+	sep1El;
+	sep2El;
+	styleEl = null;
+	showDays = true;
+	showHours = true;
+	showMinutes = true;
+	showSeconds = true;
+	mode = "static";
+	hasDigitsRendered = false;
+	connectedCallback() {
+		this.render();
+		this.readAttributes();
+		if (this.autostart) this.start();
+		else this.renderStaticInitial();
+	}
+	disconnectedCallback() {
+		this.stop();
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (!this.isConnected) return;
+		const wasRunning = this.isRunning();
+		this.readAttributes();
+		this.doneFired = false;
+		if (wasRunning && this.autostart) this.start();
+		else this.renderStaticInitial();
+	}
+	start() {
+		this.stop();
+		if (!this.digitsUrl) return;
+		this.durationMs = this.targetEpochMs != null ? this.targetEpochMs - Date.now() : 0;
+		this.startEpochMs = Date.now();
+		this.tick();
+		this.scheduleNextSecondBoundary();
+	}
+	stop() {
+		if (this.nextTickTimeout != null) {
+			window.clearTimeout(this.nextTickTimeout);
+			this.nextTickTimeout = null;
+		}
+		this.startEpochMs = null;
+	}
+	reset() {
+		this.doneFired = false;
+		if (this.autostart) this.start();
+		else this.renderStaticInitial();
+	}
+	isRunning() {
+		return this.startEpochMs != null && this.nextTickTimeout != null;
+	}
+	isDone() {
+		if (!this.digitsUrl) return false;
+		if (this.targetEpochMs == null) return false;
+		return Date.now() >= this.targetEpochMs;
+	}
+	readAttributes() {
+		if (!this.rootEl) this.render();
+		const query = readZeroHourQueryOverrides();
+		this.digitsUrl = this.getAttribute("digits-url");
+		this.separatorUrl = this.getAttribute("separator-url");
+		this.autostart = hasBoolAttr(this, "autostart", true);
+		const modeRaw = (this.getAttribute("mode") ?? "").trim().toLowerCase();
+		this.mode = modeRaw === "scroll" ? "scroll" : "static";
+		const units = parseUnitsPattern(query?.units ?? this.getAttribute("units"));
+		this.showDays = units.showDays;
+		this.showHours = units.showHours;
+		this.showMinutes = units.showMinutes;
+		this.showSeconds = units.showSeconds;
+		const dateFromAttr = parseYmdDate(this.getAttribute("date"));
+		const date = parseYmdDate(query?.date ?? null) ?? dateFromAttr;
+		const timeFromAttr = parseHmsTime(this.getAttribute("time"));
+		const time = parseHmsTimeStrict(query?.time ?? null) ?? timeFromAttr;
+		const offsetMinutesFromAttr = parseUtcOffsetMinutes(this.getAttribute("utc"));
+		const offsetMinutes = parseUtcOffsetMinutes(query?.utc ?? null) ?? offsetMinutesFromAttr ?? 0;
+		if (!date) this.targetEpochMs = null;
+		else {
+			const utcMs = Date.UTC(date.year, date.month - 1, date.day, time.hours, time.minutes, time.seconds);
+			this.targetEpochMs = utcMs - offsetMinutes * 60 * 1e3;
+		}
+		this.durationMs = 0;
+		if (!this.digitsUrl) {
+			this.setTextFallback("—:—:—:—");
+			return;
+		}
+		this.rootEl.style.setProperty("--zh-digits-url", `url("${this.digitsUrl}")`);
+		if (this.separatorUrl) this.rootEl.style.setProperty("--zh-sep-url", `url("${this.separatorUrl}")`);
+		else this.rootEl.style.removeProperty("--zh-sep-url");
+		this.applyUnitsVisibility();
+		this.rootEl.classList.toggle("zh--mode-scroll", this.mode === "scroll");
+	}
+	renderStaticInitial() {
+		if (this.targetEpochMs != null) {
+			const now = Date.now();
+			const { d, h, m, s } = msToDhms(clampNonNegative(this.targetEpochMs - now));
+			this.setDigits({
+				d,
+				h,
+				m,
+				s
+			}, false);
+		} else this.setDigits({
+			d: 0,
+			h: 0,
+			m: 0,
+			s: 0
+		}, false);
+	}
+	render() {
+		this.applyStyles(null);
+		this.rootEl = document.createElement("div");
+		this.rootEl.className = "zh";
+		this.daysEl = document.createElement("div");
+		this.daysEl.className = "zh__group";
+		this.hoursEl = document.createElement("div");
+		this.hoursEl.className = "zh__group";
+		this.minutesEl = document.createElement("div");
+		this.minutesEl.className = "zh__group";
+		this.secondsEl = document.createElement("div");
+		this.secondsEl.className = "zh__group";
+		this.sep0El = document.createElement("span");
+		this.sep0El.className = "zh__sep";
+		this.sep1El = document.createElement("span");
+		this.sep1El.className = "zh__sep";
+		this.sep2El = document.createElement("span");
+		this.sep2El.className = "zh__sep";
+		this.a11yEl = document.createElement("span");
+		this.a11yEl.className = "zh__a11y";
+		this.a11yEl.setAttribute("aria-live", "polite");
+		this.rootEl.append(this.daysEl, this.sep0El, this.hoursEl, this.sep1El, this.minutesEl, this.sep2El, this.secondsEl, this.a11yEl);
+		this.shadow.innerHTML = "";
+		if (this.styleEl) this.shadow.append(this.styleEl);
+		this.shadow.append(this.rootEl);
+		this.setDigits({
+			d: 0,
+			h: 0,
+			m: 0,
+			s: 0
+		}, false);
+		this.hasDigitsRendered = false;
+	}
+	setTextFallback(text) {
+		this.a11yEl.textContent = text;
+	}
+	applyUnitsVisibility() {
+		if (!this.rootEl) return;
+		this.daysEl.style.display = this.showDays ? "" : "none";
+		this.hoursEl.style.display = this.showHours ? "" : "none";
+		this.minutesEl.style.display = this.showMinutes ? "" : "none";
+		this.secondsEl.style.display = this.showSeconds ? "" : "none";
+		if (!!!this.separatorUrl) {
+			this.sep0El.style.display = "none";
+			this.sep1El.style.display = "none";
+			this.sep2El.style.display = "none";
+			return;
+		}
+		const groupVisible = [
+			this.showDays,
+			this.showHours,
+			this.showMinutes,
+			this.showSeconds
+		];
+		const visibleIndexes = [];
+		for (let i = 0; i < groupVisible.length; i++) if (groupVisible[i]) visibleIndexes.push(i);
+		this.rootEl.style.setProperty("--zh-groups", String(visibleIndexes.length));
+		const sepUsed = [
+			false,
+			false,
+			false
+		];
+		if (visibleIndexes.length >= 2) for (let i = 0; i < visibleIndexes.length - 1; i++) {
+			const rightIdx = visibleIndexes[i + 1];
+			const sepIndex = Math.min(2, Math.max(0, rightIdx - 1));
+			sepUsed[sepIndex] = true;
+		}
+		this.sep0El.style.display = sepUsed[0] ? "" : "none";
+		this.sep1El.style.display = sepUsed[1] ? "" : "none";
+		this.sep2El.style.display = sepUsed[2] ? "" : "none";
+	}
+	setDigits({ d, h, m, s }, animate = true) {
+		let shouldAnimate = animate;
+		if (!this.hasDigitsRendered) shouldAnimate = false;
+		const daysChars = toDigitChars(Math.min(d, 99), 2);
+		const hoursChars = toDigitChars(h, 2);
+		const minChars = [...pad2(m)];
+		const secChars = [...pad2(s)];
+		this.syncDigitGroup(this.daysEl, daysChars, shouldAnimate);
+		this.syncDigitGroup(this.hoursEl, hoursChars, shouldAnimate);
+		this.syncDigitGroup(this.minutesEl, minChars, shouldAnimate);
+		this.syncDigitGroup(this.secondsEl, secChars, shouldAnimate);
+		const parts = [];
+		if (this.showDays) parts.push(daysChars.join(""));
+		if (this.showHours) parts.push(hoursChars.join(""));
+		if (this.showMinutes) parts.push(minChars.join(""));
+		if (this.showSeconds) parts.push(secChars.join(""));
+		this.a11yEl.textContent = parts.length ? parts.join(":") : "—";
+		this.hasDigitsRendered = true;
+	}
+	syncDigitGroup(groupEl, chars, animate) {
+		while (groupEl.children.length < chars.length) {
+			const idx = groupEl.children.length;
+			groupEl.appendChild(this.createDigitSlot(chars[idx]));
+		}
+		while (groupEl.children.length > chars.length) {
+			const last = groupEl.lastElementChild;
+			if (!last) break;
+			groupEl.removeChild(last);
+		}
+		for (let i = 0; i < chars.length; i++) {
+			const el = groupEl.children[i];
+			this.syncDigitSlot(el, chars[i], animate);
+		}
+	}
+	createDigitSlot(char) {
+		const digit = document.createElement("span");
+		digit.className = "zh__digit";
+		const track = document.createElement("span");
+		track.className = "zh__digit-track";
+		const face = this.createDigitFace(char);
+		face.classList.add("zh__digit-face--current");
+		track.append(face);
+		digit.append(track);
+		return digit;
+	}
+	createDigitFace(char) {
+		const face = document.createElement("span");
+		face.className = "zh__digit-face";
+		this.setFaceDigit(face, char);
+		return face;
+	}
+	setFaceDigit(face, char) {
+		face.dataset.zhDigit = char;
+		const idx = digitToSheetIndex(char);
+		face.style.setProperty("--zh-sheet-index", String(idx));
+	}
+	ensureDigitTrack(slot) {
+		let track = slot.querySelector(".zh__digit-track");
+		if (!track) {
+			track = document.createElement("span");
+			track.className = "zh__digit-track";
+			slot.innerHTML = "";
+			slot.append(track);
+		}
+		return track;
+	}
+	getOrCreateCurrentFace(track, fallbackChar) {
+		let current = track.querySelector(".zh__digit-face--current");
+		if (!current) {
+			current = track.querySelector(".zh__digit-face") ?? this.createDigitFace(fallbackChar);
+			current.classList.add("zh__digit-face--current");
+			this.setFaceDigit(current, current.dataset.zhDigit ?? fallbackChar);
+			track.innerHTML = "";
+			track.append(current);
+		} else {
+			const faces = Array.from(track.children);
+			for (const face of faces) if (face !== current) track.removeChild(face);
+		}
+		return current;
+	}
+	cleanupTrack(track, faceToKeep) {
+		if (!track.contains(faceToKeep)) return;
+		const faces = Array.from(track.children);
+		for (const face of faces) if (face !== faceToKeep) track.removeChild(face);
+		faceToKeep.classList.remove("zh__digit-face--next");
+		faceToKeep.classList.add("zh__digit-face--current");
+		track.style.transition = this.mode === "scroll" ? "" : "none";
+		track.style.transform = "translateY(0)";
+	}
+	parseTransitionMs(el) {
+		const style = window.getComputedStyle(el);
+		const durations = style.transitionDuration.split(",").map((v) => v.trim());
+		const delays = style.transitionDelay.split(",").map((v) => v.trim());
+		const toMs = (val) => {
+			if (!val) return 0;
+			if (val.endsWith("ms")) return Number.parseFloat(val);
+			if (val.endsWith("s")) return Number.parseFloat(val) * 1e3;
+			return Number.parseFloat(val) || 0;
+		};
+		return (durations[0] ? toMs(durations[0]) : 0) + (delays[0] ? toMs(delays[0]) : 0);
+	}
+	animateDigitChange(track, currentFace, newChar) {
+		const nextFace = this.createDigitFace(newChar);
+		nextFace.classList.add("zh__digit-face--next");
+		track.innerHTML = "";
+		track.append(nextFace, currentFace);
+		track.style.transition = "none";
+		track.style.transform = "translateY(-100%)";
+		track.offsetHeight;
+		track.style.transition = "";
+		track.style.transform = "translateY(0)";
+		const cleanup = () => {
+			track.removeEventListener("transitionend", cleanup);
+			if (!track.contains(nextFace)) return;
+			this.cleanupTrack(track, nextFace);
+		};
+		track.addEventListener("transitionend", cleanup, { once: true });
+		const guardMs = this.parseTransitionMs(track) + 150;
+		window.setTimeout(cleanup, guardMs || 800);
+	}
+	syncDigitSlot(slot, char, animate) {
+		const track = this.ensureDigitTrack(slot);
+		const currentFace = this.getOrCreateCurrentFace(track, char);
+		const currentChar = currentFace.dataset.zhDigit ?? char;
+		this.setFaceDigit(currentFace, currentChar);
+		if (currentChar === char || !animate || this.mode !== "scroll") {
+			if (currentChar !== char) this.setFaceDigit(currentFace, char);
+			this.cleanupTrack(track, currentFace);
+			return;
+		}
+		this.animateDigitChange(track, currentFace, char);
+	}
+	tick() {
+		if (!this.digitsUrl) return;
+		const durationMs = clampNonNegative(this.durationMs);
+		if (durationMs === 0) {
+			this.setDigits({
+				d: 0,
+				h: 0,
+				m: 0,
+				s: 0
+			});
+			this.fireDoneOnce();
+			this.stop();
+			return;
+		}
+		const start = this.startEpochMs ?? Date.now();
+		const { d, h, m, s, totalSec } = msToDhms(clampNonNegative(durationMs - clampNonNegative(Date.now() - start)));
+		this.setDigits({
+			d,
+			h,
+			m,
+			s
+		});
+		if (totalSec === 0) {
+			this.fireDoneOnce();
+			this.stop();
+		}
+	}
+	fireDoneOnce() {
+		if (this.doneFired) return;
+		this.doneFired = true;
+		this.dispatchEvent(new CustomEvent("done"));
+	}
+	scheduleNextSecondBoundary() {
+		const msToNextSecond = 1e3 - Date.now() % 1e3;
+		this.nextTickTimeout = window.setTimeout(() => {
+			this.tick();
+			if (this.isRunning()) this.scheduleNextSecondBoundary();
+		}, msToNextSecond);
+	}
+	adoptStylesheet(sheet) {
+		this.applyStyles(sheet);
+	}
+	adoptStyles(styles) {
+		this.applyStyles(styles);
+	}
+	applyStyles(styles) {
+		if (typeof styles === "string") {
+			if (supportsAdoptedStyleSheets(this.shadow)) {
+				const sheet = makeConstructableSheet(styles);
+				if (sheet) {
+					this.shadow.adoptedStyleSheets = [sheet];
+					this.styleEl = null;
+					return;
+				}
+			}
+			if (!this.styleEl) this.styleEl = document.createElement("style");
+			this.styleEl.textContent = styles;
+			return;
+		}
+		if (styles && supportsAdoptedStyleSheets(this.shadow)) {
+			this.shadow.adoptedStyleSheets = [styles];
+			this.styleEl = null;
+			return;
+		}
+		if (ZeroHour.defaultStylesheet && supportsAdoptedStyleSheets(this.shadow)) {
+			this.shadow.adoptedStyleSheets = [ZeroHour.defaultStylesheet];
+			this.styleEl = null;
+			return;
+		}
+		if (!this.styleEl) this.styleEl = document.createElement("style");
+		this.styleEl.textContent = zero_hour_default;
+	}
+};
+if (!customElements.get("countdown-timer")) customElements.define("countdown-timer", ZeroHour);
+function initCountdownTimers(options = {}) {
+	const { selector = "countdown-timer", onDone, stylesheet } = options;
+	const elements = Array.from(document.querySelectorAll(selector));
+	if (onDone) {
+		const notified = /* @__PURE__ */ new WeakSet();
+		const notifyOnce = (el) => {
+			if (notified.has(el)) return;
+			notified.add(el);
+			onDone(el);
+		};
+		elements.forEach((el) => {
+			el.addEventListener("done", () => notifyOnce(el));
+			const zh = el;
+			if (typeof zh.isDone === "function" && zh.isDone()) notifyOnce(el);
+		});
+	}
+	if (stylesheet) elements.forEach((el) => {
+		const zh = el;
+		if (typeof stylesheet === "string") zh.adoptStyles(stylesheet);
+		else zh.adoptStylesheet(stylesheet);
+	});
+	return elements;
+}
+
+//#endregion
+exports.initCountdownTimers = initCountdownTimers;
+exports.zeroHourCssText = zeroHourCssText;
+//# sourceMappingURL=index.cjs.map