Browse Source

Fix topbar overflow Safari again

master
Eduard Kuzmenko 4 years ago
parent
commit
d7ceb52e2e
  1. 1
      src/components/chat/input.ts
  2. 3
      src/components/chat/pinnedContainer.ts
  3. 90
      src/lib/appManagers/appImManager.ts

1
src/components/chat/input.ts

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

3
src/components/chat/pinnedContainer.ts

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

90
src/lib/appManagers/appImManager.ts

@ -163,6 +163,9 @@ export class AppImManager {
private closeBtn = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement; private closeBtn = this.topbar.querySelector('.sidebar-close-button') as HTMLButtonElement;
public hideRightSidebar = false; public hideRightSidebar = false;
private chatUtils: HTMLElement;
private setUtilsRAF: number;
get myID() { get myID() {
return rootScope.myID; return rootScope.myID;
} }
@ -182,62 +185,18 @@ export class AppImManager {
this.chatSelection = new ChatSelection(this, appMessagesManager/* this.bubblesContainer, this.bubbles */); 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(); this.chatAudio = new ChatAudio();
chatUtils.prepend(this.chatAudio.divAndCaption.container); this.chatUtils.prepend(this.chatAudio.divAndCaption.container);
// * fix topbar overflow section // * fix topbar overflow section
const observeOptions = { window.addEventListener('resize', () => this.setUtilsWidth(true));
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);
mediaSizes.addListener('changeScreen', (from, to) => { mediaSizes.addListener('changeScreen', (from, to) => {
this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile); this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile);
this.pinnedMessageContainer.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) */); /* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
setUtilsWidth(); this.setUtilsWidth(true);
}); });
// * fix topbar overflow section end // * fix topbar overflow section end
@ -319,6 +278,7 @@ export class AppImManager {
const chat = appChatsManager.getChat(peerID) as Channel | Chat; const chat = appChatsManager.getChat(peerID) as Channel | Chat;
this.btnJoin.classList.toggle('hide', !chat?.pFlags?.left); 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) { public selectTab(id: number) {
document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id == 0); document.body.classList.toggle(LEFT_COLUMN_ACTIVE_CLASSNAME, id == 0);
@ -1468,6 +1461,7 @@ export class AppImManager {
this.btnMute.classList.toggle('hide', !isBroadcast); this.btnMute.classList.toggle('hide', !isBroadcast);
this.btnJoin.classList.toggle('hide', !appChatsManager.getChat(-this.peerID)?.pFlags?.left); this.btnJoin.classList.toggle('hide', !appChatsManager.getChat(-this.peerID)?.pFlags?.left);
this.setUtilsWidth();
this.menuButtons.mute.style.display = this.myID == this.peerID ? 'none' : ''; this.menuButtons.mute.style.display = this.myID == this.peerID ? 'none' : '';

Loading…
Cancel
Save