1 line
9.6 KiB
Plaintext
1 line
9.6 KiB
Plaintext
{"version":3,"sources":["webpack:///./src/components/ripple.ts"],"names":["rippleClickId","ripple","elem","callback","Promise","resolve","onEnd","prepend","querySelector","classList","add","r","document","createElement","handler","contains","drawRipple","clientX","clientY","startTime","Date","now","clickId","duration","window","getComputedStyle","getPropertyValue","replace","elapsedTime","cb","mutate","remove","delay","Math","max","setTimeout","removeEventListener","touchStartFired","requestAnimationFrame","rect","getBoundingClientRect","clickX","left","clickY","top","size","sqrt","abs","height","width","x","y","style","append","isRippleUnneeded","e","target","includes","tagName","touchEnd","addEventListener","settings","animationsEnabled","touches","length","once","cancelBubble","stopPropagation","passive","button","dataset"],"mappings":"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","file":"19.11471fd7ef9c3532e0bf.chunk.js","sourcesContent":["/*\r\n * https://github.com/morethanwords/tweb\r\n * Copyright (C) 2019-2021 Eduard Kuzmenko\r\n * https://github.com/morethanwords/tweb/blob/master/LICENSE\r\n */\r\n\r\nimport findUpClassName from \"../helpers/dom/findUpClassName\";\r\nimport sequentialDom from \"../helpers/sequentialDom\";\r\nimport {isTouchSupported} from \"../helpers/touchSupport\";\r\nimport rootScope from \"../lib/rootScope\";\r\n\r\nlet rippleClickId = 0;\r\nexport function ripple(elem: HTMLElement, callback: (id: number) => Promise<boolean | void> = () => Promise.resolve(), onEnd: (id: number) => void = null, prepend = false) {\r\n //return;\r\n if(elem.querySelector('.c-ripple')) return;\r\n elem.classList.add('rp');\r\n \r\n let r = document.createElement('div');\r\n r.classList.add('c-ripple');\r\n\r\n const isSquare = elem.classList.contains('rp-square');\r\n if(isSquare) {\r\n r.classList.add('is-square');\r\n }\r\n\r\n elem[prepend ? 'prepend' : 'append'](r);\r\n\r\n let handler: () => void;\r\n //let animationEndPromise: Promise<number>;\r\n const drawRipple = (clientX: number, clientY: number) => {\r\n const startTime = Date.now();\r\n const elem = document.createElement('div');\r\n\r\n const clickId = rippleClickId++;\r\n \r\n //console.log('ripple drawRipple');\r\n \r\n const duration = +window.getComputedStyle(r).getPropertyValue('--ripple-duration').replace('s', '') * 1000;\r\n //console.log('ripple duration', duration);\r\n\r\n handler = () => {\r\n //handler = () => animationEndPromise.then((duration) => {\r\n //console.log('ripple animation was:', duration);\r\n\r\n //const duration = isSquare || mediaSizes.isMobile ? 200 : 700;\r\n //return;\r\n let elapsedTime = Date.now() - startTime;\r\n const cb = () => {\r\n //console.log('ripple elapsedTime total pre-remove:', Date.now() - startTime);\r\n sequentialDom.mutate(() => {\r\n elem.remove();\r\n });\r\n \r\n if(onEnd) onEnd(clickId);\r\n };\r\n if(elapsedTime < duration) {\r\n let delay = Math.max(duration - elapsedTime, duration / 2);\r\n setTimeout(() => elem.classList.add('hiding'), Math.max(delay - duration / 2, 0));\r\n\r\n setTimeout(cb, delay);\r\n } else {\r\n elem.classList.add('hiding');\r\n setTimeout(cb, duration / 2);\r\n }\r\n\r\n if(!isTouchSupported) {\r\n window.removeEventListener('contextmenu', handler);\r\n }\r\n\r\n handler = null;\r\n touchStartFired = false;\r\n };\r\n //});\r\n\r\n callback && callback(clickId);\r\n\r\n /* callback().then((bad) => {\r\n if(bad) {\r\n span.remove();\r\n return;\r\n } */\r\n \r\n //console.log('ripple after promise', Date.now() - startTime);\r\n //console.log('ripple tooSlow:', tooSlow);\r\n /* if(tooSlow) {\r\n span.remove();\r\n return;\r\n } */\r\n\r\n window.requestAnimationFrame(() => {\r\n const rect = r.getBoundingClientRect();\r\n elem.classList.add('c-ripple__circle');\r\n\r\n const clickX = clientX - rect.left;\r\n const clickY = clientY - rect.top;\r\n\r\n const radius = Math.sqrt((Math.abs(clickY - rect.height / 2) + rect.height / 2) ** 2 + (Math.abs(clickX - rect.width / 2) + rect.width / 2) ** 2);\r\n const size = radius;\r\n\r\n // center of circle\r\n const x = clickX - size / 2;\r\n const y = clickY - size / 2;\r\n\r\n //console.log('ripple click', offsetFromCenter, size, clickX, clickY);\r\n\r\n elem.style.width = elem.style.height = size + 'px';\r\n elem.style.left = x + 'px';\r\n elem.style.top = y + 'px';\r\n\r\n // нижний код выполняется с задержкой\r\n /* animationEndPromise = new Promise((resolve) => {\r\n span.addEventListener('animationend', () => {\r\n // 713 -> 700\r\n resolve(((Date.now() - startTime) / 100 | 0) * 100);\r\n }, {once: true});\r\n }); */\r\n \r\n // нижний код не всегда включает анимацию ПРИ КЛИКЕ НА ТАЧПАД БЕЗ ТАПТИК ЭНЖИНА\r\n /* span.style.display = 'none';\r\n r.append(span);\r\n duration = +window.getComputedStyle(span).getPropertyValue('animation-duration').replace('s', '') * 1000;\r\n span.style.display = ''; */\r\n\r\n r.append(elem);\r\n\r\n //r.classList.add('active');\r\n //handler();\r\n });\r\n //});\r\n };\r\n\r\n const isRippleUnneeded = (e: Event) => e.target !== elem && (\r\n ['BUTTON', 'A'].includes((e.target as HTMLElement).tagName) \r\n || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r\r\n );\r\n\r\n // TODO: rename this variable\r\n let touchStartFired = false;\r\n if(isTouchSupported) {\r\n let touchEnd = () => {\r\n handler && handler();\r\n };\r\n \r\n elem.addEventListener('touchstart', (e) => {\r\n if(!rootScope.settings.animationsEnabled) {\r\n return;\r\n }\r\n\r\n //console.log('ripple touchstart', e);\r\n if(e.touches.length > 1 || touchStartFired || isRippleUnneeded(e)) {\r\n return;\r\n }\r\n \r\n //console.log('touchstart', e);\r\n touchStartFired = true;\r\n \r\n let {clientX, clientY} = e.touches[0];\r\n drawRipple(clientX, clientY);\r\n elem.addEventListener('touchend', touchEnd, {once: true});\r\n \r\n window.addEventListener('touchmove', (e) => {\r\n e.cancelBubble = true;\r\n e.stopPropagation();\r\n touchEnd();\r\n elem.removeEventListener('touchend', touchEnd);\r\n }, {once: true});\r\n }, {passive: true});\r\n } else {\r\n elem.addEventListener('mousedown', (e) => {\r\n if(![0, 2].includes(e.button)) { // only left and right buttons\r\n return;\r\n }\r\n\r\n if(!rootScope.settings.animationsEnabled) {\r\n return;\r\n }\r\n //console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') === r);\r\n\r\n if(elem.dataset.ripple === '0' || isRippleUnneeded(e)) {\r\n return;\r\n } else if(touchStartFired) {\r\n touchStartFired = false;\r\n return;\r\n }\r\n \r\n let {clientX, clientY} = e;\r\n drawRipple(clientX, clientY);\r\n window.addEventListener('mouseup', handler, {once: true, passive: true});\r\n window.addEventListener('contextmenu', handler, {once: true, passive: true});\r\n }, {passive: true});\r\n }\r\n}\r\n"],"sourceRoot":""} |