flipdown - npm Package Compare versions

Comparing version 0.2.2 to 0.3.1

dist/flipdown.js

@@ -13,3 +13,3 @@ "use strict";
   function FlipDown(uts) {
-    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'flipdown';
+    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "flipdown";
     var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -19,12 +19,12 @@
 
-    if (typeof uts !== 'number') {
+    if (typeof uts !== "number") {
       throw new Error("FlipDown: Constructor expected unix timestamp, got ".concat(_typeof(uts), " instead."));
     }
 
-    if (_typeof(el) === 'object') {
+    if (_typeof(el) === "object") {
       opt = el;
-      el = 'flipdown';
+      el = "flipdown";
     }
 
-    this.version = '0.2.2';
+    this.version = "0.2.3";
     this.initialised = false;
@@ -96,4 +96,11 @@ this.now = this._getTime();
     value: function _parseOptions(opt) {
+      var headings = ["Days", "Hours", "Minutes", "Seconds"];
+
+      if (opt.headings && opt.headings.length === 4) {
+        headings = opt.headings;
+      }
+
       return {
-        theme: opt.hasOwnProperty('theme') ? opt.theme : 'dark'
+        theme: opt.hasOwnProperty("theme") ? opt.theme : "dark",
+        headings: headings
       };
@@ -129,3 +136,3 @@ }
 
-      this.element.appendChild(this._createRotorGroup(dayRotors));
+      this.element.appendChild(this._createRotorGroup(dayRotors, 0));
       var count = dayRotorCount;
@@ -141,9 +148,9 @@
 
-        this.element.appendChild(this._createRotorGroup(otherRotors));
+        this.element.appendChild(this._createRotorGroup(otherRotors, i + 1));
       }
 
-      this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-front'));
-      this.rotorLeafRear = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-rear'));
-      this.rotorTop = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-top'));
-      this.rotorBottom = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-bottom'));
+      this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-front"));
+      this.rotorLeafRear = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-rear"));
+      this.rotorTop = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-top"));
+      this.rotorBottom = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-bottom"));
 
@@ -158,7 +165,8 @@ this._tick();
     key: "_createRotorGroup",
-    value: function _createRotorGroup(rotors) {
-      var rotorGroup = document.createElement('div');
-      rotorGroup.className = 'rotor-group';
-      var dayRotorGroupHeading = document.createElement('div');
-      dayRotorGroupHeading.className = 'rotor-group-heading';
+    value: function _createRotorGroup(rotors, rotorIndex) {
+      var rotorGroup = document.createElement("div");
+      rotorGroup.className = "rotor-group";
+      var dayRotorGroupHeading = document.createElement("div");
+      dayRotorGroupHeading.className = "rotor-group-heading";
+      dayRotorGroupHeading.setAttribute("data-before", this.opts.headings[rotorIndex]);
       rotorGroup.appendChild(dayRotorGroupHeading);
@@ -172,14 +180,14 @@ appendChildren(rotorGroup, rotors);
       var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var rotor = document.createElement('div');
-      var rotorLeaf = document.createElement('div');
-      var rotorLeafRear = document.createElement('figure');
-      var rotorLeafFront = document.createElement('figure');
-      var rotorTop = document.createElement('div');
-      var rotorBottom = document.createElement('div');
-      rotor.className = 'rotor';
-      rotorLeaf.className = 'rotor-leaf';
-      rotorLeafRear.className = 'rotor-leaf-rear';
-      rotorLeafFront.className = 'rotor-leaf-front';
-      rotorTop.className = 'rotor-top';
-      rotorBottom.className = 'rotor-bottom';
+      var rotor = document.createElement("div");
+      var rotorLeaf = document.createElement("div");
+      var rotorLeafRear = document.createElement("figure");
+      var rotorLeafFront = document.createElement("figure");
+      var rotorTop = document.createElement("div");
+      var rotorBottom = document.createElement("div");
+      rotor.className = "rotor";
+      rotorLeaf.className = "rotor-leaf";
+      rotorLeafRear.className = "rotor-leaf-rear";
+      rotorLeafFront.className = "rotor-leaf-front";
+      rotorTop.className = "rotor-top";
+      rotorBottom.className = "rotor-bottom";
       rotorLeafRear.textContent = v;
@@ -219,3 +227,3 @@ rotorTop.textContent = v;
       this.clockStrings.s = pad(this.clockValues.s, 2);
-      this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split('');
+      this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split("");
       this.rotorLeafFront.forEach(function (el, i) {
@@ -244,5 +252,5 @@ el.textContent = _this.prevClockValuesAsString[i];
             el.textContent = _this3.clockValuesAsString[i];
-            el.parentElement.classList.add('flipped');
+            el.parentElement.classList.add("flipped");
             var flip = setInterval(function () {
-              el.parentElement.classList.remove('flipped');
+              el.parentElement.classList.remove("flipped");
               clearInterval(flip);
@@ -249,0 +257,0 @@ }.bind(_this3), 500);

dist/flipdown.min.js

@@ -1,1 +0,1 @@
-"use strict";function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}var FlipDown=function(){var b=Math.floor;function a(b){var c=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"flipdown",d=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};if(_classCallCheck(this,a),"number"!=typeof b)throw new Error("FlipDown: Constructor expected unix timestamp, got ".concat(_typeof(b)," instead."));"object"===_typeof(c)&&(d=c,c="flipdown"),this.version="0.2.2",this.initialised=!1,this.now=this._getTime(),this.epoch=b,this.countdownEnded=!1,this.hasEndedCallback=null,this.element=document.getElementById(c),this.rotors=[],this.rotorLeafFront=[],this.rotorLeafRear=[],this.rotorTops=[],this.rotorBottoms=[],this.countdown=null,this.daysRemaining=0,this.clockValues={},this.clockStrings={},this.clockValuesAsString=[],this.prevClockValuesAsString=[],this.opts=this._parseOptions(d),this._setOptions(),console.log("FlipDown ".concat(this.version," (Theme: ").concat(this.opts.theme,")"))}return _createClass(a,[{key:"start",value:function a(){return this.initialised||this._init(),this.countdown=setInterval(this._tick.bind(this),1e3),this}},{key:"ifEnded",value:function b(a){return this.hasEndedCallback=function(){a(),this.hasEndedCallback=null},this}},{key:"_getTime",value:function a(){return new Date().getTime()/1e3}},{key:"_hasCountdownEnded",value:function a(){return 0>this.epoch-this.now?(this.countdownEnded=!0,null!=this.hasEndedCallback&&(this.hasEndedCallback(),this.hasEndedCallback=null),!0):(this.countdownEnded=!1,!1)}},{key:"_parseOptions",value:function b(a){return{theme:a.hasOwnProperty("theme")?a.theme:"dark"}}},{key:"_setOptions",value:function a(){this.element.classList.add("flipdown__theme-".concat(this.opts.theme))}},{key:"_init",value:function h(){this.initialised=!0,this.daysremaining=this._hasCountdownEnded()?0:b((this.epoch-this.now)/86400).toString().length;for(var a=2>=this.daysremaining?2:this.daysremaining,c=0;c<a+6;c++)this.rotors.push(this._createRotor(0));for(var d=[],c=0;c<a;c++)d.push(this.rotors[c]);this.element.appendChild(this._createRotorGroup(d));for(var e,f=a,c=0;3>c;c++){e=[];for(var g=0;2>g;g++)e.push(this.rotors[f]),f++;this.element.appendChild(this._createRotorGroup(e))}return this.rotorLeafFront=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-front")),this.rotorLeafRear=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-rear")),this.rotorTop=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-top")),this.rotorBottom=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-bottom")),this._tick(),this._updateClockValues(!0),this}},{key:"_createRotorGroup",value:function d(a){var b=document.createElement("div");b.className="rotor-group";var c=document.createElement("div");return c.className="rotor-group-heading",b.appendChild(c),appendChildren(b,a),b}},{key:"_createRotor",value:function h(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,b=document.createElement("div"),c=document.createElement("div"),d=document.createElement("figure"),e=document.createElement("figure"),f=document.createElement("div"),g=document.createElement("div");return b.className="rotor",c.className="rotor-leaf",d.className="rotor-leaf-rear",e.className="rotor-leaf-front",f.className="rotor-top",g.className="rotor-bottom",d.textContent=a,f.textContent=a,g.textContent=a,appendChildren(b,[c,f,g]),appendChildren(c,[d,e]),b}},{key:"_tick",value:function c(){this.now=this._getTime();var a=0>=this.epoch-this.now?0:this.epoch-this.now;this.clockValues.d=b(a/86400),a-=86400*this.clockValues.d,this.clockValues.h=b(a/3600),a-=3600*this.clockValues.h,this.clockValues.m=b(a/60),a-=60*this.clockValues.m,this.clockValues.s=b(a),this._updateClockValues(),this._hasCountdownEnded()}},{key:"_updateClockValues",value:function e(){function a(){var a=this;this.rotorTop.forEach(function(b,c){b.textContent!=a.clockValuesAsString[c]&&(b.textContent=a.clockValuesAsString[c])})}function b(){var a=this;this.rotorLeafRear.forEach(function(b,c){if(b.textContent!=a.clockValuesAsString[c]){b.textContent=a.clockValuesAsString[c],b.parentElement.classList.add("flipped");var d=setInterval(function(){b.parentElement.classList.remove("flipped"),clearInterval(d)}.bind(a),500)}})}var c=this,d=!!(0<arguments.length&&void 0!==arguments[0])&&arguments[0];this.clockStrings.d=pad(this.clockValues.d,2),this.clockStrings.h=pad(this.clockValues.h,2),this.clockStrings.m=pad(this.clockValues.m,2),this.clockStrings.s=pad(this.clockValues.s,2),this.clockValuesAsString=(this.clockStrings.d+this.clockStrings.h+this.clockStrings.m+this.clockStrings.s).split(""),this.rotorLeafFront.forEach(function(a,b){a.textContent=c.prevClockValuesAsString[b]}),this.rotorBottom.forEach(function(a,b){a.textContent=c.prevClockValuesAsString[b]}),d?(a.call(this),b.call(this)):(setTimeout(a.bind(this),500),setTimeout(b.bind(this),500)),this.prevClockValuesAsString=this.clockValuesAsString}}]),a}();function pad(a,b){return a=a.toString(),a.length<b?pad("0"+a,b):a}function appendChildren(a,b){b.forEach(function(b){a.appendChild(b)})}
+"use strict";function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}var FlipDown=function(){var b=Math.floor;function a(b){var c=1<arguments.length&&void 0!==arguments[1]?arguments[1]:"flipdown",d=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{};if(_classCallCheck(this,a),"number"!=typeof b)throw new Error("FlipDown: Constructor expected unix timestamp, got ".concat(_typeof(b)," instead."));"object"===_typeof(c)&&(d=c,c="flipdown"),this.version="0.2.3",this.initialised=!1,this.now=this._getTime(),this.epoch=b,this.countdownEnded=!1,this.hasEndedCallback=null,this.element=document.getElementById(c),this.rotors=[],this.rotorLeafFront=[],this.rotorLeafRear=[],this.rotorTops=[],this.rotorBottoms=[],this.countdown=null,this.daysRemaining=0,this.clockValues={},this.clockStrings={},this.clockValuesAsString=[],this.prevClockValuesAsString=[],this.opts=this._parseOptions(d),this._setOptions(),console.log("FlipDown ".concat(this.version," (Theme: ").concat(this.opts.theme,")"))}return _createClass(a,[{key:"start",value:function a(){return this.initialised||this._init(),this.countdown=setInterval(this._tick.bind(this),1e3),this}},{key:"ifEnded",value:function b(a){return this.hasEndedCallback=function(){a(),this.hasEndedCallback=null},this}},{key:"_getTime",value:function a(){return new Date().getTime()/1e3}},{key:"_hasCountdownEnded",value:function a(){return 0>this.epoch-this.now?(this.countdownEnded=!0,null!=this.hasEndedCallback&&(this.hasEndedCallback(),this.hasEndedCallback=null),!0):(this.countdownEnded=!1,!1)}},{key:"_parseOptions",value:function c(a){var b=["Days","Hours","Minutes","Seconds"];return a.headings&&4===a.headings.length&&(b=a.headings),{theme:a.hasOwnProperty("theme")?a.theme:"dark",headings:b}}},{key:"_setOptions",value:function a(){this.element.classList.add("flipdown__theme-".concat(this.opts.theme))}},{key:"_init",value:function h(){this.initialised=!0,this.daysremaining=this._hasCountdownEnded()?0:b((this.epoch-this.now)/86400).toString().length;for(var a=2>=this.daysremaining?2:this.daysremaining,c=0;c<a+6;c++)this.rotors.push(this._createRotor(0));for(var d=[],c=0;c<a;c++)d.push(this.rotors[c]);this.element.appendChild(this._createRotorGroup(d,0));for(var e,f=a,c=0;3>c;c++){e=[];for(var g=0;2>g;g++)e.push(this.rotors[f]),f++;this.element.appendChild(this._createRotorGroup(e,c+1))}return this.rotorLeafFront=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-front")),this.rotorLeafRear=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-rear")),this.rotorTop=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-top")),this.rotorBottom=Array.prototype.slice.call(this.element.getElementsByClassName("rotor-bottom")),this._tick(),this._updateClockValues(!0),this}},{key:"_createRotorGroup",value:function e(a,b){var c=document.createElement("div");c.className="rotor-group";var d=document.createElement("div");return d.className="rotor-group-heading",d.setAttribute("data-before",this.opts.headings[b]),c.appendChild(d),appendChildren(c,a),c}},{key:"_createRotor",value:function h(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:0,b=document.createElement("div"),c=document.createElement("div"),d=document.createElement("figure"),e=document.createElement("figure"),f=document.createElement("div"),g=document.createElement("div");return b.className="rotor",c.className="rotor-leaf",d.className="rotor-leaf-rear",e.className="rotor-leaf-front",f.className="rotor-top",g.className="rotor-bottom",d.textContent=a,f.textContent=a,g.textContent=a,appendChildren(b,[c,f,g]),appendChildren(c,[d,e]),b}},{key:"_tick",value:function c(){this.now=this._getTime();var a=0>=this.epoch-this.now?0:this.epoch-this.now;this.clockValues.d=b(a/86400),a-=86400*this.clockValues.d,this.clockValues.h=b(a/3600),a-=3600*this.clockValues.h,this.clockValues.m=b(a/60),a-=60*this.clockValues.m,this.clockValues.s=b(a),this._updateClockValues(),this._hasCountdownEnded()}},{key:"_updateClockValues",value:function e(){function a(){var a=this;this.rotorTop.forEach(function(b,c){b.textContent!=a.clockValuesAsString[c]&&(b.textContent=a.clockValuesAsString[c])})}function b(){var a=this;this.rotorLeafRear.forEach(function(b,c){if(b.textContent!=a.clockValuesAsString[c]){b.textContent=a.clockValuesAsString[c],b.parentElement.classList.add("flipped");var d=setInterval(function(){b.parentElement.classList.remove("flipped"),clearInterval(d)}.bind(a),500)}})}var c=this,d=!!(0<arguments.length&&void 0!==arguments[0])&&arguments[0];this.clockStrings.d=pad(this.clockValues.d,2),this.clockStrings.h=pad(this.clockValues.h,2),this.clockStrings.m=pad(this.clockValues.m,2),this.clockStrings.s=pad(this.clockValues.s,2),this.clockValuesAsString=(this.clockStrings.d+this.clockStrings.h+this.clockStrings.m+this.clockStrings.s).split(""),this.rotorLeafFront.forEach(function(a,b){a.textContent=c.prevClockValuesAsString[b]}),this.rotorBottom.forEach(function(a,b){a.textContent=c.prevClockValuesAsString[b]}),d?(a.call(this),b.call(this)):(setTimeout(a.bind(this),500),setTimeout(b.bind(this),500)),this.prevClockValuesAsString=this.clockValuesAsString}}]),a}();function pad(a,b){return a=a.toString(),a.length<b?pad("0"+a,b):a}function appendChildren(a,b){b.forEach(function(b){a.appendChild(b)})}

example/js/flipdown/flipdown.js

@@ -13,3 +13,3 @@ "use strict";
   function FlipDown(uts) {
-    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'flipdown';
+    var el = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "flipdown";
     var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -19,12 +19,12 @@
 
-    if (typeof uts !== 'number') {
+    if (typeof uts !== "number") {
       throw new Error("FlipDown: Constructor expected unix timestamp, got ".concat(_typeof(uts), " instead."));
     }
 
-    if (_typeof(el) === 'object') {
+    if (_typeof(el) === "object") {
       opt = el;
-      el = 'flipdown';
+      el = "flipdown";
     }
 
-    this.version = '0.2.2';
+    this.version = "0.2.3";
     this.initialised = false;
@@ -96,4 +96,11 @@ this.now = this._getTime();
     value: function _parseOptions(opt) {
+      var headings = ["Days", "Hours", "Minutes", "Seconds"];
+
+      if (opt.headings && opt.headings.length === 4) {
+        headings = opt.headings;
+      }
+
       return {
-        theme: opt.hasOwnProperty('theme') ? opt.theme : 'dark'
+        theme: opt.hasOwnProperty("theme") ? opt.theme : "dark",
+        headings: headings
       };
@@ -129,3 +136,3 @@ }
 
-      this.element.appendChild(this._createRotorGroup(dayRotors));
+      this.element.appendChild(this._createRotorGroup(dayRotors, 0));
       var count = dayRotorCount;
@@ -141,9 +148,9 @@
 
-        this.element.appendChild(this._createRotorGroup(otherRotors));
+        this.element.appendChild(this._createRotorGroup(otherRotors, i + 1));
       }
 
-      this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-front'));
-      this.rotorLeafRear = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-rear'));
-      this.rotorTop = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-top'));
-      this.rotorBottom = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-bottom'));
+      this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-front"));
+      this.rotorLeafRear = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-leaf-rear"));
+      this.rotorTop = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-top"));
+      this.rotorBottom = Array.prototype.slice.call(this.element.getElementsByClassName("rotor-bottom"));
 
@@ -158,7 +165,8 @@ this._tick();
     key: "_createRotorGroup",
-    value: function _createRotorGroup(rotors) {
-      var rotorGroup = document.createElement('div');
-      rotorGroup.className = 'rotor-group';
-      var dayRotorGroupHeading = document.createElement('div');
-      dayRotorGroupHeading.className = 'rotor-group-heading';
+    value: function _createRotorGroup(rotors, rotorIndex) {
+      var rotorGroup = document.createElement("div");
+      rotorGroup.className = "rotor-group";
+      var dayRotorGroupHeading = document.createElement("div");
+      dayRotorGroupHeading.className = "rotor-group-heading";
+      dayRotorGroupHeading.setAttribute("data-before", this.opts.headings[rotorIndex]);
       rotorGroup.appendChild(dayRotorGroupHeading);
@@ -172,14 +180,14 @@ appendChildren(rotorGroup, rotors);
       var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var rotor = document.createElement('div');
-      var rotorLeaf = document.createElement('div');
-      var rotorLeafRear = document.createElement('figure');
-      var rotorLeafFront = document.createElement('figure');
-      var rotorTop = document.createElement('div');
-      var rotorBottom = document.createElement('div');
-      rotor.className = 'rotor';
-      rotorLeaf.className = 'rotor-leaf';
-      rotorLeafRear.className = 'rotor-leaf-rear';
-      rotorLeafFront.className = 'rotor-leaf-front';
-      rotorTop.className = 'rotor-top';
-      rotorBottom.className = 'rotor-bottom';
+      var rotor = document.createElement("div");
+      var rotorLeaf = document.createElement("div");
+      var rotorLeafRear = document.createElement("figure");
+      var rotorLeafFront = document.createElement("figure");
+      var rotorTop = document.createElement("div");
+      var rotorBottom = document.createElement("div");
+      rotor.className = "rotor";
+      rotorLeaf.className = "rotor-leaf";
+      rotorLeafRear.className = "rotor-leaf-rear";
+      rotorLeafFront.className = "rotor-leaf-front";
+      rotorTop.className = "rotor-top";
+      rotorBottom.className = "rotor-bottom";
       rotorLeafRear.textContent = v;
@@ -219,3 +227,3 @@ rotorTop.textContent = v;
       this.clockStrings.s = pad(this.clockValues.s, 2);
-      this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split('');
+      this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split("");
       this.rotorLeafFront.forEach(function (el, i) {
@@ -244,5 +252,5 @@ el.textContent = _this.prevClockValuesAsString[i];
             el.textContent = _this3.clockValuesAsString[i];
-            el.parentElement.classList.add('flipped');
+            el.parentElement.classList.add("flipped");
             var flip = setInterval(function () {
-              el.parentElement.classList.remove('flipped');
+              el.parentElement.classList.remove("flipped");
               clearInterval(flip);
@@ -249,0 +257,0 @@ }.bind(_this3), 500);

package.json

 {
   "name": "flipdown",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "A lightweight and performant flip styled countdown clock",
@@ -5,0 +5,0 @@ "main": "src/flipdown.js",

README.md

@@ -1,2 +0,2 @@
-<span style="text-align:center;display:block;width:100%;"><img src="http://i.imgur.com/UtbIc4S.png" title="Example of FlipDown" style="width: 500px;text-align:center"></span>
+<span style="text-align:center;display:block;width:100%;"><img src="http://i.imgur.com/UtbIc4S.png" style="width:75%" title="Example of FlipDown" style="width: 500px;text-align:center"></span>
 
@@ -7,10 +7,12 @@ # FlipDown
 
-Version: 0.2.2 [JS: 5.72KB, CSS: 4.47KB]
+![NPM Version](https://img.shields.io/npm/v/flipdown?style=flat-square)
+![NPM Downloads](https://img.shields.io/npm/dt/flipdown)
 
 ## Features
 
-* 💡 Lightweight - No jQuery! <11KB minified
-* ⚡ Performant - Animations powered by CSS transitions
-* 📱 Responsive - Works great on screens of all sizes
-* 🎨 Themeable - Choose from built-in themes, or add your own
+- 💡 Lightweight - No jQuery! <11KB minified bundle
+- ⚡ Performant - Animations powered by CSS transitions
+- 📱 Responsive - Works great on screens of all sizes
+- 🎨 Themeable - Choose from built-in themes, or add your own
+- 🌍 i18n - Customisable headings for your language
 
@@ -25,2 +27,4 @@ ## Example
 
+To get started, either clone this repo or install with `npm install flipdown` or `yarn add flipdown`.
+
 For basic usage, FlipDown takes a unix timestamp (in seconds) as an argument.
@@ -45,8 +49,9 @@
 ```javascript
-new FlipDown(1538137672, 'signup').start();
-new FlipDown(1538137672, 'register').start();
+new FlipDown(1588017373, "registerBy").start();
+new FlipDown(1593561600, "eventStart").start();
 ```
+
 ```html
-<div id="signup" class="flipdown"></div>
-<div id="register" class="flipdown"></div>
+<div id="registerBy" class="flipdown"></div>
+<div id="eventStart" class="flipdown"></div>
 ```
@@ -57,5 +62,6 @@
 FlipDown comes with 2 themes as standard:
-* dark [default]
-* light
 
+- dark [default]
+- light
+
 To change the theme, you can supply the `theme` property in the `opt` object in the constructor with the theme name as a string:
@@ -65,3 +71,3 @@
 {
-  theme: 'light'
+  theme: "light";
 }
@@ -74,3 +80,3 @@ ```
 new FlipDown(1538137672, {
-  theme: 'light'
+  theme: "light",
 }).start();
@@ -85,7 +91,21 @@ ```
 
-* `.flipdown__theme-dark`
-* `.flipdown__theme-light`
+- `.flipdown__theme-dark`
+- `.flipdown__theme-light`
 
 You can then load your theme by specifying the `theme` property in the `opt` object of the constructor (see [Themes](#Themes)).
 
+## Headings
+
+You can add your own rotor group headings by passing an array as part of the `opt` object. Bear in mind this won't change the functionality of the rotors (eg: the 'days' rotor won't magically start counting months because you passed it 'Months' as a heading).
+
+Suggested use is for i18n. Usage as follows:
+
+```javascript
+new FlipDown(1538137672, {
+  headings: ["Nap", "Óra", "Perc", "Másodperc"],
+}).start();
+```
+
+Note that headings will default to English if not provided: `["Days", "Hours", "Minutes", "Seconds"]`
+
 ## API
@@ -100,2 +120,3 @@
 ##### `uts`
+
 Type: _number_
@@ -106,2 +127,3 @@
 ##### `[el]`
+
 **Optional**  
@@ -113,2 +135,3 @@ Type: _string_ (default: `flipdown`)
 ##### `[opts]`
+
 **Optional**  
@@ -119,3 +142,4 @@ Type: _object_ (default: `{}`)
 
-* [`theme`](#Themes)
+- [`theme`](#Themes)
+- [`headings`](#Headings)
 
@@ -133,2 +157,3 @@ ### `FlipDown.prototype.start()`
 ##### `callback`
+
 Type: _function_
@@ -148,10 +173,16 @@
   .ifEnded(() => {
-    console.log('The countdown has ended!');
+    console.log("The countdown has ended!");
   });
 ```
 
+## Contribute
+
+Pull requests and feature suggestions welcome and e
+
 ## Acknowledgements
 
 Thanks to the following people for their suggestions/fixes:
+
 - [@chuckbergeron](https://github.com/chuckbergeron) for his help with making FlipDown responsive.
 - [@vasiliki-b](https://github.com/vasiliki-b) for spotting and fixing the Safari backface-visibility issue.
+- [@joeinnes](https://github.com/joeinnes) for adding i18n to rotor group headings.

src/flipdown.js

 /**
-* @name FlipDown
-* @description Flip styled countdown clock
-* @author Peter Butcher (PButcher) <pbutcher93[at]gmail[dot]com>
-* @param {number} uts - Time to count down to as unix timestamp
-* @param {string} el - DOM element to attach FlipDown to
-* @param {object} opt - Optional configuration settings
-**/
+ * @name FlipDown
+ * @description Flip styled countdown clock
+ * @author Peter Butcher (PButcher) <pbutcher93[at]gmail[dot]com>
+ * @param {number} uts - Time to count down to as unix timestamp
+ * @param {string} el - DOM element to attach FlipDown to
+ * @param {object} opt - Optional configuration settings
+ **/
 class FlipDown {
-  constructor(uts, el = 'flipdown', opt = {}) {
-
+  constructor(uts, el = "flipdown", opt = {}) {
     // If uts is not specified
-    if(typeof uts !== 'number') {
-      throw new Error(`FlipDown: Constructor expected unix timestamp, got ${typeof uts} instead.`);
+    if (typeof uts !== "number") {
+      throw new Error(
+        `FlipDown: Constructor expected unix timestamp, got ${typeof uts} instead.`
+      );
     }
 
     // If opt is specified, but not el
-    if(typeof el === 'object') {
+    if (typeof el === "object") {
       opt = el;
-      el = 'flipdown';
+      el = "flipdown";
     }
 
     // FlipDown version
-    this.version = '0.2.2';
+    this.version = "0.2.3";
 
@@ -78,9 +79,9 @@ // Initialised?
   /**
-  * @name start
-  * @description Start the countdown
-  * @author PButcher
-  **/
+   * @name start
+   * @description Start the countdown
+   * @author PButcher
+   **/
   start() {
     // Initialise the clock
-    if(!this.initialised) this._init();
+    if (!this.initialised) this._init();
 
@@ -95,12 +96,12 @@ // Set up the countdown interval
   /**
-  * @name ifEnded
-  * @description Call a function once the countdown ends
-  * @author PButcher
-  * @param {function} cb - Callback
-  **/
+   * @name ifEnded
+   * @description Call a function once the countdown ends
+   * @author PButcher
+   * @param {function} cb - Callback
+   **/
   ifEnded(cb) {
-    this.hasEndedCallback = function() {
+    this.hasEndedCallback = function () {
       cb();
       this.hasEndedCallback = null;
-    }
+    };
 
@@ -112,6 +113,6 @@ // Chainable
   /**
-  * @name _getTime
-  * @description Get the time in seconds (unix timestamp)
-  * @author PButcher
-  **/
+   * @name _getTime
+   * @description Get the time in seconds (unix timestamp)
+   * @author PButcher
+   **/
   _getTime() {
@@ -122,15 +123,13 @@ return new Date().getTime() / 1000;
   /**
-  * @name _hasCountdownEnded
-  * @description Has the countdown ended?
-  * @author PButcher
-  **/
+   * @name _hasCountdownEnded
+   * @description Has the countdown ended?
+   * @author PButcher
+   **/
   _hasCountdownEnded() {
-
     // Countdown has ended
-    if((this.epoch - this.now) < 0) {
+    if (this.epoch - this.now < 0) {
       this.countdownEnded = true;
 
       // Fire the ifEnded callback once if it was set
-      if(this.hasEndedCallback != null) {
-
+      if (this.hasEndedCallback != null) {
         // Call ifEnded callback
@@ -145,5 +144,4 @@ this.hasEndedCallback();
 
-    // Countdown has not ended
+      // Countdown has not ended
     } else {
-
       this.countdownEnded = false;
@@ -155,21 +153,25 @@ return false;
   /**
-  * @name _parseOptions
-  * @description Parse any passed options
-  * @param {object} opt - Optional configuration settings
-  * @author PButcher
-  **/
+   * @name _parseOptions
+   * @description Parse any passed options
+   * @param {object} opt - Optional configuration settings
+   * @author PButcher
+   **/
   _parseOptions(opt) {
+    let headings = ["Days", "Hours", "Minutes", "Seconds"];
+    if (opt.headings && opt.headings.length === 4) {
+      headings = opt.headings;
+    }
     return {
       // Theme
-      theme: (opt.hasOwnProperty('theme')) ? opt.theme : 'dark'
-    }
+      theme: opt.hasOwnProperty("theme") ? opt.theme : "dark",
+      headings,
+    };
   }
 
   /**
-  * @name _setOptions
-  * @description Set optional configuration settings
-  * @author PButcher
-  **/
+   * @name _setOptions
+   * @description Set optional configuration settings
+   * @author PButcher
+   **/
   _setOptions() {
-
     // Apply theme
@@ -180,15 +182,16 @@ this.element.classList.add(`flipdown__theme-${this.opts.theme}`);
   /**
-  * @name _init
-  * @description Initialise the countdown
-  * @author PButcher
-  **/
+   * @name _init
+   * @description Initialise the countdown
+   * @author PButcher
+   **/
   _init() {
-
     this.initialised = true;
 
     // Check whether countdown has ended and calculate how many digits the day counter needs
-    if(this._hasCountdownEnded()) {
+    if (this._hasCountdownEnded()) {
       this.daysremaining = 0;
     } else {
-      this.daysremaining = Math.floor((this.epoch - this.now) / 86400).toString().length;
+      this.daysremaining = Math.floor(
+        (this.epoch - this.now) / 86400
+      ).toString().length;
     }
@@ -198,3 +201,3 @@ var dayRotorCount = this.daysremaining <= 2 ? 2 : this.daysremaining;
     // Create and store rotors
-    for(var i = 0; i < dayRotorCount + 6; i++) {
+    for (var i = 0; i < dayRotorCount + 6; i++) {
       this.rotors.push(this._createRotor(0));
@@ -205,23 +208,31 @@ }
     var dayRotors = [];
-    for(var i = 0; i < dayRotorCount; i++) {
+    for (var i = 0; i < dayRotorCount; i++) {
       dayRotors.push(this.rotors[i]);
     }
-    this.element.appendChild(this._createRotorGroup(dayRotors));
+    this.element.appendChild(this._createRotorGroup(dayRotors, 0));
 
     // Create other rotor groups
     var count = dayRotorCount;
-    for(var i = 0; i < 3; i++) {
+    for (var i = 0; i < 3; i++) {
       var otherRotors = [];
-      for(var j = 0; j < 2; j++) {
+      for (var j = 0; j < 2; j++) {
         otherRotors.push(this.rotors[count]);
         count++;
       }
-      this.element.appendChild(this._createRotorGroup(otherRotors));
+      this.element.appendChild(this._createRotorGroup(otherRotors, i + 1));
     }
 
     // Store and convert rotor nodelists to arrays
-    this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-front'));
-    this.rotorLeafRear = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-rear'));
-    this.rotorTop = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-top'));
-    this.rotorBottom = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-bottom'));
+    this.rotorLeafFront = Array.prototype.slice.call(
+      this.element.getElementsByClassName("rotor-leaf-front")
+    );
+    this.rotorLeafRear = Array.prototype.slice.call(
+      this.element.getElementsByClassName("rotor-leaf-rear")
+    );
+    this.rotorTop = Array.prototype.slice.call(
+      this.element.getElementsByClassName("rotor-top")
+    );
+    this.rotorBottom = Array.prototype.slice.call(
+      this.element.getElementsByClassName("rotor-bottom")
+    );
 
@@ -236,12 +247,16 @@ // Set initial values;
   /**
-  * @name _createRotorGroup
-  * @description Add rotors to the DOM
-  * @author PButcher
-  * @param {array} rotors - A set of rotors
-  **/
-  _createRotorGroup(rotors) {
-    var rotorGroup = document.createElement('div');
-    rotorGroup.className = 'rotor-group';
-    var dayRotorGroupHeading = document.createElement('div');
-    dayRotorGroupHeading.className = 'rotor-group-heading';
+   * @name _createRotorGroup
+   * @description Add rotors to the DOM
+   * @author PButcher
+   * @param {array} rotors - A set of rotors
+   **/
+  _createRotorGroup(rotors, rotorIndex) {
+    var rotorGroup = document.createElement("div");
+    rotorGroup.className = "rotor-group";
+    var dayRotorGroupHeading = document.createElement("div");
+    dayRotorGroupHeading.className = "rotor-group-heading";
+    dayRotorGroupHeading.setAttribute(
+      "data-before",
+      this.opts.headings[rotorIndex]
+    );
     rotorGroup.appendChild(dayRotorGroupHeading);
@@ -253,20 +268,20 @@ appendChildren(rotorGroup, rotors);
   /**
-  * @name _createRotor
-  * @description Create a rotor DOM element
-  * @author PButcher
-  * @param {number} v - Initial rotor value
-  **/
+   * @name _createRotor
+   * @description Create a rotor DOM element
+   * @author PButcher
+   * @param {number} v - Initial rotor value
+   **/
   _createRotor(v = 0) {
-    var rotor = document.createElement('div');
-    var rotorLeaf = document.createElement('div');
-    var rotorLeafRear = document.createElement('figure');
-    var rotorLeafFront = document.createElement('figure');
-    var rotorTop = document.createElement('div');
-    var rotorBottom = document.createElement('div');
-    rotor.className = 'rotor';
-    rotorLeaf.className = 'rotor-leaf';
-    rotorLeafRear.className = 'rotor-leaf-rear';
-    rotorLeafFront.className = 'rotor-leaf-front';
-    rotorTop.className = 'rotor-top';
-    rotorBottom.className = 'rotor-bottom';
+    var rotor = document.createElement("div");
+    var rotorLeaf = document.createElement("div");
+    var rotorLeafRear = document.createElement("figure");
+    var rotorLeafFront = document.createElement("figure");
+    var rotorTop = document.createElement("div");
+    var rotorBottom = document.createElement("div");
+    rotor.className = "rotor";
+    rotorLeaf.className = "rotor-leaf";
+    rotorLeafRear.className = "rotor-leaf-rear";
+    rotorLeafFront.className = "rotor-leaf-front";
+    rotorTop.className = "rotor-top";
+    rotorBottom.className = "rotor-bottom";
     rotorLeafRear.textContent = v;
@@ -281,8 +296,7 @@ rotorTop.textContent = v;
   /**
-  * @name _tick
-  * @description Calculate current tick
-  * @author PButcher
-  **/
+   * @name _tick
+   * @description Calculate current tick
+   * @author PButcher
+   **/
   _tick() {
-
     // Get time now
@@ -292,3 +306,3 @@ this.now = this._getTime();
     // Between now and epoch
-    var diff = ((this.epoch - this.now) <= 0) ? 0 : this.epoch - this.now;
+    var diff = this.epoch - this.now <= 0 ? 0 : this.epoch - this.now;
 
@@ -318,9 +332,8 @@ // Days remaining
   /**
-  * @name _updateClockValues
-  * @description Update the clock face values
-  * @author PButcher
-  * @param {boolean} init - True if calling for initialisation
-  **/
+   * @name _updateClockValues
+   * @description Update the clock face values
+   * @author PButcher
+   * @param {boolean} init - True if calling for initialisation
+   **/
   _updateClockValues(init = false) {
-
     // Build clock value strings
@@ -333,3 +346,8 @@ this.clockStrings.d = pad(this.clockValues.d, 2);
     // Concat clock value strings
-    this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split('');
+    this.clockValuesAsString = (
+      this.clockStrings.d +
+      this.clockStrings.h +
+      this.clockStrings.m +
+      this.clockStrings.s
+    ).split("");
 
@@ -353,3 +371,3 @@ // Update rotor values
       this.rotorTop.forEach((el, i) => {
-        if(el.textContent != this.clockValuesAsString[i]) {
+        if (el.textContent != this.clockValuesAsString[i]) {
           el.textContent = this.clockValuesAsString[i];
@@ -362,9 +380,12 @@ }
       this.rotorLeafRear.forEach((el, i) => {
-        if(el.textContent != this.clockValuesAsString[i]) {
+        if (el.textContent != this.clockValuesAsString[i]) {
           el.textContent = this.clockValuesAsString[i];
-          el.parentElement.classList.add('flipped');
-          var flip = setInterval(function() {
-            el.parentElement.classList.remove('flipped');
-            clearInterval(flip);
-          }.bind(this), 500);
+          el.parentElement.classList.add("flipped");
+          var flip = setInterval(
+            function () {
+              el.parentElement.classList.remove("flipped");
+              clearInterval(flip);
+            }.bind(this),
+            500
+          );
         }
@@ -375,3 +396,3 @@ });
     // Init
-    if(!init) {
+    if (!init) {
       setTimeout(rotorTopFlip.bind(this), 500);
@@ -390,8 +411,8 @@ setTimeout(rotorLeafRearFlip.bind(this), 500);
 /**
-* @name pad
-* @description Prefix a number with zeroes
-* @author PButcher
-* @param {string} n - Number to pad
-* @param {number} len - Desired length of number
-**/
+ * @name pad
+ * @description Prefix a number with zeroes
+ * @author PButcher
+ * @param {string} n - Number to pad
+ * @param {number} len - Desired length of number
+ **/
 function pad(n, len) {
@@ -403,11 +424,11 @@ n = n.toString();
 /**
-* @name appendChildren
-* @description Add multiple children to an element
-* @author PButcher
-* @param {object} parent - Parent
-**/
+ * @name appendChildren
+ * @description Add multiple children to an element
+ * @author PButcher
+ * @param {object} parent - Parent
+ **/
 function appendChildren(parent, children) {
-  children.forEach(el => {
+  children.forEach((el) => {
     parent.appendChild(el);
   });
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68576

increased by3.73%

Number of package files

16

increased by6.67%

Lines of code

1754

increased by2.39%

Number of lines in readme file

176

increased by21.38%

No dependency changes