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

Fix topbar overflow Safari again

Browse Source
This commit is contained in:
Eduard Kuzmenko 2020-11-23 18:45:50 +02:00
parent 419d3c73fa
commit d7ceb52e2e
3 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -304,6 +304,7 @@ export class ChatInput {
if(isTouchSupported) {
this.messageInput.addEventListener('touchend', (e) => {
appImManager.selectTab(1); // * set chat tab for album orientation
this.saveScroll();
emoticonsDropdown.toggle(false);
});

3
src/components/chat/pinnedContainer.ts
View File

@ -70,10 +70,13 @@ export default class PinnedContainer {
if(scrollTop !== undefined && active.length <= maxActive) {
appImManager.scrollable.scrollTop = scrollTop + ((hide ? -1 : 1) * HEIGHT);
}
appImManager.setUtilsWidth();
}
public fill(title: string, subtitle: string, message: any) {
this.divAndCaption.container.dataset.mid = '' + message.mid;
this.divAndCaption.fill(title, subtitle, message);
appImManager.setUtilsWidth();
}
}

90
src/lib/appManagers/appImManager.ts
View File

@ -162,6 +162,9 @@ export class AppImManager {
public tabID = -1;
private closeBtn = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement;
public hideRightSidebar = false;
private chatUtils: HTMLElement;
private setUtilsRAF: number;
get myID() {
return rootScope.myID;
@ -182,62 +185,18 @@ export class AppImManager {
this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */);
const chatUtils = this.chatInfo.nextElementSibling;
this.chatUtils = this.chatInfo.nextElementSibling as HTMLElement;
this.chatAudio = new ChatAudio();
chatUtils.prepend(this.chatAudio.divAndCaption.container);
this.chatUtils.prepend(this.chatAudio.divAndCaption.container);
// * fix topbar overflow section
const observeOptions = {
attributes: true,
childList: true,
subtree: true
};
// ! У МЕНЯ ПРОСТО СГОРЕЛО, САФАРИ КОНЧЕННЫЙ БРАУЗЕР - ЕСЛИ НЕ СКРЫВАТЬ БЛОК, ТО ПРИ ПЕРЕВОРОТЕ ЭКРАНА НА АЙФОНЕ БЛОК БУДЕТ НЕПРАВИЛЬНО ШИРИНЫ, ДАЖЕ БЕЗ ЭТОЙ ФУНКЦИИ!
const setUtilsWidth = () => {
//return;
if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
chatUtils.classList.add('hide');
mutationObserver.disconnect();
mutationRAF = window.requestAnimationFrame(() => {
//mutationRAF = window.requestAnimationFrame(() => {
//setTimeout(() => {
chatUtils.classList.remove('hide');
/* this.chatInfo.style.removeProperty('--utils-width');
void this.chatInfo.offsetLeft; // reflow */
const width = /* chatUtils.scrollWidth */chatUtils.getBoundingClientRect().width;
this.log('utils width:', width);
this.chatInfo.style.setProperty('--utils-width', width + 'px');
//this.chatInfo.classList.toggle('have-utils-width', !!width);
//}, 0);
mutationRAF = 0;
mutationObserver.observe(chatUtils, observeOptions);
//});
});
};
/* window.addEventListener('resize', () => {
setTimeout(setUtilsWidth, 5000);
}); */
let mutationRAF: number;
const mutationObserver = new MutationObserver((mutationList) => {
setUtilsWidth();
});
mutationObserver.observe(chatUtils, observeOptions);
window.addEventListener('resize', () => this.setUtilsWidth(true));
mediaSizes.addListener('changeScreen', (from, to) => {
this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile);
this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile
/* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
setUtilsWidth();
this.setUtilsWidth(true);
});
// * fix topbar overflow section end
@ -319,6 +278,7 @@ export class AppImManager {
const chat = appChatsManager.getChat(peerID) as Channel | Chat;
this.btnJoin.classList.toggle('hide', !chat?.pFlags?.left);
this.setUtilsWidth();
}
});
@ -884,6 +844,39 @@ export class AppImManager {
});
}
// ! У МЕНЯ ПРОСТО СГОРЕЛО, САФАРИ КОНЧЕННЫЙ БРАУЗЕР - ЕСЛИ НЕ СКРЫВАТЬ БЛОК, ТО ПРИ ПЕРЕВОРОТЕ ЭКРАНА НА АЙФОНЕ БЛОК БУДЕТ НЕПРАВИЛЬНО ШИРИНЫ, ДАЖЕ БЕЗ ЭТОЙ ФУНКЦИИ!
public setUtilsWidth = (resize = false) => {
//return;
if(this.setUtilsRAF) window.cancelAnimationFrame(this.setUtilsRAF);
if(isSafari && resize) {
this.chatUtils.classList.add('hide');
}
//mutationObserver.disconnect();
this.setUtilsRAF = window.requestAnimationFrame(() => {
//mutationRAF = window.requestAnimationFrame(() => {
//setTimeout(() => {
if(isSafari && resize) {
this.chatUtils.classList.remove('hide');
}
/* this.chatInfo.style.removeProperty('--utils-width');
void this.chatInfo.offsetLeft; // reflow */
const width = /* chatUtils.scrollWidth */this.chatUtils.getBoundingClientRect().width;
this.log('utils width:', width);
this.chatInfo.style.setProperty('--utils-width', width + 'px');
//this.chatInfo.classList.toggle('have-utils-width', !!width);
//}, 0);
this.setUtilsRAF = 0;
//mutationObserver.observe(chatUtils, observeOptions);
//});
});
};
public selectTab(id: number) {
document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id == 0);
@ -1468,6 +1461,7 @@ export class AppImManager {
this.btnMute.classList.toggle('hide', !isBroadcast);
this.btnJoin.classList.toggle('hide', !appChatsManager.getChat(-this.peerID)?.pFlags?.left);
this.setUtilsWidth();
this.menuButtons.mute.style.display = this.myID == this.peerID ? 'none' : '';