https://shophalehouse.com/cdn/shop/t/19/assets/wavy-divider.js?v=156825487248658655041790136281

1import{Component}from"@theme/component";class WavyDividerComponent extends Component{requiredRefs=["svg"];connectedCallback(){super.connectedCallback(),this.#build(),this.#resizeObserver=new ResizeObserver(this.#handleResize),this.#resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#resizeObserver?.disconnect(),this.#rafId!==null&&cancelAnimationFrame(this.#rafId)}#resizeObserver=null;#lastWidth=0;#rafId=null;#handleResize=()=>{this.#rafId===null&&(this.#rafId=requestAnimationFrame(()=>{this.#rafId=null,!(Math.abs(this.clientWidth-this.#lastWidth)<1)&&this.#build()}))};#build(){const{svg}=this.refs,containerWidth=this.clientWidth||800;this.#lastWidth=containerWidth;const cycles=2,halfWavelength=containerWidth/cycles/2,totalHalfCycles=cycles*2,amplitude=this.clientWidth<=500?Math.max(6,containerWidth*.03):Math.max(6,containerWidth*.026),strokeWidth=2,height=Math.ceil(amplitude*2+strokeWidth),midY=height/2,topY=midY-amplitude,bottomY=midY+amplitude,segments=buildWaveSegments(halfWavelength,totalHalfCycles,k=>k%2===0?topY:bottomY),curvePath=segmentsToPath(segments),last=segments[segments.length-1],topFillPath=last?`M0,0 L${containerWidth},0 L${last.x1.toFixed(2)},${last.y1.toFixed(2)}${segmentsToReversedCommands(segments)} Z`:"";svg.setAttribute("viewBox",`0 0 ${containerWidth} ${height}`),svg.innerHTML=[`<rect x="0" y="0" width="${containerWidth}" height="${height}" fill="var(--wavy-divider-bottom, currentColor)"></rect>`,`<path d="${topFillPath}" fill="var(--wavy-divider-top, transparent)"></path>`,`<path d="${curvePath}" fill="none" stroke="var(--wavy-divider-outline)" stroke-width="${strokeWidth}" vector-effect="non-scaling-stroke"></path>`].join("")}}function buildWaveSegments(halfWavelength,totalHalfCycles,yAt){const segments=[];for(let h=1;h<=totalHalfCycles;h++){const x0=(h-1)*halfWavelength,x1=h*halfWavelength,y0=yAt(h-1),y1=yAt(h);segments.push({x0,y0,cx1:x0+halfWavelength/2,cy1:y0,cx2:x1-halfWavelength/2,cy2:y1,x1,y1})}return segments}function segmentsToPath(segments){const first=segments[0];if(!first)return"";let d=`M${first.x0.toFixed(2)},${first.y0.toFixed(2)}`;for(const s of segments)d+=` C${s.cx1.toFixed(2)},${s.cy1.toFixed(2)} ${s.cx2.toFixed(2)},${s.cy2.toFixed(2)} ${s.x1.toFixed(2)},${s.y1.toFixed(2)}`;return d}function segmentsToReversedCommands(segments){let d="";for(let i=segments.length-1;i>=0;i--){const s=segments[i];s&&(d+=` C${s.cx2.toFixed(2)},${s.cy2.toFixed(2)} ${s.cx1.toFixed(2)},${s.cy1.toFixed(2)} ${s.x0.toFixed(2)},${s.y0.toFixed(2)}`)}return d}customElements.get("wavy-divider")||customElements.define("wavy-divider",WavyDividerComponent);
2//# sourceMappingURL=/cdn/shop/t/19/assets/wavy-divider.js.map?v=156825487248658655041790136281