diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index 3f0ceb41..7f76bca9 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -846,19 +846,28 @@ export default class ChatBubbles { const timestamps = Object.keys(this.dateMessages).map(k => +k).sort((a, b) => b - a); let lastVisible: HTMLElement; - const {scrollTop} = this.scrollable.container; - const isOverflown = scrollTop > 0; - if(isOverflown) for(const timestamp of timestamps) { - const dateMessage = this.dateMessages[timestamp]; - if(getVisibleRect(dateMessage.container, this.scrollable.container)) { - lastVisible = dateMessage.div; - } else if(lastVisible) { - break; + // if(this.chatInner.classList.contains('is-scrolling')) { + const {scrollTop} = this.scrollable.container; + const isOverflown = scrollTop > 0; + if(isOverflown) { + for(const timestamp of timestamps) { + const dateMessage = this.dateMessages[timestamp]; + const visibleRect = getVisibleRect(dateMessage.container, this.scrollable.container); + if(visibleRect && visibleRect.overflow.top) { + lastVisible = dateMessage.div; + } else if(lastVisible) { + break; + } + } } + // } + + if(lastVisible === this.previousStickyDate) { + return; } if(lastVisible) { - const needReflow = !!this.chat.setPeerPromise; + const needReflow = /* !!this.chat.setPeerPromise || */!this.previousStickyDate; if(needReflow) { lastVisible.classList.add('no-transition'); } @@ -1439,8 +1448,6 @@ export default class ChatBubbles { if(this.isHeavyAnimationInProgress && this.scrolledDown) return; //lottieLoader.checkAnimations(false, 'chat'); - this.setStickyDateManually(); - const distanceToEnd = this.scrollable.getDistanceToEnd(); if(!IS_TOUCH_SUPPORTED && this.scrollable.lastScrollDirection !== 0 && distanceToEnd > 0) { if(this.isScrollingTimeout) { @@ -1466,6 +1473,8 @@ export default class ChatBubbles { if(this.chat.topbar.pinnedMessage) { this.chat.topbar.pinnedMessage.setCorrectIndex(this.scrollable.lastScrollDirection); } + + this.setStickyDateManually(); }; public setScroll() { @@ -1585,6 +1594,7 @@ export default class ChatBubbles { animationIntersector.checkAnimations(false, CHAT_ANIMATION_GROUP); this.deleteEmptyDateGroups(); + this.onScroll(); } public renderNewMessagesByIds(mids: number[], scrolledDown?: boolean) { @@ -1963,11 +1973,17 @@ export default class ChatBubbles { this.resolveLadderAnimation = undefined; this.emptyPlaceholderMid = undefined; this.sponsoredMessage = undefined; + this.previousStickyDate = undefined; this.scrollingToBubble = undefined; ////console.timeEnd('appImManager cleanup'); this.isTopPaddingSet = false; + + if(this.isScrollingTimeout) { + clearTimeout(this.isScrollingTimeout); + this.isScrollingTimeout = 0; + } } public setPeer(peerId: PeerId, lastMsgId?: number, startParam?: string): {cached?: boolean, promise: Chat['setPeerPromise']} { @@ -2196,7 +2212,6 @@ export default class ChatBubbles { } this.onScroll(); - this.setStickyDateManually(); const middleware = this.getMiddleware(); const afterSetPromise = Promise.all([setPeerPromise, getHeavyAnimationPromise()]); @@ -2366,6 +2381,7 @@ export default class ChatBubbles { } this.setUnreadDelimiter(); // не нашёл места лучше + // this.setStickyDateManually(); }).catch(reject); }, 0); }); @@ -3582,6 +3598,9 @@ export default class ChatBubbles { //this.scrollable.scrollTop = this.scrollable.scrollHeight; //isTouchSupported && isApple && (this.scrollable.container.style.overflow = ''); + this.scrollable.lastScrollTop = newScrollTop; + this.scrollable.lastScrollDirection = 0; + if(IS_SAFARI/* && !isAppleMobile */) { // * fix blinking and jumping reflowScrollableElement(this.scrollable.container); } @@ -3738,6 +3757,8 @@ export default class ChatBubbles { // fastRaf(() => { fastRaf(() => { + this.setStickyDateManually(); // ! maybe it's not efficient + setBubbles.forEach(contentWrapper => { contentWrapper.classList.remove('zoom-fade'); }); @@ -3888,6 +3909,8 @@ export default class ChatBubbles { if(isSponsored) { let text: LangPackKey, mid: number, startParam: string, callback: () => void; + bubble.classList.add('avoid-selection'); + const sponsoredMessage = this.sponsoredMessage = (message as Message.message).sponsoredMessage; const peerId = this.appPeersManager.getPeerId(sponsoredMessage.from_id); // const peer = this.appPeersManager.getPeer(peerId); @@ -4428,6 +4451,11 @@ export default class ChatBubbles { } delete this.dateMessages[i]; deleted = true; + + // * no sense in it + /* if(dateMessage.div === this.previousStickyDate) { + this.previousStickyDate = undefined; + } */ } } diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index a3243f93..85f5cf0d 100644 --- a/src/components/chat/selection.ts +++ b/src/components/chat/selection.ts @@ -820,7 +820,10 @@ export default class ChatSelection extends AppSelection { } public canSelectBubble(bubble: HTMLElement) { - return !bubble.classList.contains('service') && !bubble.classList.contains('is-sending') && !bubble.classList.contains('bubble-first') && bubble.parentElement.classList.contains('bubbles-date-group'); + return !bubble.classList.contains('service') && + !bubble.classList.contains('is-sending') && + !bubble.classList.contains('bubble-first') && + !bubble.classList.contains('avoid-selection'); } protected onToggleSelection = (forwards: boolean, animate: boolean) => { diff --git a/src/components/peerTitle.ts b/src/components/peerTitle.ts index 6ef5d3aa..5dff58b0 100644 --- a/src/components/peerTitle.ts +++ b/src/components/peerTitle.ts @@ -58,7 +58,7 @@ export default class PeerTitle { if(options) { for(let i in options) { // @ts-ignore - // this.element.dataset[i] = options[i] ? '' + (typeof(options[i]) === 'boolean' ? +options[i] : options[i]) : '0'; + this.element.dataset[i] = options[i] ? '' + (typeof(options[i]) === 'boolean' ? +options[i] : options[i]) : '0'; // @ts-ignore this[i] = options[i]; } diff --git a/src/scss/partials/_chatBubble.scss b/src/scss/partials/_chatBubble.scss index 3ba84dbd..6f5194d5 100644 --- a/src/scss/partials/_chatBubble.scss +++ b/src/scss/partials/_chatBubble.scss @@ -336,6 +336,7 @@ $bubble-beside-button-width: 38px; &.is-sticky { opacity: .00001; // for safari + // position: sticky; .bubbles-inner:not(.is-scrolling) & { //transition-delay: 1.35s;