r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix iOS keyboard:

Browse Source 
Opening after ESG panel
In popups
This commit is contained in:
Eduard Kuzmenko 2021-01-29 02:03:40 +02:00
parent 1139a73fb5
commit 3159025121
6 changed files with 82 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/chat/bubbles.ts
View File

@ -504,13 +504,20 @@ export default class ChatBubbles {
let rAF = 0;
const onResizeEnd = () => {
//this.log('resize end', scrolled, this.scrollable.scrollTop);
const height = this.scrollable.container.offsetHeight;
if(height !== wasHeight) { // * fix opening keyboard while ESG is active, offsetHeight will change right between 'start' and this first frame
part += wasHeight - height;
}
/* if(DEBUG) {
this.log('resize end', scrolled, this.scrollable.scrollTop, height, this.scrollable.isScrolledDown);
} */
if(part) {
this.scrollable.scrollTop += Math.round(part);
}
wasHeight = this.scrollable.container.offsetHeight;
wasHeight = height;
scrolled = 0;
rAF = 0;
part = 0;
@ -526,8 +533,7 @@ export default class ChatBubbles {
});
};
// @ts-ignore
const resizeObserver = new ResizeObserver((entries) => {
const processEntries = (entries: any) => {
if(skip) {
setEndRAF(false);
return;
@ -549,9 +555,15 @@ export default class ChatBubbles {
if(!resizing) {
resizing = true;
//this.log('resize start', realDiff, this.scrollable.isScrolledDown);
/* if(DEBUG) {
this.log('resize start', realDiff, this.scrollable.scrollTop, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown);
} */
if(realDiff < 0 && this.scrollable.isScrolledDown) {
//if(isSafari) { // * fix opening keyboard while ESG is active
part = -realDiff;
//}
skip = true;
setEndRAF(false);
return;
@ -560,25 +572,23 @@ export default class ChatBubbles {
scrolled += diff;
//this.log('resize', wasHeight - height, diff, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown, height, wasHeight/* , entry */);
/* if(DEBUG) {
this.log('resize', wasHeight - height, diff, this.scrollable.container.offsetHeight, this.scrollable.isScrolledDown, height, wasHeight);
} */
if(diff) {
const needScrollTop = this.scrollable.scrollTop + diff;
this.scrollable.scrollTop = needScrollTop;
/* if(rAF) window.cancelAnimationFrame(rAF);
rAF = window.requestAnimationFrame(() => {
this.scrollable.scrollTop = needScrollTop;
setEndRAF(true);
//this.log('resize after RAF', part);
}); */
} //else {
}
setEndRAF(false);
//}
part = _part;
wasHeight = height;
});
};
// @ts-ignore
const resizeObserver = new ResizeObserver(processEntries);
resizeObserver.observe(this.bubblesContainer);
}
}
@ -2102,8 +2112,10 @@ export default class ChatBubbles {
bubble.classList.add('photo');
const size = webpage.photo.sizes[webpage.photo.sizes.length - 1];
let isSquare = false;
if(size.w === size.h && quoteTextDiv.childElementCount) {
bubble.classList.add('is-square-photo');
isSquare = true;
} else if(size.h > size.w) {
bubble.classList.add('is-vertical-photo');
}
@ -2117,7 +2129,8 @@ export default class ChatBubbles {
isOut,
lazyLoadQueue: this.lazyLoadQueue,
middleware: this.getMiddleware(),
loadPromises
loadPromises,
withoutPreloader: isSquare
});
}

8
src/components/chat/input.ts
View File

@ -725,8 +725,12 @@ export default class ChatInput {
}); */
/* if(isSafari) {
this.listenerSetter.add(this.messageInput, 'focusin', () => {
fixSafariStickyInput(this.messageInput);
this.listenerSetter.add(this.messageInput, 'mousedown', () => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
emoticonsDropdown.toggle(false);
});
});
});
} */
}

32
src/components/preloader.ts
View File

