vue2-flip-countdown
Version:
A simple flip countdown timer component for Vue 2.x
1 lines • 14.3 kB
JavaScript
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vue2-flip-countdown",[],e):"object"==typeof exports?exports["vue2-flip-countdown"]=e():t["vue2-flip-countdown"]=e()}(self,(()=>(()=>{var t={148:(t,e,n)=>{(e=n(645)(!1)).push([t.id,".flip-clock[data-v-b6b5360c] {\n text-align: center;\n perspective: 600px;\n margin: 0 auto;\n}\n.flip-clock *[data-v-b6b5360c],\n.flip-clock *[data-v-b6b5360c]:before,\n.flip-clock *[data-v-b6b5360c]:after {\n box-sizing: border-box;\n}\n.flip-clock__piece[data-v-b6b5360c] {\n display: inline-block;\n margin: 0 0.2vw;\n}\n@media (min-width: 1000px) {\n.flip-clock__piece[data-v-b6b5360c] {\n margin: 0 5px;\n}\n}\n.flip-clock__slot[data-v-b6b5360c] {\n font-size: 1rem;\n line-height: 1.5;\n display: block;\n}\n.flip-card[data-v-b6b5360c] {\n display: block;\n position: relative;\n padding-bottom: 0.72em;\n font-size: 2.25rem;\n line-height: 0.95;\n}\n@media (min-width: 1000px) {\n.flip-clock__slot[data-v-b6b5360c] {\n font-size: 1.2rem;\n}\n.flip-card[data-v-b6b5360c] {\n font-size: 3rem;\n}\n}\n.flip-card__top[data-v-b6b5360c],\n.flip-card__bottom[data-v-b6b5360c],\n.flip-card__back-bottom[data-v-b6b5360c],\n.flip-card__back[data-v-b6b5360c]::before,\n.flip-card__back[data-v-b6b5360c]::after {\n display: block;\n color: #cca900;\n background: #222;\n padding: 0.23em 0.15em 0.4em;\n border-radius: 0.15em 0.15em 0 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform-style: preserve-3d;\n width: 2.1em;\n height: 0.72em;\n}\n.flip-card__top-4digits[data-v-b6b5360c],\n.flip-card__bottom-4digits[data-v-b6b5360c],\n.flip-card__back-bottom-4digits[data-v-b6b5360c],\n.flip-card__back-4digits[data-v-b6b5360c]::before,\n.flip-card__back-4digits[data-v-b6b5360c]::after {\n display: block;\n color: #cca900;\n background: #222;\n padding: 0.23em 0.15em 0.4em;\n border-radius: 0.15em 0.15em 0 0;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform-style: preserve-3d;\n width: 2.65em;\n height: 0.72em;\n}\n.flip-card__bottom[data-v-b6b5360c],\n.flip-card__back-bottom[data-v-b6b5360c],\n.flip-card__bottom-4digits[data-v-b6b5360c],\n.flip-card__back-bottom-4digits[data-v-b6b5360c] {\n color: #ffdc00;\n position: absolute;\n top: 50%;\n left: 0;\n border-top: solid 1px #000;\n background: #393939;\n border-radius: 0 0 0.15em 0.15em;\n pointer-events: none;\n overflow: hidden;\n z-index: 2;\n}\n.flip-card__back-bottom[data-v-b6b5360c],\n.flip-card__back-bottom-4digits[data-v-b6b5360c] {\n z-index: 1;\n}\n.flip-card__bottom[data-v-b6b5360c]::after,\n.flip-card__back-bottom[data-v-b6b5360c]::after,\n.flip-card__bottom-4digits[data-v-b6b5360c]::after,\n.flip-card__back-bottom-4digits[data-v-b6b5360c]::after {\n display: block;\n margin-top: -0.72em;\n}\n.flip-card__back[data-v-b6b5360c]::before,\n.flip-card__bottom[data-v-b6b5360c]::after,\n.flip-card__back-bottom[data-v-b6b5360c]::after,\n.flip-card__back-4digits[data-v-b6b5360c]::before,\n.flip-card__bottom-4digits[data-v-b6b5360c]::after,\n.flip-card__back-bottom-4digits[data-v-b6b5360c]::after {\n content: attr(data-value);\n}\n.flip-card__back[data-v-b6b5360c],\n.flip-card__back-4digits[data-v-b6b5360c] {\n position: absolute;\n top: 0;\n height: 100%;\n left: 0%;\n pointer-events: none;\n}\n.flip-card__back[data-v-b6b5360c]::before,\n.flip-card__back-4digits[data-v-b6b5360c]::before {\n position: relative;\n overflow: hidden;\n z-index: -1;\n}\n.flip .flip-card__back[data-v-b6b5360c]::before,\n.flip .flip-card__back-4digits[data-v-b6b5360c]::before {\n z-index: 1;\n animation: flipTop-b6b5360c 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);\n animation-fill-mode: both;\n transform-origin: center bottom;\n}\n.flip .flip-card__bottom[data-v-b6b5360c],\n.flip .flip-card__bottom-4digits[data-v-b6b5360c] {\n transform-origin: center top;\n animation-fill-mode: both;\n animation: flipBottom-b6b5360c 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);\n}\n@keyframes flipTop-b6b5360c {\n0% {\n transform: rotateX(0deg);\n z-index: 2;\n}\n0%,\n 99% {\n opacity: 1;\n}\n100% {\n transform: rotateX(-90deg);\n opacity: 0;\n}\n}\n@keyframes flipBottom-b6b5360c {\n0%,\n 50% {\n z-index: -1;\n transform: rotateX(90deg) translateZ(0px);\n opacity: 0;\n}\n51% {\n opacity: 1;\n}\n100% {\n opacity: 1;\n transform: rotateX(0deg) translateZ(1px);\n z-index: 5;\n}\n}\n",""]),t.exports=e},645:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",a=t[3];if(!a)return n;if(e&&"function"==typeof btoa){var i=(o=a,s=btoa(unescape(encodeURIComponent(JSON.stringify(o)))),d="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(d," */")),r=a.sources.map((function(t){return"/*# sourceURL=".concat(a.sourceRoot||"").concat(t," */")}));return[n].concat(r).concat([i]).join("\n")}var o,s,d;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,a){"string"==typeof t&&(t=[[null,t,""]]);var i={};if(a)for(var r=0;r<this.length;r++){var o=this[r][0];null!=o&&(i[o]=!0)}for(var s=0;s<t.length;s++){var d=[].concat(t[s]);a&&i[d[0]]||(n&&(d[2]?d[2]="".concat(n," and ").concat(d[2]):d[2]=n),e.push(d))}},e}},327:t=>{for(var e=[],n=0;n<256;++n)e[n]=(n+256).toString(16).substr(1);t.exports=function(t,n){var a=n||0,i=e;return[i[t[a++]],i[t[a++]],i[t[a++]],i[t[a++]],"-",i[t[a++]],i[t[a++]],"-",i[t[a++]],i[t[a++]],"-",i[t[a++]],i[t[a++]],"-",i[t[a++]],i[t[a++]],i[t[a++]],i[t[a++]],i[t[a++]],i[t[a++]]].join("")}},217:t=>{var e="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof window.msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto);if(e){var n=new Uint8Array(16);t.exports=function(){return e(n),n}}else{var a=new Array(16);t.exports=function(){for(var t,e=0;e<16;e++)0==(3&e)&&(t=4294967296*Math.random()),a[e]=t>>>((3&e)<<3)&255;return a}}},171:(t,e,n)=>{var a=n(217),i=n(327);t.exports=function(t,e,n){var r=e&&n||0;"string"==typeof t&&(e="binary"===t?new Array(16):null,t=null);var o=(t=t||{}).random||(t.rng||a)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,e)for(var s=0;s<16;++s)e[r+s]=o[s];return e||i(o)}},681:(t,e,n)=>{var a=n(148);a.__esModule&&(a=a.default),"string"==typeof a&&(a=[[t.id,a,""]]),a.locals&&(t.exports=a.locals);(0,n(346).Z)("36d826de",a,!0,{})},346:(t,e,n)=>{"use strict";function a(t,e){for(var n=[],a={},i=0;i<e.length;i++){var r=e[i],o=r[0],s={id:t+":"+i,css:r[1],media:r[2],sourceMap:r[3]};a[o]?a[o].parts.push(s):n.push(a[o]={id:o,parts:[s]})}return n}n.d(e,{Z:()=>b});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r={},o=i&&(document.head||document.getElementsByTagName("head")[0]),s=null,d=0,c=!1,l=function(){},f=null,p="data-vue-ssr-id",u="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function b(t,e,n,i){c=n,f=i||{};var o=a(t,e);return h(o),function(e){for(var n=[],i=0;i<o.length;i++){var s=o[i];(d=r[s.id]).refs--,n.push(d)}e?h(o=a(t,e)):o=[];for(i=0;i<n.length;i++){var d;if(0===(d=n[i]).refs){for(var c=0;c<d.parts.length;c++)d.parts[c]();delete r[d.id]}}}}function h(t){for(var e=0;e<t.length;e++){var n=t[e],a=r[n.id];if(a){a.refs++;for(var i=0;i<a.parts.length;i++)a.parts[i](n.parts[i]);for(;i<n.parts.length;i++)a.parts.push(v(n.parts[i]));a.parts.length>n.parts.length&&(a.parts.length=n.parts.length)}else{var o=[];for(i=0;i<n.parts.length;i++)o.push(v(n.parts[i]));r[n.id]={id:n.id,refs:1,parts:o}}}}function m(){var t=document.createElement("style");return t.type="text/css",o.appendChild(t),t}function v(t){var e,n,a=document.querySelector("style["+p+'~="'+t.id+'"]');if(a){if(c)return l;a.parentNode.removeChild(a)}if(u){var i=d++;a=s||(s=m()),e=y.bind(null,a,i,!1),n=y.bind(null,a,i,!0)}else a=m(),e=w.bind(null,a),n=function(){a.parentNode.removeChild(a)};return e(t),function(a){if(a){if(a.css===t.css&&a.media===t.media&&a.sourceMap===t.sourceMap)return;e(t=a)}else n()}}var _,g=(_=[],function(t,e){return _[t]=e,_.filter(Boolean).join("\n")});function y(t,e,n,a){var i=n?"":a.css;if(t.styleSheet)t.styleSheet.cssText=g(e,i);else{var r=document.createTextNode(i),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(r,o[e]):t.appendChild(r)}}function w(t,e){var n=e.css,a=e.media,i=e.sourceMap;if(a&&t.setAttribute("media",a),f.ssrId&&t.setAttribute(p,e.id),i&&(n+="\n/*# sourceURL="+i.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}}},e={};function n(a){var i=e[a];if(void 0!==i)return i.exports;var r=e[a]={id:a,exports:{}};return t[a](r,r.exports,n),r.exports}n.d=(t,e)=>{for(var a in e)n.o(e,a)&&!n.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})},n.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),n.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var a={};return(()=>{"use strict";n.r(a),n.d(a,{default:()=>r});const t=n(171),e={name:"flipCountdown",props:{deadline:{type:String},stop:{type:Boolean},showDays:{type:Boolean,required:!1,default:!0},showHours:{type:Boolean,required:!1,default:!0},showMinutes:{type:Boolean,required:!1,default:!0},showSeconds:{type:Boolean,required:!1,default:!0},labels:{type:Object,required:!1,default:function(){return{days:"Days",hours:"Hours",minutes:"Minutes",seconds:"Seconds"}}},countdownSize:{type:String,required:!1},labelSize:{type:String,required:!1}},data(){const e=t();return{now:Math.trunc((new Date).getTime()/1e3),date:null,interval:null,diff:0,show:!1,timeData:[{current:0,previous:0,label:this.labels.days,elementId:"flip-card-days-"+e,show:this.showDays},{current:0,previous:0,label:this.labels.hours,elementId:"flip-card-hours-"+e,show:this.showHours},{current:0,previous:0,label:this.labels.minutes,elementId:"flip-card-minutes-"+e,show:this.showMinutes},{current:0,previous:0,label:this.labels.seconds,elementId:"flip-card-seconds-"+e,show:this.showSeconds}]}},created(){if(!this.deadline)throw new Error("Missing props 'deadline'");const t=this.deadline;if(this.date=Math.trunc(Date.parse(t.replace(/-/g,"/"))/1e3),!this.date)throw new Error("Invalid props value, correct the 'deadline'");this.interval=setInterval((()=>{this.now=Math.trunc((new Date).getTime()/1e3)}),1e3)},mounted(){0!==this.diff&&(this.show=!0)},computed:{seconds(){return Math.trunc(this.diff)%60},minutes(){return Math.trunc(this.diff/60)%60},hours(){return Math.trunc(this.diff/60/60)%24},days(){return Math.trunc(this.diff/60/60/24)}},watch:{deadline:function(t,e){const n=this.deadline;if(this.date=Math.trunc(Date.parse(n.replace(/-/g,"/"))/1e3),!this.date)throw new Error("Invalid props value, correct the 'deadline'")},now(t){this.diff=this.date-this.now,this.diff<=0||this.stop?(this.diff=0,this.updateTime(3,0)):this.updateAllCards()},diff(t){0===t&&(this.$emit("timeElapsed"),this.updateAllCards())}},filters:{twoDigits:t=>t.toString().length<=1?"0"+t.toString():t.toString()},methods:{updateAllCards(){this.updateTime(0,this.days),this.updateTime(1,this.hours),this.updateTime(2,this.minutes),this.updateTime(3,this.seconds)},updateTime(t,e){if(t>=this.timeData.length||void 0===e)return;window.requestAnimationFrame&&(this.frame=requestAnimationFrame(this.updateTime.bind(this)));const n=this.timeData[t],a=e<0?0:e,i=document.querySelector(`#${n.elementId}`);if(a!==n.current&&(n.previous=n.current,n.current=a,i&&(i.classList.remove("flip"),i.offsetWidth,i.classList.add("flip")),0===t)){const t=i.querySelectorAll("span b");if(t)for(let n of t){const t=n.classList[0];if(e/1e3>=1){if(!t.includes("-4digits")){const e=t+"-4digits";n.classList.add(e),n.classList.remove(t)}}else if(t.includes("-4digits")){const e=t.replace("-4digits","");n.classList.add(e),n.classList.remove(t)}}}}},beforeDestroy(){window.cancelAnimationFrame&&cancelAnimationFrame(this.frame)},destroyed(){clearInterval(this.interval)}};n(681);var i=function(t,e,n,a,i,r,o,s){var d,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),a&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),o?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},c._ssrRegister=d):i&&(d=s?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),d)if(c.functional){c._injectStyles=d;var l=c.render;c.render=function(t,e){return d.call(e),l(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,d):[d]}return{exports:t,options:c}}(e,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"container flip-clock"},[t._l(t.timeData,(function(n){return[null!==n?e("span",{directives:[{name:"show",rawName:"v-show",value:n.show,expression:"data.show"}],key:n.label,staticClass:"flip-clock__piece",attrs:{id:n.elementId}},[e("span",{staticClass:"flip-clock__card flip-card",style:t.countdownSize?`font-size:${t.countdownSize}`:""},[e("b",{staticClass:"flip-card__top"},[t._v(t._s(t._f("twoDigits")(n.current)))]),t._v(" "),e("b",{staticClass:"flip-card__bottom",attrs:{"data-value":t._f("twoDigits")(n.current)}}),t._v(" "),e("b",{staticClass:"flip-card__back",attrs:{"data-value":t._f("twoDigits")(n.previous)}}),t._v(" "),e("b",{staticClass:"flip-card__back-bottom",attrs:{"data-value":t._f("twoDigits")(n.previous)}})]),t._v(" "),e("span",{staticClass:"flip-clock__slot",style:t.labelSize?`font-size:${t.labelSize}`:""},[t._v(t._s(n.label))])]):t._e()]}))],2)}),[],!1,null,"b6b5360c",null);const r=i.exports})(),a})()));