From 0bd24f66572209391b9fd6358c404ce148c59a35 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 18:10:43 +0100 Subject: [PATCH 1/9] add removeZeroUnits support --- README.md | 1 + dev/simplyCountdown.js | 53 ++++++++++++++++++++++++++++--------- dist/simplyCountdown.min.js | 2 +- index.html | 29 ++++++++++++++------ 4 files changed, 64 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index f3851e9..d5cdbf1 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ $ npm install simplycountdown.js amountClass: 'simply-amount', // amount css class wordClass: 'simply-word', // word css class zeroPad: false, + removeZeroUnits: false, // Remove zero units e.g : 3 hours, 2 minutes and 3 seconds instead of 0 days, 3 hours, 2 minutes and 3 seconds countUp: false }); diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js index e45bbca..2e9e483 100644 --- a/dev/simplyCountdown.js +++ b/dev/simplyCountdown.js @@ -134,6 +134,7 @@ amountClass: 'simply-amount', wordClass: 'simply-word', zeroPad: false, + removeZeroUnits: false, countUp: false }, args); let interval; @@ -202,8 +203,8 @@ now = new Date(); if (parameters.enableUtc) { - nowUtc = new Date(now.getFullYear(), now.getMonth(), now.getDate(), - now.getHours(), now.getMinutes(), now.getSeconds()); + nowUtc = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), + now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds())); secondsLeft = (targetDate - nowUtc.getTime()) / 1000; } else { secondsLeft = (targetDate - now.getTime()) / 1000; @@ -222,6 +223,7 @@ window.clearInterval(interval); parameters.onEnd(); } + let getWord = (obj, n) => { return obj.hasOwnProperty('lambda') ? obj.lambda(obj.root, n) @@ -235,22 +237,49 @@ /* display an inline countdown into a span tag */ if (parameters.inline) { - countdown.innerHTML = `${days} ${dayWord}, ` - + `${hours} ${hourWord}, ` - + `${minutes} ${minuteWord}, ` - + `${seconds} ${secondWord}.`; + let displayStr = ''; + + if (!(parameters.removeZeroUnits && days === 0 && secondsLeft < 86400)) { + displayStr += `${days} ${dayWord}, `; + } + if (!(parameters.removeZeroUnits && hours === 0 && secondsLeft < 3600)) { + displayStr += `${hours} ${hourWord}, `; + } + if (!(parameters.removeZeroUnits && minutes === 0 && secondsLeft < 60)) { + displayStr += `${minutes} ${minuteWord}, `; + } + displayStr += `${seconds} ${secondWord}`; + + countdown.innerHTML = displayStr.replace(/, $/, ''); // Remove trailing comma if any } else { - fullCountDown.days.amount.textContent = (parameters.zeroPad && days.toString().length < 2 ? '0' : '') + days; - fullCountDown.days.word.textContent = dayWord; + if (!(parameters.removeZeroUnits && days === 0 && secondsLeft < 86400)) { + fullCountDown.days.amount.textContent = (parameters.zeroPad && days.toString().length < 2 ? '0' : '') + days; + fullCountDown.days.word.textContent = dayWord; + fullCountDown.days.full.style.display = ''; + } else { + fullCountDown.days.full.style.display = 'none'; + } - fullCountDown.hours.amount.textContent = (parameters.zeroPad && hours.toString().length < 2 ? '0' : '') + hours; - fullCountDown.hours.word.textContent = hourWord; + if (!(parameters.removeZeroUnits && hours === 0 && secondsLeft < 3600)) { + fullCountDown.hours.amount.textContent = (parameters.zeroPad && hours.toString().length < 2 ? '0' : '') + hours; + fullCountDown.hours.word.textContent = hourWord; + fullCountDown.hours.full.style.display = ''; + } else { + fullCountDown.hours.full.style.display = 'none'; + } - fullCountDown.minutes.amount.textContent = (parameters.zeroPad && minutes.toString().length < 2 ? '0' : '') + minutes; - fullCountDown.minutes.word.textContent = minuteWord; + if (!(parameters.removeZeroUnits && minutes === 0 && secondsLeft < 60)) { + fullCountDown.minutes.amount.textContent = (parameters.zeroPad && minutes.toString().length < 2 ? '0' : '') + minutes; + fullCountDown.minutes.word.textContent = minuteWord; + fullCountDown.minutes.full.style.display = ''; + } else { + fullCountDown.minutes.full.style.display = 'none'; + } + // Seconds should always be displayed fullCountDown.seconds.amount.textContent = (parameters.zeroPad && seconds.toString().length < 2 ? '0' : '') + seconds; fullCountDown.seconds.word.textContent = secondWord; + fullCountDown.seconds.full.style.display = ''; } }; diff --git a/dist/simplyCountdown.min.js b/dist/simplyCountdown.min.js index e70d8d9..ddfdcfc 100644 --- a/dist/simplyCountdown.min.js +++ b/dist/simplyCountdown.min.js @@ -9,4 +9,4 @@ * - Justin Beasley * - Nathan Smith */ -var n=function t(n){for(var e,o=n||{},r=1;r1?t+"s":t},root:"day"},hours:{lambda:function(t,n){return n>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,n){return n>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,n){return n>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,countUp:!1},o);p=f===String.prototype?document.querySelectorAll(t):t,a=new Date(h.year,h.month-1,h.day,h.hours,h.minutes,h.seconds),s=h.enableUtc?new Date(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()):a;var C,g=function(t){var n,o=t,a=function(t,n){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:e(n,t,"simply-days-section"),hours:e(n,t,"simply-hours-section"),minutes:e(n,t,"simply-minutes-section"),seconds:e(n,t,"simply-seconds-section")}}(h,o);(n=function(){var t,n,e,p,f=function(){l=parseInt(u/86400,10),u%=86400,d=parseInt(u/3600,10),u%=3600,m=parseInt(u/60,10),y=parseInt(u%60,10)};i=new Date,h.enableUtc?(c=new Date(i.getFullYear(),i.getMonth(),i.getDate(),i.getHours(),i.getMinutes(),i.getSeconds()),u=(s-c.getTime())/1e3):u=(s-i.getTime())/1e3,u>0?f():h.countUp?(u=(i.getTime()-s)/1e3,f()):(l=0,d=0,m=0,y=0,window.clearInterval(r),h.onEnd());var C=function(t,n){return t.hasOwnProperty("lambda")?t.lambda(t.root,n):t.root},g=h.words;t=C(g.days,l),n=C(g.hours,d),e=C(g.minutes,m),p=C(g.seconds,y),h.inline?o.innerHTML="".concat(l," ").concat(t,", ")+"".concat(d," ").concat(n,", ")+"".concat(m," ").concat(e,", ")+"".concat(y," ").concat(p,"."):(a.days.amount.textContent=(h.zeroPad&&l.toString().length<2?"0":"")+l,a.days.word.textContent=t,a.hours.amount.textContent=(h.zeroPad&&d.toString().length<2?"0":"")+d,a.hours.word.textContent=n,a.minutes.amount.textContent=(h.zeroPad&&m.toString().length<2?"0":"")+m,a.minutes.word.textContent=e,a.seconds.amount.textContent=(h.zeroPad&&y.toString().length<2?"0":"")+y,a.seconds.word.textContent=p)})(),r=window.setInterval(n,h.refresh)};null!==(C=p)&&Symbol.iterator in Object(C)?Array.prototype.forEach.call(p,(function(t){g(t)})):g(p)}}(window),window.jQuery&&function(t,n){t.fn.simplyCountdown=function(t){return function(t,e){n(t,e)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file +var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);p=f===String.prototype?document.querySelectorAll(t):t,a=new Date(C.year,C.month-1,C.day,C.hours,C.minutes,C.seconds),r=C.enableUtc?new Date(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()):a;var h,g=function(t){var e,o=t,a=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(C,o);(e=function(){var t,e,n,p,f=function(){c=parseInt(u/86400,10),u%=86400,d=parseInt(u/3600,10),u%=3600,m=parseInt(u/60,10),y=parseInt(u%60,10)};l=new Date,C.enableUtc?(i=new Date(Date.UTC(l.getUTCFullYear(),l.getUTCMonth(),l.getUTCDate(),l.getUTCHours(),l.getUTCMinutes(),l.getUTCSeconds())),u=(r-i.getTime())/1e3):u=(r-l.getTime())/1e3,u>0?f():C.countUp?(u=(l.getTime()-r)/1e3,f()):(c=0,d=0,m=0,y=0,window.clearInterval(s),C.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},g=C.words;if(t=h(g.days,c),e=h(g.hours,d),n=h(g.minutes,m),p=h(g.seconds,y),C.inline){var w="";C.removeZeroUnits&&0===c&&u<86400||(w+="".concat(c," ").concat(t,", ")),C.removeZeroUnits&&0===d&&u<3600||(w+="".concat(d," ").concat(e,", ")),C.removeZeroUnits&&0===m&&u<60||(w+="".concat(m," ").concat(n,", ")),w+="".concat(y," ").concat(p),o.innerHTML=w.replace(/, $/,"")}else C.removeZeroUnits&&0===c&&u<86400?a.days.full.style.display="none":(a.days.amount.textContent=(C.zeroPad&&c.toString().length<2?"0":"")+c,a.days.word.textContent=t,a.days.full.style.display=""),C.removeZeroUnits&&0===d&&u<3600?a.hours.full.style.display="none":(a.hours.amount.textContent=(C.zeroPad&&d.toString().length<2?"0":"")+d,a.hours.word.textContent=e,a.hours.full.style.display=""),C.removeZeroUnits&&0===m&&u<60?a.minutes.full.style.display="none":(a.minutes.amount.textContent=(C.zeroPad&&m.toString().length<2?"0":"")+m,a.minutes.word.textContent=n,a.minutes.full.style.display=""),a.seconds.amount.textContent=(C.zeroPad&&y.toString().length<2?"0":"")+y,a.seconds.word.textContent=p,a.seconds.full.style.display=""})(),s=window.setInterval(e,C.refresh)};null!==(h=p)&&Symbol.iterator in Object(h)?Array.prototype.forEach.call(p,(function(t){g(t)})):g(p)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file diff --git a/index.html b/index.html index 64dba59..07951b8 100644 --- a/index.html +++ b/index.html @@ -109,6 +109,7 @@

