1 line
8.2 KiB
Plaintext
1 line
8.2 KiB
Plaintext
{"version":3,"file":"codeInputField-4BUMrXlT.js","sources":["../src/components/monkeys/tracking.ts","../src/components/codeInputField.ts"],"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 InputField from '../inputField';\nimport lottieLoader from '../../lib/rlottie/lottieLoader';\nimport RLottiePlayer from '../../lib/rlottie/rlottiePlayer';\n\nexport default class TrackingMonkey {\n public container: HTMLElement;\n\n protected max = 45;\n protected needFrame = 0;\n\n protected animation: RLottiePlayer;\n protected idleAnimation: RLottiePlayer;\n\n protected loadPromise: Promise<any>;\n\n constructor(protected inputField: InputField, protected size: number) {\n this.container = document.createElement('div');\n this.container.classList.add('media-sticker-wrapper');\n\n const input = inputField.input;\n\n input.addEventListener('blur', () => {\n this.playAnimation(0);\n });\n\n input.addEventListener('input', (e) => {\n this.playAnimation(inputField.value.length);\n });\n\n /* codeInput.addEventListener('focus', () => {\n playAnimation(Math.max(codeInput.value.length, 1));\n }); */\n }\n\n // 1st symbol = frame 15\n // end symbol = frame 165\n public playAnimation(length: number) {\n if(!this.animation) return;\n\n length = Math.min(length, 30);\n let frame: number;\n if(length) {\n frame = Math.round(Math.min(this.max, length) * (165 / this.max) + 11.33);\n\n if(this.idleAnimation) {\n this.idleAnimation.stop(true);\n this.idleAnimation.canvas[0].style.display = 'none';\n }\n\n this.animation.canvas[0].style.display = '';\n } else {\n /* const cb = (frameNo: number) => {\n if(frameNo <= 1) { */\n /* idleAnimation.play();\n idleAnimation.canvas.style.display = '';\n animation.canvas.style.display = 'none'; */\n /* animation.removeListener('enterFrame', cb);\n }\n };\n animation.addListener('enterFrame', cb); */\n\n frame = 0;\n }\n // animation.playSegments([1, 2]);\n\n const direction = this.needFrame > frame ? -1 : 1;\n // console.log('keydown', length, frame, direction);\n\n this.animation.setDirection(direction);\n if(this.needFrame !== 0 && frame === 0) {\n this.animation.setSpeed(7);\n }\n /* let diff = Math.abs(needFrame - frame * direction);\n if((diff / 20) > 1) animation.setSpeed(diff / 20 | 0); */\n this.needFrame = frame;\n\n this.animation.play();\n\n /* animation.goToAndStop(15, true); */\n // animation.goToAndStop(length / max * );\n }\n\n public load() {\n if(this.loadPromise) return this.loadPromise;\n return this.loadPromise = Promise.all([\n lottieLoader.loadAnimationAsAsset({\n container: this.container,\n loop: true,\n autoplay: true,\n width: this.size,\n height: this.size\n }, 'TwoFactorSetupMonkeyIdle').then((animation) => {\n this.idleAnimation = animation;\n\n // ! animationIntersector will stop animation instantly\n if(!this.inputField.value.length) {\n animation.play();\n }\n\n return lottieLoader.waitForFirstFrame(animation);\n }),\n\n lottieLoader.loadAnimationAsAsset({\n container: this.container,\n loop: false,\n autoplay: false,\n width: this.size,\n height: this.size\n }, 'TwoFactorSetupMonkeyTracking').then((_animation) => {\n this.animation = _animation;\n\n if(!this.inputField.value.length) {\n this.animation.canvas[0].style.display = 'none';\n }\n\n this.animation.addEventListener('enterFrame', currentFrame => {\n // console.log('enterFrame', currentFrame, needFrame);\n // let currentFrame = Math.round(e.currentTime);\n\n if((this.animation.direction === 1 && currentFrame >= this.needFrame) ||\n (this.animation.direction === -1 && currentFrame <= this.needFrame)) {\n this.animation.setSpeed(1);\n this.animation.pause();\n }\n\n if(currentFrame === 0 && this.needFrame === 0) {\n // animation.curFrame = 0;\n\n if(this.idleAnimation) {\n this.idleAnimation.canvas[0].style.display = '';\n this.idleAnimation.play();\n this.animation.canvas[0].style.display = 'none';\n }\n }\n });\n // console.log(animation.getDuration(), animation.getDuration(true));\n\n return lottieLoader.waitForFirstFrame(_animation);\n })\n ]);\n }\n\n public remove() {\n if(this.animation) this.animation.remove();\n if(this.idleAnimation) this.idleAnimation.remove();\n }\n}\n","/*\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 InputField, {InputFieldOptions} from './inputField';\n\nexport default class CodeInputField extends InputField {\n constructor(public options: InputFieldOptions & {\n length: number,\n onFill: (code: string) => void\n }) {\n super(Object.assign(options, {\n plainText: true\n }));\n\n const input = this.input as HTMLInputElement;\n input.type = 'tel';\n input.setAttribute('required', '');\n input.autocomplete = 'off';\n\n let lastLength = 0;\n this.input.addEventListener('input', (e) => {\n this.input.classList.remove('error');\n this.setLabel();\n\n const value = this.value.replace(/\\D/g, '').slice(0, options.length);\n this.setValueSilently(value);\n\n const length = this.value.length;\n if(length === options.length) { // submit code\n options.onFill(this.value);\n } else if(length === lastLength) {\n return;\n }\n\n lastLength = length;\n });\n }\n}\n"],"names":["TrackingMonkey","inputField","size","input","e","length","frame","direction","lottieLoader","animation","_animation","currentFrame","CodeInputField","InputField","options","lastLength","value"],"mappings":"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"} |