Merge branch 'release/v1.7.0'

VincentLoy · Dec 3, 2020 · 76a3eb3 · 76a3eb3
2 parents d37e53e + b9abe9a
commit 76a3eb3
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 14 deletions.
diff --git 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)
@@ -117,6 +124,13 @@ You can easly customize the countdown using the css theme starter file or create
 
 ### 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
 - Compatibility with languages like german for plurals ([PR #15](https://github.com/VincentLoy/simplyCountdown.js/pull/15)), thanks to [q30t](https://github.com/q30t)
 

diff --git 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
diff --git a/index.html b/index.html
@@ -99,7 +99,7 @@ <h3>Insert simplyCountdown to your HTML</h3>
             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 @@ <h3>Insert simplyCountdown to your HTML</h3>
             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 */ });
 </code>
 </pre>
         <h3>You can use it with jQuery too (not required)</h3>
@@ -194,12 +201,24 @@ <h3>Inline</h3>
 
         <h3>countup</h3>
         <p>countup Enabled option</p>
-        <div class="simply-countdown simply-countdown-countup"></div>
+        <div class="simply-countdown simply-countdown-countup" id="simply-countdown-countup"></div>
     </section>
 
     <section class="changelog">
         <h2>Changelog</h2>
 
+        <h3>1.7.0</h3>
+        <ul>
+            <li>
+                Countdowns can be initialized directly with HTML elements with variables like
+                <ul>
+                    <li>document.getElementById</li>
+                    <li>document.querySelector</li>
+                    <li>document.querySelectorAll</li>
+                    <li>...etc</li>
+                </ul>
+            </li>
+        </ul>
         <h3>1.6.0</h3>
         <ul>
             <li>
@@ -271,7 +290,7 @@ <h3>1.2.0</h3>
         <h3>1.1.1</h3>
         <ul>
             <li>
-                <a href="https://github.com/VincentLoy/simplyCountdown.js/issues/3"
+                <a href="https://github.com/VincentLoy/simplyCountdown.min.js/issues/3"
                    rel="nofollow noopener"
                    target="_blank">
                     Resolve #3
@@ -312,7 +331,7 @@ <h3>1.0.0</h3>
 
 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
-<script src="dist/simplyCountdown.min.js"></script>
+<script src="dev/simplyCountdown.js"></script>
 <script>
     /**
      * WARNING: I set this coundtown to be running until the end of times.
@@ -327,7 +346,8 @@ <h3>1.0.0</h3>
     simplyCountdown('.simply-countdown-one', {
         year: d.getFullYear(),
         month: d.getMonth() + 1,
-        day: d.getDate()
+        day: d.getDate(),
+        enableUtc: true
     });
 
     // inline example
@@ -346,8 +366,9 @@ <h3>1.0.0</h3>
         enableUtc: false
     });
 
-    // Count Up Example
-    simplyCountdown('.simply-countdown-countup', {
+    // direct element injection & Count Up Example
+    var countUp = document.querySelector('.simply-countdown-countup');
+    simplyCountdown(countUp, {
         year: countUpDate.getFullYear(),
         month: countUpDate.getMonth() + 1,
         day: countUpDate.getDate(),

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "simplycountdown.js",
   "description": "Tiny Javascript Countdown",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "homepage": "http://vincentloy.github.io/simplyCountdown.js",
   "author": {
     "name": "Vincent Loy",