From c88116f97ae9a7480cdc9500f4128627947ab676 Mon Sep 17 00:00:00 2001 From: Vincent Loy Date: Thu, 3 Dec 2020 13:11:59 +0100 Subject: [PATCH 1/2] Add JS HTML selectors support --- README.md | 9 ++++++++- dev/simplyCountdown.js | 29 ++++++++++++++++++++++++++--- dist/simplyCountdown.min.js | 4 ++-- index.html | 35 ++++++++++++++++++++++++++++------- 4 files changed, 64 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 1ba517b..a26b8f0 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ $ npm install simplycountdown.js 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: true, //Use UTC as default + 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 @@ -53,6 +53,13 @@ $ npm install simplycountdown.js zeroPad: false, countUp: false }); + + // Also, you can init with already existing Javascript Object. + let myElement = document.querySelector('.my-countdown'); + simplyCountdown(myElement, { /* options */ }); + + let multipleElements = document.querySelectorAll('.my-countdown'); + simplyCountdown(multipleElements, { /* options */ }); ``` ### You can use it with jQuery too (not required) diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js index af2a88b..5c1fb35 100644 --- a/dev/simplyCountdown.js +++ b/dev/simplyCountdown.js @@ -1,3 +1,5 @@ +/* global Symbol */ + (function (exports) { 'use strict'; @@ -43,6 +45,10 @@ return out; }; + let isIterableElement = (val) => { + return val !== null && Symbol.iterator in Object(val); + }; + /** * Function that create a countdown section * @param countdown @@ -103,6 +109,7 @@ * @param args (parameters) */ exports.simplyCountdown = (elt, args) => { + const eltProto = Object.getPrototypeOf(elt); let parameters = extend({ year: 2015, month: 6, @@ -139,7 +146,15 @@ let hours; let minutes; let seconds; - let cd = document.querySelectorAll(elt); + let cd; + + // console.log(typeof elt); + // + if (eltProto === String.prototype) { + cd = document.querySelectorAll(elt); + } else { + cd = elt; + } targetTmpDate = new Date( parameters.year, @@ -163,7 +178,7 @@ targetDate = targetTmpDate; } - Array.prototype.forEach.call(cd, (theCountdown) => { + let runCountdown = (theCountdown) => { let countdown = theCountdown; let fullCountDown = createElements(parameters, countdown); let refresh; @@ -255,7 +270,15 @@ // Refresh immediately to prevent a Flash of Unstyled Content refresh(); interval = window.setInterval(refresh, parameters.refresh); - }); + }; + + if (!isIterableElement(cd)) { + runCountdown(cd); + } else { + Array.prototype.forEach.call(cd, (cdElt) => { + runCountdown(cdElt); + }); + } }; }(window)); diff --git a/dist/simplyCountdown.min.js b/dist/simplyCountdown.min.js index d1de28b..382f7ae 100644 --- a/dist/simplyCountdown.min.js +++ b/dist/simplyCountdown.min.js @@ -1,4 +1,4 @@ -"use strict";function _typeof(n){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n})(n)}!function(n){ +"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}!function(t){ /*! * Project : simply-countdown * Date : 27/06/2015 @@ -9,4 +9,4 @@ * - Justin Beasley * - Nathan Smith */ -var t=function n(t){for(var e,o=t||{},s=1;s0?w():y.countUp?(i=(l.getTime()-r)/1e3,w()):(c=0,d=0,m=0,p=0,window.clearInterval(s),y.onEnd()),y.plural?(n=c>1?y.words.days.plural:y.words.days.singular,t=d>1?y.words.hours.plural:y.words.hours.singular,e=m>1?y.words.minutes.plural:y.words.minutes.singular,g=p>1?y.words.seconds.plural:y.words.seconds.singular):(n=y.words.days.singular,t=y.words.hours.singular,e=y.words.minutes.singular,g=y.words.seconds.singular),y.inline?o.innerHTML="".concat(c," ").concat(n,", ")+"".concat(d," ").concat(t,", ")+"".concat(m," ").concat(e,", ")+"".concat(p," ").concat(g,"."):(a.days.amount.textContent=(y.zeroPad&&c.toString().length<2?"0":"")+c,a.days.word.textContent=n,a.hours.amount.textContent=(y.zeroPad&&d.toString().length<2?"0":"")+d,a.hours.word.textContent=t,a.minutes.amount.textContent=(y.zeroPad&&m.toString().length<2?"0":"")+m,a.minutes.word.textContent=e,a.seconds.amount.textContent=(y.zeroPad&&p.toString().length<2?"0":"")+p,a.seconds.word.textContent=g)})(),s=window.setInterval(t,y.refresh)}))}}(window),window.jQuery&&function(n,t){n.fn.simplyCountdown=function(n){return function(n,e){t(n,e)}(this.selector,n)}}(jQuery,simplyCountdown); \ No newline at end of file +var n=function t(n){for(var e,o=n||{},s=1;s0?g():w.countUp?(u=(l.getTime()-r)/1e3,g()):(c=0,d=0,p=0,m=0,window.clearInterval(s),w.onEnd()),w.plural?(t=c>1?w.words.days.plural:w.words.days.singular,n=d>1?w.words.hours.plural:w.words.hours.singular,e=p>1?w.words.minutes.plural:w.words.minutes.singular,y=m>1?w.words.seconds.plural:w.words.seconds.singular):(t=w.words.days.singular,n=w.words.hours.singular,e=w.words.minutes.singular,y=w.words.seconds.singular),w.inline?o.innerHTML="".concat(c," ").concat(t,", ")+"".concat(d," ").concat(n,", ")+"".concat(p," ").concat(e,", ")+"".concat(m," ").concat(y,"."):(a.days.amount.textContent=(w.zeroPad&&c.toString().length<2?"0":"")+c,a.days.word.textContent=t,a.hours.amount.textContent=(w.zeroPad&&d.toString().length<2?"0":"")+d,a.hours.word.textContent=n,a.minutes.amount.textContent=(w.zeroPad&&p.toString().length<2?"0":"")+p,a.minutes.word.textContent=e,a.seconds.amount.textContent=(w.zeroPad&&m.toString().length<2?"0":"")+m,a.seconds.word.textContent=y)})(),s=window.setInterval(n,w.refresh)};null!==(f=y)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(y,(function(t){h(t)})):h(y)}}(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 diff --git a/index.html b/index.html index d7bb071..e3abbd8 100644 --- a/index.html +++ b/index.html @@ -99,7 +99,7 @@

Insert simplyCountdown to your HTML

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: true, + enableUtc: false, onEnd: function () { // your code return; @@ -111,6 +111,13 @@

Insert simplyCountdown to your HTML

zeroPad: false, countUp: false, // enable count up if set to true }); + + // Also, you can init with already existing Javascript Object. + let myElement = document.querySelector('.my-countdown'); + simplyCountdown(myElement, { /* options */ }); + + let multipleElements = document.querySelectorAll('.my-countdown'); + simplyCountdown(multipleElements, { /* options */ });

You can use it with jQuery too (not required)

@@ -194,12 +201,24 @@

Inline

countup

countup Enabled option

-
+

Changelog

+

1.7.0

+
    +
  • + Countdowns can be initialized directly with HTML elements with variables like +
      +
    • document.getElementById
      • +
    • document.querySelector
      • +
    • document.querySelectorAll
      • +
    • ...etc
      • +
    +
    • +

1.6.0