@ -1,6 +1,7 @@
import { isInDOM, cancelEvent, attachClickEvent } from "../helpers/dom";
import { CancellablePromise } from "../helpers/cancellablePromise";
import SetTransition from "./singleTransition";
import { fastRaf } from "../helpers/schedulers";
const TRANSITION_TIME = 200;
@ -24,6 +25,8 @@ export default class ProgressivePreloader {
private loadFunc: () => {download: CancellablePromise<any>};
private totalLength: number;
constructor(options?: Partial<{
isUpload: ProgressivePreloader['isUpload'],
cancelable: ProgressivePreloader['cancelable'],
@ -188,7 +191,7 @@ export default class ProgressivePreloader {
//return;
this.detached = false;
/* window.requestAnimationFrame(() => {
/* fastRaf(() => {
if(this.detached) return;
this.detached = false; */
@ -204,7 +207,13 @@ export default class ProgressivePreloader {
elem[this.attachMethod](this.preloader);
}
window.requestAnimationFrame(() => {
fastRaf(() => {
//console.log('[PP]: attach after rAF', this.detached, performance.now());
if(this.detached) {
return;
}
SetTransition(this.preloader, 'is-visible', true, TRANSITION_TIME);
});
@ -220,17 +229,21 @@ export default class ProgressivePreloader {
//return;
if(this.preloader && this.preloader.parentElement) {
/* setTimeout(() => *///window.requestAnimationFrame(() => {
/* setTimeout(() => *///fastRaf(() => {
/* if(!this.detached) return;
this.detached = true; */
//if(this.preloader.parentElement) {
window.requestAnimationFrame(() => {
fastRaf(() => {
//console.log('[PP]: detach after rAF', this.detached, performance.now());
if(!this.detached || !this.preloader.parentElement) {
return;
}
SetTransition(this.preloader, 'is-visible', false, TRANSITION_TIME, () => {
this.preloader.remove();
});
});
//}
//})/* , 5e3) */;
}
}
@ -246,9 +259,12 @@ export default class ProgressivePreloader {
}
try {
const totalLength = this.circle.getTotalLength();
if(!this.totalLength) {
this.totalLength = this.circle.getTotalLength();
}
//console.log('setProgress', (percents / 100 * totalLength));
this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', ' + totalLength;
this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * this.totalLength) + ', ' + this.totalLength;
} catch(err) {}
}
}

2
src/components/wrappers.ts
View File

@ -644,7 +644,7 @@ export function wrapPhoto({photo, message, container, boxWidth, boxHeight, withT
const load = () => {
const promise = getDownloadPromise();
if(!cacheContext.downloaded && !withoutPreloader) {
if(!cacheContext.downloaded && !withoutPreloader && (size as PhotoSize.photoSize).w >= 150 && (size as PhotoSize.photoSize).h >= 150) {
preloader.attach(container, false, promise);
}

15
src/lib/rootScope.ts
View File

@ -85,11 +85,13 @@ type BroadcastEvents = {
'event-heavy-animation-end': void,
'im_mount': void,
'im_tab_change': number
'im_tab_change': number,
'overlay_toggle': boolean,
};
class RootScope extends EventListenerBase<any> {
public overlayIsActive: boolean = false;
private _overlayIsActive: boolean = false;
public myId = 0;
public idle = {
isIDLE: false
@ -110,6 +112,15 @@ class RootScope extends EventListenerBase<any> {
});
}
get overlayIsActive() {
return this._overlayIsActive;
}
set overlayIsActive(value: boolean) {
this._overlayIsActive = value;
this.broadcast('overlay_toggle', value);
}
public broadcast = <T extends keyof BroadcastEvents>(name: T, detail?: BroadcastEvents[T]) => {
/* if(DEBUG) {
if(name != 'user_update') {

6
src/scss/partials/_chat.scss
View File

@ -116,9 +116,10 @@ $chat-helper-size: 39px;
background: none;
border: none;
width: 100%;
padding: 9px 8px;
padding: .6875rem .5625rem;
/* height: 100%; */
max-height: calc(30rem - var(--padding-vertical) * 2);
max-height: calc(30rem - 2.5rem); // 2.5rem - input helper (reply)
min-height: inherit;
overflow-y: none;
resize: none;
border: none;
@ -830,6 +831,7 @@ $chat-helper-size: 39px;
position: relative;
overflow: hidden;
align-self: center;
min-height: calc(var(--chat-input-size) - var(--padding-vertical) * 2);
> .scrollable {
position: relative;