amotify/dist/fn/Effect/Ripple.js

UI Component for React,NextJS,esbuild

import"../../chunk-C5N2D3ZX.js";import p,{UUID as D,Time as c}from"jmini";import{Config as E}from"../../@utils";import{EffectClasses as i}from"../../@styles/componentClasses";const n={RippleElementTag:'[data-effect-ripple="1"]',Start:t=>{let s=c().ms,u=t.target,e=p(u);if(!e[0])return;let o=e.getAttribute("data-effect-tone");if(!o){let l=e.parent('[data-effect-ripple="1"]');if(!l[0])return;e=l,o=l.getAttribute("data-effect-tone")}if(!o)return;let a="RippleWrap-"+D(),{left:r,top:f,height:y,width:v}=e.position(),{pageXOffset:h,pageYOffset:g}=p.getScreenSize(),{x:T,y:M}=p.getCursor(t),m=Math.min(v*1.5,300),I=Math.max(T-(r+h),0),w=Math.max(M-(f+g),0),d={RippleElement:e,startedAt:s,size:m};p(document).onEvent("mouseup",()=>{n.End(d)},{eventID:"RippleMouseUp"}).onEvent("touchend",()=>{setTimeout(()=>{n.End(d)},20)},{eventID:"RippleTouchEnd"}),p(e).addClass(i("RippleElement"),i("Color_"+o)).append(`<div class="${i("RippleWrap")}" id="${a}">
  <div class="${i("Wave")}" />
</div>`).onEvent("mouseout",l=>{n.End(d)},{eventID:"RippleMouseOut"}).find("#"+a).find("."+i("Wave")).css({left:I,top:w}).await(10).css({height:m,width:m,opacity:".3",transition:".25s"})},End:t=>{let{RippleElement:s,startedAt:u,size:e}=t,a=c().ms-u<=400?".75s":".55s",r=e*2.5;p(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),s.removeEvent(["RippleMouseOut"]).find("."+i("Wave")).css({height:r,width:r,opacity:"0",transition:a}).await(750).parent().callback(f=>{f.remove()})}},R={Wrapper:()=>(typeof window=="undefined"||p(E.get().appRoot).removeEvent(["RippleTouchStart","RippleMouseDown"]).onEvent("touchstart",t=>{n.Start(t)},{eventID:"RippleTouchStart",target:n.RippleElementTag}).onEvent("mousedown",t=>{E.get().isTouchDevice||n.Start(t)},{eventID:"RippleMouseDown",target:n.RippleElementTag}),null)};export{R as Ripple,R as default};