You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2 lines
2.7 KiB
2 lines
2.7 KiB
const g={event:"mousedown",transition:400},w={beforeMount:(e,t)=>{if(t.value===!1)return;const o=e.getAttribute("ripple-background");Y(Object.keys(t.modifiers),g);const n=o||w.background,r=w.zIndex;e.addEventListener(g.event,l=>{X({event:l,el:e,background:n,zIndex:r})})},updated(e,t){var n,r;if(!t.value){(n=e==null?void 0:e.clearRipple)==null||n.call(e);return}const o=e.getAttribute("ripple-background");(r=e==null?void 0:e.setBackground)==null||r.call(e,o)}};function X({event:e,el:t,zIndex:o,background:n}){var E,L;const r=parseInt(getComputedStyle(t).borderWidth.replace("px","")),l=e.clientX||e.touches[0].clientX,R=e.clientY||e.touches[0].clientY,T=t.getBoundingClientRect(),{left:$,top:N}=T,{offsetWidth:h,offsetHeight:b}=t,{transition:C}=g,p=l-$,u=R-N,v=Math.max(p,h-p),x=Math.max(u,b-u),j=window.getComputedStyle(t),m=Math.sqrt(v*v+x*x),y=r>0?r:0,a=document.createElement("div"),s=document.createElement("div");a.className="ripple",Object.assign((E=a.style)!=null?E:{},{marginTop:"0px",marginLeft:"0px",width:"1px",height:"1px",transition:`all ${C}ms cubic-bezier(0.4, 0, 0.2, 1)`,borderRadius:"50%",pointerEvents:"none",position:"relative",zIndex:o!=null?o:"9999",backgroundColor:n!=null?n:"rgba(0, 0, 0, 0.12)"}),s.className="ripple-container",Object.assign((L=s.style)!=null?L:{},{position:"absolute",left:`${0-y}px`,top:`${0-y}px`,height:"0",width:"0",pointerEvents:"none",overflow:"hidden"});const f=t.style.position.length>0?t.style.position:getComputedStyle(t).position;f!=="relative"&&(t.style.position="relative"),s.appendChild(a),t.appendChild(s),Object.assign(a.style,{marginTop:`${u}px`,marginLeft:`${p}px`});const{borderTopLeftRadius:k,borderTopRightRadius:B,borderBottomLeftRadius:O,borderBottomRightRadius:M}=j;Object.assign(s.style,{width:`${h}px`,height:`${b}px`,direction:"ltr",borderTopLeftRadius:k,borderTopRightRadius:B,borderBottomLeftRadius:O,borderBottomRightRadius:M}),setTimeout(()=>{var d;const i=`${m*2}px`;Object.assign((d=a.style)!=null?d:{},{width:i,height:i,marginLeft:`${p-m}px`,marginTop:`${u-m}px`})},0);function c(){setTimeout(()=>{a.style.backgroundColor="rgba(0, 0, 0, 0)"},250),setTimeout(()=>{var i;(i=s==null?void 0:s.parentNode)==null||i.removeChild(s)},850),t.removeEventListener("mouseup",c,!1),t.removeEventListener("mouseleave",c,!1),t.removeEventListener("dragstart",c,!1),setTimeout(()=>{let i=!0;for(let d=0;d<t.childNodes.length;d++)t.childNodes[d].className==="ripple-container"&&(i=!1);i&&(t.style.position=f!=="static"?f:"")},g.transition+260)}e.type==="mousedown"?(t.addEventListener("mouseup",c,!1),t.addEventListener("mouseleave",c,!1),t.addEventListener("dragstart",c,!1)):c(),t.setBackground=i=>{i&&(a.style.backgroundColor=i)}}function Y(e,t){e.forEach(o=>{isNaN(Number(o))?t.event=o:t.transition=o})}export{w as default};
|