zero-hour 1.1.0 → 1.1.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 +2 -2
- package/dist/index.cjs.js +2 -2
- package/dist/index.es.js +137 -114
- package/dist/index.umd.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,7 +43,7 @@ import { initCountdownTimers } from 'zero-hour';
|
|
|
43
43
|
separator-url="/sprites/sep.webp"
|
|
44
44
|
date="2025-12-31"
|
|
45
45
|
time="23:59:59"
|
|
46
|
-
utc="
|
|
46
|
+
utc="+03:00"
|
|
47
47
|
></countdown-timer>
|
|
48
48
|
```
|
|
49
49
|
|
|
@@ -106,7 +106,7 @@ el?.start();
|
|
|
106
106
|
separator-url="/sprites/sep.webp"
|
|
107
107
|
date="2025-12-31"
|
|
108
108
|
time="23:59:59"
|
|
109
|
-
utc="
|
|
109
|
+
utc="+03:00"
|
|
110
110
|
units="h:m:s"
|
|
111
111
|
></countdown-timer>
|
|
112
112
|
```
|
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 p=`: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
|
-
`,
|
|
54
|
+
`,T=p;function z(r){if(r==="0")return 9;const t=r.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}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 m(r){return"adoptedStyleSheets"in r}function b(r){try{const t=new CSSStyleSheet;return t.replaceSync(r),t}catch{return null}}const x=b(p);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}readAttributes(){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(m(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&&m(this.shadow)){this.shadow.adoptedStyleSheets=[t],this.styleEl=null;return}if(c.defaultStylesheet&&m(this.shadow)){this.shadow.adoptedStyleSheets=[c.defaultStylesheet],this.styleEl=null;return}this.styleEl||(this.styleEl=document.createElement("style")),this.styleEl.textContent=p}}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));return s&&n.forEach(i=>{i.addEventListener("done",()=>s(i))}),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.es.js
CHANGED
|
@@ -52,13 +52,13 @@ const m = `:host {
|
|
|
52
52
|
clip-path: inset(50%);
|
|
53
53
|
}
|
|
54
54
|
`, C = m;
|
|
55
|
-
function
|
|
56
|
-
if (
|
|
57
|
-
const t =
|
|
55
|
+
function T(r) {
|
|
56
|
+
if (r === "0") return 9;
|
|
57
|
+
const t = r.charCodeAt(0) - 48;
|
|
58
58
|
return t >= 1 && t <= 9 ? t - 1 : 9;
|
|
59
59
|
}
|
|
60
|
-
function u(
|
|
61
|
-
return
|
|
60
|
+
function u(r) {
|
|
61
|
+
return r < 0 ? 0 : r;
|
|
62
62
|
}
|
|
63
63
|
const d = {
|
|
64
64
|
showDays: !0,
|
|
@@ -66,90 +66,99 @@ const d = {
|
|
|
66
66
|
showMinutes: !0,
|
|
67
67
|
showSeconds: !0
|
|
68
68
|
}, f = { hours: 0, minutes: 0, seconds: 0 };
|
|
69
|
-
function p(
|
|
70
|
-
return "adoptedStyleSheets" in
|
|
69
|
+
function p(r) {
|
|
70
|
+
return "adoptedStyleSheets" in r;
|
|
71
71
|
}
|
|
72
|
-
function
|
|
72
|
+
function b(r) {
|
|
73
73
|
try {
|
|
74
74
|
const t = new CSSStyleSheet();
|
|
75
|
-
return t.replaceSync(
|
|
75
|
+
return t.replaceSync(r), t;
|
|
76
76
|
} catch {
|
|
77
77
|
return null;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
const
|
|
81
|
-
function y(
|
|
82
|
-
const t = Math.floor(
|
|
83
|
-
return { d: i, h:
|
|
80
|
+
const z = b(m);
|
|
81
|
+
function y(r) {
|
|
82
|
+
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;
|
|
83
|
+
return { d: i, h: o, m: e, s, totalSec: t };
|
|
84
84
|
}
|
|
85
|
-
function E(
|
|
86
|
-
return String(
|
|
85
|
+
function E(r) {
|
|
86
|
+
return String(r).padStart(2, "0");
|
|
87
87
|
}
|
|
88
|
-
function g(
|
|
89
|
-
return [...String(
|
|
88
|
+
function g(r, t) {
|
|
89
|
+
return [...String(r).padStart(t, "0")];
|
|
90
90
|
}
|
|
91
|
-
function
|
|
92
|
-
if (!
|
|
93
|
-
const
|
|
94
|
-
return
|
|
91
|
+
function x(r, t, s) {
|
|
92
|
+
if (!r.hasAttribute(t)) return s;
|
|
93
|
+
const e = r.getAttribute(t);
|
|
94
|
+
return e == null || e === "" ? !0 : e !== "false";
|
|
95
95
|
}
|
|
96
|
-
function
|
|
97
|
-
if (
|
|
98
|
-
const t =
|
|
96
|
+
function w(r) {
|
|
97
|
+
if (r == null) return null;
|
|
98
|
+
const t = r.trim();
|
|
99
99
|
if (!t) return null;
|
|
100
|
-
const
|
|
101
|
-
if (!
|
|
102
|
-
const
|
|
103
|
-
return !Number.isFinite(
|
|
100
|
+
const s = t.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
|
101
|
+
if (!s) return null;
|
|
102
|
+
const e = Number(s[1]), n = Number(s[2]), i = Number(s[3]);
|
|
103
|
+
return !Number.isFinite(e) || !Number.isFinite(n) || !Number.isFinite(i) ? null : { year: e, month: n, day: i };
|
|
104
104
|
}
|
|
105
|
-
function
|
|
106
|
-
if (
|
|
107
|
-
const t =
|
|
105
|
+
function F(r) {
|
|
106
|
+
if (r == null) return { ...f };
|
|
107
|
+
const t = r.trim();
|
|
108
108
|
if (!t) return { ...f };
|
|
109
|
-
const
|
|
109
|
+
const s = t.split(":"), e = Number(s[0] ?? "0"), n = Number(s[1] ?? "0"), i = Number(s[2] ?? "0");
|
|
110
110
|
return {
|
|
111
|
-
hours: Number.isFinite(
|
|
112
|
-
minutes: Number.isFinite(
|
|
111
|
+
hours: Number.isFinite(e) ? e : 0,
|
|
112
|
+
minutes: Number.isFinite(n) ? n : 0,
|
|
113
113
|
seconds: Number.isFinite(i) ? i : 0
|
|
114
114
|
};
|
|
115
115
|
}
|
|
116
|
-
function
|
|
117
|
-
if (
|
|
118
|
-
|
|
116
|
+
function _(r) {
|
|
117
|
+
if (r == null) return null;
|
|
118
|
+
const t = r.trim();
|
|
119
|
+
if (!t) return null;
|
|
120
|
+
const s = t.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
|
|
121
|
+
if (!s) return null;
|
|
122
|
+
const e = Number(s[1]), n = Number(s[2]), i = Number(s[3] ?? "0");
|
|
123
|
+
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 };
|
|
124
|
+
}
|
|
125
|
+
function S(r) {
|
|
126
|
+
if (r == null) return null;
|
|
127
|
+
let t = r.trim();
|
|
119
128
|
if (!t) return null;
|
|
120
129
|
/^utc/i.test(t) && (t = t.slice(3));
|
|
121
|
-
let
|
|
122
|
-
if (t[0] === "+" ? t = t.slice(1) : t[0] === "-" && (
|
|
123
|
-
const [
|
|
124
|
-
if (!Number.isFinite(i) || !Number.isFinite(
|
|
125
|
-
const
|
|
126
|
-
return
|
|
130
|
+
let s = 1;
|
|
131
|
+
if (t[0] === "+" ? t = t.slice(1) : t[0] === "-" && (s = -1, t = t.slice(1)), !t) return null;
|
|
132
|
+
const [e, n = "0"] = t.split(":"), i = Number(e), o = Number(n);
|
|
133
|
+
if (!Number.isFinite(i) || !Number.isFinite(o)) return null;
|
|
134
|
+
const l = i * 60 + o;
|
|
135
|
+
return s * l;
|
|
127
136
|
}
|
|
128
|
-
function
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
137
|
+
function v() {
|
|
138
|
+
if (typeof window > "u" || !("location" in window)) return null;
|
|
139
|
+
const r = window.location?.search ?? "";
|
|
140
|
+
if (!r) return null;
|
|
141
|
+
const t = new URLSearchParams(r), s = {}, e = t.get("date")?.trim();
|
|
142
|
+
e && (s.date = e);
|
|
143
|
+
const n = t.get("time")?.trim();
|
|
144
|
+
n && (s.time = n);
|
|
145
|
+
const i = t.get("utc")?.trim();
|
|
146
|
+
i && (s.utc = i);
|
|
147
|
+
const o = t.get("units")?.trim();
|
|
148
|
+
return o && (s.units = o), Object.keys(s).length ? s : null;
|
|
140
149
|
}
|
|
141
|
-
function
|
|
142
|
-
const t = (
|
|
150
|
+
function k(r) {
|
|
151
|
+
const t = (r ?? "").trim().toLowerCase();
|
|
143
152
|
if (!t)
|
|
144
153
|
return d;
|
|
145
|
-
const
|
|
146
|
-
if (!
|
|
154
|
+
const s = t.split(":").map((h) => h.trim()).filter(Boolean);
|
|
155
|
+
if (!s.length)
|
|
147
156
|
return d;
|
|
148
|
-
const
|
|
149
|
-
return !
|
|
157
|
+
const e = new Set(s), n = e.has("d"), i = e.has("h"), o = e.has("m"), l = e.has("s");
|
|
158
|
+
return !n && !i && !o && !l ? d : { showDays: n, showHours: i, showMinutes: o, showSeconds: l };
|
|
150
159
|
}
|
|
151
160
|
class c extends HTMLElement {
|
|
152
|
-
static defaultStylesheet =
|
|
161
|
+
static defaultStylesheet = z;
|
|
153
162
|
static observedAttributes = [
|
|
154
163
|
"digits-url",
|
|
155
164
|
"separator-url",
|
|
@@ -188,10 +197,10 @@ class c extends HTMLElement {
|
|
|
188
197
|
disconnectedCallback() {
|
|
189
198
|
this.stop();
|
|
190
199
|
}
|
|
191
|
-
attributeChangedCallback(t,
|
|
200
|
+
attributeChangedCallback(t, s, e) {
|
|
192
201
|
if (!this.isConnected) return;
|
|
193
|
-
const
|
|
194
|
-
this.readAttributes(), this.doneFired = !1,
|
|
202
|
+
const n = this.isRunning();
|
|
203
|
+
this.readAttributes(), this.doneFired = !1, n && this.autostart ? this.start() : this.renderStaticInitial();
|
|
195
204
|
}
|
|
196
205
|
start() {
|
|
197
206
|
this.stop(), this.digitsUrl && (this.durationMs = this.targetEpochMs != null ? this.targetEpochMs - Date.now() : 0, this.startEpochMs = Date.now(), this.tick(), this.scheduleNextSecondBoundary());
|
|
@@ -206,11 +215,25 @@ class c extends HTMLElement {
|
|
|
206
215
|
return this.startEpochMs != null && this.nextTickTimeout != null;
|
|
207
216
|
}
|
|
208
217
|
readAttributes() {
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
218
|
+
const t = v();
|
|
219
|
+
this.digitsUrl = this.getAttribute("digits-url"), this.separatorUrl = this.getAttribute("separator-url"), this.autostart = x(this, "autostart", !0);
|
|
220
|
+
const s = k(t?.units ?? this.getAttribute("units"));
|
|
221
|
+
this.showDays = s.showDays, this.showHours = s.showHours, this.showMinutes = s.showMinutes, this.showSeconds = s.showSeconds;
|
|
222
|
+
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
|
+
if (!i)
|
|
224
|
+
this.targetEpochMs = null;
|
|
225
|
+
else {
|
|
226
|
+
const N = Date.UTC(
|
|
227
|
+
i.year,
|
|
228
|
+
i.month - 1,
|
|
229
|
+
i.day,
|
|
230
|
+
h.hours,
|
|
231
|
+
h.minutes,
|
|
232
|
+
h.seconds
|
|
233
|
+
);
|
|
234
|
+
this.targetEpochMs = N - D * 60 * 1e3;
|
|
235
|
+
}
|
|
236
|
+
if (this.durationMs = 0, !this.digitsUrl) {
|
|
214
237
|
this.setTextFallback("—:—:—:—");
|
|
215
238
|
return;
|
|
216
239
|
}
|
|
@@ -218,8 +241,8 @@ class c extends HTMLElement {
|
|
|
218
241
|
}
|
|
219
242
|
renderStaticInitial() {
|
|
220
243
|
if (this.targetEpochMs != null) {
|
|
221
|
-
const t = Date.now(),
|
|
222
|
-
this.setDigits({ d:
|
|
244
|
+
const t = Date.now(), s = u(this.targetEpochMs - t), { d: e, h: n, m: i, s: o } = y(s);
|
|
245
|
+
this.setDigits({ d: e, h: n, m: i, s: o });
|
|
223
246
|
} else
|
|
224
247
|
this.setDigits({ d: 0, h: 0, m: 0, s: 0 });
|
|
225
248
|
}
|
|
@@ -244,37 +267,37 @@ class c extends HTMLElement {
|
|
|
244
267
|
this.sep0El.style.display = "none", this.sep1El.style.display = "none", this.sep2El.style.display = "none";
|
|
245
268
|
return;
|
|
246
269
|
}
|
|
247
|
-
const
|
|
248
|
-
for (let i = 0; i <
|
|
249
|
-
|
|
250
|
-
this.rootEl.style.setProperty("--zh-groups", String(
|
|
251
|
-
const
|
|
252
|
-
if (
|
|
253
|
-
for (let i = 0; i <
|
|
254
|
-
const
|
|
255
|
-
|
|
270
|
+
const s = [this.showDays, this.showHours, this.showMinutes, this.showSeconds], e = [];
|
|
271
|
+
for (let i = 0; i < s.length; i++)
|
|
272
|
+
s[i] && e.push(i);
|
|
273
|
+
this.rootEl.style.setProperty("--zh-groups", String(e.length));
|
|
274
|
+
const n = [!1, !1, !1];
|
|
275
|
+
if (e.length >= 2)
|
|
276
|
+
for (let i = 0; i < e.length - 1; i++) {
|
|
277
|
+
const o = e[i + 1], l = Math.min(2, Math.max(0, o - 1));
|
|
278
|
+
n[l] = !0;
|
|
256
279
|
}
|
|
257
|
-
this.sep0El.style.display =
|
|
280
|
+
this.sep0El.style.display = n[0] ? "" : "none", this.sep1El.style.display = n[1] ? "" : "none", this.sep2El.style.display = n[2] ? "" : "none";
|
|
258
281
|
}
|
|
259
|
-
setDigits({ d: t, h:
|
|
260
|
-
const i = g(Math.min(t, 99), 2),
|
|
261
|
-
this.syncDigitGroup(this.daysEl, i), this.syncDigitGroup(this.hoursEl,
|
|
262
|
-
const
|
|
263
|
-
this.showDays &&
|
|
282
|
+
setDigits({ d: t, h: s, m: e, s: n }) {
|
|
283
|
+
const i = g(Math.min(t, 99), 2), o = g(s, 2), l = [...E(e)], h = [...E(n)];
|
|
284
|
+
this.syncDigitGroup(this.daysEl, i), this.syncDigitGroup(this.hoursEl, o), this.syncDigitGroup(this.minutesEl, l), this.syncDigitGroup(this.secondsEl, h);
|
|
285
|
+
const a = [];
|
|
286
|
+
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(":") : "—";
|
|
264
287
|
}
|
|
265
|
-
syncDigitGroup(t,
|
|
266
|
-
for (; t.children.length <
|
|
267
|
-
const
|
|
268
|
-
|
|
288
|
+
syncDigitGroup(t, s) {
|
|
289
|
+
for (; t.children.length < s.length; ) {
|
|
290
|
+
const e = document.createElement("span");
|
|
291
|
+
e.className = "zh__digit", t.appendChild(e);
|
|
269
292
|
}
|
|
270
|
-
for (; t.children.length >
|
|
271
|
-
const
|
|
272
|
-
if (!
|
|
273
|
-
t.removeChild(
|
|
293
|
+
for (; t.children.length > s.length; ) {
|
|
294
|
+
const e = t.lastElementChild;
|
|
295
|
+
if (!e) break;
|
|
296
|
+
t.removeChild(e);
|
|
274
297
|
}
|
|
275
|
-
for (let
|
|
276
|
-
const
|
|
277
|
-
|
|
298
|
+
for (let e = 0; e < s.length; e++) {
|
|
299
|
+
const n = t.children[e], i = T(s[e]);
|
|
300
|
+
n.style.setProperty("--zh-sheet-index", String(i));
|
|
278
301
|
}
|
|
279
302
|
}
|
|
280
303
|
tick() {
|
|
@@ -284,17 +307,17 @@ class c extends HTMLElement {
|
|
|
284
307
|
this.setDigits({ d: 0, h: 0, m: 0, s: 0 }), this.fireDoneOnce(), this.stop();
|
|
285
308
|
return;
|
|
286
309
|
}
|
|
287
|
-
const
|
|
288
|
-
this.setDigits({ d: i, h:
|
|
310
|
+
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);
|
|
311
|
+
this.setDigits({ d: i, h: o, m: l, s: h }), a === 0 && (this.fireDoneOnce(), this.stop());
|
|
289
312
|
}
|
|
290
313
|
fireDoneOnce() {
|
|
291
314
|
this.doneFired || (this.doneFired = !0, this.dispatchEvent(new CustomEvent("done")));
|
|
292
315
|
}
|
|
293
316
|
scheduleNextSecondBoundary() {
|
|
294
|
-
const
|
|
317
|
+
const s = 1e3 - Date.now() % 1e3;
|
|
295
318
|
this.nextTickTimeout = window.setTimeout(() => {
|
|
296
319
|
this.tick(), this.isRunning() && this.scheduleNextSecondBoundary();
|
|
297
|
-
},
|
|
320
|
+
}, s);
|
|
298
321
|
}
|
|
299
322
|
adoptStylesheet(t) {
|
|
300
323
|
this.applyStyles(t);
|
|
@@ -305,9 +328,9 @@ class c extends HTMLElement {
|
|
|
305
328
|
applyStyles(t) {
|
|
306
329
|
if (typeof t == "string") {
|
|
307
330
|
if (p(this.shadow)) {
|
|
308
|
-
const
|
|
309
|
-
if (
|
|
310
|
-
this.shadow.adoptedStyleSheets = [
|
|
331
|
+
const s = b(t);
|
|
332
|
+
if (s) {
|
|
333
|
+
this.shadow.adoptedStyleSheets = [s], this.styleEl = null;
|
|
311
334
|
return;
|
|
312
335
|
}
|
|
313
336
|
}
|
|
@@ -326,16 +349,16 @@ class c extends HTMLElement {
|
|
|
326
349
|
}
|
|
327
350
|
}
|
|
328
351
|
customElements.get("countdown-timer") || customElements.define("countdown-timer", c);
|
|
329
|
-
function
|
|
330
|
-
const { selector: t = "countdown-timer", onDone:
|
|
331
|
-
return
|
|
332
|
-
i.addEventListener("done", () =>
|
|
333
|
-
}),
|
|
334
|
-
const
|
|
335
|
-
typeof
|
|
336
|
-
}),
|
|
352
|
+
function A(r = {}) {
|
|
353
|
+
const { selector: t = "countdown-timer", onDone: s, stylesheet: e } = r, n = Array.from(document.querySelectorAll(t));
|
|
354
|
+
return s && n.forEach((i) => {
|
|
355
|
+
i.addEventListener("done", () => s(i));
|
|
356
|
+
}), e && n.forEach((i) => {
|
|
357
|
+
const o = i;
|
|
358
|
+
typeof e == "string" ? o.adoptStyles(e) : o.adoptStylesheet(e);
|
|
359
|
+
}), n;
|
|
337
360
|
}
|
|
338
361
|
export {
|
|
339
|
-
|
|
362
|
+
A as initCountdownTimers,
|
|
340
363
|
C as zeroHourCssText
|
|
341
364
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(a,
|
|
1
|
+
(function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a.ZeroHour={}))})(this,(function(a){"use strict";const c=`: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
|
-
`,
|
|
54
|
+
`,T=c;function D(o){if(o==="0")return 9;const t=o.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}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}readAttributes(){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=D(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));return e&&n.forEach(i=>{i.addEventListener("done",()=>e(i))}),s&&n.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),n}a.initCountdownTimers=C,a.zeroHourCssText=T,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.1.
|
|
3
|
+
"version": "1.1.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",
|