1 line
21 KiB
Plaintext
1 line
21 KiB
Plaintext
|
{"version":3,"file":"index.mjs","names":["isObject","keyCodes","stopSymbol","Symbol","DELAY_RIPPLE","transform","el","value","style","webkitTransform","isTouchEvent","e","constructor","name","isKeyboardEvent","calculate","arguments","length","undefined","localX","localY","offset","getBoundingClientRect","target","touches","clientX","left","clientY","top","radius","scale","_ripple","circle","clientWidth","center","Math","sqrt","clientHeight","centerX","centerY","x","y","ripples","show","enabled","container","document","createElement","animation","appendChild","className","class","size","width","height","computed","window","getComputedStyle","position","dataset","previousPosition","classList","add","activated","String","performance","now","setTimeout","remove","hide","getElementsByClassName","isHiding","diff","Number","delay","max","parentNode","removeChild","isRippleEnabled","rippleShow","element","currentTarget","touched","isTouch","centered","showTimerCommit","showTimer","rippleStop","rippleHide","clearTimeout","type","rippleCancelShow","keyboardRipple","keyboardRippleShow","keyCode","enter","space","keyboardRippleHide","focusRippleHide","updateRipple","binding","wasEnabled","modifiers","stop","addEventListener","passive","removeListeners","removeEventListener","mounted","unmounted","updated","oldValue","Ripple"],"sources":["../../../src/directives/ripple/index.ts"],"sourcesContent":["// Styles\nimport './VRipple.sass'\n\n// Utilities\nimport { isObject, keyCodes } from '@/util'\n\n// Types\nimport type {\n DirectiveBinding,\n} from 'vue'\n\nconst stopSymbol = Symbol('rippleStop')\n\ntype VuetifyRippleEvent = (MouseEvent | TouchEvent | KeyboardEvent) & { [stopSymbol]?: boolean }\n\nconst DELAY_RIPPLE = 80\n\nfunction transform (el: HTMLElement, value: string) {\n el.style.transform = value\n el.style.webkitTransform = value\n}\n\ninterface RippleOptions {\n class?: string\n center?: boolean\n circle?: boolean\n}\n\nexport interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {\n value?: boolean | { class: string }\n modifiers: {\n center?: boolean\n circle?: boolean\n stop?: boolean\n }\n}\n\nfunction isTouchEvent (e: VuetifyRippleEvent): e is TouchEvent {\n return e.constructor.name === 'TouchEvent'\n}\n\nfunction isKeyboardEvent (e: VuetifyRippleEvent): e is KeyboardEvent {\n return e.constructor.name === 'KeyboardEvent'\n}\n\nconst calculate = (\n e: VuetifyRippleEvent,\n el: HTMLElement,\n value: RippleOptions = {}\n) => {\n let localX = 0\n let localY = 0\n\n if (!isKeyboardEvent(e)) {\n const offset = el.getBoundingClientRect()\n const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e\n\n localX = target.clientX - offset.left\n localY = target.clientY - offset.top\n }\n\n let radius = 0\n let scale = 0.3\n if (el._ripple?.circle) {\n scale = 0.15\n radius = el.clientWidth / 2\n radius = value.center ? radius : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4\n } else {\n radius = Math.sqrt(el.clientWidth ** 2 + el.clientHeight ** 2) / 2\n }\n\n const centerX = `${(el.clientWidth - (radius * 2)) / 2}px`\n const centerY = `${(el.clientHeight - (radius * 2)) / 2}px`\n\n const x = value.center ? centerX : `${localX - radius}px`\n const y = value.center ? centerY : `${localY - radius}px`\n\n return { radius, scale, x, y, centerX, centerY }\n}\n\nconst ripples = {\n /* eslint-disable max-statements */\n show (\n e: VuetifyRippleEvent,\n el: HTMLElement,\n value: RippleOptions = {}\n ) {\n if (!el?._ripple?.enabled) {\n return\n }\n\n const container = document.createElement('span')\n const animation = document.createElement('span')\n\n container.appendChild(animation)\n container.className = 'v-ripple__container'\n\n if (value.class) {\n container.className += ` ${value.class}`\n }\n\n const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value)\n\n const size = `${radius * 2}px`\n animation.className = 'v-ripple__animation'
|