Insert simplyCountdown to your HTML

amountClass: 'simply-amount', // amount css class wordClass: 'simply-word', // word css class zeroPad: false, + removeZeroUnits: false, // Remove zero units e.g : 3 hours, 2 minutes and 3 seconds instead of 0 days, 3 hours, 2 minutes and 3 seconds countUp: false, // enable count up if set to true }); @@ -119,7 +120,7 @@

Insert simplyCountdown to your HTML

let multipleElements = document.querySelectorAll('.my-countdown'); simplyCountdown(multipleElements, { /* options */ }); - +

You can use it with jQuery too (not required)

@@ -133,7 +134,7 @@ 
You can use it with jQuery too (not required)

         ...
     });
 
-
+
@@ -182,11 +183,9 @@

Easy to customize

} - +
-
-

Examples

Default

Displayed whithout jQuery - UTC enabled

@@ -195,6 +194,10 @@

Custom

Displayed with jQuery - UTC disabled

+

Remove Zero Units

+

Displayed with removeZeroUnits enabled

+
+

Inline

Display a simple inline countdown

@@ -209,6 +212,9 @@

Changelog

1.7.0

    +
  • + Added removeZeroUnits parameter to hide countdown units if they are not relevant. For example, "3 hours, 2 minutes, 3 seconds" instead of "0 days, 3 hours, 2 minutes, 3 seconds". Units are conditionally removed if the remaining time doesn't include them. +
  • Countdowns can be initialized directly with HTML elements with variables like
      @@ -340,14 +346,21 @@

      1.0.0

      */ var d = new Date(), countUpDate = new Date(); - d.setDate(d.getDate() + 365); + d.setMonth(d.getMonth() + 1); // default example simplyCountdown('.simply-countdown-one', { year: d.getFullYear(), month: d.getMonth() + 1, - day: d.getDate(), - enableUtc: true + day: d.getDate() + }); + + // example with removeZeroUnits + simplyCountdown('.simply-countdown-two', { + year: d.getFullYear(), + month: d.getMonth() + 1, + day: d.getDate() - 30, + removeZeroUnits: true }); // inline example From 7a1c66f98b787956828e90c59975b5b90d522949 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 19:03:33 +0100 Subject: [PATCH 2/9] Fix UTC --- dev/simplyCountdown.js | 55 +++++++++++++++++++++---------------- dist/simplyCountdown.min.js | 2 +- index.html | 19 +++++++------ 3 files changed, 42 insertions(+), 34 deletions(-) diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js index 2e9e483..09cc9ad 100644 --- a/dev/simplyCountdown.js +++ b/dev/simplyCountdown.js @@ -139,9 +139,7 @@ }, args); let interval; let targetDate; - let targetTmpDate; let now; - let nowUtc; let secondsLeft; let days; let hours; @@ -157,26 +155,26 @@ cd = elt; } - targetTmpDate = new Date( - parameters.year, - parameters.month - 1, - parameters.day, - parameters.hours, - parameters.minutes, - parameters.seconds - ); - if (parameters.enableUtc) { + // Use UTC for target date + targetDate = new Date(Date.UTC( + parameters.year, + parameters.month - 1, + parameters.day, + parameters.hours, + parameters.minutes, + parameters.seconds + )); + } else { + // Use local time for target date targetDate = new Date( - targetTmpDate.getUTCFullYear(), - targetTmpDate.getUTCMonth(), - targetTmpDate.getUTCDate(), - targetTmpDate.getUTCHours(), - targetTmpDate.getUTCMinutes(), - targetTmpDate.getUTCSeconds() + parameters.year, + parameters.month - 1, + parameters.day, + parameters.hours, + parameters.minutes, + parameters.seconds ); - } else { - targetDate = targetTmpDate; } let runCountdown = (theCountdown) => { @@ -201,15 +199,24 @@ seconds = parseInt(secondsLeft % 60, 10); }; - now = new Date(); if (parameters.enableUtc) { - nowUtc = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), - now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds())); - secondsLeft = (targetDate - nowUtc.getTime()) / 1000; + // Calculate "now" in UTC + now = new Date(); + now = new Date(Date.UTC( + now.getUTCFullYear(), + now.getUTCMonth(), + now.getUTCDate(), + now.getUTCHours(), + now.getUTCMinutes(), + now.getUTCSeconds() + )); } else { - secondsLeft = (targetDate - now.getTime()) / 1000; + // Calculate "now" in local time + now = new Date(); } + secondsLeft = Math.floor((targetDate - now.getTime()) / 1000); + if (secondsLeft > 0) { updateDisplayDate(); } else if (parameters.countUp) { diff --git a/dist/simplyCountdown.min.js b/dist/simplyCountdown.min.js index ddfdcfc..73b797d 100644 --- a/dist/simplyCountdown.min.js +++ b/dist/simplyCountdown.min.js @@ -9,4 +9,4 @@ * - Justin Beasley * - Nathan Smith */ -var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);p=f===String.prototype?document.querySelectorAll(t):t,a=new Date(C.year,C.month-1,C.day,C.hours,C.minutes,C.seconds),r=C.enableUtc?new Date(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()):a;var h,g=function(t){var e,o=t,a=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(C,o);(e=function(){var t,e,n,p,f=function(){c=parseInt(u/86400,10),u%=86400,d=parseInt(u/3600,10),u%=3600,m=parseInt(u/60,10),y=parseInt(u%60,10)};l=new Date,C.enableUtc?(i=new Date(Date.UTC(l.getUTCFullYear(),l.getUTCMonth(),l.getUTCDate(),l.getUTCHours(),l.getUTCMinutes(),l.getUTCSeconds())),u=(r-i.getTime())/1e3):u=(r-l.getTime())/1e3,u>0?f():C.countUp?(u=(l.getTime()-r)/1e3,f()):(c=0,d=0,m=0,y=0,window.clearInterval(s),C.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},g=C.words;if(t=h(g.days,c),e=h(g.hours,d),n=h(g.minutes,m),p=h(g.seconds,y),C.inline){var w="";C.removeZeroUnits&&0===c&&u<86400||(w+="".concat(c," ").concat(t,", ")),C.removeZeroUnits&&0===d&&u<3600||(w+="".concat(d," ").concat(e,", ")),C.removeZeroUnits&&0===m&&u<60||(w+="".concat(m," ").concat(n,", ")),w+="".concat(y," ").concat(p),o.innerHTML=w.replace(/, $/,"")}else C.removeZeroUnits&&0===c&&u<86400?a.days.full.style.display="none":(a.days.amount.textContent=(C.zeroPad&&c.toString().length<2?"0":"")+c,a.days.word.textContent=t,a.days.full.style.display=""),C.removeZeroUnits&&0===d&&u<3600?a.hours.full.style.display="none":(a.hours.amount.textContent=(C.zeroPad&&d.toString().length<2?"0":"")+d,a.hours.word.textContent=e,a.hours.full.style.display=""),C.removeZeroUnits&&0===m&&u<60?a.minutes.full.style.display="none":(a.minutes.amount.textContent=(C.zeroPad&&m.toString().length<2?"0":"")+m,a.minutes.word.textContent=n,a.minutes.full.style.display=""),a.seconds.amount.textContent=(C.zeroPad&&y.toString().length<2?"0":"")+y,a.seconds.word.textContent=p,a.seconds.full.style.display=""})(),s=window.setInterval(e,C.refresh)};null!==(h=p)&&Symbol.iterator in Object(h)?Array.prototype.forEach.call(p,(function(t){g(t)})):g(p)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file +var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);m=y===String.prototype?document.querySelectorAll(t):t,r=p.enableUtc?new Date(Date.UTC(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds)):new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds);var f,h=function(t){var e,o=t,m=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(p,o);(e=function(){var t,e,n,y,f=function(){i=parseInt(l/86400,10),l%=86400,u=parseInt(l/3600,10),l%=3600,c=parseInt(l/60,10),d=parseInt(l%60,10)};p.enableUtc?(a=new Date,a=new Date(Date.UTC(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()))):a=new Date,(l=Math.floor((r-a.getTime())/1e3))>0?f():p.countUp?(l=(a.getTime()-r)/1e3,f()):(i=0,u=0,c=0,d=0,window.clearInterval(s),p.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},C=p.words;if(t=h(C.days,i),e=h(C.hours,u),n=h(C.minutes,c),y=h(C.seconds,d),p.inline){var w="";p.removeZeroUnits&&0===i&&l<86400||(w+="".concat(i," ").concat(t,", ")),p.removeZeroUnits&&0===u&&l<3600||(w+="".concat(u," ").concat(e,", ")),p.removeZeroUnits&&0===c&&l<60||(w+="".concat(c," ").concat(n,", ")),w+="".concat(d," ").concat(y),o.innerHTML=w.replace(/, $/,"")}else p.removeZeroUnits&&0===i&&l<86400?m.days.full.style.display="none":(m.days.amount.textContent=(p.zeroPad&&i.toString().length<2?"0":"")+i,m.days.word.textContent=t,m.days.full.style.display=""),p.removeZeroUnits&&0===u&&l<3600?m.hours.full.style.display="none":(m.hours.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,m.hours.word.textContent=e,m.hours.full.style.display=""),p.removeZeroUnits&&0===c&&l<60?m.minutes.full.style.display="none":(m.minutes.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,m.minutes.word.textContent=n,m.minutes.full.style.display=""),m.seconds.amount.textContent=(p.zeroPad&&d.toString().length<2?"0":"")+d,m.seconds.word.textContent=y,m.seconds.full.style.display=""})(),s=window.setInterval(e,p.refresh)};null!==(f=m)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(m,(function(t){h(t)})):h(m)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file diff --git a/index.html b/index.html index 07951b8..44736d9 100644 --- a/index.html +++ b/index.html @@ -352,7 +352,16 @@

      1.0.0

      simplyCountdown('.simply-countdown-one', { year: d.getFullYear(), month: d.getMonth() + 1, - day: d.getDate() + day: d.getDate(), + enableUtc: true + }); + + //jQuery example + $('#simply-countdown-losange').simplyCountdown({ + year: d.getFullYear(), + month: d.getMonth() + 1, + day: d.getDate(), + enableUtc: false }); // example with removeZeroUnits @@ -371,14 +380,6 @@

      1.0.0

      inline: true }); - //jQuery example - $('#simply-countdown-losange').simplyCountdown({ - year: d.getFullYear(), - month: d.getMonth() + 1, - day: d.getDate(), - enableUtc: false - }); - // direct element injection & Count Up Example var countUp = document.querySelector('.simply-countdown-countup'); simplyCountdown(countUp, { From 79deffb2c5b594bc69f5d8f87da8c065c2970ebe Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 19:15:10 +0100 Subject: [PATCH 3/9] improve removeZeroUnits logic... it was quite weird --- dev/simplyCountdown.js | 17 +++++++++++------ dist/simplyCountdown.min.js | 2 +- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js index 09cc9ad..3b72001 100644 --- a/dev/simplyCountdown.js +++ b/dev/simplyCountdown.js @@ -246,20 +246,24 @@ if (parameters.inline) { let displayStr = ''; - if (!(parameters.removeZeroUnits && days === 0 && secondsLeft < 86400)) { + if (!(parameters.removeZeroUnits && days === 0)) { displayStr += `${days} ${dayWord}, `; } - if (!(parameters.removeZeroUnits && hours === 0 && secondsLeft < 3600)) { + + if (!(parameters.removeZeroUnits && days === 0 && hours === 0)) { displayStr += `${hours} ${hourWord}, `; } - if (!(parameters.removeZeroUnits && minutes === 0 && secondsLeft < 60)) { + + if (!(parameters.removeZeroUnits && days === 0 && hours === 0 && minutes === 0)) { displayStr += `${minutes} ${minuteWord}, `; } + + // Seconds should always be displayed displayStr += `${seconds} ${secondWord}`; countdown.innerHTML = displayStr.replace(/, $/, ''); // Remove trailing comma if any } else { - if (!(parameters.removeZeroUnits && days === 0 && secondsLeft < 86400)) { + if (!(parameters.removeZeroUnits && days === 0)) { fullCountDown.days.amount.textContent = (parameters.zeroPad && days.toString().length < 2 ? '0' : '') + days; fullCountDown.days.word.textContent = dayWord; fullCountDown.days.full.style.display = ''; @@ -267,7 +271,7 @@ fullCountDown.days.full.style.display = 'none'; } - if (!(parameters.removeZeroUnits && hours === 0 && secondsLeft < 3600)) { + if (!(parameters.removeZeroUnits && days === 0 && hours === 0)) { fullCountDown.hours.amount.textContent = (parameters.zeroPad && hours.toString().length < 2 ? '0' : '') + hours; fullCountDown.hours.word.textContent = hourWord; fullCountDown.hours.full.style.display = ''; @@ -275,7 +279,7 @@ fullCountDown.hours.full.style.display = 'none'; } - if (!(parameters.removeZeroUnits && minutes === 0 && secondsLeft < 60)) { + if (!(parameters.removeZeroUnits && days === 0 && hours === 0 && minutes === 0)) { fullCountDown.minutes.amount.textContent = (parameters.zeroPad && minutes.toString().length < 2 ? '0' : '') + minutes; fullCountDown.minutes.word.textContent = minuteWord; fullCountDown.minutes.full.style.display = ''; @@ -288,6 +292,7 @@ fullCountDown.seconds.word.textContent = secondWord; fullCountDown.seconds.full.style.display = ''; } + }; // Refresh immediately to prevent a Flash of Unstyled Content diff --git a/dist/simplyCountdown.min.js b/dist/simplyCountdown.min.js index 73b797d..c1f45de 100644 --- a/dist/simplyCountdown.min.js +++ b/dist/simplyCountdown.min.js @@ -9,4 +9,4 @@ * - Justin Beasley * - Nathan Smith */ -var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);m=y===String.prototype?document.querySelectorAll(t):t,r=p.enableUtc?new Date(Date.UTC(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds)):new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds);var f,h=function(t){var e,o=t,m=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(p,o);(e=function(){var t,e,n,y,f=function(){i=parseInt(l/86400,10),l%=86400,u=parseInt(l/3600,10),l%=3600,c=parseInt(l/60,10),d=parseInt(l%60,10)};p.enableUtc?(a=new Date,a=new Date(Date.UTC(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()))):a=new Date,(l=Math.floor((r-a.getTime())/1e3))>0?f():p.countUp?(l=(a.getTime()-r)/1e3,f()):(i=0,u=0,c=0,d=0,window.clearInterval(s),p.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},C=p.words;if(t=h(C.days,i),e=h(C.hours,u),n=h(C.minutes,c),y=h(C.seconds,d),p.inline){var w="";p.removeZeroUnits&&0===i&&l<86400||(w+="".concat(i," ").concat(t,", ")),p.removeZeroUnits&&0===u&&l<3600||(w+="".concat(u," ").concat(e,", ")),p.removeZeroUnits&&0===c&&l<60||(w+="".concat(c," ").concat(n,", ")),w+="".concat(d," ").concat(y),o.innerHTML=w.replace(/, $/,"")}else p.removeZeroUnits&&0===i&&l<86400?m.days.full.style.display="none":(m.days.amount.textContent=(p.zeroPad&&i.toString().length<2?"0":"")+i,m.days.word.textContent=t,m.days.full.style.display=""),p.removeZeroUnits&&0===u&&l<3600?m.hours.full.style.display="none":(m.hours.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,m.hours.word.textContent=e,m.hours.full.style.display=""),p.removeZeroUnits&&0===c&&l<60?m.minutes.full.style.display="none":(m.minutes.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,m.minutes.word.textContent=n,m.minutes.full.style.display=""),m.seconds.amount.textContent=(p.zeroPad&&d.toString().length<2?"0":"")+d,m.seconds.word.textContent=y,m.seconds.full.style.display=""})(),s=window.setInterval(e,p.refresh)};null!==(f=m)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(m,(function(t){h(t)})):h(m)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file +var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);m=y===String.prototype?document.querySelectorAll(t):t,r=p.enableUtc?new Date(Date.UTC(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds)):new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds);var f,h=function(t){var e,o=t,m=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(p,o);(e=function(){var t,e,n,y,f=function(){i=parseInt(l/86400,10),l%=86400,u=parseInt(l/3600,10),l%=3600,c=parseInt(l/60,10),d=parseInt(l%60,10)};p.enableUtc?(a=new Date,a=new Date(Date.UTC(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()))):a=new Date,(l=Math.floor((r-a.getTime())/1e3))>0?f():p.countUp?(l=(a.getTime()-r)/1e3,f()):(i=0,u=0,c=0,d=0,window.clearInterval(s),p.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},C=p.words;if(t=h(C.days,i),e=h(C.hours,u),n=h(C.minutes,c),y=h(C.seconds,d),p.inline){var w="";p.removeZeroUnits&&0===i||(w+="".concat(i," ").concat(t,", ")),p.removeZeroUnits&&0===i&&0===u||(w+="".concat(u," ").concat(e,", ")),p.removeZeroUnits&&0===i&&0===u&&0===c||(w+="".concat(c," ").concat(n,", ")),w+="".concat(d," ").concat(y),o.innerHTML=w.replace(/, $/,"")}else p.removeZeroUnits&&0===i?m.days.full.style.display="none":(m.days.amount.textContent=(p.zeroPad&&i.toString().length<2?"0":"")+i,m.days.word.textContent=t,m.days.full.style.display=""),p.removeZeroUnits&&0===i&&0===u?m.hours.full.style.display="none":(m.hours.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,m.hours.word.textContent=e,m.hours.full.style.display=""),p.removeZeroUnits&&0===i&&0===u&&0===c?m.minutes.full.style.display="none":(m.minutes.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,m.minutes.word.textContent=n,m.minutes.full.style.display=""),m.seconds.amount.textContent=(p.zeroPad&&d.toString().length<2?"0":"")+d,m.seconds.word.textContent=y,m.seconds.full.style.display=""})(),s=window.setInterval(e,p.refresh)};null!==(f=m)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(m,(function(t){h(t)})):h(m)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file From 540fddea6b12a5b6e614e410f0f6c55baf6c34d4 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 19:24:54 +0100 Subject: [PATCH 4/9] remove changelog from demo page, redondent from readme --- css/demo.css | 2 +- css/scss/demo.scss | 30 ----------- dev/simplyCountdown.js | 1 - index.html | 117 ----------------------------------------- 4 files changed, 1 insertion(+), 149 deletions(-) diff --git a/css/demo.css b/css/demo.css index 4fced68..783fb37 100644 --- a/css/demo.css +++ b/css/demo.css @@ -1 +1 @@ -a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:'Lato',sans-serif;font-weight:400;overflow-x:hidden;font-size:16px}p{font-size:18px;line-height:22px;margin:20px 0}header{display:flex;align-items:center;justify-content:center;background:#024772;border-bottom:5px solid #02658c;padding:20px}@media screen and (min-width:970px){header{height:450px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:400;color:#f2e6dc}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f2e6dc;margin:20px 0}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f2e6dc;border:2px solid #f2e6dc;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f2e6dc;color:#024772}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#0387a5;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #024772;padding-bottom:20px}main h2{font-size:26px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:33px;margin:40px 0}}main h3{font-size:20px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#0387a5;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#0387a5;transition:.2s ease all}main a:hover{color:#024772;text-decoration:underline}.examples h3{margin:20px 0 6.6666666667px 0}.examples h3+p{margin-top:0}.examples .simply-countdown-inline{margin-top:20px}.changelog h3{margin-bottom:10px}.changelog h3:before{content:"\1d";display:inline-block;margin-right:10px;transform:translateY(-2px)}.changelog h3:after{content:"\1d";display:inline-block;margin-left:10px;transform:rotate(180deg) translateY(-4px)}.changelog ul{list-style-type:disc;padding-left:20px}.changelog ul li{margin-bottom:10px;font-size:16px}footer{background:#024772;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#2cd5fb;text-decoration:none}footer a:hover{text-decoration:underline} \ No newline at end of file +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:'Lato',sans-serif;font-weight:400;overflow-x:hidden;font-size:16px}p{font-size:18px;line-height:22px;margin:20px 0}header{display:flex;align-items:center;justify-content:center;background:#024772;border-bottom:5px solid #02658c;padding:20px}@media screen and (min-width:970px){header{height:450px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:400;color:#f2e6dc}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f2e6dc;margin:20px 0}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f2e6dc;border:2px solid #f2e6dc;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f2e6dc;color:#024772}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#0387a5;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #024772;padding-bottom:20px}main h2{font-size:26px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:33px;margin:40px 0}}main h3{font-size:20px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#0387a5;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#0387a5;transition:.2s ease all}main a:hover{color:#024772;text-decoration:underline}.examples h3{margin:20px 0 6.6666666667px 0}.examples h3+p{margin-top:0}.examples .simply-countdown-inline{margin-top:20px}footer{background:#024772;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#2cd5fb;text-decoration:none}footer a:hover{text-decoration:underline} \ No newline at end of file diff --git a/css/scss/demo.scss b/css/scss/demo.scss index 773234b..5f16cd2 100644 --- a/css/scss/demo.scss +++ b/css/scss/demo.scss @@ -196,36 +196,6 @@ main { } } -.changelog { - h3 { - margin-bottom: $spacing / 2; - - &:before { - content: "\1d"; - display: inline-block; - margin-right: $spacing / 2; - transform: translateY(-2px); - } - - &:after { - content: "\1d"; - display: inline-block; - margin-left: $spacing / 2; - transform: rotate(180deg) translateY(-4px); - } - } - - ul { - list-style-type: disc; - padding-left: $spacing; - - li { - margin-bottom: $spacing / 2; - font-size: 16px; - } - } -} - footer { background: $color-blue-darken; color: $color-white; diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js index 3b72001..07fe5a6 100644 --- a/dev/simplyCountdown.js +++ b/dev/simplyCountdown.js @@ -292,7 +292,6 @@ fullCountDown.seconds.word.textContent = secondWord; fullCountDown.seconds.full.style.display = ''; } - }; // Refresh immediately to prevent a Flash of Unstyled Content diff --git a/index.html b/index.html index 44736d9..b1ee244 100644 --- a/index.html +++ b/index.html @@ -206,123 +206,6 @@

      countup

      countup Enabled option

