Merge pull request #1 from medilies/npm-package

Npm package

.gitignore

@@ -0,0 +1 @@
+node_modules*

examples/app.js

@@ -0,0 +1,4 @@
+import autoStartCountown from "../lib/autoStartCountown";
+
+// The page have divs for auto start countdowns
+autoStartCountown();

examples/index.html

@@ -0,0 +1,45 @@
+<div autoCountdown countdown-duration='10' countdown-format='hh:m:s'></div>
+
+<hr>
+
+<div autoCountdown countdown-duration='13' countdown-format='mm:ss' countdown-handler="reload"></div>
+
+<hr>
+
+<div autoCountdown countdown-duration='5828' countdown-format='hh:ss' countdown-handler="reload"></div>
+
+<hr>
+
+<div>24h</div>
+<div autoCountdown countdown-duration='86400' countdown-format='hh:mm:ss' countdown-tick-size='2s'
+    countdown-handler="reload">
+</div>
+
+<hr>
+
+<div>48h</div>
+<div autoCountdown countdown-duration='172800' countdown-format='hh:mm:ss' countdown-tick-size='2s'
+    countdown-handler="reload">
+</div>
+
+<hr>
+
+<div>1 day</div>
+<div autoCountdown countdown-duration='86400' countdown-format='d:hh:mm:ss' countdown-tick-size='2s'
+    countdown-handler="reload">
+</div>
+
+<hr>
+
+<div>~40 days</div>
+<div autoCountdown countdown-duration='3455950' countdown-format='d hh:mm:ss' countdown-tick-size='3s'
+    countdown-handler="reload">
+</div>
+
+<script>
+    function reload() {
+        location.reload();
+    }
+</script>
+
+<script src='/examples/index.js' defer></script>

lib/Countdown.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import Tick from "./Tick";
+import Timer from "./Timer";
+
+export default class Countdown {
+    /**
+     *
+     * @param {HTMLElement} el
+     */
+    constructor(el) {
+        this.timer = new Timer(el.getAttribute("countdown-duration"));
+        this.tick = new Tick(el.getAttribute("countdown-tick-size") || "1s");
+        this.element = el;
+        this.actionName = el.getAttribute("countdown-handler");
+        this.format = el.getAttribute("countdown-format");
+
+        // init
+        this.render();
+
+        setInterval(() => {
+            if (this.timer.getRemainingSeconds() <= 0) {
+                this.actionName ? window[this.actionName]() : "do nothing";
+                return;
+            }
+
+            this.render();
+        }, this.tick.getSizeInMilliSeconds());
+    }
+
+    render() {
+        this.element.innerHTML = this.timer.getFormattedRemainingTime(
+            this.format
+        );
+    }
+
+    // TODO
+    abort() {}
+}

lib/Formatter.js

@@ -0,0 +1,54 @@
+"use strict";
+
+export default class Formatter {
+    /**
+     *
+     * @param {number} duration Interger in seconds
+     * @param {string} format
+     */
+    constructor(duration, format) {
+        this.duration = duration;
+        this.format = format;
+
+        this.mapper = {
+            d: 24 * 60 * 60,
+            hh: 60 * 60,
+            h: 60 * 60,
+            mm: 60,
+            m: 60,
+            ss: 1,
+            s: 1,
+        };
+    }
+
+    get(format = this.format) {
+        this.format = format;
+
+        for (const [key, value] of Object.entries(this.mapper)) {
+            if (this._formatHas(key)) {
+                this._replace(key);
+            }
+        }
+
+        return this.format;
+    }
+
+    /**
+     *
+     * @param {string} key
+     * @returns {boolean}
+     */
+    _formatHas(key) {
+        return this.format.indexOf(key) !== -1;
+    }
+
+    _replace(key) {
+        let value = Math.floor(this.duration / this.mapper[key]);
+
+        if (key.length === 2 && value < 10) value = "0" + value;
+
+        this.duration -= value * this.mapper[key];
+
+        this.format = this.format.replace(key, value);
+    }
+}

lib/Tick.js

@@ -0,0 +1,33 @@
+"use strict";
+
+export default class Tick {
+    /**
+     *
+     * @param {string} timespanStr [<two-digits>h][<two-digits>m][<two-digits>s]
+     */
+    constructor(timespanStr) {
+        this.timespanStr = timespanStr.toLowerCase();
+
+        this._parseTimespan();
+        this._setTotalSeconds();
+    }
+
+    _parseTimespan() {
+        const HMS = this.timespanStr.match(
+            /(?:(?<h>\d{0,2})h)?(?:(?<m>\d{0,2})m)?(?:(?<s>\d{0,2})s)?/
+        );
+
+        this.hours = parseInt(HMS.groups.h) || 0;
+        this.minutes = parseInt(HMS.groups.m) || 0;
+        this.seconds = parseInt(HMS.groups.s) || 0;
+    }
+
+    _setTotalSeconds() {
+        this.totalSeconds =
+            this.hours * 3600 + this.minutes * 60 + this.seconds;
+    }
+
+    getSizeInMilliSeconds() {
+        return this.totalSeconds * 1000;
+    }
+}

lib/Timer.js

@@ -0,0 +1,40 @@
+"use strict";
+
+import Formatter from "./Formatter";
+
+export default class Timer {
+    /**
+     *
+     * @param {number} duration in seconds
+     */
+    constructor(duration) {
+        this.duration = duration;
+
+        this._setTargetTimestamp();
+    }
+
+    /**
+     *
+     * @param {number} remainingSeconds
+     */
+    _setTargetTimestamp() {
+        this.targetTimestamp = Date.now() + parseInt(this.duration) * 1000;
+    }
+
+    getRemainingSeconds() {
+        return (this.targetTimestamp - Date.now()) / 1000;
+    }
+
+    getRemainingMilliSeconds() {
+        return this.targetTimestamp - Date.now();
+    }
+
+    /**
+     *
+     * @param {string} format
+     */
+    getFormattedRemainingTime(format) {
+        const formatter = new Formatter(this.getRemainingSeconds(), format);
+        return formatter.get();
+    }
+}