diff --git a/src/components/emoticonsDropdown/index.ts b/src/components/emoticonsDropdown/index.ts index f90c9526..26a1f124 100644 --- a/src/components/emoticonsDropdown/index.ts +++ b/src/components/emoticonsDropdown/index.ts @@ -204,8 +204,7 @@ export class EmoticonsDropdown extends DropdownHover { } }; - public static menuOnClick = (menu: HTMLElement, scroll: Scrollable, menuScroll?: ScrollableX) => { - let prevId = 0; + public static menuOnClick = (menu: HTMLElement, scroll: Scrollable, menuScroll?: ScrollableX, prevId = 0) => { let jumpedTo = -1; const setActive = (id: number) => { @@ -271,7 +270,7 @@ export class EmoticonsDropdown extends DropdownHover { //console.log('set scrollTop:', offsetTop); }); - return stickyIntersector; + return {stickyIntersector, setActive}; }; public static onMediaClick = (e: {target: EventTarget | Element}, clearDraft = false) => { diff --git a/src/components/emoticonsDropdown/tabs/emoji.ts b/src/components/emoticonsDropdown/tabs/emoji.ts index 116d2b03..7ded0cab 100644 --- a/src/components/emoticonsDropdown/tabs/emoji.ts +++ b/src/components/emoticonsDropdown/tabs/emoji.ts @@ -108,6 +108,10 @@ export default class EmojiTab implements EmoticonsTab { private scroll: Scrollable; private stickyIntersector: StickyIntersector; + private menu: HTMLElement; + + private closeScrollTop = 0; + private setMenuActive: (id: number) => boolean; init() { this.content = document.getElementById('content-emoji') as HTMLDivElement; @@ -203,7 +207,7 @@ export default class EmojiTab implements EmoticonsTab { //console.timeEnd('emojiParse'); - const menu = this.content.previousElementSibling as HTMLElement; + const menu = this.menu = this.content.previousElementSibling as HTMLElement; const emojiScroll = this.scroll = new Scrollable(this.content, 'EMOJI'); //emojiScroll.setVirtualContainer(emojiScroll.container); @@ -212,7 +216,16 @@ export default class EmojiTab implements EmoticonsTab { Promise.all([ pause(200), - appEmojiManager.getRecentEmojis() + appEmojiManager.getRecentEmojis().then(recent => { + const hasRecent = !!recent.length; + const activeId = hasRecent ? 0 : 1; + this.menu.children[0].classList.toggle('hide', !hasRecent); + this.menu.children[activeId].classList.add('active'); + const m = EmoticonsDropdown.menuOnClick(menu, emojiScroll, undefined, activeId); + this.stickyIntersector = m.stickyIntersector; + this.setMenuActive = m.setActive; + return recent; + }) ]).then(([_, recent]) => { preloader.remove(); @@ -238,7 +251,6 @@ export default class EmojiTab implements EmoticonsTab { }); this.content.addEventListener('click', this.onContentClick); - this.stickyIntersector = EmoticonsDropdown.menuOnClick(menu, emojiScroll); this.init = null; rootScope.addEventListener('emoji_recent', (emoji) => { @@ -257,6 +269,15 @@ export default class EmojiTab implements EmoticonsTab { appendEmoji(emoji, this.recentItemsDiv, true); this.recentItemsDiv.parentElement.classList.remove('hide'); + this.menu.children[0].classList.remove('hide'); + + if(!this.closeScrollTop) { + this.setMenuActive(0); + } + }); + + emoticonsDropdown.addEventListener('close', () => { + this.closeScrollTop = this.scroll.scrollTop; }); } diff --git a/src/components/emoticonsDropdown/tabs/stickers.ts b/src/components/emoticonsDropdown/tabs/stickers.ts index a033a066..12b5caa4 100644 --- a/src/components/emoticonsDropdown/tabs/stickers.ts +++ b/src/components/emoticonsDropdown/tabs/stickers.ts @@ -300,7 +300,7 @@ export default class StickersTab implements EmoticonsTab { this.scroll = new Scrollable(this.content, 'STICKERS'); this.scroll.setVirtualContainer(this.stickersDiv); - this.stickyIntersector = EmoticonsDropdown.menuOnClick(this.menu, this.scroll, menuScroll); + this.stickyIntersector = EmoticonsDropdown.menuOnClick(this.menu, this.scroll, menuScroll).stickyIntersector; const preloader = putPreloader(this.content, true); diff --git a/src/index.hbs b/src/index.hbs index c4e93f55..ad4697bd 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -117,7 +117,7 @@