- -
-

Changelog

- -

1.7.0

-
    -
  • - Added removeZeroUnits parameter to hide countdown units if they are not relevant. For example, "3 hours, 2 minutes, 3 seconds" instead of "0 days, 3 hours, 2 minutes, 3 seconds". Units are conditionally removed if the remaining time doesn't include them. -
    • -
  • - Countdowns can be initialized directly with HTML elements with variables like -
      -
    • document.getElementById
      • -
    • document.querySelector
      • -
    • document.querySelectorAll
      • -
    • ...etc
      • -
    -
    • -
-

1.6.0

-
    -
  • - Compatibility with languages like german for plurals - (PR #15), - Thanks to q30t -
    • -
  • - Update readme -
    • -
-

1.5.0

-
    -
  • Add countUp option (Resolve #10)
    • -
  • Upgrade yarn dev dependencies
    • -
  • Some minor code reformatting
    • -
- -

1.4.0

-
    -
  • Remove bower support
    • -
  • migrate from LESS to SASS (scss) / for demo and themes
    • -
  • migrate lib from ES5 to a really basic ES6
    • -
  • Remove JSLint support
    • -
  • - Add ESLint support based on customized - airbnb rules -
    • -
- -

1.3.2

-
    -
  • - add zeroPad parameter -
    • -
  • - fixed Flash of Unstyled Content -
    • -
- -

1.3.1

-
    -
  • - clean some code -
    • -
  • - add refresh parameter -
    • -
- -

1.3.0

-
    -
  • - Add onEnd callback -
    • -
- -

1.2.0

- - -

1.1.1

- - -

1.1.0

-
    -
  • - Add hours, minutes, seconds in available settings to set the target Date -
    • -
- -

1.0.1

-
    -
  • - Fix console error when not using jQuery -
    • -
- -

1.0.0

-
    -
  • initial release
    • -
-
From a0872cf9bb999ea044cb2cf8bc2e4e22801a7bad Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 20:08:16 +0100 Subject: [PATCH 5/9] 2024 demo --- css/demo.css | 2 +- css/scss/demo.scss | 86 ++++++++++++++++++++++++---------------------- index.html | 24 ++++++++----- 3 files changed, 61 insertions(+), 51 deletions(-) diff --git a/css/demo.css b/css/demo.css index 783fb37..afb6aae 100644 --- a/css/demo.css +++ b/css/demo.css @@ -1 +1 @@ -a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:'Lato',sans-serif;font-weight:400;overflow-x:hidden;font-size:16px}p{font-size:18px;line-height:22px;margin:20px 0}header{display:flex;align-items:center;justify-content:center;background:#024772;border-bottom:5px solid #02658c;padding:20px}@media screen and (min-width:970px){header{height:450px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:400;color:#f2e6dc}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f2e6dc;margin:20px 0}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f2e6dc;border:2px solid #f2e6dc;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f2e6dc;color:#024772}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#0387a5;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #024772;padding-bottom:20px}main h2{font-size:26px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:33px;margin:40px 0}}main h3{font-size:20px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#0387a5;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#0387a5;transition:.2s ease all}main a:hover{color:#024772;text-decoration:underline}.examples h3{margin:20px 0 6.6666666667px 0}.examples h3+p{margin-top:0}.examples .simply-countdown-inline{margin-top:20px}footer{background:#024772;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#2cd5fb;text-decoration:none}footer a:hover{text-decoration:underline} \ No newline at end of file +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:"Wix Madefor Text",serif;font-optical-sizing:auto;font-style:normal;overflow-x:hidden;font-size:16px}p{font-size:1.2rem;line-height:1.6;font-weight:400;margin:20px 0}h1,h2,h3{font-family:"Montserrat",sans-serif}header{display:flex;align-items:center;justify-content:center;background:#112d4e;border-bottom:5px solid #3f72af;padding:20px}@media screen and (min-width:970px){header{height:450px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:600;color:#f9f7f7}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f9f7f7;margin:20px 0;font-weight:500}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f9f7f7;border:2px solid #f9f7f7;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f9f7f7;color:#112d4e}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#112d4e;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #112d4e;padding-bottom:20px}main h2{font-size:2rem;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:3rem;margin:40px 0}}main h3{font-size:20px;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#6995ca;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#6995ca;transition:.2s ease all}main a:hover{color:#112d4e;text-decoration:underline}.simply-countdown-inline{margin-top:20px;font-weight:700;font-size:1.3rem}footer{background:#112d4e;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#c7d8eb;text-decoration:none;font-weight:700}footer a:hover{text-decoration:underline} \ No newline at end of file diff --git a/css/scss/demo.scss b/css/scss/demo.scss index 5f16cd2..01b0153 100644 --- a/css/scss/demo.scss +++ b/css/scss/demo.scss @@ -4,13 +4,16 @@ * Date : 27/06/2015 * Author : Vincent Loy */ -$color-blue-darken: #024772; -$color-blue: #02658C; -$color-blue-lighten: #0387A5; -$color-gray: #BFB6AE; -$color-gray-lighten: #F2E6DC; +$color-main: #3F72AF; +$color-main-darken: #112D4E; +$color-main-lighten: #6995ca; +$color-secondary: #F9F7F7; +$color-secondary-lighten: #F9F7F7; $color-white: #fff; +$ff-base: "Wix Madefor Text", serif; +$ff-title: "Montserrat", sans-serif; + $spacing: 20px; $tablet: "screen and (min-width: 970px)"; @@ -22,24 +25,31 @@ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,c } body, html { - font-family: 'Lato', sans-serif; - font-weight: 400; + font-family: $ff-base; + font-optical-sizing: auto; + font-style: normal; overflow-x: hidden; font-size: 16px; } p { - font-size: 18px; - line-height: 22px; + font-size: 1.2rem; + line-height: 1.6; + font-weight: 400; margin: $spacing 0; } +h1, h2, h3 { + font-family: $ff-title; +} + + header { display: flex; align-items: center; justify-content: center; - background: $color-blue-darken; - border-bottom: 5px solid $color-blue; + background: $color-main-darken; + border-bottom: 5px solid $color-main; padding: $spacing; @media #{$tablet} { @@ -52,8 +62,8 @@ header { h1 { font-style: italic; font-size: 2rem; - font-weight: 400; - color: $color-gray-lighten; + font-weight: 600; + color: $color-secondary-lighten; @media #{$tablet} { font-size: 4rem; @@ -62,8 +72,9 @@ header { h2 { font-size: 1.33rem; - color: $color-gray-lighten; + color: $color-secondary-lighten; margin: $spacing 0; + font-weight: 500; @media #{$tablet} { font-size: 1.75rem; @@ -80,8 +91,8 @@ header { } .button { - color: $color-gray-lighten; - border:2px solid $color-gray-lighten; + color: $color-secondary-lighten; + border:2px solid $color-secondary-lighten; border-radius: 2px; text-decoration: none; padding: $spacing / 2; @@ -108,8 +119,8 @@ header { } &:hover { - background: $color-gray-lighten; - color: $color-blue-darken; + background: $color-secondary-lighten; + color: $color-main-darken; } } @@ -124,7 +135,7 @@ header { } .note { - background: $color-blue-lighten; + background: $color-main-darken; color: $color-white; font-style: italic; border-radius: 2px; @@ -133,25 +144,25 @@ header { main { > section:not(:last-of-type) { - border-bottom: 1px solid $color-blue-darken; + border-bottom: 1px solid $color-main-darken; padding-bottom: $spacing; } h2 { - font-size: 26px; - color: $color-blue; + font-size: 2rem; + color: $color-main; font-weight: 700; margin: $spacing 0; @media #{$tablet} { - font-size: 33px; + font-size: 3rem; margin: $spacing * 2 0; } } h3 { font-size: 20px; - color: $color-blue; + color: $color-main; font-weight: 700; margin: $spacing 0; @@ -161,7 +172,7 @@ main { } a { - color: $color-blue-lighten; + color: $color-main-lighten; text-decoration: none; &:hover { text-decoration: underline; @@ -172,32 +183,24 @@ main { a { font-weight: bold; text-decoration: none; - color: $color-blue-lighten; + color: $color-main-lighten; transition: 0.2s ease all; &:hover { - color: $color-blue-darken; + color: $color-main-darken; text-decoration: underline; } } } -.examples { - h3 { - margin: $spacing 0 ($spacing / 3) 0; - - & + p { - margin-top: 0; - } - } - - .simply-countdown-inline { - margin-top: $spacing; - } +.simply-countdown-inline { + margin-top: $spacing; + font-weight: bold; + font-size: 1.3rem; } footer { - background: $color-blue-darken; + background: $color-main-darken; color: $color-white; text-align: center; padding: $spacing; @@ -205,8 +208,9 @@ footer { font-weight: 600; a { - color: lighten($color-blue-lighten, 25%); + color: lighten($color-main-lighten, 25%); text-decoration: none; + font-weight: bold; &:hover{ text-decoration: underline; diff --git a/index.html b/index.html index b1ee244..3597a2c 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,9 @@ - + + + @@ -41,16 +42,21 @@

A Tiny Javascript Countdown Library

Why another countdown ?

- I developed this little library in a boring day. I regularly use this kind of - Javascript's - libraries to display countdowns on websites and this one exactly meets the needs that I - have. - It is perfect to make 'under construction' pages, etc. + I created this little library on a day when I had some extra time, + inspired by my regular need for JavaScript countdown solutions on websites. + This library is designed to meet my exact needs for simplicity and flexibility, + making it perfect for use cases like 'under construction' pages or upcoming event countdowns.

- This is a very (very) basic Javascript CountDown. + This JavaScript countdown library is lightweight and easy to use—ideal for developers who want a straightforward, + customizable countdown without the unnecessary complexity of many other libraries. Whether it's for landing pages, + promotions, or personal projects, this solution can help you add engaging countdown timers effortlessly.

+ +

+ simplyCountdown.js has been adopted by a variety of projects where developers needed a simple, reliable countdown solution. + Its lightweight nature and ease of customization make it an appealing choice for straightforward use cases like 'under construction' pages or event countdowns

@@ -185,7 +191,7 @@

Easy to customize

- +

Demos

Default

Displayed whithout jQuery - UTC enabled

From 7fb49b91a787540ce2b6cd1ff9b860b00fccada1 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 23:10:25 +0100 Subject: [PATCH 6/9] Improve demo and readme details --- README.md | 49 +++++----- css/demo.css | 2 +- css/scss/demo.scss | 121 ++++++++++++++++++++++- index.html | 234 ++++++++++++++++++++++++++++++++++++++------- 4 files changed, 347 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index d5cdbf1..ccc58e6 100644 --- a/README.md +++ b/README.md @@ -28,30 +28,31 @@ $ npm install simplycountdown.js // This is an example with default parameters simplyCountdown('[CSS-SELECTOR]', { - year: 2019, // required - month: 6, // required - day: 28, // required - hours: 0, // Default is 0 [0-23] integer - minutes: 0, // Default is 0 [0-59] integer - seconds: 0, // Default is 0 [0-59] integer - words: { //words displayed into the countdown, lambda for showing correct plurals - days: { root: 'day', lambda: (root, n) => {return n > 1 ? root + "s" : root }}, - hours: { root: 'hour', lambda: (root, n) => {return n > 1 ? root + "s" : root }}, - minutes: { root: 'minute', lambda: (root, n) => {return n > 1 ? root + "s" : root }}, - seconds: { root: 'second', lambda: (root, n) => {return n > 1 ? root + "s" : root }} - }, - inline: false, //set to true to get an inline basic countdown like : 24 days, 4 hours, 2 minutes, 5 seconds - inlineClass: 'simply-countdown-inline', //inline css span class in case of inline = true - // in case of inline set to false - enableUtc: false, //Use UTC or not - default : false - onEnd: function() { return; }, //Callback on countdown end, put your own function here - refresh: 1000, // default refresh every 1s - sectionClass: 'simply-section', //section css class - amountClass: 'simply-amount', // amount css class - wordClass: 'simply-word', // word css class - zeroPad: false, - removeZeroUnits: false, // Remove zero units e.g : 3 hours, 2 minutes and 3 seconds instead of 0 days, 3 hours, 2 minutes and 3 seconds - countUp: false + year: 2015, // Target year (required) + month: 6, // Target month [1-12] (required) + day: 28, // Target day [1-31] (required) + hours: 0, // Target hour [0-23], default: 0 + minutes: 0, // Target minute [0-59], default: 0 + seconds: 0, // Target second [0-59], default: 0 + words: { // Custom labels, with lambda for plurals + days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root }, + hours: { root: 'hour', lambda: (root, n) => n > 1 ? root + 's' : root }, + minutes: { root: 'minute', lambda: (root, n) => n > 1 ? root + 's' : root }, + seconds: { root: 'second', lambda: (root, n) => n > 1 ? root + 's' : root } + }, + plural: true, // Use plurals for labels + inline: false, // Inline format: e.g., "24 days, 4 hours, 2 minutes" + inlineSeparator: ', ', // Separator for inline format, default: ", " + inlineClass: 'simply-countdown-inline', // CSS class for inline countdown + enableUtc: false, // Use UTC time if true + onEnd: function () {}, // Callback when countdown ends + refresh: 1000, // Refresh interval in ms, default: 1000 + sectionClass: 'simply-section', // CSS class for each countdown section + amountClass: 'simply-amount', // CSS class for numeric values + wordClass: 'simply-word', // CSS class for unit labels + zeroPad: false, // Pad numbers with leading zero + removeZeroUnits: false, // Remove units with zero value + countUp: false // Count up after reaching zero }); // Also, you can init with already existing Javascript Object. diff --git a/css/demo.css b/css/demo.css index afb6aae..145e620 100644 --- a/css/demo.css +++ b/css/demo.css @@ -1 +1 @@ -a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:"Wix Madefor Text",serif;font-optical-sizing:auto;font-style:normal;overflow-x:hidden;font-size:16px}p{font-size:1.2rem;line-height:1.6;font-weight:400;margin:20px 0}h1,h2,h3{font-family:"Montserrat",sans-serif}header{display:flex;align-items:center;justify-content:center;background:#112d4e;border-bottom:5px solid #3f72af;padding:20px}@media screen and (min-width:970px){header{height:450px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:600;color:#f9f7f7}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f9f7f7;margin:20px 0;font-weight:500}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f9f7f7;border:2px solid #f9f7f7;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f9f7f7;color:#112d4e}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#112d4e;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #112d4e;padding-bottom:20px}main h2{font-size:2rem;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:3rem;margin:40px 0}}main h3{font-size:20px;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#6995ca;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#6995ca;transition:.2s ease all}main a:hover{color:#112d4e;text-decoration:underline}.simply-countdown-inline{margin-top:20px;font-weight:700;font-size:1.3rem}footer{background:#112d4e;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#c7d8eb;text-decoration:none;font-weight:700}footer a:hover{text-decoration:underline} \ No newline at end of file +a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:"Wix Madefor Text",serif;font-optical-sizing:auto;font-style:normal;overflow-x:hidden;font-size:16px}p{font-size:1.2rem;line-height:1.6;font-weight:400;margin:20px 0 45px}h1,h2,h3{font-family:"Montserrat",sans-serif}header{display:flex;align-items:center;justify-content:center;background:#112d4e;border-bottom:5px solid #3f72af;padding:20px;height:450px}@media screen and (min-width:970px){header{height:650px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:600;color:#f9f7f7}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f9f7f7;margin:20px 0;font-weight:500}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f9f7f7;border:2px solid #f9f7f7;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f9f7f7;color:#112d4e}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#112d4e;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #112d4e;padding-bottom:20px}main h2{font-size:2rem;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:3rem;margin:40px 0}}main h3{font-size:20px;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#6995ca;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#6995ca;transition:.2s ease all}main a:hover{color:#112d4e;text-decoration:underline}.simply-countdown-inline{margin-top:20px;font-weight:700;font-size:1.3rem}.sc-inline-header{color:#f9f7f7;font-weight:100;font-size:1.4rem;font-style:italic}.alert{position:fixed;bottom:-60px;left:0;right:0;margin:auto;padding:20px;display:table;background:#112d4e;color:#fff;border-radius:5px;font-size:1.3rem;opacity:0;transition:.3s ease all}.alert.show-after-header-cd.active{opacity:1;bottom:60px}.alert.show-after-header-cd a{font-weight:700;color:#f9f7f7}footer{background:#112d4e;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#c7d8eb;text-decoration:none;font-weight:700}footer a:hover{text-decoration:underline}.table-wrapper{width:100%;overflow-x:auto}.table-wrapper table{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse;min-width:600px}.table-wrapper table th,.table-wrapper table td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table-wrapper table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6;background-color:#f8f9fa;font-weight:700}.table-wrapper table tbody tr:nth-child(even){background-color:#f2f2f2}.table-wrapper table.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-wrapper table.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-wrapper table.table-bordered{border:1px solid #dee2e6}.table-wrapper table.table-bordered th,.table-wrapper table.table-bordered td{border:1px solid #dee2e6}.table-wrapper table.table-sm th,.table-wrapper table.table-sm td{padding:.3rem}.text-center{text-align:center}.text-right{text-align:right}.bold{font-weight:700}.ff-code{font-family:monospace;font-size:.9rem}.hide{display:none} \ No newline at end of file diff --git a/css/scss/demo.scss b/css/scss/demo.scss index 01b0153..3c665be 100644 --- a/css/scss/demo.scss +++ b/css/scss/demo.scss @@ -36,7 +36,7 @@ p { font-size: 1.2rem; line-height: 1.6; font-weight: 400; - margin: $spacing 0; + margin: $spacing 0 45px; } h1, h2, h3 { @@ -51,9 +51,10 @@ header { background: $color-main-darken; border-bottom: 5px solid $color-main; padding: $spacing; + height: 450px; @media #{$tablet} { - height: 450px; + height: 650px; } .header-content { @@ -199,6 +200,42 @@ main { font-size: 1.3rem; } +.sc-inline-header { + color: $color-secondary-lighten; + font-weight: 100; + font-size: 1.4rem; + font-style: italic; +} + +.alert { + position: fixed; + bottom: -60px; + left: 0; + right: 0; + margin: auto; + padding: 20px; + display: table; + background: $color-main-darken; + color: white; + border-radius: 5px; + font-size: 1.3rem; + opacity: 0; + transition: 0.3s ease all; + + &.show-after-header-cd { + + &.active { + opacity: 1; + bottom: 60px; + } + + a { + font-weight: bold; + color: $color-secondary-lighten; + } + } +} + footer { background: $color-main-darken; color: $color-white; @@ -217,3 +254,83 @@ footer { } } } + +.table-wrapper { + width: 100%; + overflow-x: auto; + + table { + width: 100%; + margin-bottom: 1rem; + color: #212529; + border-collapse: collapse; + min-width: 600px; // Ensures the table maintains its width with a scrollbar on smaller screens + + th, + td { + padding: 0.75rem; + vertical-align: top; + border-top: 1px solid #dee2e6; + } + + thead { + th { + vertical-align: bottom; + border-bottom: 2px solid #dee2e6; + background-color: #f8f9fa; + font-weight: bold; + } + } + + tbody { + tr { + &:nth-child(even) { + background-color: #f2f2f2; + } + } + } + + &.table-striped tbody tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.05); + } + + &.table-hover tbody tr:hover { + background-color: rgba(0, 0, 0, 0.075); + } + + &.table-bordered { + border: 1px solid #dee2e6; + + th, + td { + border: 1px solid #dee2e6; + } + } + + &.table-sm th, + &.table-sm td { + padding: 0.3rem; + } + } +} + +.text-center { + text-align: center; +} + +.text-right { + text-align: right; +} + +.bold { + font-weight: bold; +} + +.ff-code { + font-family: monospace; + font-size: 0.9rem; +} + +.hide { + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html index 3597a2c..1dffbbe 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,12 @@

simplyCountdown.js

A Tiny Javascript Countdown Library

+

+ You're just + + away from discovering the perfect Countdown Library for your next project! +

+
View on GitHub @@ -67,7 +73,7 @@

install via yarn, npm, 

-
+
     $ npm install simplycountdown.js
 
     // or
@@ -89,35 +95,32 @@ 
Insert simplyCountdown to your HTML

     // You'll always have to call simplyCountdown using ID's, no classes.
 
     simplyCountdown('[CSS-SELECTOR]', {
-            year: 2015, // required
-            month: 6, // required
-            day: 28, // required
-            hours: 0, // Default is 0 [0-23] integer
-            minutes: 0, // Default is 0 [0-59] integer
-            seconds: 0, // Default is 0 [0-59] integer
-            words: { //words displayed into the countdown, lambda for showing correct plurals
-                days: { root: 'day', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
-                hours: { root: 'hour', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
-                minutes: { root: 'minute', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
-                seconds: { root: 'second', lambda: (root, n) => {return n > 1 ? root + "s" : root }}
-            },
-            plural: true, //use plurals
-            inline: false, //set to true to get an inline basic countdown like : 24 days, 4 hours, 2 minutes, 5 seconds
-            inlineClass: 'simply-countdown-inline', //inline css span class in case of inline = true
-            // in case of inline set to false
-            enableUtc: false,
-            onEnd: function () {
-                // your code
-                return;
-            },
-            refresh: 1000, //default refresh every 1s
-            sectionClass: 'simply-section', //section css class
-            amountClass: 'simply-amount', // amount css class
-            wordClass: 'simply-word', // word css class
-            zeroPad: false,
-            removeZeroUnits: false, // Remove zero units e.g : 3 hours, 2 minutes and 3 seconds instead of 0 days, 3 hours, 2 minutes and 3 seconds
-            countUp: false, // enable count up if set to true
-    });
+        year: 2015, // Target year (required)
+        month: 6, // Target month [1-12] (required)
+        day: 28, // Target day [1-31] (required)
+        hours: 0, // Target hour [0-23], default: 0
+        minutes: 0, // Target minute [0-59], default: 0
+        seconds: 0, // Target second [0-59], default: 0
+        words: { // Custom labels, with lambda for plurals
+            days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root },
+            hours: { root: 'hour', lambda: (root, n) => n > 1 ? root + 's' : root },
+            minutes: { root: 'minute', lambda: (root, n) => n > 1 ? root + 's' : root },
+            seconds: { root: 'second', lambda: (root, n) => n > 1 ? root + 's' : root }
+        },
+        plural: true, // Use plurals for labels
+        inline: false, // Inline format: e.g., "24 days, 4 hours, 2 minutes"
+        inlineSeparator: ', ', // Separator for inline format, default: ", "
+        inlineClass: 'simply-countdown-inline', // CSS class for inline countdown
+        enableUtc: false, // Use UTC time if true
+        onEnd: function () {}, // Callback when countdown ends
+        refresh: 1000, // Refresh interval in ms, default: 1000
+        sectionClass: 'simply-section', // CSS class for each countdown section
+        amountClass: 'simply-amount', // CSS class for numeric values
+        wordClass: 'simply-word', // CSS class for unit labels
+        zeroPad: false, // Pad numbers with leading zero
+        removeZeroUnits: false, // Remove units with zero value
+        countUp: false // Count up after reaching zero
+    });    
 
     // Also, you can init with already existing Javascript Object.
     let myElement = document.querySelector('.my-countdown');
@@ -141,6 +144,144 @@ 
You can use it with jQuery too (not required)

     });
