hypnagaga/packages/graphics-components/docs/assets/ScrollerBase-DJMKplMV.js

4 lines
5.9 KiB
JavaScript

import{p as l,f as te,a as oe}from"./props-b4vEeO_8.js";import{o as ie}from"./index-client-BAw8T8-V.js";import{J as ne,G as se,B as re,I as _,F as le,a3 as u,a4 as S,k as t,N as m}from"./runtime-C3rQLW--.js";import{s as J}from"./snippet-C5kbqVpq.js";import{a as V}from"./attributes-Cg6aLqN3.js";import{s as ae}from"./style-DvJ3IcV1.js";import{b as T}from"./this-CrUBQEQ_.js";import{b as de}from"./window-DXjFTZv5.js";const a=[];let B;if(typeof window<"u"){const i=()=>a.forEach(e=>e());window.addEventListener("scroll",i),window.addEventListener("resize",i)}if(typeof IntersectionObserver<"u"){const i=new Map,e=new IntersectionObserver(n=>{n.forEach(d=>{const s=i.get(d.target),r=a.indexOf(s);d.isIntersecting?r===-1&&a.push(s):(s(),r!==-1&&a.splice(r,1))})},{rootMargin:"400px 0px"});B={add:({outer:n,update:d})=>{const{top:s,bottom:r}=n.getBoundingClientRect();s<window.innerHeight&&r>0&&a.push(d),i.set(n,d),e.observe(n)},remove:({outer:n,update:d})=>{const s=a.indexOf(d);s!==-1&&a.splice(s,1),i.delete(n),e.unobserve(n)}}}else B={add:({update:i})=>{a.push(i)},remove:({update:i})=>{const e=a.indexOf(i);e!==-1&&a.splice(e,1)}};var ce=te("<svelte-scroller-outer><svelte-scroller-background-container><svelte-scroller-background><!></svelte-scroller-background></svelte-scroller-background-container> <svelte-scroller-foreground><!></svelte-scroller-foreground></svelte-scroller-outer>",2);function ue(i,e){re(e,!0);let n=l(e,"index",15,0),d=l(e,"count",15,0),s=l(e,"offset",15,0),r=l(e,"progress",15,0),W=l(e,"visible",15,!1),D=l(e,"top",3,0),K=l(e,"bottom",3,1),P=l(e,"threshold",3,.5),Q=l(e,"query",3,"div.step-foreground-container"),I=l(e,"parallax",3,!1),g,f,C,j,p=S(void 0),b=S(0),y=S(!1),v=0,E=S(1),k=m(()=>Math.round(D()*t(b))),U=m(()=>Math.round(K()*t(b))),H=m(()=>Math.round(P()*t(b))),X=m(()=>`
position: ${t(y)?"fixed":"absolute"};
transform: translate(0, ${v}px);
`),Y=m(()=>t(y)?`width:${t(E)}px;`:"");ie(()=>{u(p,f.querySelectorAll(Q()),!0),d(t(p).length),z();const o={outer:g,update:z};return B.add(o),()=>B.remove(o)});function z(){if(!f)return;const o=g.getBoundingClientRect();j=o.left,u(E,o.right-j);const c=f.getBoundingClientRect(),A=C.getBoundingClientRect();W(c.top<t(b)&&c.bottom>0);const O=c.bottom-c.top,L=A.bottom-A.top,R=t(U)-t(k);r((t(k)-c.top)/(O-R)),r()<=0?(v=0,u(y,!1)):r()>=1?(v=I()?O-L:O-R,u(y,!1)):(v=I()?Math.round(t(k)-r()*(L-R)):t(k),u(y,!0));for(let h=0;h<t(p).length;h++){const ee=t(p)[h],{top:N}=ee.getBoundingClientRect(),F=t(p)[h+1],G=F?F.getBoundingClientRect().top:c.bottom;if(s((t(H)-N)/(G-N)),G>=t(H)){n(h);break}}}var w=ce();V(w,1,"svelte-1ala0uj");var x=_(w);V(x,1,"background-container svelte-1ala0uj");var M=_(x);V(M,1,"svelte-1ala0uj");var Z=_(M);J(Z,()=>e.backgroundSnippet),T(M,o=>C=o,()=>C);var q=le(x,2);V(q,1,"svelte-1ala0uj");var $=_(q);J($,()=>e.foregroundSnippet),T(q,o=>f=o,()=>f),T(w,o=>g=o,()=>g),ne(()=>ae(x,`${t(X)??""}${t(Y)??""}`)),de("innerHeight",o=>u(b,o,!0)),oe(i,w),se()}ue.__docgen={data:[{name:"top",visibility:"public",description:"The vertical position that the top of the foreground must scroll past before the background becomes fixed, as a proportion of window height. **Value between 0 and 1.**",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0"},{name:"bottom",visibility:"public",description:"The inverse of top — once the bottom of the foreground passes this point, the background becomes unfixed. **Value between 0 and 1.**",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"1"},{name:"threshold",visibility:"public",description:"Once a section crosses this point, it becomes 'active'. **Value between 0 and 1.**",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"0.5"},{name:"query",visibility:"public",description:"A CSS selector that describes the individual sections of your foreground.",keywords:[],kind:"let",type:{kind:"type",type:"string",text:"string"},static:!1,readonly:!1,defaultValue:'"div.step-foreground-container"'},{name:"parallax",visibility:"public",description:"If `true`, the background will scroll such that the bottom edge reaches the bottom at the same time as the foreground. This effect can be unpleasant for people with high motion sensitivity, so use it advisedly.",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"false"},{name:"backgroundSnippet",visibility:"public",description:"The background snippet.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"foregroundSnippet",visibility:"public",description:"The foreground snippet.",keywords:[{name:"required",description:""}],kind:"let",type:{kind:"function",text:"Snippet<[]>"},static:!1,readonly:!1},{name:"index",visibility:"public",description:"The currently active section. **Bindable**",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"offset",visibility:"public",description:"How far the section has scrolled past the threshold, as a value between 0 and 1. **Bindable**.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"progress",visibility:"public",description:"How far the foreground has travelled, where 0 is the top of the foreground crossing top, and 1 is the bottom crossing bottom. **Bindable**.",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"count",visibility:"public",description:"Number of sections",keywords:[],kind:"let",type:{kind:"type",type:"number",text:"number"},static:!1,readonly:!1,defaultValue:"..."},{name:"visible",visibility:"public",description:"Whether the foreground is visible",keywords:[],kind:"let",type:{kind:"type",type:"boolean",text:"boolean"},static:!1,readonly:!1,defaultValue:"..."}],name:"ScrollerBase.svelte"};export{ue as S};