amotify/dist/fn/Effect/Ripple.js

UI Component for React,NextJS,esbuild

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