@fiddle-digital/string-tune 1.1.1 → 1.1.2

package/dist/index.cjs

@@ -20,5 +20,5 @@
       div[data-dir][data-val]::before {
         content: attr(data-dir) ' Top: ' attr(data-val) 'px';
       }
-    `,document.head.appendChild(t),this.displayElement=e}};function Yt(l,e){let t=null;return function(...r){let i=this;t&&clearTimeout(t),t=setTimeout(()=>{l.apply(i,r),t=null},e)}}var Pt=class{constructor(){this.fps=0;this.isAnimationStarted=!1;this.fpsInterval=0;this.then=0;this.requestAnimationId=0;this.onFrameCallback=e=>{};this.animate=()=>{};this.onVisibilityChangeBind=this.onVisibilityChange.bind(this)}onVisibilityChange(){document.hidden?(this.stop(),this.isAnimationStarted=!1):this.start(this.fps)}start(e){this.fps=e,!this.isAnimationStarted&&(this.fpsInterval=1e3/e,this.then=performance.now(),this.isAnimationStarted=!0,e===0?this.animate=()=>{let t=performance.now();this.requestAnimationId=requestAnimationFrame(()=>this.animate()),this.onFrameCallback(t)}:this.animate=()=>{let t=performance.now(),r=t-this.then;r>this.fpsInterval&&(this.then=t-r%this.fpsInterval,this.onFrameCallback(t)),this.requestAnimationId=requestAnimationFrame(()=>this.animate())},this.animate())}stop(){this.isAnimationStarted&&(cancelAnimationFrame(this.requestAnimationId),this.requestAnimationId=0,this.isAnimationStarted=!1)}setOnFrame(e){this.onFrameCallback=e}destructor(){this.stop()}};var It=class extends g{constructor(e){super(e),this.htmlKey="autoplay",this.attributesToMap=[...this.attributesToMap,{key:"src",type:"string",fallback:""}]}onObjectConnected(e){e.setProperty("onEnterEvent",this.onEnterObject.bind(this)),e.events.on("enter",e.getProperty("onEnterEvent")),e.setProperty("onLeaveEvent",this.onLeaveObject.bind(this)),e.events.on("leave",e.getProperty("onLeaveEvent"));let t=e.htmlElement,r=this.tools.domAttribute.process({element:t,key:"string-started",fallback:null})!==null;t.tagName.toLowerCase()==="video"&&!r&&(t.setAttribute("string-started",""),t.muted=!0,t.setAttribute("muted","muted"),t.setAttribute("playsinline",""),t.setAttribute("loop",""),t.setAttribute("autoplay",""),t.src=e.getProperty("src"),t.load(),t.addEventListener("canplay",()=>{}))}onEnterObject(e){let t=e.htmlElement;this.tryPlay(t)}onLeaveObject(e){e.htmlElement.pause()}tryPlay(e){e.play().catch(t=>console.warn("[StringVideoAutoplay] Autoplay failed:",t))}};var Ft=class l{constructor(){this.prevWidth=0;this.prevHeight=0;this.loop=new Pt;this.debouncedResize=Yt(this.onResize,30);this.root=document.body,this.window=window,this.tools=new lt,this.data=new R,this.eventManager=new I,this.moduleManager=new Q(this.data),this.objectManager=new G(this.data,this.moduleManager,this.eventManager),this.context={events:this.eventManager,data:this.data,tools:this.tools,settings:{}},this.cursorController=new K(1,this.context),this.scrollManager=new et(this.context),this.setupSettings({"offset-top":"0%","offset-bottom":"0%",key:"--progress","inview-top":"0%","inview-bottom":"0%","enter-el":"top","enter-vp":"bottom","exit-el":"bottom","exit-vp":"top","parallax-bias":"0.0",parallax:"0.2",lerp:"0.2",radius:"150",strength:"0.3",glide:"1",anchor:"center center",timeout:900,alignment:"center","target-disable":"false","target-style-disable":"false","target-class":"",active:"false",fixed:"false",repeat:"false","self-disable":"false",abs:"false",easing:"cubic-bezier(0.25, 0.25, 0.25, 0.25)","glide-base-velocity":.00125,"glide-reduce-velocity":625e-7,"glide-negative-velocity":-1e-4}),this.onWheelBind=this.onWheelEvent.bind(this),this.onScrollBind=this.onScrollEvent.bind(this),this.onResizeBind=this.onResize.bind(this),this.onMouseMoveBind=this.onMouseMoveEvent.bind(this),this.onScrollStartBind=this.onScrollStart.bind(this),this.onScrollStopBind=this.onScrollStop.bind(this),this.onDirectionChangeBind=this.onDirectionChange.bind(this),this.scrollManager.bindEvents({onScrollStart:this.onScrollStartBind,onScrollStop:this.onScrollStopBind,onDirectionChange:this.onDirectionChangeBind}),this.loop.setOnFrame(e=>{this.data.time.delta=e-this.data.time.now,this.data.time.previous=this.data.time.now,this.data.time.now=e,this.data.time.elapsed+=this.data.time.delta,this.onUpdateEvent()}),this.on("image:load:all",()=>{this.onResize()}),this.scrollContainer=window}set scrollPosition(e){this.data.scroll.current=e,this.data.scroll.target=e,this.data.scroll.delta=0,this.data.scroll.lerped=0,this.scrollManager.updatePosition()}set scrollContainer(e){e instanceof Window?(this.data.scroll.container=document.body,this.data.scroll.elementContainer=document.documentElement,this.data.scroll.scrollContainer=e):e instanceof HTMLElement?(this.data.scroll.container=e,this.data.scroll.elementContainer=e,this.data.scroll.scrollContainer=e):(this.data.scroll.container=document.body,this.data.scroll.elementContainer=document.documentElement,this.data.scroll.scrollContainer=e),this.debouncedResize()}get speed(){return this.data.scroll.current}set speed(e){this.data.scroll.speed=e}set speedAccelerate(e){this.data.scroll.speedAccelerate=.1+(.5-.1)*e}set scrollDesktopMode(e){this.scrollManager.setDesktopMode(e)}set scrollMobileMode(e){this.scrollManager.setMobileMode(e)}static getInstance(){return l.i||(l.i=new l),l.i}reuse(e){return this.moduleManager.find(e)}use(e,t=null){let r={...this.context.settings,...t},i=new e({events:this.eventManager,data:this.data,tools:this.tools,settings:r});this.moduleManager.register(i)}on(e,t,r=""){this.eventManager.on(e,t,r)}off(e,t,r=""){this.eventManager.off(e,t,r)}addScrollMark(e){this.scrollManager.addScrollMark(e)}removeScrollMark(e){this.scrollManager.removeScrollMark(e)}start(e){this.data.scroll.scrollContainer?.addEventListener("scroll",this.onScrollBind),this.data.scroll.container?.addEventListener("wheel",this.onWheelBind,{passive:!1}),window.addEventListener("resize",this.onResizeBind),this.root.addEventListener("mousemove",this.onMouseMoveBind),new ResizeObserver(()=>{this.debouncedResize()}).observe(this.context.data.scroll.container);let r=new MutationObserver((n,a)=>{for(let p of n)p.type==="attributes"&&(p.attributeName==="style"||p.attributeName==="class")&&this.onResize()}),i={attributes:!0,attributeFilter:["style","class"]};r.observe(this.context.data.scroll.container,i),this.use(mt);let o=window.getComputedStyle(document.documentElement).fontSize,s=parseFloat(o);this.context.data.viewport.baseRem=s,document.documentElement.classList.add("-string"),this.moduleManager.onInit(),this.onResize(),this.initObjects(),this.objectManager.observeDOM(),this.loop.start(e),this.eventManager.emit("start",null)}initObjects(){document.querySelectorAll("[string],[data-string]").forEach(e=>{this.objectManager.add(e)}),document.querySelectorAll("[string-copy-from],[data-string-copy-from]").forEach(e=>{let t=this.tools.domAttribute.process({element:e,key:"copy-from",fallback:""});t&&t.length>0&&this.objectManager.enqueueConnection(t,e)}),this.moduleManager.onResize(),this.moduleManager.onScroll(),this.moduleManager.onFrame()}setupSettings(e){this.context.settings={...this.context.settings,...e},this.onSettingsChange()}onMouseMoveEvent(e){this.cursorController.onMouseMove(e),this.moduleManager.onMouseMove(e)}onWheelEvent(e){e.target.closest("[string-isolation]")==null&&(this.scrollManager.get().onWheel(e),this.moduleManager.onWheel(e))}onScrollStart(){this.moduleManager.onScrollStart()}onScrollStop(){this.moduleManager.onScrollStop()}onDirectionChange(){this.moduleManager.onDirectionChange()}onSettingsChange(){this.cursorController.onSettingsChange(),this.objectManager.onSettingsChange(),this.moduleManager.onSettingsChange()}onScrollEvent(e){return e.preventDefault(),this.scrollManager.get().onScroll(e),this.moduleManager.onScroll(),this.eventManager.emit("lerp",this.data.scroll.lerped),this.eventManager.emit("scroll",this.data.scroll.current),!1}onUpdateEvent(){this.cursorController.onFrame(),this.scrollManager.get().onFrame(),this.moduleManager.onFrame(),this.eventManager.emit("update",null)}onResize(){let e=this.data.scroll.container,t=this.context.data.scroll,r=0,i=0;var o,s=0;let n=e.getBoundingClientRect();e.tagName=="BODY"?(r=window.innerWidth,i=window.innerHeight):(r=n.width,i=n.height),s=n.top,o=t.container.scrollHeight;let a=this.tools.transformScaleParser.process({value:window.getComputedStyle(e).transform});this.context.data.viewport.transformScale=a;let p=r>1080,u=this.prevWidth!==r,c=this.prevHeight!==i,d=this.context.data.viewport.contentHeight!==o,m=u||p&&c||d;this.context.data.scroll.topPosition=s,this.context.data.viewport.contentWidth=r,this.context.data.viewport.contentHeight=o,this.prevWidth=r,this.prevHeight=i,this.context.data.viewport.windowWidth=r,this.context.data.viewport.windowHeight=i;let f=window.getComputedStyle(document.documentElement).fontSize,h=parseFloat(f);this.context.data.viewport.baseRem=h*a,t.bottomPosition=this.context.data.viewport.contentHeight-i,m&&(this.context.data.scroll.container.scrollTop>0&&(this.context.data.scroll.current=this.context.data.scroll.container.scrollTop,this.context.data.scroll.target=this.context.data.scroll.container.scrollTop,this.context.data.scroll.transformedCurrent=this.context.data.scroll.current*this.context.data.viewport.transformScale),this.scrollManager.updateResponsiveMode(),this.moduleManager.onResize(),this.onSettingsChange(),this.moduleManager.onScroll(),this.moduleManager.onFrame())}destroy(){this.data.scroll.scrollContainer?.removeEventListener("scroll",this.onScrollBind),this.data.scroll.container?.removeEventListener("wheel",this.onScrollBind),this.window.removeEventListener("resize",this.onResizeBind),this.root.removeEventListener("mousemove",this.onMouseMoveBind),this.loop.stop(),this.moduleManager.destroy(),this.eventManager.clearAll()}};0&&(module.exports={StringAnchor,StringCursor,StringData,StringDelayLerpTracker,StringFPSTracker,StringGlide,StringLazy,StringLerp,StringLerpTracker,StringLoading,StringMagnetic,StringModule,StringObject,StringParallax,StringPositionTracker,StringProgress,StringResponsive,StringScrollbar,StringSplit,StringTune,StringVideoAutoplay});
+    `,document.head.appendChild(t),this.displayElement=e}};function Yt(l,e){let t=null;return function(...r){let i=this;t&&clearTimeout(t),t=setTimeout(()=>{l.apply(i,r),t=null},e)}}var Pt=class{constructor(){this.fps=0;this.isAnimationStarted=!1;this.fpsInterval=0;this.then=0;this.requestAnimationId=0;this.onFrameCallback=e=>{};this.animate=()=>{};this.onVisibilityChangeBind=this.onVisibilityChange.bind(this)}onVisibilityChange(){document.hidden?(this.stop(),this.isAnimationStarted=!1):this.start(this.fps)}start(e){this.fps=e,!this.isAnimationStarted&&(this.fpsInterval=1e3/e,this.then=performance.now(),this.isAnimationStarted=!0,e===0?this.animate=()=>{let t=performance.now();this.requestAnimationId=requestAnimationFrame(()=>this.animate()),this.onFrameCallback(t)}:this.animate=()=>{let t=performance.now(),r=t-this.then;r>this.fpsInterval&&(this.then=t-r%this.fpsInterval,this.onFrameCallback(t)),this.requestAnimationId=requestAnimationFrame(()=>this.animate())},this.animate())}stop(){this.isAnimationStarted&&(cancelAnimationFrame(this.requestAnimationId),this.requestAnimationId=0,this.isAnimationStarted=!1)}setOnFrame(e){this.onFrameCallback=e}destructor(){this.stop()}};var It=class extends g{constructor(e){super(e),this.htmlKey="autoplay",this.attributesToMap=[...this.attributesToMap,{key:"src",type:"string",fallback:""}]}onObjectConnected(e){e.setProperty("onEnterEvent",this.onEnterObject.bind(this)),e.events.on("enter",e.getProperty("onEnterEvent")),e.setProperty("onLeaveEvent",this.onLeaveObject.bind(this)),e.events.on("leave",e.getProperty("onLeaveEvent"));let t=e.htmlElement,r=this.tools.domAttribute.process({element:t,key:"string-started",fallback:null})!==null;t.tagName.toLowerCase()==="video"&&!r&&(t.setAttribute("string-started",""),t.muted=!0,t.setAttribute("muted","muted"),t.setAttribute("playsinline",""),t.setAttribute("loop",""),t.setAttribute("autoplay",""),t.src=e.getProperty("src"),t.load(),t.addEventListener("canplay",()=>{}))}onEnterObject(e){let t=e.htmlElement;this.tryPlay(t)}onLeaveObject(e){e.htmlElement.pause()}tryPlay(e){e.play().catch(t=>console.warn("[StringVideoAutoplay] Autoplay failed:",t))}};var Ft=class l{constructor(){this.prevWidth=0;this.prevHeight=0;this.loop=new Pt;this.debouncedResize=Yt(this.onResize,30);this.root=document.body,this.window=window,this.tools=new lt,this.data=new R,this.eventManager=new I,this.moduleManager=new Q(this.data),this.objectManager=new G(this.data,this.moduleManager,this.eventManager),this.context={events:this.eventManager,data:this.data,tools:this.tools,settings:{}},this.cursorController=new K(1,this.context),this.scrollManager=new et(this.context),this.setupSettings({"offset-top":"0%","offset-bottom":"0%",key:"--progress","inview-top":"0%","inview-bottom":"0%","enter-el":"top","enter-vp":"bottom","exit-el":"bottom","exit-vp":"top","parallax-bias":"0.0",parallax:"0.2",lerp:"0.2",radius:"150",strength:"0.3",glide:"1",anchor:"center center",timeout:900,alignment:"center","target-disable":"false","target-style-disable":"false","target-class":"",active:"false",fixed:"false",repeat:"false","self-disable":"false",abs:"false",easing:"cubic-bezier(0.25, 0.25, 0.25, 0.25)","glide-base-velocity":.00125,"glide-reduce-velocity":625e-7,"glide-negative-velocity":-1e-4}),this.onWheelBind=this.onWheelEvent.bind(this),this.onScrollBind=this.onScrollEvent.bind(this),this.onResizeBind=this.onResize.bind(this),this.onMouseMoveBind=this.onMouseMoveEvent.bind(this),this.onScrollStartBind=this.onScrollStart.bind(this),this.onScrollStopBind=this.onScrollStop.bind(this),this.onDirectionChangeBind=this.onDirectionChange.bind(this),this.scrollManager.bindEvents({onScrollStart:this.onScrollStartBind,onScrollStop:this.onScrollStopBind,onDirectionChange:this.onDirectionChangeBind}),this.loop.setOnFrame(e=>{this.data.time.delta=e-this.data.time.now,this.data.time.previous=this.data.time.now,this.data.time.now=e,this.data.time.elapsed+=this.data.time.delta,this.onUpdateEvent()}),this.on("image:load:all",()=>{this.onResize()}),this.scrollContainer=window}set scrollPosition(e){this.data.scroll.current=e,this.data.scroll.target=e,this.data.scroll.delta=0,this.data.scroll.lerped=0,this.scrollManager.updatePosition()}set scrollContainer(e){e instanceof Window?(this.data.scroll.container=document.body,this.data.scroll.elementContainer=document.documentElement,this.data.scroll.scrollContainer=e):e instanceof HTMLElement?(this.data.scroll.container=e,this.data.scroll.elementContainer=e,this.data.scroll.scrollContainer=e):(this.data.scroll.container=document.body,this.data.scroll.elementContainer=document.documentElement,this.data.scroll.scrollContainer=e),this.debouncedResize()}get speed(){return this.data.scroll.current}set speed(e){this.data.scroll.speed=e}set speedAccelerate(e){this.data.scroll.speedAccelerate=.1+(.5-.1)*e}set scrollDesktopMode(e){this.scrollManager.setDesktopMode(e)}set scrollMobileMode(e){this.scrollManager.setMobileMode(e)}static getInstance(){return l.i||(l.i=new l),l.i}reuse(e){return this.moduleManager.find(e)}use(e,t=null){let r={...this.context.settings,...t},i=new e({events:this.eventManager,data:this.data,tools:this.tools,settings:r});this.moduleManager.register(i)}on(e,t,r=""){this.eventManager.on(e,t,r)}off(e,t,r=""){this.eventManager.off(e,t,r)}addScrollMark(e){this.scrollManager.addScrollMark(e)}removeScrollMark(e){this.scrollManager.removeScrollMark(e)}start(e){this.data.scroll.scrollContainer?.addEventListener("scroll",this.onScrollBind),this.data.scroll.container?.addEventListener("wheel",this.onWheelBind,{passive:!1}),window.addEventListener("resize",this.onResizeBind),this.root.addEventListener("mousemove",this.onMouseMoveBind),new ResizeObserver(()=>{this.debouncedResize()}).observe(this.context.data.scroll.container);let r=new MutationObserver((n,a)=>{for(let p of n)p.type==="attributes"&&(p.attributeName==="style"||p.attributeName==="class")&&this.onResize()}),i={attributes:!0,attributeFilter:["style","class"]};r.observe(this.context.data.scroll.container,i),this.use(mt);let o=window.getComputedStyle(document.documentElement).fontSize,s=parseFloat(o);this.context.data.viewport.baseRem=s,document.documentElement.classList.add("-string"),this.moduleManager.onInit(),this.onResize(),this.initObjects(),this.objectManager.observeDOM(),this.loop.start(e),this.eventManager.emit("start",null)}initObjects(){document.querySelectorAll("[string],[data-string]").forEach(e=>{this.objectManager.add(e)}),document.querySelectorAll("[string-copy-from],[data-string-copy-from]").forEach(e=>{let t=this.tools.domAttribute.process({element:e,key:"copy-from",fallback:""});t&&t.length>0&&this.objectManager.enqueueConnection(t,e)}),this.moduleManager.onResize(),this.moduleManager.onScroll(),this.moduleManager.onFrame()}setupSettings(e){this.context.settings={...this.context.settings,...e},this.onSettingsChange()}onMouseMoveEvent(e){this.cursorController.onMouseMove(e),this.moduleManager.onMouseMove(e)}onWheelEvent(e){e.target.closest("[string-isolation],[data-string-isolation]")==null&&(this.scrollManager.get().onWheel(e),this.moduleManager.onWheel(e))}onScrollStart(){this.moduleManager.onScrollStart()}onScrollStop(){this.moduleManager.onScrollStop()}onDirectionChange(){this.moduleManager.onDirectionChange()}onSettingsChange(){this.cursorController.onSettingsChange(),this.objectManager.onSettingsChange(),this.moduleManager.onSettingsChange()}onScrollEvent(e){return e.preventDefault(),this.scrollManager.get().onScroll(e),this.moduleManager.onScroll(),this.eventManager.emit("lerp",this.data.scroll.lerped),this.eventManager.emit("scroll",this.data.scroll.current),!1}onUpdateEvent(){this.cursorController.onFrame(),this.scrollManager.get().onFrame(),this.moduleManager.onFrame(),this.eventManager.emit("update",null)}onResize(){let e=this.data.scroll.container,t=this.context.data.scroll,r=0,i=0;var o,s=0;let n=e.getBoundingClientRect();e.tagName=="BODY"?(r=window.innerWidth,i=window.innerHeight):(r=n.width,i=n.height),s=n.top,o=t.container.scrollHeight;let a=this.tools.transformScaleParser.process({value:window.getComputedStyle(e).transform});this.context.data.viewport.transformScale=a;let p=r>1080,u=this.prevWidth!==r,c=this.prevHeight!==i,d=this.context.data.viewport.contentHeight!==o,m=u||p&&c||d;this.context.data.scroll.topPosition=s,this.context.data.viewport.contentWidth=r,this.context.data.viewport.contentHeight=o,this.prevWidth=r,this.prevHeight=i,this.context.data.viewport.windowWidth=r,this.context.data.viewport.windowHeight=i;let f=window.getComputedStyle(document.documentElement).fontSize,h=parseFloat(f);this.context.data.viewport.baseRem=h*a,t.bottomPosition=this.context.data.viewport.contentHeight-i,m&&(this.context.data.scroll.container.scrollTop>0&&(this.context.data.scroll.current=this.context.data.scroll.container.scrollTop,this.context.data.scroll.target=this.context.data.scroll.container.scrollTop,this.context.data.scroll.transformedCurrent=this.context.data.scroll.current*this.context.data.viewport.transformScale),this.scrollManager.updateResponsiveMode(),this.moduleManager.onResize(),this.onSettingsChange(),this.moduleManager.onScroll(),this.moduleManager.onFrame())}destroy(){this.data.scroll.scrollContainer?.removeEventListener("scroll",this.onScrollBind),this.data.scroll.container?.removeEventListener("wheel",this.onScrollBind),this.window.removeEventListener("resize",this.onResizeBind),this.root.removeEventListener("mousemove",this.onMouseMoveBind),this.loop.stop(),this.moduleManager.destroy(),this.eventManager.clearAll()}};0&&(module.exports={StringAnchor,StringCursor,StringData,StringDelayLerpTracker,StringFPSTracker,StringGlide,StringLazy,StringLerp,StringLerpTracker,StringLoading,StringMagnetic,StringModule,StringObject,StringParallax,StringPositionTracker,StringProgress,StringResponsive,StringScrollbar,StringSplit,StringTune,StringVideoAutoplay});
 //# sourceMappingURL=index.cjs.map