From f921eef7ff8f078df14aaea77e4e0e84c92113ec Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Tue, 11 Feb 2020 14:25:53 +0000 Subject: [PATCH 01/13] update to accept comma seperated list of themes --- src/flipdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/flipdown.js b/src/flipdown.js index db7deaf..abb8eef 100644 --- a/src/flipdown.js +++ b/src/flipdown.js @@ -166,8 +166,8 @@ class FlipDown { **/ _setOptions() { - // Apply theme - this.element.classList.add(`flipdown__theme-${this.opts.theme}`); + // Apply themes + this.opts.theme.split(',').forEach(theme => this.element.classList.add(`flipdown__theme-${theme}`)); } /** From e6fe7c4f927106ab21f3a533238141e9785b5a54 Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Tue, 11 Feb 2020 14:27:14 +0000 Subject: [PATCH 02/13] add small theme --- src/flipdown.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/src/flipdown.css b/src/flipdown.css index edd92f6..c2e7235 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: 70px; +} + +.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: 69px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { + bottom: 13px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + bottom: 29px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-top { + line-height: 50px; +} + +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor { + height: 50px; +} + +.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: 25px; +} + /* END OF THEMES */ .flipdown { From 091460a09438240bcb38146fa56bff6e98a12f85 Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Tue, 11 Feb 2020 15:44:03 +0000 Subject: [PATCH 03/13] update for windows --- package.json | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 4d8cda4..9068cde 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,9 @@ "main": "src/flipdown.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "clean": "rm -rf dist && mkdir -p dist && rm -rf example/css/flipdown && mkdir -p example/css/flipdown && rm -rf example/js/flipdown && mkdir -p example/js/flipdown", - "dist": "npx babel src/flipdown.js -o dist/flipdown.js --no-comments && npx babel src/flipdown.js --presets=minify --no-comments -o dist/flipdown.min.js && cp src/flipdown.css dist/flipdown.css && uglifycss src/flipdown.css > dist/flipdown.min.css", - "example": "npx babel src/flipdown.js -o example/js/flipdown/flipdown.js --no-comments && cp dist/flipdown.css example/css/flipdown/flipdown.css", + "clean": "rimraf -rf dist && mkdirp -p dist && rimraf -rf example\\css\\flipdown && mkdirp -p example\\css\\flipdown && rimraf -rf example\\js\\flipdown && mkdirp -p example\\js\\flipdown", + "dist": "npx babel src\\flipdown.js -o dist\\flipdown.js --no-comments && npx babel src\\flipdown.js --presets=minify --no-comments -o dist\\flipdown.min.js && copy src\\flipdown.css dist\\flipdown.css && uglifycss src\\flipdown.css > dist\\flipdown.min.css", + "example": "npx babel src\\flipdown.js -o example\\js\\flipdown\\flipdown.js --no-comments && copy dist\\flipdown.css example\\css\\flipdown\\flipdown.css", "build": "npm run clean && npm run dist && npm run example" }, "repository": { @@ -20,12 +20,24 @@ "url": "https://github.com/PButcher/flipdown/issues" }, "homepage": "https://github.com/PButcher/flipdown#readme", - "dependencies": {}, + "dependencies": { + "@babel/register": "^7.8.3", + "babel-loader": "^7.1.5", + "save-dev": "0.0.1-security" + }, + "resolutions": { + "babel-core": "7.0.0-bridge.0" + }, "devDependencies": { - "@babel/cli": "^7.1.0", - "@babel/core": "^7.1.0", - "@babel/preset-env": "^7.1.5", - "babel-preset-minify": "^0.5.0", + "@babel/cli": "^7.8.4", + "@babel/core": "^7.8.4", + "@babel/node": "^7.8.4", + "@babel/polyfill": "^7.8.3", + "@babel/preset-env": "^7.8.4", + "babel-preset-minify": "^0.5.1", + "jest": "^24.8.0", + "mkdirp": "^1.0.3", + "rimraf": "^3.0.2", "uglifycss": "0.0.29" } } From 38b42b6ca0879ec4f13ee9fa3674281ae4682f9f Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Tue, 11 Feb 2020 15:45:31 +0000 Subject: [PATCH 04/13] update to allow comma seperated list of themes --- dist/flipdown.js | 28 ++++++++++++++++------------ dist/flipdown.min.js | 2 +- example/js/flipdown/flipdown.js | 28 ++++++++++++++++------------ 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/dist/flipdown.js b/dist/flipdown.js index b326d11..55305ae 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"); } } @@ -98,7 +98,11 @@ var FlipDown = function () { }, { 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", @@ -202,7 +206,7 @@ var FlipDown = function () { }, { 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 +215,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); } }); } diff --git a/dist/flipdown.min.js b/dist/flipdown.min.js index cf45dc4..15190ff 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:"_parseOptions",value:function _parseOptions(a){return{theme:a.hasOwnProperty("theme")?a.theme:"dark"}}},{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 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 _createRotorGroup(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 _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()}},{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 +215,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); } }); } From b0d0c7d84a20d08599092e5dba0e77918cd5f85e Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Tue, 11 Feb 2020 15:45:41 +0000 Subject: [PATCH 05/13] add small theme --- dist/flipdown.css | 70 +++++++++++++++++++++++++++++++ dist/flipdown.min.css | 2 +- example/css/flipdown/flipdown.css | 70 +++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 1 deletion(-) diff --git a/dist/flipdown.css b/dist/flipdown.css index edd92f6..c2e7235 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: 70px; +} + +.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: 69px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { + bottom: 13px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + bottom: 29px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-top { + line-height: 50px; +} + +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor { + height: 50px; +} + +.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: 25px; +} + /* END OF THEMES */ .flipdown { diff --git a/dist/flipdown.min.css b/dist/flipdown.min.css index 8aa497b..7efa411 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:70px}.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:69px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before{bottom:13px;height:8px;width:8px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after{bottom:29px;height:8px;width:8px}.flipdown.flipdown__theme-small .rotor-leaf-front,.flipdown.flipdown__theme-small .rotor-top{line-height:50px}.flipdown.flipdown__theme-small .rotor-leaf,.flipdown.flipdown__theme-small .rotor{height:50px}.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:25px}.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/example/css/flipdown/flipdown.css b/example/css/flipdown/flipdown.css index edd92f6..c2e7235 100644 --- a/example/css/flipdown/flipdown.css +++ b/example/css/flipdown/flipdown.css @@ -66,6 +66,76 @@ border-top: solid 1px #222222; } +/********** Theme: small **********/ +.flipdown.flipdown__theme-small { + width: 100%; + height: 70px; +} + +.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: 69px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { + bottom: 13px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { + bottom: 29px; + height: 8px; + width: 8px; +} + +.flipdown.flipdown__theme-small .rotor-leaf-front, +.flipdown.flipdown__theme-small .rotor-top { + line-height: 50px; +} + +.flipdown.flipdown__theme-small .rotor-leaf, +.flipdown.flipdown__theme-small .rotor { + height: 50px; +} + +.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: 25px; +} + /* END OF THEMES */ .flipdown { From 7d196e65db34dc81d6c315d56dcd7f8e515a195f Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Tue, 11 Feb 2020 16:12:51 +0000 Subject: [PATCH 06/13] add showHeaders option --- dist/flipdown.js | 13 +++++++++---- dist/flipdown.min.js | 2 +- example/js/flipdown/flipdown.js | 13 +++++++++---- src/flipdown.js | 13 +++++++++---- 4 files changed, 28 insertions(+), 13 deletions(-) diff --git a/dist/flipdown.js b/dist/flipdown.js index 55305ae..c6cf03f 100644 --- a/dist/flipdown.js +++ b/dist/flipdown.js @@ -92,7 +92,8 @@ var FlipDown = function () { 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 }; } }, { @@ -157,9 +158,13 @@ var FlipDown = function () { value: function _createRotorGroup(rotors) { var rotorGroup = document.createElement('div'); rotorGroup.className = 'rotor-group'; - var dayRotorGroupHeading = document.createElement('div'); - dayRotorGroupHeading.className = 'rotor-group-heading'; - rotorGroup.appendChild(dayRotorGroupHeading); + + if (this.opts.showHeaders) { + var dayRotorGroupHeading = document.createElement('div'); + dayRotorGroupHeading.className = 'rotor-group-heading'; + rotorGroup.appendChild(dayRotorGroupHeading); + } + appendChildren(rotorGroup, rotors); return rotorGroup; } diff --git a/dist/flipdown.min.js b/dist/flipdown.min.js index 15190ff..3f76f8d 100644 --- a/dist/flipdown.min.js +++ b/dist/flipdown.min.js @@ -1 +1 @@ -"use strict";function _typeof(a){"@babel/helpers - typeof";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 _parseOptions(a){return{theme:a.hasOwnProperty("theme")?a.theme:"dark"}}},{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 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 _createRotorGroup(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 _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()}},{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=!!(0this.epoch-this.now?(this.countdownEnded=!0,null!=this.hasEndedCallback&&(this.hasEndedCallback(),this.hasEndedCallback=null),!0):(this.countdownEnded=!1,!1)}},{key:"_parseOptions",value:function _parseOptions(a){return{theme:a.hasOwnProperty("theme")?a.theme:"dark",showHeaders:!a.hasOwnProperty("showHeaders")||a.showHeaders}}},{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 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 _createRotorGroup(a){var b=document.createElement("div");if(b.className="rotor-group",this.opts.showHeaders){var c=document.createElement("div");c.className="rotor-group-heading",b.appendChild(c)}return appendChildren(b,a),b}},{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()}},{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 Date: Wed, 12 Feb 2020 10:19:49 +0000 Subject: [PATCH 07/13] add option to hide initially empty rotors --- src/flipdown.js | 40 ++++++++++++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/src/flipdown.js b/src/flipdown.js index f46f377..732ae5a 100644 --- a/src/flipdown.js +++ b/src/flipdown.js @@ -156,7 +156,8 @@ class FlipDown { return { // Theme theme: (opt.hasOwnProperty('theme')) ? opt.theme : 'dark', - showHeaders: (opt.hasOwnProperty('showHeaders')) ? opt.showHeaders : true + showHeaders: (opt.hasOwnProperty('showHeaders')) ? opt.showHeaders : true, + showEmptyRotors: (opt.hasOwnProperty('showEmptyRotors')) ? opt.showEmptyRotors : true } } @@ -198,17 +199,18 @@ class FlipDown { for(var i = 0; i < dayRotorCount; i++) { dayRotors.push(this.rotors[i]); } - this.element.appendChild(this._createRotorGroup(dayRotors)); + 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)); + this.element.appendChild(this._createRotorGroup(otherRotors, periods[i])); } // Store and convert rotor nodelists to arrays @@ -230,16 +232,16 @@ class FlipDown { * @author PButcher * @param {array} rotors - A set of rotors **/ - _createRotorGroup(rotors) { + _createRotorGroup(rotors, period) { var rotorGroup = document.createElement('div'); - rotorGroup.className = 'rotor-group'; + rotorGroup.className = 'rotor-group rotor-period-' + period; if (this.opts.showHeaders) { var dayRotorGroupHeading = document.createElement('div'); dayRotorGroupHeading.className = 'rotor-group-heading'; rotorGroup.appendChild(dayRotorGroupHeading); } - + appendChildren(rotorGroup, rotors); return rotorGroup; } @@ -364,6 +366,32 @@ class FlipDown { 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); } From b97ed5e89275ca786d8f441b4bbe5b802927e4ad Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Wed, 12 Feb 2020 10:20:59 +0000 Subject: [PATCH 08/13] reposition time seperator --- src/flipdown.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/flipdown.css b/src/flipdown.css index c2e7235..696e11b 100644 --- a/src/flipdown.css +++ b/src/flipdown.css @@ -103,7 +103,7 @@ .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: 69px; + left: 66px; } .flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { From 82acbc901441ccb0e92254b3da6d3e2e2ec520b0 Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Wed, 12 Feb 2020 11:04:16 +0000 Subject: [PATCH 09/13] reduce small theme flip card padding --- src/flipdown.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/flipdown.css b/src/flipdown.css index 696e11b..4820e42 100644 --- a/src/flipdown.css +++ b/src/flipdown.css @@ -69,7 +69,7 @@ /********** Theme: small **********/ .flipdown.flipdown__theme-small { width: 100%; - height: 70px; + height: 100%; } .flipdown.flipdown__theme-small .rotor { @@ -107,25 +107,25 @@ } .flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { - bottom: 13px; + bottom: 16px; height: 8px; width: 8px; } .flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { - bottom: 29px; + bottom: 5px; height: 8px; width: 8px; } .flipdown.flipdown__theme-small .rotor-leaf-front, .flipdown.flipdown__theme-small .rotor-top { - line-height: 50px; + line-height: 30px; } .flipdown.flipdown__theme-small .rotor-leaf, .flipdown.flipdown__theme-small .rotor { - height: 50px; + height: 30px; } .flipdown.flipdown__theme-small .rotor-leaf-front, @@ -133,7 +133,7 @@ .flipdown.flipdown__theme-small .rotor-top, .flipdown.flipdown__theme-small .rotor-bottom, .flipdown.flipdown__theme-small .rotor:after { - height: 25px; + height: 15px; } /* END OF THEMES */ From 592bd5468378ac68b32fec4eaf04b756b1e7e6a1 Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Wed, 12 Feb 2020 11:05:17 +0000 Subject: [PATCH 10/13] build --- dist/flipdown.css | 14 ++++++------- dist/flipdown.js | 35 ++++++++++++++++++++++++++----- dist/flipdown.min.css | 2 +- dist/flipdown.min.js | 2 +- example/css/flipdown/flipdown.css | 14 ++++++------- example/js/flipdown/flipdown.js | 35 ++++++++++++++++++++++++++----- 6 files changed, 76 insertions(+), 26 deletions(-) diff --git a/dist/flipdown.css b/dist/flipdown.css index c2e7235..4820e42 100644 --- a/dist/flipdown.css +++ b/dist/flipdown.css @@ -69,7 +69,7 @@ /********** Theme: small **********/ .flipdown.flipdown__theme-small { width: 100%; - height: 70px; + height: 100%; } .flipdown.flipdown__theme-small .rotor { @@ -103,29 +103,29 @@ .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: 69px; + left: 66px; } .flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before { - bottom: 13px; + bottom: 16px; height: 8px; width: 8px; } .flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after { - bottom: 29px; + bottom: 5px; height: 8px; width: 8px; } .flipdown.flipdown__theme-small .rotor-leaf-front, .flipdown.flipdown__theme-small .rotor-top { - line-height: 50px; + line-height: 30px; } .flipdown.flipdown__theme-small .rotor-leaf, .flipdown.flipdown__theme-small .rotor { - height: 50px; + height: 30px; } .flipdown.flipdown__theme-small .rotor-leaf-front, @@ -133,7 +133,7 @@ .flipdown.flipdown__theme-small .rotor-top, .flipdown.flipdown__theme-small .rotor-bottom, .flipdown.flipdown__theme-small .rotor:after { - height: 25px; + height: 15px; } /* END OF THEMES */ diff --git a/dist/flipdown.js b/dist/flipdown.js index c6cf03f..65022bb 100644 --- a/dist/flipdown.js +++ b/dist/flipdown.js @@ -93,7 +93,8 @@ var FlipDown = function () { value: function _parseOptions(opt) { return { theme: opt.hasOwnProperty('theme') ? opt.theme : 'dark', - showHeaders: opt.hasOwnProperty('showHeaders') ? opt.showHeaders : true + showHeaders: opt.hasOwnProperty('showHeaders') ? opt.showHeaders : true, + showEmptyRotors: opt.hasOwnProperty('showEmptyRotors') ? opt.showEmptyRotors : true }; } }, { @@ -128,8 +129,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 = []; @@ -139,7 +141,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')); @@ -155,9 +157,9 @@ var FlipDown = function () { } }, { key: "_createRotorGroup", - value: function _createRotorGroup(rotors) { + value: function _createRotorGroup(rotors, period) { var rotorGroup = document.createElement('div'); - rotorGroup.className = 'rotor-group'; + rotorGroup.className = 'rotor-group rotor-period-' + period; if (this.opts.showHeaders) { var dayRotorGroupHeading = document.createElement('div'); @@ -255,6 +257,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 7efa411..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.flipdown__theme-small{width:100%;height:70px}.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:69px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):before{bottom:13px;height:8px;width:8px}.flipdown.flipdown__theme-small .rotor-group:nth-child(n+2):nth-child(-n+3):after{bottom:29px;height:8px;width:8px}.flipdown.flipdown__theme-small .rotor-leaf-front,.flipdown.flipdown__theme-small .rotor-top{line-height:50px}.flipdown.flipdown__theme-small .rotor-leaf,.flipdown.flipdown__theme-small .rotor{height:50px}.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:25px}.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 3f76f8d..36411e1 100644 --- a/dist/flipdown.min.js +++ b/dist/flipdown.min.js @@ -1 +1 @@ -"use strict";function _typeof(a){"@babel/helpers - typeof";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 _parseOptions(a){return{theme:a.hasOwnProperty("theme")?a.theme:"dark",showHeaders:!a.hasOwnProperty("showHeaders")||a.showHeaders}}},{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 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 _createRotorGroup(a){var b=document.createElement("div");if(b.className="rotor-group",this.opts.showHeaders){var c=document.createElement("div");c.className="rotor-group-heading",b.appendChild(c)}return appendChildren(b,a),b}},{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()}},{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=!!(0this.epoch-this.now?(this.countdownEnded=!0,null!=this.hasEndedCallback&&(this.hasEndedCallback(),this.hasEndedCallback=null),!0):(this.countdownEnded=!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()}},{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 Date: Wed, 12 Feb 2020 11:14:44 +0000 Subject: [PATCH 11/13] update readme with new options --- README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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()` From e9bc297ee2f6d17d3f461b4a5e5f8f7526a0f409 Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Thu, 13 Feb 2020 09:59:01 +0000 Subject: [PATCH 12/13] revert package.json changes --- package.json | 30 +++++++++--------------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 9068cde..135aef3 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,9 @@ "main": "src/flipdown.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "clean": "rimraf -rf dist && mkdirp -p dist && rimraf -rf example\\css\\flipdown && mkdirp -p example\\css\\flipdown && rimraf -rf example\\js\\flipdown && mkdirp -p example\\js\\flipdown", - "dist": "npx babel src\\flipdown.js -o dist\\flipdown.js --no-comments && npx babel src\\flipdown.js --presets=minify --no-comments -o dist\\flipdown.min.js && copy src\\flipdown.css dist\\flipdown.css && uglifycss src\\flipdown.css > dist\\flipdown.min.css", - "example": "npx babel src\\flipdown.js -o example\\js\\flipdown\\flipdown.js --no-comments && copy dist\\flipdown.css example\\css\\flipdown\\flipdown.css", + "clean": "rm -rf dist && mkdir -p dist && rm -rf example/css/flipdown && mkdir -p example/css/flipdown && rm -rf example/js/flipdown && mkdir -p example/js/flipdown", + "dist": "npx babel src/flipdown.js -o dist/flipdown.js --no-comments && npx babel src/flipdown.js --presets=minify --no-comments -o dist/flipdown.min.js && cp src/flipdown.css dist/flipdown.css && uglifycss src/flipdown.css > dist/flipdown.min.css", + "example": "npx babel src/flipdown.js -o example/js/flipdown/flipdown.js --no-comments && cp dist/flipdown.css example/css/flipdown/flipdown.css", "build": "npm run clean && npm run dist && npm run example" }, "repository": { @@ -20,24 +20,12 @@ "url": "https://github.com/PButcher/flipdown/issues" }, "homepage": "https://github.com/PButcher/flipdown#readme", - "dependencies": { - "@babel/register": "^7.8.3", - "babel-loader": "^7.1.5", - "save-dev": "0.0.1-security" - }, - "resolutions": { - "babel-core": "7.0.0-bridge.0" - }, + "dependencies": {}, "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.8.4", - "@babel/node": "^7.8.4", - "@babel/polyfill": "^7.8.3", - "@babel/preset-env": "^7.8.4", - "babel-preset-minify": "^0.5.1", - "jest": "^24.8.0", - "mkdirp": "^1.0.3", - "rimraf": "^3.0.2", + "@babel/cli": "^7.1.0", + "@babel/core": "^7.1.0", + "@babel/preset-env": "^7.1.5", + "babel-preset-minify": "^0.5.0", "uglifycss": "0.0.29" } -} +} \ No newline at end of file From e775429e26a13e89dbf9e977b66b7ec005d2c1d9 Mon Sep 17 00:00:00 2001 From: mattosaurus Date: Thu, 13 Feb 2020 10:19:49 +0000 Subject: [PATCH 13/13] Add hasOccurred event --- dist/flipdown.js | 40 ++- dist/flipdown.min.js | 2 +- example/js/flipdown/flipdown.js | 40 ++- src/flipdown.js | 557 ++++++++++++++++++-------------- 4 files changed, 384 insertions(+), 255 deletions(-) diff --git a/dist/flipdown.js b/dist/flipdown.js index 65022bb..13cea07 100644 --- a/dist/flipdown.js +++ b/dist/flipdown.js @@ -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,6 +103,23 @@ 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) { @@ -162,9 +194,9 @@ var FlipDown = function () { rotorGroup.className = 'rotor-group rotor-period-' + period; if (this.opts.showHeaders) { - var dayRotorGroupHeading = document.createElement('div'); - dayRotorGroupHeading.className = 'rotor-group-heading'; - rotorGroup.appendChild(dayRotorGroupHeading); + var rotorGroupHeading = document.createElement('div'); + rotorGroupHeading.className = 'rotor-group-heading'; + rotorGroup.appendChild(rotorGroupHeading); } appendChildren(rotorGroup, rotors); @@ -209,6 +241,8 @@ var FlipDown = function () { this._updateClockValues(); this._hasCountdownEnded(); + + this._hasCountdownEventOccured(); } }, { key: "_updateClockValues", diff --git a/dist/flipdown.min.js b/dist/flipdown.min.js index 36411e1..ed16508 100644 --- a/dist/flipdown.min.js +++ b/dist/flipdown.min.js @@ -1 +1 @@ -"use strict";function _typeof(a){"@babel/helpers - typeof";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 _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()}},{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=!!(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 this.element.classList.add(`flipdown__theme-${theme}`)); + // Apply theme + this.opts.theme.split(',').forEach(theme => this.element.classList.add(`flipdown__theme-${theme}`)); } /** @@ -179,51 +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, '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.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, periods[i])); - } + 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)); + } - // Set initial values; - this._tick(); - this._updateClockValues(true); + // 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])); + } - return this; + // 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); + + return this; } /** @@ -233,17 +291,17 @@ class FlipDown { * @param {array} rotors - A set of rotors **/ _createRotorGroup(rotors, period) { - var rotorGroup = document.createElement('div'); - rotorGroup.className = 'rotor-group rotor-period-' + period; + var rotorGroup = document.createElement('div'); + rotorGroup.className = 'rotor-group rotor-period-' + period; - if (this.opts.showHeaders) { - var dayRotorGroupHeading = document.createElement('div'); - dayRotorGroupHeading.className = 'rotor-group-heading'; - rotorGroup.appendChild(dayRotorGroupHeading); - } + if (this.opts.showHeaders) { + var rotorGroupHeading = document.createElement('div'); + rotorGroupHeading.className = 'rotor-group-heading'; + rotorGroup.appendChild(rotorGroupHeading); + } - appendChildren(rotorGroup, rotors); - return rotorGroup; + appendChildren(rotorGroup, rotors); + return rotorGroup; } /** @@ -253,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; } /** @@ -280,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(); } /** @@ -316,88 +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 { - 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'; - } + + function rotorTopFlip() { + this.rotorTop.forEach((el, i) => { + if (el.textContent != this.clockValuesAsString[i]) { + el.textContent = this.clockValuesAsString[i]; + } + }); } - rotorTopFlip.call(this); - rotorLeafRearFlip.call(this); - } + 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'; + } + } - // Save a copy of clock values for next tick - this.prevClockValuesAsString = this.clockValuesAsString; + rotorTopFlip.call(this); + rotorLeafRearFlip.call(this); + } + + // Save a copy of clock values for next tick + this.prevClockValuesAsString = this.clockValuesAsString; } } @@ -421,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