tweb/public/18.8c0f1e5243d025452e9e.chunk.js.map

{"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","touchEnd","addEventListener","e","settings","animationsEnabled","touches","length","includes","target","tagName","once","cancelBubble","stopPropagation","passive","button","dataset"],"mappings":"sFAAA,gFAWA,IAAIA,EAAgB,EACb,SAASC,EAAOC,EAAmBC,EAAoD,KAAMC,QAAQC,WAAWC,EAA8B,KAAMC,GAAU,GAEnK,GAAGL,EAAKM,cAAc,aAAc,OACpCN,EAAKO,UAAUC,IAAI,MAEnB,IAAIC,EAAIC,SAASC,cAAc,OAC/BF,EAAEF,UAAUC,IAAI,YAShB,IAAII,EAPaZ,EAAKO,UAAUM,SAAS,cAEvCJ,EAAEF,UAAUC,IAAI,aAGlBR,EAAKK,EAAU,UAAY,UAAUI,GAIrC,MAAMK,EAAa,CAACC,EAAiBC,KACnC,MAAMC,EAAYC,KAAKC,MACjBnB,EAAOU,SAASC,cAAc,OAE9BS,EAAUtB,IAIVuB,EAAgG,KAApFC,OAAOC,iBAAiBd,GAAGe,iBAAiB,qBAAqBC,QAAQ,IAAK,IAGhGb,EAAU,KAMR,IAAIc,EAAcR,KAAKC,MAAQF,EAC/B,MAAMU,EAAK,KAET,IAAcC,OAAO,KACnB5B,EAAK6B,WAGJzB,GAAOA,EAAMgB,IAElB,GAAGM,EAAcL,EAAU,CACzB,IAAIS,EAAQC,KAAKC,IAAIX,EAAWK,EAAaL,EAAW,GACxDY,WAAW,IAAMjC,EAAKO,UAAUC,IAAI,UAAWuB,KAAKC,IAAIF,EAAQT,EAAW,EAAG,IAE9EY,WAAWN,EAAIG,QAEf9B,EAAKO,UAAUC,IAAI,UACnByB,WAAWN,EAAIN,EAAW,GAGxB,oBACFC,OAAOY,oBAAoB,cAAetB,GAG5CA,EAAU,KACVuB,GAAkB,GAIpBlC,GAAYA,EAASmB,GAenBE,OAAOc,sBAAsB,KAC3B,MAAMC,EAAO5B,EAAE6B,wBACftC,EAAKO,UAAUC,IAAI,oBAEnB,MAAM+B,EAASxB,EAAUsB,EAAKG,KACxBC,EAASzB,EAAUqB,EAAKK,IAGxBC,EADSZ,KAAKa,KAAK,SAACb,KAAKc,IAAIJ,EAASJ,EAAKS,OAAS,GAAKT,EAAKS,OAAS,EAAM,GAAI,SAACf,KAAKc,IAAIN,EAASF,EAAKU,MAAQ,GAAKV,EAAKU,MAAQ,EAAM,IAIzIC,EAAIT,EAASI,EAAO,EACpBM,EAAIR,EAASE,EAAO,EAI1B3C,EAAKkD,MAAMH,MAAQ/C,EAAKkD,MAAMJ,OAASH,EAAO,KAC9C3C,EAAKkD,MAAMV,KAAOQ,EAAI,KACtBhD,EAAKkD,MAAMR,IAAMO,EAAI,KAgBrBxC,EAAE0C,OAAOnD,MASf,IAAImC,GAAkB,EACtB,GAAG,mBAAkB,CACnB,IAAIiB,EAAW,KACbxC,GAAWA,KAGbZ,EAAKqD,iBAAiB,aAAeC,IACnC,IAAI,UAAUC,SAASC,kBACrB,OAIF,GAAGF,EAAEG,QAAQC,OAAS,GACjBvB,GACC,CAAC,SAAU,KAAKwB,SAAUL,EAAEM,OAAuBC,UAAYP,EAAEM,SAAW5D,GAC7E,YAAgBsD,EAAEM,OAAuB,cAAgBnD,EAC5D,OAIF0B,GAAkB,EAElB,IAAI,QAACpB,EAAO,QAAEC,GAAWsC,EAAEG,QAAQ,GACnC3C,EAAWC,EAASC,GACpBhB,EAAKqD,iBAAiB,WAAYD,EAAU,CAACU,MAAM,IAEnDxC,OAAO+B,iBAAiB,YAAcC,IACpCA,EAAES,cAAe,EACjBT,EAAEU,kBACFZ,IACApD,EAAKkC,oBAAoB,WAAYkB,IACpC,CAACU,MAAM,KACT,CAACG,SAAS,SAEbjE,EAAKqD,iBAAiB,YAAcC,IAClC,IAAI,CAAC,EAAG,GAAGK,SAASL,EAAEY,QACpB,OAGF,IAAI,UAAUX,SAASC,kBACrB,OAIF,GAA2B,MAAxBxD,EAAKmE,QAAQpE,QAAkB,YAAgBuD,EAAEM,OAAuB,cAAgBnD,GAA2C,MAArC6C,EAAEM,OAAuBC,QACxH,OAAO,EACF,GAAG1B,EAER,OADAA,GAAkB,GACX,EAGT,IAAI,QAACpB,EAAO,QAAEC,GAAWsC,EACzBxC,EAAWC,EAASC,GACpBM,OAAO+B,iBAAiB,UAAWzC,EAAS,CAACkD,MAAM,IACnDxC,OAAO+B,iBAAiB,cAAezC,EAAS,CAACkD,MAAM","file":"18.8c0f1e5243d025452e9e.chunk.js","sourcesContent":["/*\n * https://github.com/morethanwords/tweb\n * Copyright (C) 2019-2021 Eduard Kuzmenko\n * https://github.com/morethanwords/tweb/blob/master/LICENSE\n */\n\nimport findUpClassName from \"../helpers/dom/findUpClassName\";\nimport sequentialDom from \"../helpers/sequentialDom\";\nimport {isTouchSupported} from \"../helpers/touchSupport\";\nimport rootScope from \"../lib/rootScope\";\n\nlet rippleClickId = 0;\nexport function ripple(elem: HTMLElement, callback: (id: number) => Promise<boolean | void> = () => Promise.resolve(), onEnd: (id: number) => void = null, prepend = false) {\n  //return;\n  if(elem.querySelector('.c-ripple')) return;\n  elem.classList.add('rp');\n  \n  let r = document.createElement('div');\n  r.classList.add('c-ripple');\n\n  const isSquare = elem.classList.contains('rp-square');\n  if(isSquare) {\n    r.classList.add('is-square');\n  }\n\n  elem[prepend ? 'prepend' : 'append'](r);\n\n  let handler: () => void;\n  //let animationEndPromise: Promise<number>;\n  const drawRipple = (clientX: number, clientY: number) => {\n    const startTime = Date.now();\n    const elem = document.createElement('div');\n\n    const clickId = rippleClickId++;\n    \n    //console.log('ripple drawRipple');\n    \n    const duration = +window.getComputedStyle(r).getPropertyValue('--ripple-duration').replace('s', '') * 1000;\n    //console.log('ripple duration', duration);\n\n    handler = () => {\n    //handler = () => animationEndPromise.then((duration) => {\n      //console.log('ripple animation was:', duration);\n\n      //const duration = isSquare || mediaSizes.isMobile ? 200 : 700;\n      //return;\n      let elapsedTime = Date.now() - startTime;\n      const cb = () => {\n        //console.log('ripple elapsedTime total pre-remove:', Date.now() - startTime);\n        sequentialDom.mutate(() => {\n          elem.remove();\n        });\n        \n        if(onEnd) onEnd(clickId);\n      };\n      if(elapsedTime < duration) {\n        let delay = Math.max(duration - elapsedTime, duration / 2);\n        setTimeout(() => elem.classList.add('hiding'), Math.max(delay - duration / 2, 0));\n\n        setTimeout(cb, delay);\n      } else {\n        elem.classList.add('hiding');\n        setTimeout(cb, duration / 2);\n      }\n\n      if(!isTouchSupported) {\n        window.removeEventListener('contextmenu', handler);\n      }\n\n      handler = null;\n      touchStartFired = false;\n    };\n    //});\n\n    callback && callback(clickId);\n\n    /* callback().then((bad) => {\n      if(bad) {\n        span.remove();\n        return;\n      } */\n      \n      //console.log('ripple after promise', Date.now() - startTime);\n      //console.log('ripple tooSlow:', tooSlow);\n      /* if(tooSlow) {\n        span.remove();\n        return;\n      } */\n\n      window.requestAnimationFrame(() => {\n        const rect = r.getBoundingClientRect();\n        elem.classList.add('c-ripple__circle');\n\n        const clickX = clientX - rect.left;\n        const clickY = clientY - rect.top;\n\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);\n        const size = radius;\n\n        // center of circle\n        const x = clickX - size / 2;\n        const y = clickY - size / 2;\n\n        //console.log('ripple click', offsetFromCenter, size, clickX, clickY);\n\n        elem.style.width = elem.style.height = size + 'px';\n        elem.style.left = x + 'px';\n        elem.style.top = y + 'px';\n\n        // нижний код выполняется с задержкой\n        /* animationEndPromise = new Promise((resolve) => {\n          span.addEventListener('animationend', () => {\n            // 713 -> 700\n            resolve(((Date.now() - startTime) / 100 | 0) * 100);\n          }, {once: true});\n        }); */\n        \n        // нижний код не всегда включает анимацию ПРИ КЛИКЕ НА ТАЧПАД БЕЗ ТАПТИК ЭНЖИНА\n        /* span.style.display = 'none';\n        r.append(span);\n        duration = +window.getComputedStyle(span).getPropertyValue('animation-duration').replace('s', '') * 1000;\n        span.style.display = ''; */\n\n        r.append(elem);\n\n        //r.classList.add('active');\n        //handler();\n      });\n    //});\n  };\n\n  // TODO: rename this variable\n  let touchStartFired = false;\n  if(isTouchSupported) {\n    let touchEnd = () => {\n      handler && handler();\n    };\n  \n    elem.addEventListener('touchstart', (e) => {\n      if(!rootScope.settings.animationsEnabled) {\n        return;\n      }\n\n      //console.log('ripple touchstart', e);\n      if(e.touches.length > 1 \n        || touchStartFired \n        || (['BUTTON', 'A'].includes((e.target as HTMLElement).tagName) && e.target !== elem) \n        || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r) {\n        return;\n      }\n      \n      //console.log('touchstart', e);\n      touchStartFired = true;\n  \n      let {clientX, clientY} = e.touches[0];\n      drawRipple(clientX, clientY);\n      elem.addEventListener('touchend', touchEnd, {once: true});\n  \n      window.addEventListener('touchmove', (e) => {\n        e.cancelBubble = true;\n        e.stopPropagation();\n        touchEnd();\n        elem.removeEventListener('touchend', touchEnd);\n      }, {once: true});\n    }, {passive: true});\n  } else {\n    elem.addEventListener('mousedown', (e) => {\n      if(![0, 2].includes(e.button)) { // only left and right buttons\n        return;\n      }\n\n      if(!rootScope.settings.animationsEnabled) {\n        return;\n      }\n      //console.log('ripple mousedown', e, e.target, findUpClassName(e.target as HTMLElement, 'c-ripple') === r);\n\n      if(elem.dataset.ripple === '0' || findUpClassName(e.target as HTMLElement, 'c-ripple') !== r || (e.target as HTMLElement).tagName === 'A') {\n        return false;\n      } else if(touchStartFired) {\n        touchStartFired = false;\n        return false;\n      }\n  \n      let {clientX, clientY} = e;\n      drawRipple(clientX, clientY);\n      window.addEventListener('mouseup', handler, {once: true});\n      window.addEventListener('contextmenu', handler, {once: true});\n    });\n  }\n}\n"],"sourceRoot":""}