diff --git a/README.md b/README.md index d09cb04..fd26dd6 100644 --- a/README.md +++ b/README.md @@ -50,9 +50,10 @@ new FlipDown(1538137672, 'register').start(); ## Themes -FlipDown comes with 2 themes as standard: +FlipDown comes with 3 themes as standard: * dark [default] * light +* small To change the theme, you can supply the `theme` property in the `opt` object in the constructor with the theme name as a string: @@ -81,6 +82,14 @@ FlipDown themes must have the class name prefix of: `.flipdown__theme-` followed You can then load your theme by specifying the `theme` property in the `opt` object of the constructor (see [Themes](#Themes)). +## Show Headers + +Show the rotor period headers of Day, Hour, Minute and Second. Defaults to true. + +## Show Empty Rotors + +Show empty (00) rotors if the countdown doesn't require them, e.g. if the countdown is 30 minutes in the future then the day and hour rotors would be empty, if set to false these will be hidden. Defaults to true. + ## API ### `FlipDown.prototype.constructor(uts, [el], [opts])` @@ -107,6 +116,8 @@ Type: _object_ (default: `{}`) Optionally specify additional configuration settings. Currently supported settings include: * [`theme`](#Themes) +* [`showHeaders`](#Show Headers) +* [`showEmptyRotors`](#Show Empty Rotors) ### `FlipDown.prototype.start()` diff --git a/dist/flipdown.css b/dist/flipdown.css index edd92f6..4820e42 100644 --- a/dist/flipdown.css +++ b/dist/flipdown.css @@ -66,6 +66,76 @@ border-top: solid 1px #222222; } +/********** Theme: small **********/ +.flipdown.flipdown__theme-small { + width: 100%; + height: 100%; +} + +.flipdown.flipdown__theme-small .rotor { + font-size: 2.2rem; + margin-right: 3px; +} + +.flipdown.flipdown__theme-small .rotor, +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-leaf-rear, +.flipdown.flipdown__theme-small .rotor-top, +.flipdown.flipdown__theme-small .rotor-bottom, +.flipdown.flipdown__theme-small .rotor:after { + width: 30px; +} + +.flipdown.flipdown__theme-small .rotor-group { + padding-right: 10px; +} + +.flipdown.flipdown__theme-small .rotor-group:last-child { + padding-right: 0px; +} + +.flipdown.flipdown__theme-small .rotor-group-heading:before { + font-size: 0.8rem; + height: 20px; + line-height: 20px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before, +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + left: 66px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { + bottom: 16px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + bottom: 5px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-top { + line-height: 30px; +} + +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor { + height: 30px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-leaf-rear, +.flipdown.flipdown__theme-small .rotor-top, +.flipdown.flipdown__theme-small .rotor-bottom, +.flipdown.flipdown__theme-small .rotor:after { + height: 15px; +} + /* END OF THEMES */ .flipdown { diff --git a/dist/flipdown.js b/dist/flipdown.js index b326d11..13cea07 100644 --- a/dist/flipdown.js +++ b/dist/flipdown.js @@ -1,6 +1,6 @@ "use strict"; -function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } @@ -28,8 +28,11 @@ var FlipDown = function () { this.initialised = false; this.now = this._getTime(); this.epoch = uts; + this.outs = null; this.countdownEnded = false; + this.countdownOccured = false; this.hasEndedCallback = null; + this.hasOccuredCallback = null; this.element = document.getElementById(el); this.rotors = []; this.rotorLeafFront = []; @@ -67,6 +70,18 @@ var FlipDown = function () { return this; } }, { + key: "ifOccured", + value: function ifOccured(outs, cb) { + this.outs = outs; + + this.hasOccuredCallback = function () { + cb(); + this.hasOccuredCallback = null; + }; + + return this; + } + }, { key: "_getTime", value: function _getTime() { return new Date().getTime() / 1000; @@ -88,17 +103,40 @@ var FlipDown = function () { return false; } } + }, { + key: "_hasCountdownEventOccured", + value: function _hasCountdownEventOccured() { + if (this.outs - this.now < 0) { + this.countdownOccured = true; + + if (this.hasOccuredCallback != null) { + this.hasOccuredCallback(); + this.hasOccuredCallback = null; + } + + return true; + } else { + this.countdownOccured = false; + return false; + } + } }, { key: "_parseOptions", value: function _parseOptions(opt) { return { - theme: opt.hasOwnProperty('theme') ? opt.theme : 'dark' + theme: opt.hasOwnProperty('theme') ? opt.theme : 'dark', + showHeaders: opt.hasOwnProperty('showHeaders') ? opt.showHeaders : true, + showEmptyRotors: opt.hasOwnProperty('showEmptyRotors') ? opt.showEmptyRotors : true }; } }, { key: "_setOptions", value: function _setOptions() { - this.element.classList.add("flipdown__theme-".concat(this.opts.theme)); + var _this = this; + + this.opts.theme.split(',').forEach(function (theme) { + return _this.element.classList.add("flipdown__theme-".concat(theme)); + }); } }, { key: "_init", @@ -123,8 +161,9 @@ var FlipDown = function () { dayRotors.push(this.rotors[i]); } - this.element.appendChild(this._createRotorGroup(dayRotors)); + this.element.appendChild(this._createRotorGroup(dayRotors, 'day')); var count = dayRotorCount; + var periods = ['hour', 'minute', 'second']; for (var i = 0; i < 3; i++) { var otherRotors = []; @@ -134,7 +173,7 @@ var FlipDown = function () { count++; } - this.element.appendChild(this._createRotorGroup(otherRotors)); + this.element.appendChild(this._createRotorGroup(otherRotors, periods[i])); } this.rotorLeafFront = Array.prototype.slice.call(this.element.getElementsByClassName('rotor-leaf-front')); @@ -150,12 +189,16 @@ var FlipDown = function () { } }, { key: "_createRotorGroup", - value: function _createRotorGroup(rotors) { + value: function _createRotorGroup(rotors, period) { var rotorGroup = document.createElement('div'); - rotorGroup.className = 'rotor-group'; - var dayRotorGroupHeading = document.createElement('div'); - dayRotorGroupHeading.className = 'rotor-group-heading'; - rotorGroup.appendChild(dayRotorGroupHeading); + rotorGroup.className = 'rotor-group rotor-period-' + period; + + if (this.opts.showHeaders) { + var rotorGroupHeading = document.createElement('div'); + rotorGroupHeading.className = 'rotor-group-heading'; + rotorGroup.appendChild(rotorGroupHeading); + } + appendChildren(rotorGroup, rotors); return rotorGroup; } @@ -198,11 +241,13 @@ var FlipDown = function () { this._updateClockValues(); this._hasCountdownEnded(); + + this._hasCountdownEventOccured(); } }, { key: "_updateClockValues", value: function _updateClockValues() { - var _this = this; + var _this2 = this; var init = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; this.clockStrings.d = pad(this.clockValues.d, 2); @@ -211,33 +256,33 @@ var FlipDown = function () { 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 (el, i) { - el.textContent = _this.prevClockValuesAsString[i]; + el.textContent = _this2.prevClockValuesAsString[i]; }); this.rotorBottom.forEach(function (el, i) { - el.textContent = _this.prevClockValuesAsString[i]; + el.textContent = _this2.prevClockValuesAsString[i]; }); function rotorTopFlip() { - var _this2 = this; + var _this3 = this; this.rotorTop.forEach(function (el, i) { - if (el.textContent != _this2.clockValuesAsString[i]) { - el.textContent = _this2.clockValuesAsString[i]; + if (el.textContent != _this3.clockValuesAsString[i]) { + el.textContent = _this3.clockValuesAsString[i]; } }); } function rotorLeafRearFlip() { - var _this3 = this; + var _this4 = this; this.rotorLeafRear.forEach(function (el, i) { - if (el.textContent != _this3.clockValuesAsString[i]) { - el.textContent = _this3.clockValuesAsString[i]; + if (el.textContent != _this4.clockValuesAsString[i]) { + el.textContent = _this4.clockValuesAsString[i]; el.parentElement.classList.add('flipped'); var flip = setInterval(function () { el.parentElement.classList.remove('flipped'); clearInterval(flip); - }.bind(_this3), 500); + }.bind(_this4), 500); } }); } @@ -246,6 +291,29 @@ var FlipDown = function () { setTimeout(rotorTopFlip.bind(this), 500); setTimeout(rotorLeafRearFlip.bind(this), 500); } else { + var dayRotor = document.querySelector(".rotor-period-day"); + var hourRotor = document.querySelector(".rotor-period-hour"); + var minuteRotor = document.querySelector(".rotor-period-minute"); + var secondRotor = document.querySelector(".rotor-period-second"); + + if (!this.opts.showEmptyRotors) { + if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m == '00' && this.clockStrings.s == '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + minuteRotor.style.display = 'none'; + secondRotor.style.display = 'none'; + } else if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m == '00' && this.clockStrings.s != '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + minuteRotor.style.display = 'none'; + } else if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m != '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + } else if (this.clockStrings.d == '00' && this.clockStrings.h != '00') { + hourRotor.style.display = 'none'; + } + } + rotorTopFlip.call(this); rotorLeafRearFlip.call(this); } diff --git a/dist/flipdown.min.css b/dist/flipdown.min.css index 8aa497b..c3eb906 100644 --- a/dist/flipdown.min.css +++ b/dist/flipdown.min.css @@ -1 +1 @@ -.flipdown.flipdown__theme-dark{font-family:sans-serif;font-weight:bold}.flipdown.flipdown__theme-dark .rotor-group-heading:before{color:#000}.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after{background-color:#151515}.flipdown.flipdown__theme-dark .rotor,.flipdown.flipdown__theme-dark .rotor-top,.flipdown.flipdown__theme-dark .rotor-leaf-front{color:#fff;background-color:#151515}.flipdown.flipdown__theme-dark .rotor-bottom,.flipdown.flipdown__theme-dark .rotor-leaf-rear{color:#efefef;background-color:#202020}.flipdown.flipdown__theme-dark .rotor:after{border-top:solid 1px #151515}.flipdown.flipdown__theme-light{font-family:sans-serif;font-weight:bold}.flipdown.flipdown__theme-light .rotor-group-heading:before{color:#eee}.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):after{background-color:#ddd}.flipdown.flipdown__theme-light .rotor,.flipdown.flipdown__theme-light .rotor-top,.flipdown.flipdown__theme-light .rotor-leaf-front{color:#222;background-color:#ddd}.flipdown.flipdown__theme-light .rotor-bottom,.flipdown.flipdown__theme-light .rotor-leaf-rear{color:#333;background-color:#eee}.flipdown.flipdown__theme-light .rotor:after{border-top:solid 1px #222}.flipdown{overflow:visible;width:510px;height:110px}.flipdown .rotor-group{position:relative;float:left;padding-right:30px}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{display:block;height:30px;line-height:30px;text-align:center}.flipdown .rotor-group:nth-child(1) .rotor-group-heading:before{content:'Days'}.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before{content:'Hours'}.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before{content:'Minutes'}.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before{content:'Seconds'}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before{content:'';position:absolute;bottom:20px;left:115px;width:10px;height:10px;border-radius:50%}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{content:'';position:absolute;bottom:50px;left:115px;width:10px;height:10px;border-radius:50%}.flipdown .rotor{position:relative;float:left;width:50px;height:80px;margin:0 5px 0 0;border-radius:4px;font-size:4rem;text-align:center;perspective:200px}.flipdown .rotor:last-child{margin-right:0}.flipdown .rotor-top,.flipdown .rotor-bottom{overflow:hidden;position:absolute;width:50px;height:40px}.flipdown .rotor-leaf{z-index:1;position:absolute;width:50px;height:80px;transform-style:preserve-3d;transition:transform 0s}.flipdown .rotor-leaf.flipped{transform:rotateX(-180deg);transition:all .5s ease-in-out}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear{overflow:hidden;position:absolute;width:50px;height:40px;margin:0;transform:rotateX(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flipdown .rotor-leaf-front{line-height:80px;border-radius:4px 4px 0 0}.flipdown .rotor-leaf-rear{line-height:0;border-radius:0 0 4px 4px;transform:rotateX(-180deg)}.flipdown .rotor-top{line-height:80px;border-radius:4px 4px 0 0}.flipdown .rotor-bottom{bottom:0;line-height:0;border-radius:0 0 4px 4px}.flipdown .rotor:after{content:'';z-index:2;position:absolute;bottom:0;left:0;width:50px;height:40px;border-radius:0 0 4px 4px}@media(max-width:550px){.flipdown{width:312px;height:70px}.flipdown .rotor{font-size:2.2rem;margin-right:3px}.flipdown .rotor,.flipdown .rotor-leaf,.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{width:30px}.flipdown .rotor-group{padding-right:20px}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{font-size:.8rem;height:20px;line-height:20px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{left:69px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before{bottom:13px;height:8px;width:8px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{bottom:29px;height:8px;width:8px}.flipdown .rotor-leaf-front,.flipdown .rotor-top{line-height:50px}.flipdown .rotor-leaf,.flipdown .rotor{height:50px}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{height:25px}} +.flipdown.flipdown__theme-dark{font-family:sans-serif;font-weight:bold}.flipdown.flipdown__theme-dark .rotor-group-heading:before{color:#000}.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-dark .rotor-group:nth-child(n+2):nth-child(-n+3):after{background-color:#151515}.flipdown.flipdown__theme-dark .rotor,.flipdown.flipdown__theme-dark .rotor-top,.flipdown.flipdown__theme-dark .rotor-leaf-front{color:#fff;background-color:#151515}.flipdown.flipdown__theme-dark .rotor-bottom,.flipdown.flipdown__theme-dark .rotor-leaf-rear{color:#efefef;background-color:#202020}.flipdown.flipdown__theme-dark .rotor:after{border-top:solid 1px #151515}.flipdown.flipdown__theme-light{font-family:sans-serif;font-weight:bold}.flipdown.flipdown__theme-light .rotor-group-heading:before{color:#eee}.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-light .rotor-group:nth-child(n+2):nth-child(-n+3):after{background-color:#ddd}.flipdown.flipdown__theme-light .rotor,.flipdown.flipdown__theme-light .rotor-top,.flipdown.flipdown__theme-light .rotor-leaf-front{color:#222;background-color:#ddd}.flipdown.flipdown__theme-light .rotor-bottom,.flipdown.flipdown__theme-light .rotor-leaf-rear{color:#333;background-color:#eee}.flipdown.flipdown__theme-light .rotor:after{border-top:solid 1px #222}.flipdown.flipdown__theme-small{width:100%;height:100%}.flipdown.flipdown__theme-small .rotor{font-size:2.2rem;margin-right:3px}.flipdown.flipdown__theme-small .rotor,.flipdown.flipdown__theme-small .rotor-leaf,.flipdown.flipdown__theme-small .rotor-leaf-front,.flipdown.flipdown__theme-small .rotor-leaf-rear,.flipdown.flipdown__theme-small .rotor-top,.flipdown.flipdown__theme-small .rotor-bottom,.flipdown.flipdown__theme-small .rotor:after{width:30px}.flipdown.flipdown__theme-small .rotor-group{padding-right:10px}.flipdown.flipdown__theme-small .rotor-group:last-child{padding-right:0}.flipdown.flipdown__theme-small .rotor-group-heading:before{font-size:.8rem;height:20px;line-height:20px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after{left:66px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before{bottom:16px;height:8px;width:8px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after{bottom:5px;height:8px;width:8px}.flipdown.flipdown__theme-small .rotor-leaf-front,.flipdown.flipdown__theme-small .rotor-top{line-height:30px}.flipdown.flipdown__theme-small .rotor-leaf,.flipdown.flipdown__theme-small .rotor{height:30px}.flipdown.flipdown__theme-small .rotor-leaf-front,.flipdown.flipdown__theme-small .rotor-leaf-rear,.flipdown.flipdown__theme-small .rotor-top,.flipdown.flipdown__theme-small .rotor-bottom,.flipdown.flipdown__theme-small .rotor:after{height:15px}.flipdown{overflow:visible;width:510px;height:110px}.flipdown .rotor-group{position:relative;float:left;padding-right:30px}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{display:block;height:30px;line-height:30px;text-align:center}.flipdown .rotor-group:nth-child(1) .rotor-group-heading:before{content:'Days'}.flipdown .rotor-group:nth-child(2) .rotor-group-heading:before{content:'Hours'}.flipdown .rotor-group:nth-child(3) .rotor-group-heading:before{content:'Minutes'}.flipdown .rotor-group:nth-child(4) .rotor-group-heading:before{content:'Seconds'}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before{content:'';position:absolute;bottom:20px;left:115px;width:10px;height:10px;border-radius:50%}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{content:'';position:absolute;bottom:50px;left:115px;width:10px;height:10px;border-radius:50%}.flipdown .rotor{position:relative;float:left;width:50px;height:80px;margin:0 5px 0 0;border-radius:4px;font-size:4rem;text-align:center;perspective:200px}.flipdown .rotor:last-child{margin-right:0}.flipdown .rotor-top,.flipdown .rotor-bottom{overflow:hidden;position:absolute;width:50px;height:40px}.flipdown .rotor-leaf{z-index:1;position:absolute;width:50px;height:80px;transform-style:preserve-3d;transition:transform 0s}.flipdown .rotor-leaf.flipped{transform:rotateX(-180deg);transition:all .5s ease-in-out}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear{overflow:hidden;position:absolute;width:50px;height:40px;margin:0;transform:rotateX(0);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flipdown .rotor-leaf-front{line-height:80px;border-radius:4px 4px 0 0}.flipdown .rotor-leaf-rear{line-height:0;border-radius:0 0 4px 4px;transform:rotateX(-180deg)}.flipdown .rotor-top{line-height:80px;border-radius:4px 4px 0 0}.flipdown .rotor-bottom{bottom:0;line-height:0;border-radius:0 0 4px 4px}.flipdown .rotor:after{content:'';z-index:2;position:absolute;bottom:0;left:0;width:50px;height:40px;border-radius:0 0 4px 4px}@media(max-width:550px){.flipdown{width:312px;height:70px}.flipdown .rotor{font-size:2.2rem;margin-right:3px}.flipdown .rotor,.flipdown .rotor-leaf,.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{width:30px}.flipdown .rotor-group{padding-right:20px}.flipdown .rotor-group:last-child{padding-right:0}.flipdown .rotor-group-heading:before{font-size:.8rem;height:20px;line-height:20px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before,.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{left:69px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):before{bottom:13px;height:8px;width:8px}.flipdown .rotor-group:nth-child(n+2):nth-child(-n+3):after{bottom:29px;height:8px;width:8px}.flipdown .rotor-leaf-front,.flipdown .rotor-top{line-height:50px}.flipdown .rotor-leaf,.flipdown .rotor{height:50px}.flipdown .rotor-leaf-front,.flipdown .rotor-leaf-rear,.flipdown .rotor-top,.flipdown .rotor-bottom,.flipdown .rotor:after{height:25px}} diff --git a/dist/flipdown.min.js b/dist/flipdown.min.js index cf45dc4..ed16508 100644 --- a/dist/flipdown.min.js +++ b/dist/flipdown.min.js @@ -1 +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;dthis.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;cc;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=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=!!(0this.epoch-this.now?(this.countdownEnded=!0,null!=this.hasEndedCallback&&(this.hasEndedCallback(),this.hasEndedCallback=null),!0):(this.countdownEnded=!1,!1)}},{key:"_hasCountdownEventOccured",value:function _hasCountdownEventOccured(){return 0>this.outs-this.now?(this.countdownOccured=!0,null!=this.hasOccuredCallback&&(this.hasOccuredCallback(),this.hasOccuredCallback=null),!0):(this.countdownOccured=!1,!1)}},{key:"_parseOptions",value:function _parseOptions(a){return{theme:a.hasOwnProperty("theme")?a.theme:"dark",showHeaders:!a.hasOwnProperty("showHeaders")||a.showHeaders,showEmptyRotors:!a.hasOwnProperty("showEmptyRotors")||a.showEmptyRotors}}},{key:"_setOptions",value:function _setOptions(){var a=this;this.opts.theme.split(",").forEach(function(b){return a.element.classList.add("flipdown__theme-".concat(b))})}},{key:"_init",value:function _init(){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;cc;c++){e=[];for(var h=0;2>h;h++)e.push(this.rotors[f]),f++;this.element.appendChild(this._createRotorGroup(e,g[c]))}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 _createRotorGroup(a,b){var c=document.createElement("div");if(c.className="rotor-group rotor-period-"+b,this.opts.showHeaders){var d=document.createElement("div");d.className="rotor-group-heading",c.appendChild(d)}return appendChildren(c,a),c}},{key:"_createRotor",value:function _createRotor(){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(),this._hasCountdownEventOccured()}},{key:"_updateClockValues",value:function _updateClockValues(){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 0 && arguments[0] !== undefined ? arguments[0] : false; this.clockStrings.d = pad(this.clockValues.d, 2); @@ -211,33 +256,33 @@ var FlipDown = function () { 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 (el, i) { - el.textContent = _this.prevClockValuesAsString[i]; + el.textContent = _this2.prevClockValuesAsString[i]; }); this.rotorBottom.forEach(function (el, i) { - el.textContent = _this.prevClockValuesAsString[i]; + el.textContent = _this2.prevClockValuesAsString[i]; }); function rotorTopFlip() { - var _this2 = this; + var _this3 = this; this.rotorTop.forEach(function (el, i) { - if (el.textContent != _this2.clockValuesAsString[i]) { - el.textContent = _this2.clockValuesAsString[i]; + if (el.textContent != _this3.clockValuesAsString[i]) { + el.textContent = _this3.clockValuesAsString[i]; } }); } function rotorLeafRearFlip() { - var _this3 = this; + var _this4 = this; this.rotorLeafRear.forEach(function (el, i) { - if (el.textContent != _this3.clockValuesAsString[i]) { - el.textContent = _this3.clockValuesAsString[i]; + if (el.textContent != _this4.clockValuesAsString[i]) { + el.textContent = _this4.clockValuesAsString[i]; el.parentElement.classList.add('flipped'); var flip = setInterval(function () { el.parentElement.classList.remove('flipped'); clearInterval(flip); - }.bind(_this3), 500); + }.bind(_this4), 500); } }); } @@ -246,6 +291,29 @@ var FlipDown = function () { setTimeout(rotorTopFlip.bind(this), 500); setTimeout(rotorLeafRearFlip.bind(this), 500); } else { + var dayRotor = document.querySelector(".rotor-period-day"); + var hourRotor = document.querySelector(".rotor-period-hour"); + var minuteRotor = document.querySelector(".rotor-period-minute"); + var secondRotor = document.querySelector(".rotor-period-second"); + + if (!this.opts.showEmptyRotors) { + if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m == '00' && this.clockStrings.s == '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + minuteRotor.style.display = 'none'; + secondRotor.style.display = 'none'; + } else if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m == '00' && this.clockStrings.s != '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + minuteRotor.style.display = 'none'; + } else if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m != '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + } else if (this.clockStrings.d == '00' && this.clockStrings.h != '00') { + hourRotor.style.display = 'none'; + } + } + rotorTopFlip.call(this); rotorLeafRearFlip.call(this); } diff --git a/package.json b/package.json index 4d8cda4..135aef3 100644 --- a/package.json +++ b/package.json @@ -28,4 +28,4 @@ "babel-preset-minify": "^0.5.0", "uglifycss": "0.0.29" } -} +} \ No newline at end of file diff --git a/src/flipdown.css b/src/flipdown.css index edd92f6..4820e42 100644 --- a/src/flipdown.css +++ b/src/flipdown.css @@ -66,6 +66,76 @@ border-top: solid 1px #222222; } +/********** Theme: small **********/ +.flipdown.flipdown__theme-small { + width: 100%; + height: 100%; +} + +.flipdown.flipdown__theme-small .rotor { + font-size: 2.2rem; + margin-right: 3px; +} + +.flipdown.flipdown__theme-small .rotor, +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-leaf-rear, +.flipdown.flipdown__theme-small .rotor-top, +.flipdown.flipdown__theme-small .rotor-bottom, +.flipdown.flipdown__theme-small .rotor:after { + width: 30px; +} + +.flipdown.flipdown__theme-small .rotor-group { + padding-right: 10px; +} + +.flipdown.flipdown__theme-small .rotor-group:last-child { + padding-right: 0px; +} + +.flipdown.flipdown__theme-small .rotor-group-heading:before { + font-size: 0.8rem; + height: 20px; + line-height: 20px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before, +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + left: 66px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { + bottom: 16px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + bottom: 5px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-top { + line-height: 30px; +} + +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor { + height: 30px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-leaf-rear, +.flipdown.flipdown__theme-small .rotor-top, +.flipdown.flipdown__theme-small .rotor-bottom, +.flipdown.flipdown__theme-small .rotor:after { + height: 15px; +} + /* END OF THEMES */ .flipdown { diff --git a/src/flipdown.js b/src/flipdown.js index db7deaf..8deb7f2 100644 --- a/src/flipdown.js +++ b/src/flipdown.js @@ -9,69 +9,78 @@ class FlipDown { 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 uts is not specified + 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') { + opt = el; + el = 'flipdown'; + } - // If opt is specified, but not el - if(typeof el === 'object') { - opt = el; - el = 'flipdown'; - } + // FlipDown version + this.version = '0.2.2'; - // FlipDown version - this.version = '0.2.2'; + // Initialised? + this.initialised = false; - // Initialised? - this.initialised = false; + // Time at instantiation in seconds + this.now = this._getTime(); - // Time at instantiation in seconds - this.now = this._getTime(); + // UTS to count down to + this.epoch = uts; + + // Occurence UTS to count down to + this.outs = null; + + // UTS passed to FlipDown is in the past + this.countdownEnded = false; - // UTS to count down to - this.epoch = uts; + // UTS passed to FlipDown is in the past + this.countdownOccured = false; - // UTS passed to FlipDown is in the past - this.countdownEnded = false; + // User defined callback for countdown end + this.hasEndedCallback = null; - // User defined callback for countdown end - this.hasEndedCallback = null; + // User defined callback for countdown event occurence + this.hasOccuredCallback = null; - // FlipDown DOM element - this.element = document.getElementById(el); + // FlipDown DOM element + this.element = document.getElementById(el); - // Rotor DOM elements - this.rotors = []; - this.rotorLeafFront = []; - this.rotorLeafRear = []; - this.rotorTops = []; - this.rotorBottoms = []; + // Rotor DOM elements + this.rotors = []; + this.rotorLeafFront = []; + this.rotorLeafRear = []; + this.rotorTops = []; + this.rotorBottoms = []; - // Interval - this.countdown = null; + // Interval + this.countdown = null; - // Number of days remaining - this.daysRemaining = 0; + // Number of days remaining + this.daysRemaining = 0; - // Clock values as numbers - this.clockValues = {}; + // Clock values as numbers + this.clockValues = {}; - // Clock values as strings - this.clockStrings = {}; + // Clock values as strings + this.clockStrings = {}; - // Clock values as array - this.clockValuesAsString = []; - this.prevClockValuesAsString = []; + // Clock values as array + this.clockValuesAsString = []; + this.prevClockValuesAsString = []; - // Parse options - this.opts = this._parseOptions(opt); + // Parse options + this.opts = this._parseOptions(opt); - // Set options - this._setOptions(); + // Set options + this._setOptions(); - // Print Version - console.log(`FlipDown ${this.version} (Theme: ${this.opts.theme})`); + // Print Version + console.log(`FlipDown ${this.version} (Theme: ${this.opts.theme})`); } /** @@ -80,14 +89,14 @@ class FlipDown { * @author PButcher **/ start() { - // Initialise the clock - if(!this.initialised) this._init(); + // Initialise the clock + if (!this.initialised) this._init(); - // Set up the countdown interval - this.countdown = setInterval(this._tick.bind(this), 1000); + // Set up the countdown interval + this.countdown = setInterval(this._tick.bind(this), 1000); - // Chainable - return this; + // Chainable + return this; } /** @@ -97,13 +106,31 @@ class FlipDown { * @param {function} cb - Callback **/ ifEnded(cb) { - this.hasEndedCallback = function() { - cb(); - this.hasEndedCallback = null; - } + this.hasEndedCallback = function () { + cb(); + this.hasEndedCallback = null; + } - // Chainable - return this; + // Chainable + return this; + } + + /** + * @name ifOccured + * @description Call a function once the countdown event occurs + * @author mattosaurus + * @param {integer} outs - Occurence unix timestamp + * @param {function} cb - Callback + **/ + ifOccured(outs, cb) { + this.outs = outs; + this.hasOccuredCallback = function () { + cb(); + this.hasOccuredCallback = null; + } + + // Chainable + return this; } /** @@ -112,7 +139,7 @@ class FlipDown { * @author PButcher **/ _getTime() { - return new Date().getTime() / 1000; + return new Date().getTime() / 1000; } /** @@ -122,28 +149,59 @@ class FlipDown { **/ _hasCountdownEnded() { - // Countdown has ended - if((this.epoch - this.now) < 0) { - this.countdownEnded = true; + // Countdown has ended + if ((this.epoch - this.now) < 0) { + this.countdownEnded = true; + + // Fire the ifEnded callback once if it was set + if (this.hasEndedCallback != null) { + + // Call ifEnded callback + this.hasEndedCallback(); + + // Remove the callback + this.hasEndedCallback = null; + } - // Fire the ifEnded callback once if it was set - if(this.hasEndedCallback != null) { + return true; - // Call ifEnded callback - this.hasEndedCallback(); + // Countdown has not ended + } else { - // Remove the callback - this.hasEndedCallback = null; + this.countdownEnded = false; + return false; } + } + + /** + * @name _hasCountdownEventOccured + * @description Has the countdown event occured? + * @author mattosaurus + **/ + _hasCountdownEventOccured() { - return true; + // Countdown event has occured + if ((this.outs - this.now) < 0) { + this.countdownOccured = true; - // Countdown has not ended - } else { + // Fire the ifOccured callback once if it was set + if (this.hasOccuredCallback != null) { - this.countdownEnded = false; - return false; - } + // Call ifOccured callback + this.hasOccuredCallback(); + + // Remove the callback + this.hasOccuredCallback = null; + } + + return true; + + // Countdown event has not occured + } else { + + this.countdownOccured = false; + return false; + } } /** @@ -153,10 +211,12 @@ class FlipDown { * @author PButcher **/ _parseOptions(opt) { - return { - // Theme - theme: (opt.hasOwnProperty('theme')) ? opt.theme : 'dark' - } + return { + // Theme + theme: (opt.hasOwnProperty('theme')) ? opt.theme : 'dark', + showHeaders: (opt.hasOwnProperty('showHeaders')) ? opt.showHeaders : true, + showEmptyRotors: (opt.hasOwnProperty('showEmptyRotors')) ? opt.showEmptyRotors : true + } } /** @@ -166,8 +226,8 @@ class FlipDown { **/ _setOptions() { - // Apply theme - this.element.classList.add(`flipdown__theme-${this.opts.theme}`); + // Apply theme + this.opts.theme.split(',').forEach(theme => this.element.classList.add(`flipdown__theme-${theme}`)); } /** @@ -177,50 +237,51 @@ class FlipDown { **/ _init() { - this.initialised = true; - - // Check whether countdown has ended and calculate how many digits the day counter needs - if(this._hasCountdownEnded()) { - this.daysremaining = 0; - } else { - this.daysremaining = Math.floor((this.epoch - this.now) / 86400).toString().length; - } - var dayRotorCount = this.daysremaining <= 2 ? 2 : this.daysremaining; - - // Create and store rotors - for(var i = 0; i < dayRotorCount + 6; i++) { - this.rotors.push(this._createRotor(0)); - } - - // Create day rotor group - var dayRotors = []; - for(var i = 0; i < dayRotorCount; i++) { - dayRotors.push(this.rotors[i]); - } - this.element.appendChild(this._createRotorGroup(dayRotors)); - - // Create other rotor groups - var count = dayRotorCount; - for(var i = 0; i < 3; i++) { - var otherRotors = []; - for(var j = 0; j < 2; j++) { - otherRotors.push(this.rotors[count]); - count++; + this.initialised = true; + + // Check whether countdown has ended and calculate how many digits the day counter needs + if (this._hasCountdownEnded()) { + this.daysremaining = 0; + } else { + this.daysremaining = Math.floor((this.epoch - this.now) / 86400).toString().length; } - this.element.appendChild(this._createRotorGroup(otherRotors)); - } + var dayRotorCount = this.daysremaining <= 2 ? 2 : this.daysremaining; - // 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')); + // Create and store rotors + for (var i = 0; i < dayRotorCount + 6; i++) { + this.rotors.push(this._createRotor(0)); + } + + // Create day rotor group + var dayRotors = []; + for (var i = 0; i < dayRotorCount; i++) { + dayRotors.push(this.rotors[i]); + } + this.element.appendChild(this._createRotorGroup(dayRotors, 'day')); + + // Create other rotor groups + var count = dayRotorCount; + var periods = ['hour', 'minute', 'second']; + for (var i = 0; i < 3; i++) { + var otherRotors = []; + for (var j = 0; j < 2; j++) { + otherRotors.push(this.rotors[count]); + count++; + } + this.element.appendChild(this._createRotorGroup(otherRotors, periods[i])); + } + + // 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')); - // Set initial values; - this._tick(); - this._updateClockValues(true); + // Set initial values; + this._tick(); + this._updateClockValues(true); - return this; + return this; } /** @@ -229,14 +290,18 @@ class FlipDown { * @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'; - rotorGroup.appendChild(dayRotorGroupHeading); - appendChildren(rotorGroup, rotors); - return rotorGroup; + _createRotorGroup(rotors, period) { + var rotorGroup = document.createElement('div'); + rotorGroup.className = 'rotor-group rotor-period-' + period; + + if (this.opts.showHeaders) { + var rotorGroupHeading = document.createElement('div'); + rotorGroupHeading.className = 'rotor-group-heading'; + rotorGroup.appendChild(rotorGroupHeading); + } + + appendChildren(rotorGroup, rotors); + return rotorGroup; } /** @@ -246,24 +311,24 @@ class FlipDown { * @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'; - rotorLeafRear.textContent = v; - rotorTop.textContent = v; - rotorBottom.textContent = v; - appendChildren(rotor, [rotorLeaf, rotorTop, rotorBottom]); - appendChildren(rotorLeaf, [rotorLeafRear, rotorLeafFront]); - return rotor; + 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; + rotorTop.textContent = v; + rotorBottom.textContent = v; + appendChildren(rotor, [rotorLeaf, rotorTop, rotorBottom]); + appendChildren(rotorLeaf, [rotorLeafRear, rotorLeafFront]); + return rotor; } /** @@ -273,32 +338,35 @@ class FlipDown { **/ _tick() { - // Get time now - this.now = this._getTime(); + // Get time now + this.now = this._getTime(); + + // Between now and epoch + var diff = ((this.epoch - this.now) <= 0) ? 0 : this.epoch - this.now; - // Between now and epoch - var diff = ((this.epoch - this.now) <= 0) ? 0 : this.epoch - this.now; + // Days remaining + this.clockValues.d = Math.floor(diff / 86400); + diff -= this.clockValues.d * 86400; - // Days remaining - this.clockValues.d = Math.floor(diff / 86400); - diff -= this.clockValues.d * 86400; + // Hours remaining + this.clockValues.h = Math.floor(diff / 3600); + diff -= this.clockValues.h * 3600; - // Hours remaining - this.clockValues.h = Math.floor(diff / 3600); - diff -= this.clockValues.h * 3600; + // Minutes remaining + this.clockValues.m = Math.floor(diff / 60); + diff -= this.clockValues.m * 60; - // Minutes remaining - this.clockValues.m = Math.floor(diff / 60); - diff -= this.clockValues.m * 60; + // Seconds remaining + this.clockValues.s = Math.floor(diff); - // Seconds remaining - this.clockValues.s = Math.floor(diff); + // Update clock values + this._updateClockValues(); - // Update clock values - this._updateClockValues(); + // Has the countdown ended? + this._hasCountdownEnded(); - // Has the countdown ended? - this._hasCountdownEnded(); + // Has the event occured? + this._hasCountdownEventOccured(); } /** @@ -309,62 +377,88 @@ class FlipDown { **/ _updateClockValues(init = false) { - // Build clock value strings - 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); - - // Concat clock value strings - this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split(''); - - // Update rotor values - // Note that the faces which are initially visible are: - // - rotorLeafFront (top half of current rotor) - // - rotorBottom (bottom half of current rotor) - // Note that the faces which are initially hidden are: - // - rotorTop (top half of next rotor) - // - rotorLeafRear (bottom half of next rotor) - this.rotorLeafFront.forEach((el, i) => { - el.textContent = this.prevClockValuesAsString[i]; - }); - - this.rotorBottom.forEach((el, i) => { - el.textContent = this.prevClockValuesAsString[i]; - }); - - function rotorTopFlip() { - this.rotorTop.forEach((el, i) => { - if(el.textContent != this.clockValuesAsString[i]) { - el.textContent = this.clockValuesAsString[i]; - } + // Build clock value strings + 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); + + // Concat clock value strings + this.clockValuesAsString = (this.clockStrings.d + this.clockStrings.h + this.clockStrings.m + this.clockStrings.s).split(''); + + // Update rotor values + // Note that the faces which are initially visible are: + // - rotorLeafFront (top half of current rotor) + // - rotorBottom (bottom half of current rotor) + // Note that the faces which are initially hidden are: + // - rotorTop (top half of next rotor) + // - rotorLeafRear (bottom half of next rotor) + this.rotorLeafFront.forEach((el, i) => { + el.textContent = this.prevClockValuesAsString[i]; }); - } - - function rotorLeafRearFlip() { - this.rotorLeafRear.forEach((el, 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); - } + + this.rotorBottom.forEach((el, i) => { + el.textContent = this.prevClockValuesAsString[i]; }); - } - - // Init - if(!init) { - setTimeout(rotorTopFlip.bind(this), 500); - setTimeout(rotorLeafRearFlip.bind(this), 500); - } else { - rotorTopFlip.call(this); - rotorLeafRearFlip.call(this); - } - - // Save a copy of clock values for next tick - this.prevClockValuesAsString = this.clockValuesAsString; + + function rotorTopFlip() { + this.rotorTop.forEach((el, i) => { + if (el.textContent != this.clockValuesAsString[i]) { + el.textContent = this.clockValuesAsString[i]; + } + }); + } + + function rotorLeafRearFlip() { + this.rotorLeafRear.forEach((el, 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); + } + }); + } + + // Init + if (!init) { + setTimeout(rotorTopFlip.bind(this), 500); + setTimeout(rotorLeafRearFlip.bind(this), 500); + } else { + var dayRotor = document.querySelector(".rotor-period-day"); + var hourRotor = document.querySelector(".rotor-period-hour"); + var minuteRotor = document.querySelector(".rotor-period-minute"); + var secondRotor = document.querySelector(".rotor-period-second"); + + if (!this.opts.showEmptyRotors) { + if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m == '00' && this.clockStrings.s == '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + minuteRotor.style.display = 'none'; + secondRotor.style.display = 'none'; + } + else if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m == '00' && this.clockStrings.s != '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + minuteRotor.style.display = 'none'; + } + else if (this.clockStrings.d == '00' && this.clockStrings.h == '00' && this.clockStrings.m != '00') { + dayRotor.style.display = 'none'; + hourRotor.style.display = 'none'; + } + else if (this.clockStrings.d == '00' && this.clockStrings.h != '00') { + hourRotor.style.display = 'none'; + } + } + + rotorTopFlip.call(this); + rotorLeafRearFlip.call(this); + } + + // Save a copy of clock values for next tick + this.prevClockValuesAsString = this.clockValuesAsString; } } @@ -388,6 +482,6 @@ function pad(n, len) { **/ function appendChildren(parent, children) { children.forEach(el => { - parent.appendChild(el); + parent.appendChild(el); }); -} +} \ No newline at end of file