Eduard Kuzmenko
3 years ago
11 changed files with 211 additions and 133 deletions
@ -0,0 +1,112 @@
@@ -0,0 +1,112 @@
|
||||
/* |
||||
* https://github.com/morethanwords/tweb
|
||||
* Copyright (C) 2019-2021 Eduard Kuzmenko |
||||
* https://github.com/morethanwords/tweb/blob/master/LICENSE
|
||||
*/ |
||||
|
||||
import { isTouchSupported } from "../touchSupport"; |
||||
import { isMobile, isSafari } from "../userAgent"; |
||||
import findUpClassName from "./findUpClassName"; |
||||
import fixSafariStickyInput from "./fixSafariStickyInput"; |
||||
|
||||
export const IS_STICKY_INPUT_BUGGED = isSafari && isMobile && isTouchSupported; |
||||
|
||||
if(IS_STICKY_INPUT_BUGGED) { |
||||
let key: 'clientY' | 'pageY' = 'clientY'; |
||||
let startY = 0; |
||||
const o = {capture: true, passive: false}; |
||||
const onTouchMove = (e: TouchEvent) => { |
||||
const touch = e.touches[0]; |
||||
|
||||
//console.log('touchmove y', touch[key], startY);
|
||||
|
||||
const scrollable = findUpClassName(touch.target, 'scrollable-y'); |
||||
if(scrollable) { |
||||
const y = touch[key]; |
||||
const scrolled = startY - y; |
||||
|
||||
/* if(y < startY) { |
||||
startY = y; |
||||
} */ |
||||
|
||||
const scrollTop = scrollable.scrollTop; |
||||
const scrollHeight = scrollable.scrollHeight; |
||||
const clientHeight = scrollable.clientHeight; |
||||
const nextScrollTop = scrollTop ? Math.round(scrollTop + scrollable.clientHeight + scrolled) : scrollTop + scrolled; |
||||
//const needCancel = scrollHeight !== clientHeight ? (scrollTop && diff <= 1) || (scrollTop - diff) < 0 : true;
|
||||
const needCancel = scrollHeight === clientHeight || nextScrollTop >= scrollHeight || nextScrollTop <= 0; |
||||
if(needCancel) { |
||||
e.preventDefault(); |
||||
} |
||||
|
||||
//console.log('touchmove with scrollable', scrollTop, startY, scrolled, nextScrollTop, needCancel, e.cancelable);
|
||||
} else { |
||||
e.preventDefault(); |
||||
|
||||
//console.log('touchmove no scrollable', e, touch);
|
||||
} |
||||
|
||||
//if(e.target === document.documentElement || e.target === document.body) e.preventDefault();
|
||||
}; |
||||
|
||||
// let el = document.createElement('div');
|
||||
// document.body.prepend(el);
|
||||
// let a = 0;
|
||||
|
||||
// let hasFocus = false;
|
||||
let lastFocusOutTimeStamp = 0; |
||||
document.addEventListener('focusin', (e) => { |
||||
if((e.timeStamp - lastFocusOutTimeStamp) < 50/* && document.activeElement === input */) { |
||||
return; |
||||
} |
||||
|
||||
// console.log('focusin', e, e.timeStamp);
|
||||
|
||||
// hasFocus = true;
|
||||
// document.body.classList.add('is-keyboard-opened');
|
||||
|
||||
// el.innerText = 'focusin ' + ++a;
|
||||
|
||||
/* a < 2 && */fixSafariStickyInput(e.target as HTMLElement); |
||||
|
||||
document.addEventListener('touchmove', onTouchMove, o); |
||||
document.addEventListener('touchstart', (e) => { |
||||
if(e.touches.length > 1) return; |
||||
const touchStart = e.touches[0]; |
||||
|
||||
startY = touchStart[key]; |
||||
}); |
||||
}, {passive: true}); |
||||
|
||||
document.addEventListener('focusout', (e) => { |
||||
// console.log('focusout', e, e.timeStamp);
|
||||
document.removeEventListener('touchmove', onTouchMove, o); |
||||
|
||||
lastFocusOutTimeStamp = e.timeStamp; |
||||
|
||||
// el.innerText = 'focusout ' + ++a;
|
||||
|
||||
// if(hasFocus) {
|
||||
// hasFocus = false;
|
||||
// document.body.classList.remove('is-keyboard-opened');
|
||||
// }
|
||||
}, {passive: true}); |
||||
|
||||
document.addEventListener('visibilitychange', () => { |
||||
// console.log('window visibilitychange');
|
||||
if(document.activeElement && |
||||
document.activeElement.classList.contains('is-sticky-input-bugged') && |
||||
(document.activeElement as HTMLElement).blur) { |
||||
fixSafariStickyInput(document.activeElement as HTMLElement); |
||||
} |
||||
|
||||
/* blurActiveElement(); |
||||
window.scrollTo(0, 0); |
||||
setVH(); */ |
||||
}, {passive: true}); |
||||
} |
||||
|
||||
export default function fixSafariStickyInputFocusing(input: HTMLElement) { |
||||
if(!IS_STICKY_INPUT_BUGGED) return; |
||||
input.classList.add('is-sticky-input-bugged'); |
||||
} |
||||
Loading…
Reference in new issue