zero-hour 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -1
- package/dist/index.cjs.js +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +22 -11
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -55,6 +55,8 @@ initCountdownTimers({
|
|
|
55
55
|
selector: 'countdown-timer',
|
|
56
56
|
onDone: (el) => {
|
|
57
57
|
// The component dispatches: el.dispatchEvent(new CustomEvent('done'))
|
|
58
|
+
// Note: if the timer is already complete (e.g. user opened the page after the target time),
|
|
59
|
+
// `initCountdownTimers` will call `onDone` immediately (catch-up).
|
|
58
60
|
el.classList.add('is-done');
|
|
59
61
|
},
|
|
60
62
|
// Optional styles:
|
|
@@ -130,11 +132,12 @@ el?.start();
|
|
|
130
132
|
|
|
131
133
|
| Method | Description |
|
|
132
134
|
|-------------------|--------------------------------------------------------------------------------------------------|
|
|
133
|
-
| `initCountdownTimers({ selector?, onDone?, stylesheet? }): HTMLElement[]` | Finds elements by selector (default: `countdown-timer`), subscribes to the `done` event (when `onDone` is provided), and optionally applies styles to each element (`stylesheet?: CSSStyleSheet \| string \| null`). When a string is provided, it is applied via `adoptedStyleSheets` when supported, otherwise via a `<style>` fallback inside the shadow root. |
|
|
135
|
+
| `initCountdownTimers({ selector?, onDone?, stylesheet? }): HTMLElement[]` | Finds elements by selector (default: `countdown-timer`), subscribes to the `done` event (when `onDone` is provided), and calls `onDone` immediately if a timer is already complete at init time (catch-up). Also optionally applies styles to each element (`stylesheet?: CSSStyleSheet \| string \| null`). When a string is provided, it is applied via `adoptedStyleSheets` when supported, otherwise via a `<style>` fallback inside the shadow root. |
|
|
134
136
|
| `start(): void` | Starts/restarts the countdown (only runs when `digits-url` is set). |
|
|
135
137
|
| `stop(): void` | Stops the timer and clears the scheduled tick. |
|
|
136
138
|
| `reset(): void` | Clears the “done fired” flag and either starts again (if `autostart=true`) or renders a static initial value. |
|
|
137
139
|
| `isRunning(): boolean` | Returns `true` if the timer is running and the next tick is scheduled. |
|
|
140
|
+
| `isDone(): boolean` | Returns `true` if the computed target moment is in the past (logically complete), regardless of whether a `done` event listener was attached in time. |
|
|
138
141
|
| `adoptStylesheet(sheet: CSSStyleSheet): void` | Replaces `adoptedStyleSheets` inside the component’s shadow root. |
|
|
139
142
|
|
|
140
143
|
<br>
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=`:host {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 100%;
|
|
4
4
|
container-type: inline-size;
|
|
@@ -51,4 +51,4 @@
|
|
|
51
51
|
white-space: nowrap;
|
|
52
52
|
clip-path: inset(50%);
|
|
53
53
|
}
|
|
54
|
-
`,T=
|
|
54
|
+
`,T=m;function z(r){const t=r.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function u(r){return r<0?0:r}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},f={hours:0,minutes:0,seconds:0};function p(r){return"adoptedStyleSheets"in r}function b(r){try{const t=new CSSStyleSheet;return t.replaceSync(r),t}catch{return null}}const x=b(m);function y(r){const t=Math.floor(r/1e3),s=t%60,e=Math.floor(t/60)%60,n=Math.floor(t/3600),i=Math.floor(n/24),o=n%24;return{d:i,h:o,m:e,s,totalSec:t}}function E(r){return String(r).padStart(2,"0")}function g(r,t){return[...String(r).padStart(t,"0")]}function F(r,t,s){if(!r.hasAttribute(t))return s;const e=r.getAttribute(t);return e==null||e===""?!0:e!=="false"}function w(r){if(r==null)return null;const t=r.trim();if(!t)return null;const s=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!s)return null;const e=Number(s[1]),n=Number(s[2]),i=Number(s[3]);return!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(i)?null:{year:e,month:n,day:i}}function _(r){if(r==null)return{...f};const t=r.trim();if(!t)return{...f};const s=t.split(":"),e=Number(s[0]??"0"),n=Number(s[1]??"0"),i=Number(s[2]??"0");return{hours:Number.isFinite(e)?e:0,minutes:Number.isFinite(n)?n:0,seconds:Number.isFinite(i)?i:0}}function v(r){if(r==null)return null;const t=r.trim();if(!t)return null;const s=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!s)return null;const e=Number(s[1]),n=Number(s[2]),i=Number(s[3]??"0");return!Number.isFinite(e)||!Number.isFinite(n)||!Number.isFinite(i)||e<0||e>23||n<0||n>59||i<0||i>59?null:{hours:e,minutes:n,seconds:i}}function S(r){if(r==null)return null;let t=r.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let s=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(s=-1,t=t.slice(1)),!t)return null;const[e,n="0"]=t.split(":"),i=Number(e),o=Number(n);if(!Number.isFinite(i)||!Number.isFinite(o))return null;const l=i*60+o;return s*l}function C(){if(typeof window>"u"||!("location"in window))return null;const r=window.location?.search??"";if(!r)return null;const t=new URLSearchParams(r),s={},e=t.get("date")?.trim();e&&(s.date=e);const n=t.get("time")?.trim();n&&(s.time=n);const i=t.get("utc")?.trim();i&&(s.utc=i);const o=t.get("units")?.trim();return o&&(s.units=o),Object.keys(s).length?s:null}function k(r){const t=(r??"").trim().toLowerCase();if(!t)return d;const s=t.split(":").map(h=>h.trim()).filter(Boolean);if(!s.length)return d;const e=new Set(s),n=e.has("d"),i=e.has("h"),o=e.has("m"),l=e.has("s");return!n&&!i&&!o&&!l?d:{showDays:n,showHours:i,showMinutes:o,showSeconds:l}}class c extends HTMLElement{static defaultStylesheet=x;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,s,e){if(!this.isConnected)return;const n=this.isRunning();this.readAttributes(),this.doneFired=!1,n&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}isDone(){return!this.digitsUrl||this.targetEpochMs==null?!1:Date.now()>=this.targetEpochMs}readAttributes(){this.rootEl||this.render();const t=C();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=F(this,"autostart",!0);const s=k(t?.units??this.getAttribute("units"));this.showDays=s.showDays,this.showHours=s.showHours,this.showMinutes=s.showMinutes,this.showSeconds=s.showSeconds;const e=w(this.getAttribute("date")),i=w(t?.date??null)??e,o=_(this.getAttribute("time")),h=v(t?.time??null)??o,a=S(this.getAttribute("utc")),D=S(t?.utc??null)??a??0;if(!i)this.targetEpochMs=null;else{const N=Date.UTC(i.year,i.month-1,i.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=N-D*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),s=u(this.targetEpochMs-t),{d:e,h:n,m:i,s:o}=y(s);this.setDigits({d:e,h:n,m:i,s:o})}else this.setDigits({d:0,h:0,m:0,s:0})}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="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0})}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(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",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const s=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],e=[];for(let i=0;i<s.length;i++)s[i]&&e.push(i);this.rootEl.style.setProperty("--zh-groups",String(e.length));const n=[!1,!1,!1];if(e.length>=2)for(let i=0;i<e.length-1;i++){const o=e[i+1],l=Math.min(2,Math.max(0,o-1));n[l]=!0}this.sep0El.style.display=n[0]?"":"none",this.sep1El.style.display=n[1]?"":"none",this.sep2El.style.display=n[2]?"":"none"}setDigits({d:t,h:s,m:e,s:n}){const i=g(Math.min(t,99),2),o=g(s,2),l=[...E(e)],h=[...E(n)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,o),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,h);const a=[];this.showDays&&a.push(i.join("")),this.showHours&&a.push(o.join("")),this.showMinutes&&a.push(l.join("")),this.showSeconds&&a.push(h.join("")),this.a11yEl.textContent=a.length?a.join(":"):"—"}syncDigitGroup(t,s){for(;t.children.length<s.length;){const e=document.createElement("span");e.className="zh__digit",t.appendChild(e)}for(;t.children.length>s.length;){const e=t.lastElementChild;if(!e)break;t.removeChild(e)}for(let e=0;e<s.length;e++){const n=t.children[e],i=z(s[e]);n.style.setProperty("--zh-sheet-index",String(i))}}tick(){if(!this.digitsUrl)return;const t=u(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const s=this.startEpochMs??Date.now(),e=u(Date.now()-s),n=u(t-e),{d:i,h:o,m:l,s:h,totalSec:a}=y(n);this.setDigits({d:i,h:o,m:l,s:h}),a===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const s=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},s)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(p(this.shadow)){const s=b(t);if(s){this.shadow.adoptedStyleSheets=[s],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&p(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(c.defaultStylesheet&&p(this.shadow)){this.shadow.adoptedStyleSheets=[c.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=m}}customElements.get("countdown-timer")||customElements.define("countdown-timer",c);function A(r={}){const{selector:t="countdown-timer",onDone:s,stylesheet:e}=r,n=Array.from(document.querySelectorAll(t));if(s){const i=new WeakSet,o=l=>{i.has(l)||(i.add(l),s(l))};n.forEach(l=>{l.addEventListener("done",()=>o(l));const h=l;typeof h.isDone=="function"&&h.isDone()&&o(l)})}return e&&n.forEach(i=>{const o=i;typeof e=="string"?o.adoptStyles(e):o.adoptStylesheet(e)}),n}exports.initCountdownTimers=A;exports.zeroHourCssText=T;
|
package/dist/index.d.ts
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -52,7 +52,7 @@ const m = `:host {
|
|
|
52
52
|
clip-path: inset(50%);
|
|
53
53
|
}
|
|
54
54
|
`, C = m;
|
|
55
|
-
function
|
|
55
|
+
function z(r) {
|
|
56
56
|
const t = r.charCodeAt(0) - 48;
|
|
57
57
|
return t >= 0 && t <= 9 ? t : 0;
|
|
58
58
|
}
|
|
@@ -76,7 +76,7 @@ function b(r) {
|
|
|
76
76
|
return null;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
const
|
|
79
|
+
const T = b(m);
|
|
80
80
|
function y(r) {
|
|
81
81
|
const t = Math.floor(r / 1e3), s = t % 60, e = Math.floor(t / 60) % 60, n = Math.floor(t / 3600), i = Math.floor(n / 24), o = n % 24;
|
|
82
82
|
return { d: i, h: o, m: e, s, totalSec: t };
|
|
@@ -133,7 +133,7 @@ function S(r) {
|
|
|
133
133
|
const l = i * 60 + o;
|
|
134
134
|
return s * l;
|
|
135
135
|
}
|
|
136
|
-
function
|
|
136
|
+
function k() {
|
|
137
137
|
if (typeof window > "u" || !("location" in window)) return null;
|
|
138
138
|
const r = window.location?.search ?? "";
|
|
139
139
|
if (!r) return null;
|
|
@@ -146,7 +146,7 @@ function v() {
|
|
|
146
146
|
const o = t.get("units")?.trim();
|
|
147
147
|
return o && (s.units = o), Object.keys(s).length ? s : null;
|
|
148
148
|
}
|
|
149
|
-
function
|
|
149
|
+
function v(r) {
|
|
150
150
|
const t = (r ?? "").trim().toLowerCase();
|
|
151
151
|
if (!t)
|
|
152
152
|
return d;
|
|
@@ -157,7 +157,7 @@ function k(r) {
|
|
|
157
157
|
return !n && !i && !o && !l ? d : { showDays: n, showHours: i, showMinutes: o, showSeconds: l };
|
|
158
158
|
}
|
|
159
159
|
class c extends HTMLElement {
|
|
160
|
-
static defaultStylesheet =
|
|
160
|
+
static defaultStylesheet = T;
|
|
161
161
|
static observedAttributes = [
|
|
162
162
|
"digits-url",
|
|
163
163
|
"separator-url",
|
|
@@ -213,11 +213,14 @@ class c extends HTMLElement {
|
|
|
213
213
|
isRunning() {
|
|
214
214
|
return this.startEpochMs != null && this.nextTickTimeout != null;
|
|
215
215
|
}
|
|
216
|
+
isDone() {
|
|
217
|
+
return !this.digitsUrl || this.targetEpochMs == null ? !1 : Date.now() >= this.targetEpochMs;
|
|
218
|
+
}
|
|
216
219
|
readAttributes() {
|
|
217
220
|
this.rootEl || this.render();
|
|
218
|
-
const t =
|
|
221
|
+
const t = k();
|
|
219
222
|
this.digitsUrl = this.getAttribute("digits-url"), this.separatorUrl = this.getAttribute("separator-url"), this.autostart = x(this, "autostart", !0);
|
|
220
|
-
const s =
|
|
223
|
+
const s = v(t?.units ?? this.getAttribute("units"));
|
|
221
224
|
this.showDays = s.showDays, this.showHours = s.showHours, this.showMinutes = s.showMinutes, this.showSeconds = s.showSeconds;
|
|
222
225
|
const e = w(this.getAttribute("date")), i = w(t?.date ?? null) ?? e, o = F(this.getAttribute("time")), h = _(t?.time ?? null) ?? o, a = S(this.getAttribute("utc")), D = S(t?.utc ?? null) ?? a ?? 0;
|
|
223
226
|
if (!i)
|
|
@@ -296,7 +299,7 @@ class c extends HTMLElement {
|
|
|
296
299
|
t.removeChild(e);
|
|
297
300
|
}
|
|
298
301
|
for (let e = 0; e < s.length; e++) {
|
|
299
|
-
const n = t.children[e], i =
|
|
302
|
+
const n = t.children[e], i = z(s[e]);
|
|
300
303
|
n.style.setProperty("--zh-sheet-index", String(i));
|
|
301
304
|
}
|
|
302
305
|
}
|
|
@@ -351,9 +354,17 @@ class c extends HTMLElement {
|
|
|
351
354
|
customElements.get("countdown-timer") || customElements.define("countdown-timer", c);
|
|
352
355
|
function A(r = {}) {
|
|
353
356
|
const { selector: t = "countdown-timer", onDone: s, stylesheet: e } = r, n = Array.from(document.querySelectorAll(t));
|
|
354
|
-
|
|
355
|
-
i
|
|
356
|
-
|
|
357
|
+
if (s) {
|
|
358
|
+
const i = /* @__PURE__ */ new WeakSet(), o = (l) => {
|
|
359
|
+
i.has(l) || (i.add(l), s(l));
|
|
360
|
+
};
|
|
361
|
+
n.forEach((l) => {
|
|
362
|
+
l.addEventListener("done", () => o(l));
|
|
363
|
+
const h = l;
|
|
364
|
+
typeof h.isDone == "function" && h.isDone() && o(l);
|
|
365
|
+
});
|
|
366
|
+
}
|
|
367
|
+
return e && n.forEach((i) => {
|
|
357
368
|
const o = i;
|
|
358
369
|
typeof e == "string" ? o.adoptStyles(e) : o.adoptStylesheet(e);
|
|
359
370
|
}), n;
|
package/dist/index.umd.js
CHANGED
|
@@ -51,4 +51,4 @@
|
|
|
51
51
|
white-space: nowrap;
|
|
52
52
|
clip-path: inset(50%);
|
|
53
53
|
}
|
|
54
|
-
`,
|
|
54
|
+
`,D=c;function T(o){const t=o.charCodeAt(0)-48;return t>=0&&t<=9?t:0}function d(o){return o<0?0:o}const m={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function f(o){return"adoptedStyleSheets"in o}function E(o){try{const t=new CSSStyleSheet;return t.replaceSync(o),t}catch{return null}}const N=E(c);function g(o){const t=Math.floor(o/1e3),e=t%60,s=Math.floor(t/60)%60,n=Math.floor(t/3600),i=Math.floor(n/24),r=n%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function w(o){return String(o).padStart(2,"0")}function S(o,t){return[...String(o).padStart(t,"0")]}function z(o,t,e){if(!o.hasAttribute(t))return e;const s=o.getAttribute(t);return s==null||s===""?!0:s!=="false"}function b(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),n=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(n)||!Number.isFinite(i)?null:{year:s,month:n,day:i}}function x(o){if(o==null)return{...y};const t=o.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),n=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(n)?n:0,seconds:Number.isFinite(i)?i:0}}function F(o){if(o==null)return null;const t=o.trim();if(!t)return null;const e=t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);if(!e)return null;const s=Number(e[1]),n=Number(e[2]),i=Number(e[3]??"0");return!Number.isFinite(s)||!Number.isFinite(n)||!Number.isFinite(i)||s<0||s>23||n<0||n>59||i<0||i>59?null:{hours:s,minutes:n,seconds:i}}function M(o){if(o==null)return null;let t=o.trim();if(!t)return null;/^utc/i.test(t)&&(t=t.slice(3));let e=1;if(t[0]==="+"?t=t.slice(1):t[0]==="-"&&(e=-1,t=t.slice(1)),!t)return null;const[s,n="0"]=t.split(":"),i=Number(s),r=Number(n);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const l=i*60+r;return e*l}function _(){if(typeof window>"u"||!("location"in window))return null;const o=window.location?.search??"";if(!o)return null;const t=new URLSearchParams(o),e={},s=t.get("date")?.trim();s&&(e.date=s);const n=t.get("time")?.trim();n&&(e.time=n);const i=t.get("utc")?.trim();i&&(e.utc=i);const r=t.get("units")?.trim();return r&&(e.units=r),Object.keys(e).length?e:null}function v(o){const t=(o??"").trim().toLowerCase();if(!t)return m;const e=t.split(":").map(h=>h.trim()).filter(Boolean);if(!e.length)return m;const s=new Set(e),n=s.has("d"),i=s.has("h"),r=s.has("m"),l=s.has("s");return!n&&!i&&!r&&!l?m:{showDays:n,showHours:i,showMinutes:r,showSeconds:l}}class p extends HTMLElement{static defaultStylesheet=N;static observedAttributes=["digits-url","separator-url","autostart","date","time","utc","units"];shadow=this.attachShadow({mode:"open"});digitsUrl=null;separatorUrl=null;autostart=!0;durationMs=0;targetEpochMs=null;startEpochMs=null;nextTickTimeout=null;doneFired=!1;rootEl;daysEl;hoursEl;minutesEl;secondsEl;a11yEl;sep0El;sep1El;sep2El;styleEl=null;showDays=!0;showHours=!0;showMinutes=!0;showSeconds=!0;connectedCallback(){this.render(),this.readAttributes(),this.autostart?this.start():this.renderStaticInitial()}disconnectedCallback(){this.stop()}attributeChangedCallback(t,e,s){if(!this.isConnected)return;const n=this.isRunning();this.readAttributes(),this.doneFired=!1,n&&this.autostart?this.start():this.renderStaticInitial()}start(){this.stop(),this.digitsUrl&&(this.durationMs=this.targetEpochMs!=null?this.targetEpochMs-Date.now():0,this.startEpochMs=Date.now(),this.tick(),this.scheduleNextSecondBoundary())}stop(){this.nextTickTimeout!=null&&(window.clearTimeout(this.nextTickTimeout),this.nextTickTimeout=null),this.startEpochMs=null}reset(){this.doneFired=!1,this.autostart?this.start():this.renderStaticInitial()}isRunning(){return this.startEpochMs!=null&&this.nextTickTimeout!=null}isDone(){return!this.digitsUrl||this.targetEpochMs==null?!1:Date.now()>=this.targetEpochMs}readAttributes(){this.rootEl||this.render();const t=_();this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=z(this,"autostart",!0);const e=v(t?.units??this.getAttribute("units"));this.showDays=e.showDays,this.showHours=e.showHours,this.showMinutes=e.showMinutes,this.showSeconds=e.showSeconds;const s=b(this.getAttribute("date")),i=b(t?.date??null)??s,r=x(this.getAttribute("time")),h=F(t?.time??null)??r,u=M(this.getAttribute("utc")),A=M(t?.utc??null)??u??0;if(!i)this.targetEpochMs=null;else{const U=Date.UTC(i.year,i.month-1,i.day,h.hours,h.minutes,h.seconds);this.targetEpochMs=U-A*60*1e3}if(this.durationMs=0,!this.digitsUrl){this.setTextFallback("—:—:—:—");return}this.rootEl.style.setProperty("--zh-digits-url",`url("${this.digitsUrl}")`),this.separatorUrl?this.rootEl.style.setProperty("--zh-sep-url",`url("${this.separatorUrl}")`):this.rootEl.style.removeProperty("--zh-sep-url"),this.applyUnitsVisibility()}renderStaticInitial(){if(this.targetEpochMs!=null){const t=Date.now(),e=d(this.targetEpochMs-t),{d:s,h:n,m:i,s:r}=g(e);this.setDigits({d:s,h:n,m:i,s:r})}else this.setDigits({d:0,h:0,m:0,s:0})}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="",this.styleEl&&this.shadow.append(this.styleEl),this.shadow.append(this.rootEl),this.setDigits({d:0,h:0,m:0,s:0})}setTextFallback(t){this.a11yEl.textContent=t}applyUnitsVisibility(){if(!this.rootEl)return;if(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",!!!this.separatorUrl){this.sep0El.style.display="none",this.sep1El.style.display="none",this.sep2El.style.display="none";return}const e=[this.showDays,this.showHours,this.showMinutes,this.showSeconds],s=[];for(let i=0;i<e.length;i++)e[i]&&s.push(i);this.rootEl.style.setProperty("--zh-groups",String(s.length));const n=[!1,!1,!1];if(s.length>=2)for(let i=0;i<s.length-1;i++){const r=s[i+1],l=Math.min(2,Math.max(0,r-1));n[l]=!0}this.sep0El.style.display=n[0]?"":"none",this.sep1El.style.display=n[1]?"":"none",this.sep2El.style.display=n[2]?"":"none"}setDigits({d:t,h:e,m:s,s:n}){const i=S(Math.min(t,99),2),r=S(e,2),l=[...w(s)],h=[...w(n)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,r),this.syncDigitGroup(this.minutesEl,l),this.syncDigitGroup(this.secondsEl,h);const u=[];this.showDays&&u.push(i.join("")),this.showHours&&u.push(r.join("")),this.showMinutes&&u.push(l.join("")),this.showSeconds&&u.push(h.join("")),this.a11yEl.textContent=u.length?u.join(":"):"—"}syncDigitGroup(t,e){for(;t.children.length<e.length;){const s=document.createElement("span");s.className="zh__digit",t.appendChild(s)}for(;t.children.length>e.length;){const s=t.lastElementChild;if(!s)break;t.removeChild(s)}for(let s=0;s<e.length;s++){const n=t.children[s],i=T(e[s]);n.style.setProperty("--zh-sheet-index",String(i))}}tick(){if(!this.digitsUrl)return;const t=d(this.durationMs);if(t===0){this.setDigits({d:0,h:0,m:0,s:0}),this.fireDoneOnce(),this.stop();return}const e=this.startEpochMs??Date.now(),s=d(Date.now()-e),n=d(t-s),{d:i,h:r,m:l,s:h,totalSec:u}=g(n);this.setDigits({d:i,h:r,m:l,s:h}),u===0&&(this.fireDoneOnce(),this.stop())}fireDoneOnce(){this.doneFired||(this.doneFired=!0,this.dispatchEvent(new CustomEvent("done")))}scheduleNextSecondBoundary(){const e=1e3-Date.now()%1e3;this.nextTickTimeout=window.setTimeout(()=>{this.tick(),this.isRunning()&&this.scheduleNextSecondBoundary()},e)}adoptStylesheet(t){this.applyStyles(t)}adoptStyles(t){this.applyStyles(t)}applyStyles(t){if(typeof t=="string"){if(f(this.shadow)){const e=E(t);if(e){this.shadow.adoptedStyleSheets=[e],this.styleEl=null;return}}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=t;return}if(t&&f(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(p.defaultStylesheet&&f(this.shadow)){this.shadow.adoptedStyleSheets=[p.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=c}}customElements.get("countdown-timer")||customElements.define("countdown-timer",p);function C(o={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=o,n=Array.from(document.querySelectorAll(t));if(e){const i=new WeakSet,r=l=>{i.has(l)||(i.add(l),e(l))};n.forEach(l=>{l.addEventListener("done",()=>r(l));const h=l;typeof h.isDone=="function"&&h.isDone()&&r(l)})}return s&&n.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),n}a.initCountdownTimers=C,a.zeroHourCssText=D,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zero-hour",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"description": "Tiny countdown Web Component. Registers <countdown-timer> that renders a configurable DD:HH:MM:SS countdown to a target date/time (optional UTC offset) and fires a done event at zero.",
|
|
5
5
|
"author": "ux-ui.pro",
|
|
6
6
|
"license": "MIT",
|