@pqina/flip
Version:
A Beautifully Animated Flip Clock
7 lines (6 loc) • 4.99 kB
JavaScript
/* eslint-disable */
/*
* @pqina/flip v1.8.3 - A Beautifully Animated Flip Clock
* Copyright (c) 2023 PQINA - https://pqina.nl/flip/
*/
!function(t){"use strict";var e,k;function r(t,e){for(var a=0;a<e.length;a++){var r=e[a];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}t&&(t.tick||(t.tick=[]),t.tick.push(["view","flip",(e=e||{},"function"==typeof Symbol&&Symbol.asyncIterator&&(Symbol.asyncIterator,0),k=function(t,e,a){return e&&r(t.prototype,e),a&&r(t,a),t},e.exports=function(t){function a(n){var t,e,o;n.isInitialValue()&&(n.root.textContent="",n.spacer=l.create("span","tick-flip-spacer"),n.root.appendChild(n.spacer),e=l.create("span","tick-flip-shadow-top tick-flip-shadow tick-flip-front"),t=l.create("span","tick-flip-shadow-bottom tick-flip-shadow tick-flip-back"),n.root.appendChild(e),n.root.appendChild(t),n.shadowCard=l.create("span","tick-flip-card-shadow"),n.root.appendChild(n.shadowCard)),n.spacer.textContent=n.value,n.isInitialValue()||l.visible(n.root)?((e=n.cards[n.cards.length-1])&&(e.waiting=!1,e.offset=s(),e.back=n.value),n.isInitialValue()&&((t=new h).back=n.value,t.offset=null,t.progress=1,n.root.insertBefore(t.root,n.root.firstChild),n.cards.push(t)),(e=new h).offset=null,e.progress=0,e.visual_progress=0,e.waiting=!0,e.front=n.value,e.rotate(0),n.root.insertBefore(e.root,n.root.firstChild),n.cards.push(e),n.animating||(n.animating=!0,o=r.getExtension(r.Type.EASING_FUNCTION,n.style.flipEasing),function t(){var a,r,e,i=n.cards.filter(function(t){return!t.done&&!t.waiting});0===i.length?n.animating=!1:(i.forEach(function(t){null!==t.offset&&(t.progress=(s()-t.offset)/n.style.flipDuration),1<=t.progress&&(t.progress=1,t.done=!0),t.visual_progress=o(t.progress)}),i.reverse().forEach(function(t,e){e=i[e-1];e&&t.visual_progress<=e.visual_progress&&(t.visual_progress=e.visual_progress+.01)}),i.reverse(),n.cards.forEach(function(t,e){var a=1-2*Math.abs(t.visual_progress-.5),r=1-(t.visual_progress-.5)/.5,a=(t.shadowFront=a,t.highlightBack=r,n.cards[e+1]);a&&.5<t.visual_progress&&0<t.visual_progress&&(t.shadowBack=f(a.visual_progress))}),i.forEach(function(t,e){var a=t.visual_progress;.5<a&&!t.done?t.root.style.zIndex=10+e:t.root.style.removeProperty("z-index"),t.rotate(-180*a)}),a=0,r=1,i.forEach(function(t){var e=Math.abs(t.visual_progress-.5);e<r&&(r=e,a=t.visual_progress)}),e=u(a<.5?a/.5:(1-a)/.5),n.shadowCard.style.opacity=e,l.transform(n.shadowCard,"scaleY",e),n.cards.filter(function(t){return t.done}).slice(0,-1).forEach(function(e){n.cards=n.cards.filter(function(t){return t!==e}),e.root.parentNode&&n.root.removeChild(e.root)}),requestAnimationFrame(t))}())):n.cards.forEach(function(t){t.back=n.value,t.front=n.value})}var l=t.DOM,r=(t.Animation.animate,t.Extension),s=t.Date.performance,t=t.View,i=t.rooter,n=t.destroyer,o=t.drawer,c=t.updater,p=t.styler,f=r.getExtension(r.Type.EASING_FUNCTION,"ease-out-cubic"),u=r.getExtension(r.Type.EASING_FUNCTION,"ease-out-sine"),h=(k(d,[{key:"rotate",value:function(t){this._front.style.transform="rotateX("+t+"deg)",this._back.style.transform="rotateX("+(-180+t)+"deg)"}},{key:"root",get:function(){return this._root}},{key:"front",set:function(t){this._frontValue=t,this._textFront.textContent=t},get:function(){return this._frontValue}},{key:"back",set:function(t){this._backValue=t,this._textBack.textContent=t},get:function(){return this._backValue}},{key:"highlightBack",set:function(t){this._highlightBack.style.opacity=t}},{key:"shadowBack",set:function(t){this._shadowBack.style.opacity=t}},{key:"shadowFront",set:function(t){this._shadowFront.style.opacity=t}}]),d);function d(){if(!(this instanceof d))throw new TypeError("Cannot call a class as a function");this._root=l.create("span","tick-flip-card");var t=l.create("span","tick-flip-panel-front tick-flip-front tick-flip-panel"),e=l.create("span","tick-flip-panel-front-text"),a=l.create("span","tick-flip-panel-text-wrapper"),r=(e.appendChild(a),l.create("span","tick-flip-panel-front-shadow")),e=(t.appendChild(e),t.appendChild(r),l.create("span","tick-flip-panel-back tick-flip-back tick-flip-panel")),i=l.create("span","tick-flip-panel-back-text"),n=l.create("span","tick-flip-panel-text-wrapper"),o=(i.appendChild(n),l.create("span","tick-flip-panel-back-highlight")),s=l.create("span","tick-flip-panel-back-shadow");e.appendChild(i),e.appendChild(o),e.appendChild(s),this._root.appendChild(t),this._root.appendChild(e),this._front=t,this._back=e,this._shadowFront=r,this._shadowBack=s,this._highlightBack=o,this._textBack=n,this._textFront=a,this._frontValue=null,this._backValue=null}return function(t){var e={cards:[],lastCard:null,initialCard:null,shadowAbove:null,shadowBelow:null,shadowCard:null,currentValue:null,lastValue:null,front:null,back:null};return Object.assign({},i(e,t,"flip"),c(e),p(e,{flipDuration:800,flipEasing:"ease-out-bounce"}),o(e,a),n(e))}},e.exports.identifier={name:"flip",type:"view"},e.exports)]))}(window.jQuery);