zero-hour 1.0.0 → 1.1.0
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 +1 -1
- package/dist/index.cjs.js +6 -6
- package/dist/index.es.js +13 -13
- package/dist/index.umd.js +6 -6
- package/dist/zero-hour.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://github.com/ux-ui-pro/zero-hour)
|
|
8
8
|
[](https://www.npmjs.org/package/zero-hour)
|
|
9
9
|
|
|
10
|
-
<
|
|
10
|
+
<a href="https://codepen.io/ux-ui/pen/MYyMpPw">Demo</a>
|
|
11
11
|
</div>
|
|
12
12
|
<br>
|
|
13
13
|
|
package/dist/index.cjs.js
CHANGED
|
@@ -26,20 +26,20 @@
|
|
|
26
26
|
.zh__sep {
|
|
27
27
|
flex: 0 0 var(--zh-sep-width, 4%);
|
|
28
28
|
width: var(--zh-sep-width, 4%);
|
|
29
|
-
background-image: var(--sep-url);
|
|
29
|
+
background-image: var(--zh-sep-url);
|
|
30
30
|
background-repeat: no-repeat;
|
|
31
31
|
background-position: center;
|
|
32
32
|
background-size: contain;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.zh__digit {
|
|
36
|
-
aspect-ratio: 9 / 12;
|
|
36
|
+
aspect-ratio: var(--zh-digit-aspect, 9 / 12);
|
|
37
37
|
width: 100%;
|
|
38
|
-
background-image: var(--digits-url);
|
|
38
|
+
background-image: var(--zh-digits-url);
|
|
39
39
|
background-repeat: no-repeat;
|
|
40
40
|
/* Digits sprite is horizontal (frames left-to-right). */
|
|
41
|
-
background-size: calc(var(--zh-frames, 10) * 100%) 100%;
|
|
42
|
-
background-position: calc(var(--sheet-index, 0) * 100% / (var(--zh-frames, 10) - 1)) 0;
|
|
41
|
+
background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
|
|
42
|
+
background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.zh__a11y {
|
|
@@ -51,4 +51,4 @@
|
|
|
51
51
|
white-space: nowrap;
|
|
52
52
|
clip-path: inset(50%);
|
|
53
53
|
}
|
|
54
|
-
`,S=m;function b(n){if(n==="0")return 9;const t=n.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}function u(n){return n<0?0:n}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},f={hours:0,minutes:0,seconds:0};function p(n){return"adoptedStyleSheets"in n}function w(n){try{const t=new CSSStyleSheet;return t.replaceSync(n),t}catch{return null}}const M=w(m);function y(n){const t=Math.floor(n/1e3),e=t%60,s=Math.floor(t/60)%60,o=Math.floor(t/3600),i=Math.floor(o/24),r=o%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function E(n){return String(n).padStart(2,"0")}function g(n,t){return[...String(n).padStart(t,"0")]}function T(n,t,e){if(!n.hasAttribute(t))return e;const s=n.getAttribute(t);return s==null||s===""?!0:s!=="false"}function D(n){if(n==null)return null;const t=n.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),o=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(o)||!Number.isFinite(i)?null:{year:s,month:o,day:i}}function
|
|
54
|
+
`,S=m;function b(n){if(n==="0")return 9;const t=n.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}function u(n){return n<0?0:n}const d={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},f={hours:0,minutes:0,seconds:0};function p(n){return"adoptedStyleSheets"in n}function w(n){try{const t=new CSSStyleSheet;return t.replaceSync(n),t}catch{return null}}const M=w(m);function y(n){const t=Math.floor(n/1e3),e=t%60,s=Math.floor(t/60)%60,o=Math.floor(t/3600),i=Math.floor(o/24),r=o%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function E(n){return String(n).padStart(2,"0")}function g(n,t){return[...String(n).padStart(t,"0")]}function T(n,t,e){if(!n.hasAttribute(t))return e;const s=n.getAttribute(t);return s==null||s===""?!0:s!=="false"}function D(n){if(n==null)return null;const t=n.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),o=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(o)||!Number.isFinite(i)?null:{year:s,month:o,day:i}}function z(n){if(n==null)return{...f};const t=n.trim();if(!t)return{...f};const e=t.split(":"),s=Number(e[0]??"0"),o=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(o)?o:0,seconds:Number.isFinite(i)?i:0}}function x(n){if(n==null)return null;let t=n.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,o="0"]=t.split(":"),i=Number(s),r=Number(o);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const h=i*60+r;return e*h}function N(n){const t=n.getAttribute("date"),e=D(t);if(!e)return null;const s=z(n.getAttribute("time")),o=x(n.getAttribute("utc"))??0;return Date.UTC(e.year,e.month-1,e.day,s.hours,s.minutes,s.seconds)-o*60*1e3}function _(n){const t=(n??"").trim().toLowerCase();if(!t)return d;const e=t.split(":").map(a=>a.trim()).filter(Boolean);if(!e.length)return d;const s=new Set(e),o=s.has("d"),i=s.has("h"),r=s.has("m"),h=s.has("s");return!o&&!i&&!r&&!h?d:{showDays:o,showHours:i,showMinutes:r,showSeconds:h}}class c extends HTMLElement{static defaultStylesheet=M;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 o=this.isRunning();this.readAttributes(),this.doneFired=!1,o&&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(){this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=T(this,"autostart",!0);const t=_(this.getAttribute("units"));this.showDays=t.showDays,this.showHours=t.showHours,this.showMinutes=t.showMinutes,this.showSeconds=t.showSeconds;const e=N(this);if(this.targetEpochMs=e,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=u(this.targetEpochMs-t),{d:s,h:o,m:i,s:r}=y(e);this.setDigits({d:s,h:o,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 o=[!1,!1,!1];if(s.length>=2)for(let i=0;i<s.length-1;i++){const r=s[i+1],h=Math.min(2,Math.max(0,r-1));o[h]=!0}this.sep0El.style.display=o[0]?"":"none",this.sep1El.style.display=o[1]?"":"none",this.sep2El.style.display=o[2]?"":"none"}setDigits({d:t,h:e,m:s,s:o}){const i=g(Math.min(t,99),2),r=g(e,2),h=[...E(s)],a=[...E(o)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,r),this.syncDigitGroup(this.minutesEl,h),this.syncDigitGroup(this.secondsEl,a);const l=[];this.showDays&&l.push(i.join("")),this.showHours&&l.push(r.join("")),this.showMinutes&&l.push(h.join("")),this.showSeconds&&l.push(a.join("")),this.a11yEl.textContent=l.length?l.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 o=t.children[s],i=b(e[s]);o.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 e=this.startEpochMs??Date.now(),s=u(Date.now()-e),o=u(t-s),{d:i,h:r,m:h,s:a,totalSec:l}=y(o);this.setDigits({d:i,h:r,m:h,s:a}),l===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(p(this.shadow)){const e=w(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&&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 C(n={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=n,o=Array.from(document.querySelectorAll(t));return e&&o.forEach(i=>{i.addEventListener("done",()=>e(i))}),s&&o.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),o}exports.initCountdownTimers=C;exports.zeroHourCssText=S;
|
package/dist/index.es.js
CHANGED
|
@@ -26,20 +26,20 @@ const m = `:host {
|
|
|
26
26
|
.zh__sep {
|
|
27
27
|
flex: 0 0 var(--zh-sep-width, 4%);
|
|
28
28
|
width: var(--zh-sep-width, 4%);
|
|
29
|
-
background-image: var(--sep-url);
|
|
29
|
+
background-image: var(--zh-sep-url);
|
|
30
30
|
background-repeat: no-repeat;
|
|
31
31
|
background-position: center;
|
|
32
32
|
background-size: contain;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.zh__digit {
|
|
36
|
-
aspect-ratio: 9 / 12;
|
|
36
|
+
aspect-ratio: var(--zh-digit-aspect, 9 / 12);
|
|
37
37
|
width: 100%;
|
|
38
|
-
background-image: var(--digits-url);
|
|
38
|
+
background-image: var(--zh-digits-url);
|
|
39
39
|
background-repeat: no-repeat;
|
|
40
40
|
/* Digits sprite is horizontal (frames left-to-right). */
|
|
41
|
-
background-size: calc(var(--zh-frames, 10) * 100%) 100%;
|
|
42
|
-
background-position: calc(var(--sheet-index, 0) * 100% / (var(--zh-frames, 10) - 1)) 0;
|
|
41
|
+
background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
|
|
42
|
+
background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.zh__a11y {
|
|
@@ -113,7 +113,7 @@ function T(n) {
|
|
|
113
113
|
seconds: Number.isFinite(i) ? i : 0
|
|
114
114
|
};
|
|
115
115
|
}
|
|
116
|
-
function
|
|
116
|
+
function z(n) {
|
|
117
117
|
if (n == null) return null;
|
|
118
118
|
let t = n.trim();
|
|
119
119
|
if (!t) return null;
|
|
@@ -125,10 +125,10 @@ function x(n) {
|
|
|
125
125
|
const h = i * 60 + r;
|
|
126
126
|
return e * h;
|
|
127
127
|
}
|
|
128
|
-
function
|
|
128
|
+
function x(n) {
|
|
129
129
|
const t = n.getAttribute("date"), e = D(t);
|
|
130
130
|
if (!e) return null;
|
|
131
|
-
const s = T(n.getAttribute("time")), o =
|
|
131
|
+
const s = T(n.getAttribute("time")), o = z(n.getAttribute("utc")) ?? 0;
|
|
132
132
|
return Date.UTC(
|
|
133
133
|
e.year,
|
|
134
134
|
e.month - 1,
|
|
@@ -138,7 +138,7 @@ function N(n) {
|
|
|
138
138
|
s.seconds
|
|
139
139
|
) - o * 60 * 1e3;
|
|
140
140
|
}
|
|
141
|
-
function
|
|
141
|
+
function N(n) {
|
|
142
142
|
const t = (n ?? "").trim().toLowerCase();
|
|
143
143
|
if (!t)
|
|
144
144
|
return d;
|
|
@@ -207,14 +207,14 @@ class c extends HTMLElement {
|
|
|
207
207
|
}
|
|
208
208
|
readAttributes() {
|
|
209
209
|
this.digitsUrl = this.getAttribute("digits-url"), this.separatorUrl = this.getAttribute("separator-url"), this.autostart = M(this, "autostart", !0);
|
|
210
|
-
const t =
|
|
210
|
+
const t = N(this.getAttribute("units"));
|
|
211
211
|
this.showDays = t.showDays, this.showHours = t.showHours, this.showMinutes = t.showMinutes, this.showSeconds = t.showSeconds;
|
|
212
|
-
const e =
|
|
212
|
+
const e = x(this);
|
|
213
213
|
if (this.targetEpochMs = e, this.durationMs = 0, !this.digitsUrl) {
|
|
214
214
|
this.setTextFallback("—:—:—:—");
|
|
215
215
|
return;
|
|
216
216
|
}
|
|
217
|
-
this.rootEl.style.setProperty("--digits-url", `url("${this.digitsUrl}")`), this.separatorUrl ? this.rootEl.style.setProperty("--sep-url", `url("${this.separatorUrl}")`) : this.rootEl.style.removeProperty("--sep-url"), this.applyUnitsVisibility();
|
|
217
|
+
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();
|
|
218
218
|
}
|
|
219
219
|
renderStaticInitial() {
|
|
220
220
|
if (this.targetEpochMs != null) {
|
|
@@ -274,7 +274,7 @@ class c extends HTMLElement {
|
|
|
274
274
|
}
|
|
275
275
|
for (let s = 0; s < e.length; s++) {
|
|
276
276
|
const o = t.children[s], i = S(e[s]);
|
|
277
|
-
o.style.setProperty("--sheet-index", String(i));
|
|
277
|
+
o.style.setProperty("--zh-sheet-index", String(i));
|
|
278
278
|
}
|
|
279
279
|
}
|
|
280
280
|
tick() {
|
package/dist/index.umd.js
CHANGED
|
@@ -26,20 +26,20 @@
|
|
|
26
26
|
.zh__sep {
|
|
27
27
|
flex: 0 0 var(--zh-sep-width, 4%);
|
|
28
28
|
width: var(--zh-sep-width, 4%);
|
|
29
|
-
background-image: var(--sep-url);
|
|
29
|
+
background-image: var(--zh-sep-url);
|
|
30
30
|
background-repeat: no-repeat;
|
|
31
31
|
background-position: center;
|
|
32
32
|
background-size: contain;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.zh__digit {
|
|
36
|
-
aspect-ratio: 9 / 12;
|
|
36
|
+
aspect-ratio: var(--zh-digit-aspect, 9 / 12);
|
|
37
37
|
width: 100%;
|
|
38
|
-
background-image: var(--digits-url);
|
|
38
|
+
background-image: var(--zh-digits-url);
|
|
39
39
|
background-repeat: no-repeat;
|
|
40
40
|
/* Digits sprite is horizontal (frames left-to-right). */
|
|
41
|
-
background-size: calc(var(--zh-frames, 10) * 100%) 100%;
|
|
42
|
-
background-position: calc(var(--sheet-index, 0) * 100% / (var(--zh-frames, 10) - 1)) 0;
|
|
41
|
+
background-size: calc(var(--zh-digits-frames, 10) * 100%) 100%;
|
|
42
|
+
background-position: calc(var(--zh-sheet-index, 0) * 100% / (var(--zh-digits-frames, 10) - 1)) 0;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.zh__a11y {
|
|
@@ -51,4 +51,4 @@
|
|
|
51
51
|
white-space: nowrap;
|
|
52
52
|
clip-path: inset(50%);
|
|
53
53
|
}
|
|
54
|
-
`,b=u;function M(n){if(n==="0")return 9;const t=n.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}function d(n){return n<0?0:n}const m={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function f(n){return"adoptedStyleSheets"in n}function E(n){try{const t=new CSSStyleSheet;return t.replaceSync(n),t}catch{return null}}const T=E(u);function g(n){const t=Math.floor(n/1e3),e=t%60,s=Math.floor(t/60)%60,o=Math.floor(t/3600),i=Math.floor(o/24),r=o%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function w(n){return String(n).padStart(2,"0")}function S(n,t){return[...String(n).padStart(t,"0")]}function D(n,t,e){if(!n.hasAttribute(t))return e;const s=n.getAttribute(t);return s==null||s===""?!0:s!=="false"}function
|
|
54
|
+
`,b=u;function M(n){if(n==="0")return 9;const t=n.charCodeAt(0)-48;return t>=1&&t<=9?t-1:9}function d(n){return n<0?0:n}const m={showDays:!0,showHours:!0,showMinutes:!0,showSeconds:!0},y={hours:0,minutes:0,seconds:0};function f(n){return"adoptedStyleSheets"in n}function E(n){try{const t=new CSSStyleSheet;return t.replaceSync(n),t}catch{return null}}const T=E(u);function g(n){const t=Math.floor(n/1e3),e=t%60,s=Math.floor(t/60)%60,o=Math.floor(t/3600),i=Math.floor(o/24),r=o%24;return{d:i,h:r,m:s,s:e,totalSec:t}}function w(n){return String(n).padStart(2,"0")}function S(n,t){return[...String(n).padStart(t,"0")]}function D(n,t,e){if(!n.hasAttribute(t))return e;const s=n.getAttribute(t);return s==null||s===""?!0:s!=="false"}function z(n){if(n==null)return null;const t=n.trim();if(!t)return null;const e=t.match(/^(\d{4})-(\d{2})-(\d{2})$/);if(!e)return null;const s=Number(e[1]),o=Number(e[2]),i=Number(e[3]);return!Number.isFinite(s)||!Number.isFinite(o)||!Number.isFinite(i)?null:{year:s,month:o,day:i}}function x(n){if(n==null)return{...y};const t=n.trim();if(!t)return{...y};const e=t.split(":"),s=Number(e[0]??"0"),o=Number(e[1]??"0"),i=Number(e[2]??"0");return{hours:Number.isFinite(s)?s:0,minutes:Number.isFinite(o)?o:0,seconds:Number.isFinite(i)?i:0}}function N(n){if(n==null)return null;let t=n.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,o="0"]=t.split(":"),i=Number(s),r=Number(o);if(!Number.isFinite(i)||!Number.isFinite(r))return null;const h=i*60+r;return e*h}function _(n){const t=n.getAttribute("date"),e=z(t);if(!e)return null;const s=x(n.getAttribute("time")),o=N(n.getAttribute("utc"))??0;return Date.UTC(e.year,e.month-1,e.day,s.hours,s.minutes,s.seconds)-o*60*1e3}function C(n){const t=(n??"").trim().toLowerCase();if(!t)return m;const e=t.split(":").map(c=>c.trim()).filter(Boolean);if(!e.length)return m;const s=new Set(e),o=s.has("d"),i=s.has("h"),r=s.has("m"),h=s.has("s");return!o&&!i&&!r&&!h?m:{showDays:o,showHours:i,showMinutes:r,showSeconds:h}}class p extends HTMLElement{static defaultStylesheet=T;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 o=this.isRunning();this.readAttributes(),this.doneFired=!1,o&&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(){this.digitsUrl=this.getAttribute("digits-url"),this.separatorUrl=this.getAttribute("separator-url"),this.autostart=D(this,"autostart",!0);const t=C(this.getAttribute("units"));this.showDays=t.showDays,this.showHours=t.showHours,this.showMinutes=t.showMinutes,this.showSeconds=t.showSeconds;const e=_(this);if(this.targetEpochMs=e,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:o,m:i,s:r}=g(e);this.setDigits({d:s,h:o,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 o=[!1,!1,!1];if(s.length>=2)for(let i=0;i<s.length-1;i++){const r=s[i+1],h=Math.min(2,Math.max(0,r-1));o[h]=!0}this.sep0El.style.display=o[0]?"":"none",this.sep1El.style.display=o[1]?"":"none",this.sep2El.style.display=o[2]?"":"none"}setDigits({d:t,h:e,m:s,s:o}){const i=S(Math.min(t,99),2),r=S(e,2),h=[...w(s)],c=[...w(o)];this.syncDigitGroup(this.daysEl,i),this.syncDigitGroup(this.hoursEl,r),this.syncDigitGroup(this.minutesEl,h),this.syncDigitGroup(this.secondsEl,c);const l=[];this.showDays&&l.push(i.join("")),this.showHours&&l.push(r.join("")),this.showMinutes&&l.push(h.join("")),this.showSeconds&&l.push(c.join("")),this.a11yEl.textContent=l.length?l.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 o=t.children[s],i=M(e[s]);o.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),o=d(t-s),{d:i,h:r,m:h,s:c,totalSec:l}=g(o);this.setDigits({d:i,h:r,m:h,s:c}),l===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=u}}customElements.get("countdown-timer")||customElements.define("countdown-timer",p);function v(n={}){const{selector:t="countdown-timer",onDone:e,stylesheet:s}=n,o=Array.from(document.querySelectorAll(t));return e&&o.forEach(i=>{i.addEventListener("done",()=>e(i))}),s&&o.forEach(i=>{const r=i;typeof s=="string"?r.adoptStyles(s):r.adoptStylesheet(s)}),o}a.initCountdownTimers=v,a.zeroHourCssText=b,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/zero-hour.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
: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(--sep-url);background-position:50%;background-repeat:no-repeat;background-size:contain}.zh__digit{aspect-ratio:9/12;background-image:var(--digits-url);background-repeat:no-repeat;background-size:calc(var(--zh-frames,10)*100%)100%;background-position:calc(var(--sheet-index,0)*100%/(var(--zh-frames,10) - 1))0;width:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}
|
|
1
|
+
: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);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;width:100%}.zh__a11y{clip:rect(0 0 0 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zero-hour",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
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",
|