+ +

Parameters

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ParameterTypeDescriptionDefault
yearNumber (required)The target year for the countdown.-
monthNumber (required)The target month [1-12] for the countdown.-
dayNumber (required)The target day [1-31] for the countdown.-
hoursNumberThe target hour [0-23].0
minutesNumberThe target minute [0-59].0
secondsNumberThe target second [0-59].0
wordsObjectCustom labels for the units (days, hours, minutes, seconds) with optional lambda function for correct pluralization. + { days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root }, ... } +
pluralBooleanWhether to use plural forms for the unit labels.true
inlineBooleanSet to true for a simple inline countdown (e.g., "24 days, 4 hours, 2 minutes").false
inlineSeparatorStringSeparator used in the inline countdown format.", "
inlineClassStringCSS class applied to the inline countdown container."simply-countdown-inline"
enableUtcBooleanSet to true to use UTC time for the countdown calculations.false
onEndFunctionCallback function executed when the countdown ends.() => {}
refreshNumberThe countdown refresh interval in milliseconds.1000
sectionClassStringCSS class applied to each countdown section (days, hours, minutes, seconds)."simply-section"
amountClassStringCSS class applied to the numeric value of each countdown section."simply-amount"
wordClassStringCSS class applied to the unit label of each countdown section."simply-word"
zeroPadBooleanWhether to pad the numeric values with leading zeros (e.g., "05").false
removeZeroUnitsBooleanRemove units with zero value (e.g., remove "0 days" if days are zero).false
countUpBooleanCount up after reaching zero if set to true.false
+
@@ -191,7 +332,7 @@

