nodality/dist/KeyframeAnimation.cjs.js

A lightweight library for declarative UI elements.

/*! For license information please see KeyframeAnimation.cjs.js.LICENSE.txt */
(()=>{"use strict";var t={d:(e,i)=>{for(var a in i)t.o(i,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:i[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function i(t){return i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i(t)}function a(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,r(a.key),a)}}function n(t,e,i){return(e=r(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function r(t){var e=function(t){if("object"!=i(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var a=e.call(t,"string");if("object"!=i(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==i(e)?e:e+""}t.r(e),t.d(e,{KeyframeAnim:()=>s});var s=function(){return t=function t(e){var i=this;return function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),n(this,"scrollFunction",(function(){void 0===i.flagValue&&(i.flagValue=0);var t=(i.html.scrollTop-i.flagValue)/(i.html.scrollHeight-window.innerHeight)*16,e=Math.min(i.frameCount-1,Math.ceil(t*i.frameCount));isNaN(e)&&(e=1),e<0&&(e=0),i.data.limit?e<i.data.limit&&requestAnimationFrame((function(){return i.updateImage(e+1)})):requestAnimationFrame((function(){return i.updateImage(e+1)})),window.matchMedia("(max-device-width: 415px)")})),n(this,"currentFrame",(function(t){return"".concat(i.data.path).concat(t.toString().padStart(4,"0"),".").concat(i.data.extension)})),n(this,"preloadImages",(function(){for(var t=1;t<i.frameCount;t++)new Image,i.img.src=i.currentFrame(t)})),n(this,"updateImage",(function(t){i.img.src=i.currentFrame(t)})),this.fromFirstImageFlag=!1,this.flag=0,this.flagValue=e.flagValue,this.data=e,this.mask=e.mask,this.maskData=e.maskData,this.id=e.id,this.halfHeight=e.halfHeight,void 0===this.data.type?this.type="default":this.type=this.data.type,this.stickData=e.stickData,this.targetHeight=this.data.targetHeight,this.html=document.body,this.res=document.createElement("div"),this.res.setAttribute("id",this.data.id),this.res.style.border="1px solid green",this.res.style.width="100%",this.res.style.display="grid",this.res.style.position="sticky",this.res.style.top=0,this.res.style.alignSelf="flex-start",this.res.style.justifyContent="center",this.res.style.alignItems="center",this.data.added||(this.res.style.marginTop=this.data.noAddedDistance),this.frameCount=100,this.lastScrollTop=window.scrollY,this.setupTopElement(),this.scrollFunction(),window.addEventListener("scroll",(function(){i.scrollFunction()})),this.preloadImages(),this},e=[{key:"marginTop",value:function(t){return this.res.style.marginTop=t,this}},{key:"toCode",value:function(){return[""]}},{key:"drawImageProp",value:function(t,e,i,a,n,r,s,o){2===arguments.length&&(i=a=0,n=t.canvas.width,r=t.canvas.height),(s="number"==typeof s?s:.5)<0&&(s=0),(o="number"==typeof o?o:.5)<0&&(o=0),s>1&&(s=1),o>1&&(o=1);var l,c,d,h,u=e.width,m=e.height,y=Math.min(n/u,r/m),p=u*y,g=m*y,f=1;p<n&&(f=n/p),Math.abs(f-1)<1e-14&&g<r&&(f=r/g),(l=(u-(d=u/((p*=f)/n)))*s)<0&&(l=0),(c=(m-(h=m/((g*=f)/r)))*o)<0&&(c=0),d>u&&(d=u),h>m&&(h=m),console.log("WEIRD"),console.log(e),console.log(c),console.log(d),t.drawImage(e,l,c,d,h,i,a,n,r)}},{key:"maska",value:function(t){var e=this;return window.addEventListener("scroll",(function(){e.innerMask(t)})),this}},{key:"innerMask",value:function(t){if(t){var e=smartRange(window.scrollY,{min:t.start,max:t.end},{min:0,max:7}),i=smartRange(window.scrollY,{min:t.start,max:t.end},{min:37,max:37});this.res.style.clipPath="inset(".concat(e,"% ").concat(e,"% round 0 0 ").concat(i,"px ").concat(i,"px)")}}},{key:"setupTopElement",value:function(){var t=this;console.warn("TOP INIT");var e=document.createElement("canvas");if(e.style.gridArea="1/1",e.zIndex=1,e.style.display="grid",e.style.gridTemplate="1fr/1fr",e.style.justifyContent="center",e.style.alignItems="center",e.style.marginLeft="auto",e.style.marginRight="auto",this.context=e.getContext("2d"),this.context.canvas.width=window.innerWidth,this.context.canvas.height=1.2*window.innerHeight,this.img=new Image,this.img.onload=function(){t.data.halfHeight?t.drawImageProp(t.context,t.img,0,0,window.innerWidth,window.innerHeight/2):t.drawImageProp(t.context,t.img,0,0,window.innerWidth,1.2*window.innerHeight)},window.addEventListener("resize",(function(){t.context.canvas.width=window.innerWidth,t.context.canvas.height=1.2*window.innerHeight,t.drawImageProp(t.context,t.img,0,0,window.innerWidth,1.2*window.innerHeight)})),this.res.appendChild(e),this.data.text){var i=document.createElement("div");i.style.gridArea="1/1";var a=this.data.text.render();if(this.h2a=a,i.appendChild(a),i.setAttribute("id","rem"),this.data.hasRect){var n=document.createElement("div");n.style.width="30px",n.style.height="30px",n.style.backgroundColor="orange"}else for(var r=0;r<this.res.children.length;r++)"rem"===this.res.children[r].id&&this.res.removeChild(this.res.children[r]);this.res.appendChild(i)}this.lastScrollTop=0,this.count=1,this.isUp=!1,this.done=!1,this.fireOnce=!0,this.dec=1,this.tdec=1,this.atdec=0,this.textOpacity=1,this.res.children[this.res.children.length-1].children[0].style.opacity=0,this.data.text&&window.addEventListener("scroll",(function(){t.h2a.style.backgroundColor="rgba(0, 0, 0, 0.8)",t.h2a.style.opacity=1})),window.addEventListener("scroll",(function(e){if(t.data.stickyData&&t.data.stickyData.top){var i=t.data.stickyData.top;t.data.uncomment&&(window.scrollY>i?(wrapDiv.style.background="pink",wrapDiv.style.position="relative",wrapDiv.style.top=i):(wrapDiv.style.background="orange",wrapDiv.style.top=0,wrapDiv.style.position="fixed"))}var a=window.scrollY||document.documentElement.scrollTop;if(a>t.lastScrollTop?t.isUp=!1:t.isUp=!0,t.lastScrollTop=a<=0?0:a,t.isUp&&t.textOpacity<.98&&(t.textOpacity+=.01),!1===t.isUp&&t.textOpacity>.02&&(t.textOpacity-=.01),t.data.mask){var n=t.res,r=smartRange(window.scrollY,{min:t.data.maskData.start,max:t.data.maskData.end},{min:0,max:7});if(n.style.clipPath="inset(".concat(r,"% ").concat(r,"% round 20px)"),!t.hasH2){var s=document.createElement("div");s.style.background="#ecf0f1",s.style.width="86%",s.style.marginLeft="7%",s.style.borderRadius="1rem",t.hasH2=!0,s.appendChild(t.data.newSection.render()),n.parentElement.appendChild(s)}}t.data.targetHeight}))}},{key:"setLazyText",value:function(t){var e=this;return this.lazyText=t,window.addEventListener("scroll",(function(){for(var t=smartRange(window.scrollY,{min:e.lazyText.start,max:e.lazyText.end},{min:0,max:200}),i=smartRange(window.scrollY,{min:e.lazyText.start,max:e.lazyText.end},{min:0,max:1}),a=0;a<e.h2a.children[0].children.length;a++)console.log("P"),e.h2a.children[0].children[a].style.transform="matrix(1, 0, 0, 1, 0, -".concat(t,")"),e.h2a.children[0].children[a].style.opacity="".concat(i-.2*a)})),this}},{key:"setProps",value:function(t){return t.targetHeight&&(this.data.targetHeight=t.targetHeight),t.flagValue&&(this.flagValue=t.flagValue),this}},{key:"fixedToRelative",value:function(t){this.data.uncomment=t}},{key:"toSticky",value:function(){return this.res.style.position="sticky",this.res.style.top="0",this}},{key:"setOpacityRange",value:function(t){var e=this;return this.data.opacityRange=t.opacityRange,this.data.scaleRange=t.scaleRange,window.addEventListener("scroll",(function(){var t=smartRange(window.scrollY,{min:e.data.opacityRange.start,max:e.data.opacityRange.end},{min:0,max:1});e.h2a.style.opacity=t;var i=smartRange(window.scrollY,{min:e.data.scaleRange.start,max:e.data.scaleRange.end},{min:3,max:1});window.matchMedia("(max-device-width: 415px)").matches||(e.h2a.children[0].style.transform="scale(".concat(i,")"))})),this}},{key:"stick",value:function(t){return t?(t.offset&&(null!=this.data.stickyData?this.data.stickyData.top=t.offset:this.data.stickyData={top:t.offset}),t.value?this.makeSticky():this.noSticky(),this):(this.makeSticky(),this)}},{key:"to100vh",value:function(){this.res.style.height="100vh"}},{key:"makeSticky",value:function(){return this.res.style.position="sticky",this.res.style.top=0,this}},{key:"noSticky",value:function(){return this.res.style.position="",this}},{key:"toOpacity",value:function(t){this.res.style.opacity="".concat(t)}},{key:"render",value:function(t){if(!t)return this.res;document.querySelector(t).appendChild(this.res)}}],e&&a(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,e}();module.exports=e})();