Easy to customize
-

Demos

+

Examples

Default

Displayed whithout jQuery - UTC enabled

@@ -224,6 +365,10 @@

countup

+
+ You like simplyCountdown ? Give it a star on Github ! +
+ @@ -233,7 +378,7 @@

countup

* So when you'll init the plugin, follow how it's done in plugin documentation. * e.g : instead of "month: d.getMonth() + 1" put "month: 10" for October. */ - var d = new Date(), + let d = new Date(), countUpDate = new Date(); d.setMonth(d.getMonth() + 1); @@ -268,6 +413,31 @@

countup

day: d.getDate(), inline: true }); + + // Header inline Countdown + let dateInTwoMinutes = new Date(); + //dateInTwoMinutes.setMinutes(dateInTwoMinutes.getMinutes() + 1); + dateInTwoMinutes.setSeconds(dateInTwoMinutes.getSeconds() + 30); + simplyCountdown('.sc-inline-header__cd', { + year: dateInTwoMinutes.getFullYear(), + month: dateInTwoMinutes.getMonth() + 1, + day: dateInTwoMinutes.getDate(), + hours: dateInTwoMinutes.getHours(), + minutes: dateInTwoMinutes.getMinutes(), + seconds: dateInTwoMinutes.getSeconds(), + removeZeroUnits: true, + inline: true, + inlineSeparator: ' - ', + onEnd: () => { + let afterHeaderCdAlert = document.querySelector('.show-after-header-cd'); + afterHeaderCdAlert.classList.add('active'); + document.querySelector('.sc-inline-header').classList.add('hide'); + + window.setInterval(() => { + afterHeaderCdAlert.classList.remove('active'); + }, 20000); + } + }); // direct element injection & Count Up Example var countUp = document.querySelector('.simply-countdown-countup'); From 3e560ab83b2874c63666c113b9a00ca5f56c67a1 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 23:12:02 +0100 Subject: [PATCH 7/9] add parameters list on the readme --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index ccc58e6..2f1d989 100644 --- a/README.md +++ b/README.md @@ -75,6 +75,30 @@ $('[CSS-SELECTOR]').simplyCountdown({ }); ``` +## Parameters +| Parameter | Type | Description | Default | +|--------------------|-----------------|---------------------------------------------------------------------------------------------|-----------------------------| +| `year` | Number (required) | The target year for the countdown. | - | +| `month` | Number (required) | The target month [1-12] for the countdown. | - | +| `day` | Number (required) | The target day [1-31] for the countdown. | - | +| `hours` | Number | The target hour [0-23]. | 0 | +| `minutes` | Number | The target minute [0-59]. | 0 | +| `seconds` | Number | The target second [0-59]. | 0 | +| `words` | Object | Custom labels for the units (days, hours, minutes, seconds) with optional lambda for pluralization. | `{ days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root }, ... }` | +| `plural` | Boolean | Whether to use plural forms for the unit labels. | `true` | +| `inline` | Boolean | Set to `true` for a simple inline countdown (e.g., "24 days, 4 hours, 2 minutes"). | `false` | +| `inlineSeparator` | String | Separator used in the inline countdown format. | `, ` | +| `inlineClass` | String | CSS class applied to the inline countdown container. | `"simply-countdown-inline"` | +| `enableUtc` | Boolean | Set to `true` to use UTC time for the countdown calculations. | `false` | +| `onEnd` | Function | Callback function executed when the countdown ends. | `() => {}` | +| `refresh` | Number | The countdown refresh interval in milliseconds. | `1000` | +| `sectionClass` | String | CSS class applied to each countdown section (days, hours, minutes, seconds). | `"simply-section"` | +| `amountClass` | String | CSS class applied to the numeric value of each countdown section. | `"simply-amount"` | +| `wordClass` | String | CSS class applied to the unit label of each countdown section. | `"simply-word"` | +| `zeroPad` | Boolean | Whether to pad the numeric values with leading zeros (e.g., "05"). | `false` | +| `removeZeroUnits` | Boolean | Remove units with zero value (e.g., remove "0 days" if days are zero). | `false` | +| `countUp` | Boolean | Count up after reaching zero if set to `true`. | `false` | + ## Easy to customize You can easly customize the countdown using the css theme starter file or create your own like so : From f22d9a5c34289710dd2d45c37062a66563ffb5e1 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 23:12:17 +0100 Subject: [PATCH 8/9] Add inlineSeparator feature --- dev/simplyCountdown.js | 7 ++++--- dist/simplyCountdown.min.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js index 07fe5a6..029f040 100644 --- a/dev/simplyCountdown.js +++ b/dev/simplyCountdown.js @@ -125,6 +125,7 @@ }, plural: true, inline: false, + inlineSeparator: ', ', enableUtc: false, onEnd: () => { }, @@ -247,15 +248,15 @@ let displayStr = ''; if (!(parameters.removeZeroUnits && days === 0)) { - displayStr += `${days} ${dayWord}, `; + displayStr += `${days} ${dayWord}${parameters.inlineSeparator}`; } if (!(parameters.removeZeroUnits && days === 0 && hours === 0)) { - displayStr += `${hours} ${hourWord}, `; + displayStr += `${hours} ${hourWord}${parameters.inlineSeparator}`; } if (!(parameters.removeZeroUnits && days === 0 && hours === 0 && minutes === 0)) { - displayStr += `${minutes} ${minuteWord}, `; + displayStr += `${minutes} ${minuteWord}${parameters.inlineSeparator}`; } // Seconds should always be displayed diff --git a/dist/simplyCountdown.min.js b/dist/simplyCountdown.min.js index c1f45de..6dad0cb 100644 --- a/dist/simplyCountdown.min.js +++ b/dist/simplyCountdown.min.js @@ -9,4 +9,4 @@ * - Justin Beasley * - Nathan Smith */ -var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);m=y===String.prototype?document.querySelectorAll(t):t,r=p.enableUtc?new Date(Date.UTC(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds)):new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds);var f,h=function(t){var e,o=t,m=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(p,o);(e=function(){var t,e,n,y,f=function(){i=parseInt(l/86400,10),l%=86400,u=parseInt(l/3600,10),l%=3600,c=parseInt(l/60,10),d=parseInt(l%60,10)};p.enableUtc?(a=new Date,a=new Date(Date.UTC(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()))):a=new Date,(l=Math.floor((r-a.getTime())/1e3))>0?f():p.countUp?(l=(a.getTime()-r)/1e3,f()):(i=0,u=0,c=0,d=0,window.clearInterval(s),p.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},C=p.words;if(t=h(C.days,i),e=h(C.hours,u),n=h(C.minutes,c),y=h(C.seconds,d),p.inline){var w="";p.removeZeroUnits&&0===i||(w+="".concat(i," ").concat(t,", ")),p.removeZeroUnits&&0===i&&0===u||(w+="".concat(u," ").concat(e,", ")),p.removeZeroUnits&&0===i&&0===u&&0===c||(w+="".concat(c," ").concat(n,", ")),w+="".concat(d," ").concat(y),o.innerHTML=w.replace(/, $/,"")}else p.removeZeroUnits&&0===i?m.days.full.style.display="none":(m.days.amount.textContent=(p.zeroPad&&i.toString().length<2?"0":"")+i,m.days.word.textContent=t,m.days.full.style.display=""),p.removeZeroUnits&&0===i&&0===u?m.hours.full.style.display="none":(m.hours.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,m.hours.word.textContent=e,m.hours.full.style.display=""),p.removeZeroUnits&&0===i&&0===u&&0===c?m.minutes.full.style.display="none":(m.minutes.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,m.minutes.word.textContent=n,m.minutes.full.style.display=""),m.seconds.amount.textContent=(p.zeroPad&&d.toString().length<2?"0":"")+d,m.seconds.word.textContent=y,m.seconds.full.style.display=""})(),s=window.setInterval(e,p.refresh)};null!==(f=m)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(m,(function(t){h(t)})):h(m)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file +var e=function t(e){for(var n,o=e||{},s=1;s1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,inlineSeparator:", ",enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);m=y===String.prototype?document.querySelectorAll(t):t,r=p.enableUtc?new Date(Date.UTC(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds)):new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds);var f,h=function(t){var e,o=t,m=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(p,o);(e=function(){var t,e,n,y,f=function(){l=parseInt(i/86400,10),i%=86400,c=parseInt(i/3600,10),i%=3600,u=parseInt(i/60,10),d=parseInt(i%60,10)};p.enableUtc?(a=new Date,a=new Date(Date.UTC(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()))):a=new Date,(i=Math.floor((r-a.getTime())/1e3))>0?f():p.countUp?(i=(a.getTime()-r)/1e3,f()):(l=0,c=0,u=0,d=0,window.clearInterval(s),p.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},C=p.words;if(t=h(C.days,l),e=h(C.hours,c),n=h(C.minutes,u),y=h(C.seconds,d),p.inline){var w="";p.removeZeroUnits&&0===l||(w+="".concat(l," ").concat(t).concat(p.inlineSeparator)),p.removeZeroUnits&&0===l&&0===c||(w+="".concat(c," ").concat(e).concat(p.inlineSeparator)),p.removeZeroUnits&&0===l&&0===c&&0===u||(w+="".concat(u," ").concat(n).concat(p.inlineSeparator)),w+="".concat(d," ").concat(y),o.innerHTML=w.replace(/, $/,"")}else p.removeZeroUnits&&0===l?m.days.full.style.display="none":(m.days.amount.textContent=(p.zeroPad&&l.toString().length<2?"0":"")+l,m.days.word.textContent=t,m.days.full.style.display=""),p.removeZeroUnits&&0===l&&0===c?m.hours.full.style.display="none":(m.hours.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,m.hours.word.textContent=e,m.hours.full.style.display=""),p.removeZeroUnits&&0===l&&0===c&&0===u?m.minutes.full.style.display="none":(m.minutes.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,m.minutes.word.textContent=n,m.minutes.full.style.display=""),m.seconds.amount.textContent=(p.zeroPad&&d.toString().length<2?"0":"")+d,m.seconds.word.textContent=y,m.seconds.full.style.display=""})(),s=window.setInterval(e,p.refresh)};null!==(f=m)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(m,(function(t){h(t)})):h(m)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown); \ No newline at end of file From 2787c81245cab7726647fc3add4a96defb4498f9 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 5 Dec 2024 23:33:37 +0100 Subject: [PATCH 9/9] update package version --- README.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2f1d989..dec41a9 100644 --- a/README.md +++ b/README.md @@ -149,6 +149,14 @@ You can easly customize the countdown using the css theme starter file or create ### Changelog +#### 2.0.0 +This version may have breaking changes, if your website is working well with 1.7.0, you may want to stay on the previous version. +- fix plurals in a generic way [#52](https://github.com/VincentLoy/simplyCountdown.js/pull/52) + - Thumbs up to [mira01](https://github.com/mira01) that fixed [#51](https://github.com/VincentLoy/simplyCountdown.js/issues/51), [#23](https://github.com/VincentLoy/simplyCountdown.js/issues/23) & [#42](https://github.com/VincentLoy/simplyCountdown.js/issues/42) ! +- Added the `inlineSeparator` parameter. Previously, the inline mode only supported a comma-separated countdown. Now, you can customize the separator, using options like |, /, -, or any character that suits your needs. +- Fix potential UTC-related issues (fingers crossed!). + + #### 1.7.0 - Countdowns can be initialized directly with HTML elements with variables like - document.getElementById diff --git a/package.json b/package.json index c6ed7c7..a7c4693 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "simplycountdown.js", "description": "Tiny Javascript Countdown", - "version": "1.7.0", + "version": "2.0.0", "homepage": "http://vincentloy.github.io/simplyCountdown.js", "author": { "name": "Vincent Loy",