diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts index 8a6563ee..ed70b0a7 100644 --- a/src/components/chat/chat.ts +++ b/src/components/chat/chat.ts @@ -28,6 +28,7 @@ import { REPLIES_PEER_ID } from "../../lib/mtproto/mtproto_config"; import { renderImageFromUrl } from "../misc"; import SetTransition from "../singleTransition"; import { fastRaf } from "../../helpers/schedulers"; +import AppPrivateSearchTab from "../sidebarRight/tabs/search"; export type ChatType = 'chat' | 'pinned' | 'replies' | 'discussion' | 'scheduled'; @@ -201,8 +202,9 @@ export default class Chat extends EventListenerBase<{ // set new if(!samePeer) { - if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] === AppSidebarRight.SLIDERITEMSIDS.search) { - appSidebarRight.onCloseBtnClick(); + const searchTab = appSidebarRight.getTab(AppPrivateSearchTab); + if(searchTab) { + searchTab.close(); } appSidebarRight.sharedMediaTab.setPeer(peerId, this.threadId); diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 750f33bf..fdec123a 100644 --- a/src/components/chat/topbar.ts +++ b/src/components/chat/topbar.ts @@ -21,6 +21,8 @@ import appStateManager from "../../lib/appManagers/appStateManager"; import PopupDeleteDialog from "../popups/deleteDialog"; import appNavigationController from "../appNavigationController"; import { LEFT_COLUMN_ACTIVE_CLASSNAME } from "../sidebarLeft"; +import AppPrivateSearchTab from "../sidebarRight/tabs/search"; +import { SliderSuperTab } from "../slider"; export default class ChatTopbar { container: HTMLDivElement; @@ -226,7 +228,12 @@ export default class ChatTopbar { attachClickEvent(this.btnSearch, (e) => { cancelEvent(e); if(this.peerId) { - this.appSidebarRight.searchTab.open(this.peerId, this.chat.threadId); + let tab = this.appSidebarRight.getTab(AppPrivateSearchTab); + if(!tab) { + tab = new AppPrivateSearchTab(this.appSidebarRight); + } + + tab.open(this.peerId, this.chat.threadId); } }, {listenerSetter: this.listenerSetter}); } diff --git a/src/components/emoticonsDropdown/index.ts b/src/components/emoticonsDropdown/index.ts index 9ce25ba9..c7a37a55 100644 --- a/src/components/emoticonsDropdown/index.ts +++ b/src/components/emoticonsDropdown/index.ts @@ -15,6 +15,7 @@ import StickersTab from "./tabs/stickers"; import { pause } from "../../helpers/schedulers"; import { MOUNT_CLASS_TO } from "../../config/debug"; import AppGifsTab from "../sidebarRight/tabs/gifs"; +import AppStickersTab from "../sidebarRight/tabs/stickers"; export const EMOTICONSSTICKERGROUP = 'emoticons-dropdown'; @@ -132,9 +133,13 @@ export class EmoticonsDropdown { this.searchButton = this.element.querySelector('.emoji-tabs-search'); this.searchButton.addEventListener('click', () => { if(this.tabId === 1) { - appSidebarRight.stickersTab.init(); + if(!appSidebarRight.isTabExists(AppStickersTab)) { + new AppStickersTab(appSidebarRight).open(); + } } else { - new AppGifsTab(appSidebarRight).open(); + if(!appSidebarRight.isTabExists(AppGifsTab)) { + new AppGifsTab(appSidebarRight).open(); + } } }); diff --git a/src/components/poll.ts b/src/components/poll.ts index 8d5c1800..918c1e66 100644 --- a/src/components/poll.ts +++ b/src/components/poll.ts @@ -8,6 +8,7 @@ import rootScope from "../lib/rootScope"; import { attachClickEvent, cancelEvent, detachClickEvent, findUpClassName } from "../helpers/dom"; import { ripple } from "./ripple"; import appSidebarRight from "./sidebarRight"; +import AppPollResultsTab from "./sidebarRight/tabs/pollResults"; let lineTotalLength = 0; const tailLength = 9; @@ -337,7 +338,10 @@ export default class PollElement extends HTMLElement { this.viewResults.addEventListener('click', (e) => { cancelEvent(e); - appSidebarRight.pollResultsTab.init(this.message); + + if(!appSidebarRight.isTabExists(AppPollResultsTab)) { + new AppPollResultsTab(appSidebarRight).open(this.message); + } }); ripple(this.viewResults); diff --git a/src/components/sidebarRight/index.ts b/src/components/sidebarRight/index.ts index 959950e0..116f9f7b 100644 --- a/src/components/sidebarRight/index.ts +++ b/src/components/sidebarRight/index.ts @@ -1,50 +1,31 @@ import appImManager from "../../lib/appManagers/appImManager"; import SidebarSlider from "../slider"; -import AppStickersTab from "./tabs/stickers"; -import AppPollResultsTab from "./tabs/pollResults"; -import AppGifsTab from "./tabs/gifs"; import mediaSizes, { ScreenSize } from "../../helpers/mediaSizes"; -import AppPrivateSearchTab from "./tabs/search"; import AppSharedMediaTab from "./tabs/sharedMedia"; import { MOUNT_CLASS_TO } from "../../config/debug"; export const RIGHT_COLUMN_ACTIVE_CLASSNAME = 'is-right-column-shown'; const sharedMediaTab = new AppSharedMediaTab(); -const searchTab = new AppPrivateSearchTab(); -const stickersTab = new AppStickersTab(); -const pollResultsTab = new AppPollResultsTab(); export class AppSidebarRight extends SidebarSlider { public static SLIDERITEMSIDS = { sharedMedia: 0, - search: 1, - stickers: 2, - pollResults: 3 }; public sharedMediaTab: AppSharedMediaTab; - public searchTab: AppPrivateSearchTab; - public stickersTab: AppStickersTab; - public pollResultsTab: AppPollResultsTab; constructor() { super({ sidebarEl: document.getElementById('column-right') as HTMLElement, tabs: new Map([ [AppSidebarRight.SLIDERITEMSIDS.sharedMedia, sharedMediaTab], - [AppSidebarRight.SLIDERITEMSIDS.search, searchTab], - [AppSidebarRight.SLIDERITEMSIDS.stickers, stickersTab], - [AppSidebarRight.SLIDERITEMSIDS.pollResults, pollResultsTab] ] as any[]), canHideFirst: true, navigationType: 'right' }); this.sharedMediaTab = sharedMediaTab; - this.searchTab = searchTab; - this.stickersTab = stickersTab; - this.pollResultsTab = pollResultsTab; mediaSizes.addListener('changeScreen', (from, to) => { if(to === ScreenSize.medium && from !== ScreenSize.mobile) { diff --git a/src/components/sidebarRight/tabs/gifs.ts b/src/components/sidebarRight/tabs/gifs.ts index 609b8608..1df2912d 100644 --- a/src/components/sidebarRight/tabs/gifs.ts +++ b/src/components/sidebarRight/tabs/gifs.ts @@ -77,7 +77,8 @@ export default class AppGifsTab extends SliderSuperTab { this.masonry.lazyLoadQueue.clear(); } - protected onOpen() { + public open() { + const ret = super.open(); appSidebarRight.toggleSidebar(true).then(() => { this.search('', true); @@ -85,6 +86,7 @@ export default class AppGifsTab extends SliderSuperTab { this.search(this.inputSearch.value, false); }; }); + return ret; } public async search(query: string, newSearch = true) { diff --git a/src/components/sidebarRight/tabs/pollResults.ts b/src/components/sidebarRight/tabs/pollResults.ts index 91b65a96..93108b90 100644 --- a/src/components/sidebarRight/tabs/pollResults.ts +++ b/src/components/sidebarRight/tabs/pollResults.ts @@ -1,43 +1,27 @@ -import { SliderTab } from "../../slider"; -import Scrollable from "../../scrollable"; -import appSidebarRight, { AppSidebarRight } from ".."; +import { SliderSuperTab } from "../../slider"; +import appSidebarRight from ".."; import appPollsManager from "../../../lib/appManagers/appPollsManager"; import { roundPercents } from "../../poll"; import { RichTextProcessor } from "../../../lib/richtextprocessor"; import appDialogsManager from "../../../lib/appManagers/appDialogsManager"; import { ripple } from "../../ripple"; -export default class AppPollResultsTab implements SliderTab { - private container = document.getElementById('poll-results-container') as HTMLDivElement; - private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement; - private closeBtn = this.container.querySelector('.sidebar-close-button') as HTMLButtonElement; - private resultsDiv = this.contentDiv.firstElementChild as HTMLDivElement; - private scrollable: Scrollable; +export default class AppPollResultsTab extends SliderSuperTab { + private resultsDiv: HTMLElement; - private message: any; + protected init() { + this.container.id = 'poll-results-container'; + this.container.classList.add('chatlist-container'); - constructor() { - this.scrollable = new Scrollable(this.contentDiv, 'POLL-RESULTS'); - } - - public cleanup() { - this.resultsDiv.innerHTML = ''; - this.message = undefined; - } + this.title.innerHTML = 'Results'; - public onCloseAfterTimeout() { - this.cleanup(); + this.resultsDiv = document.createElement('div'); + this.resultsDiv.classList.add('poll-results'); + this.scrollable.append(this.resultsDiv); } - public init(message: any) { - if(this.message === message) return; - - this.cleanup(); - - this.message = message; - - appSidebarRight.selectTab(AppSidebarRight.SLIDERITEMSIDS.pollResults); - + public open(message: any) { + const ret = super.open(); const poll = appPollsManager.getPoll(message.media.poll.id); const title = document.createElement('h3'); @@ -133,5 +117,7 @@ export default class AppPollResultsTab implements SliderTab { console.log('gOt VotEs', votes); }); */ }); + + return ret; } -} \ No newline at end of file +} diff --git a/src/components/sidebarRight/tabs/search.ts b/src/components/sidebarRight/tabs/search.ts index 6bca9956..3d617682 100644 --- a/src/components/sidebarRight/tabs/search.ts +++ b/src/components/sidebarRight/tabs/search.ts @@ -1,12 +1,9 @@ import appSidebarRight, { AppSidebarRight } from ".."; import AppSearch, { SearchGroup } from "../../appSearch"; import InputSearch from "../../inputSearch"; -import { SliderTab } from "../../slider"; - -export default class AppPrivateSearchTab implements SliderTab { - public container: HTMLElement; - public closeBtn: HTMLElement; +import { SliderSuperTab } from "../../slider"; +export default class AppPrivateSearchTab extends SliderSuperTab { private inputSearch: InputSearch; private appSearch: AppSearch; @@ -17,23 +14,22 @@ export default class AppPrivateSearchTab implements SliderTab { this.appSearch.beginSearch(this.peerId, this.threadId); } - onCloseAfterTimeout() { - this.peerId = 0; - this.threadId = 0; - this.appSearch.reset(); - } - - public init() { - this.container = document.getElementById('search-private-container'); - this.closeBtn = this.container.querySelector('.sidebar-close-button'); + protected init() { + this.container.id = 'search-private-container'; + this.container.classList.add('chatlist-container'); this.inputSearch = new InputSearch('Search'); - this.closeBtn.parentElement.append(this.inputSearch.container); - this.appSearch = new AppSearch(this.container.querySelector('.chatlist-container'), this.inputSearch, { + this.title.replaceWith(this.inputSearch.container); + + const c = document.createElement('div'); + c.classList.add('chatlist-container'); + this.scrollable.container.replaceWith(c); + this.appSearch = new AppSearch(c, this.inputSearch, { messages: new SearchGroup('Private Search', 'messages') }); } open(peerId: number, threadId?: number) { + const ret = super.open(); if(this.init) { this.init(); this.init = null; @@ -41,13 +37,13 @@ export default class AppPrivateSearchTab implements SliderTab { if(this.peerId !== 0) { this.appSearch.beginSearch(this.peerId, this.threadId); - return; + return ret; } this.peerId = peerId; this.threadId = threadId; - appSidebarRight.selectTab(AppSidebarRight.SLIDERITEMSIDS.search); appSidebarRight.toggleSidebar(true); + return ret; } -} \ No newline at end of file +} diff --git a/src/components/sidebarRight/tabs/stickers.ts b/src/components/sidebarRight/tabs/stickers.ts index e39449b2..061df7c8 100644 --- a/src/components/sidebarRight/tabs/stickers.ts +++ b/src/components/sidebarRight/tabs/stickers.ts @@ -1,29 +1,24 @@ -import { SliderTab } from "../../slider"; +import { SliderSuperTab } from "../../slider"; import InputSearch from "../../inputSearch"; -import Scrollable from "../../scrollable"; import LazyLoadQueue from "../../lazyLoadQueue"; -import { findUpClassName } from "../../../helpers/dom"; +import { findUpClassName, attachClickEvent } from "../../../helpers/dom"; import appImManager from "../../../lib/appManagers/appImManager"; import appStickersManager from "../../../lib/appManagers/appStickersManager"; import PopupStickers from "../../popups/stickers"; import animationIntersector from "../../animationIntersector"; import { RichTextProcessor } from "../../../lib/richtextprocessor"; import { wrapSticker } from "../../wrappers"; -import appSidebarRight, { AppSidebarRight } from ".."; +import appSidebarRight from ".."; import { StickerSet, StickerSetCovered } from "../../../layer"; -export default class AppStickersTab implements SliderTab { - private container = document.getElementById('stickers-container') as HTMLDivElement; - private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement; - private backBtn = this.container.querySelector('.sidebar-close-button') as HTMLButtonElement; - //private input = this.container.querySelector('#stickers-search') as HTMLInputElement; +export default class AppStickersTab extends SliderSuperTab { private inputSearch: InputSearch; - private setsDiv = this.contentDiv.firstElementChild as HTMLDivElement; - private scrollable: Scrollable; + private setsDiv: HTMLDivElement; private lazyLoadQueue: LazyLoadQueue; - constructor() { - this.scrollable = new Scrollable(this.contentDiv, 'STICKERS-SEARCH'); + protected init() { + this.container.id = 'stickers-container'; + this.container.classList.add('chatlist-container'); this.lazyLoadQueue = new LazyLoadQueue(); @@ -31,9 +26,13 @@ export default class AppStickersTab implements SliderTab { this.search(value); }); - this.backBtn.parentElement.append(this.inputSearch.container); + this.title.replaceWith(this.inputSearch.container); - this.setsDiv.addEventListener('click', (e) => { + this.setsDiv = document.createElement('div'); + this.setsDiv.classList.add('sticker-sets'); + this.scrollable.append(this.setsDiv); + + attachClickEvent(this.setsDiv, (e) => { const sticker = findUpClassName(e.target, 'sticker-set-sticker'); if(sticker) { const docId = sticker.dataset.docId; @@ -70,13 +69,13 @@ export default class AppStickersTab implements SliderTab { new PopupStickers(full.set).show(); }); } - }); + }, {listenerSetter: this.listenerSetter}); } public onCloseAfterTimeout() { this.setsDiv.innerHTML = ''; - this.inputSearch.value = ''; animationIntersector.checkAnimations(undefined, 'STICKERS-SEARCH'); + return super.onCloseAfterTimeout(); } public renderSet(set: StickerSet.stickerSet) { @@ -177,12 +176,13 @@ export default class AppStickersTab implements SliderTab { this.setsDiv.append(div); } - public init() { - appSidebarRight.selectTab(AppSidebarRight.SLIDERITEMSIDS.stickers); - + public open() { + const ret = super.open(); appSidebarRight.toggleSidebar(true).then(() => { this.renderFeatured(); }); + + return ret; } public renderFeatured() { @@ -236,4 +236,4 @@ export default class AppStickersTab implements SliderTab { }); }); } -} \ No newline at end of file +} diff --git a/src/components/slider.ts b/src/components/slider.ts index 12c4bbea..5aab9b67 100644 --- a/src/components/slider.ts +++ b/src/components/slider.ts @@ -117,6 +117,14 @@ export default class SidebarSlider { } } + public getTab(tabConstructor: SliderSuperTabConstructable) { + return this.historyTabIds.find(t => t instanceof tabConstructor) as SliderSuperTab; + } + + public isTabExists(tabConstructor: SliderSuperTabConstructable) { + return !!this.getTab(tabConstructor); + } + protected onCloseTab(id: number | SliderSuperTab, animate: boolean, isNavigation?: boolean) { if(!isNavigation) { appNavigationController.removeByType(this.navigationType, true); diff --git a/src/index.hbs b/src/index.hbs index 7a561ebe..54008d14 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -178,25 +178,6 @@ - - - diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index fb18d31b..c4c92647 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -37,6 +37,7 @@ import appStateManager, { AppStateManager } from './appStateManager'; import { MOUNT_CLASS_TO } from '../../config/debug'; import appNavigationController from '../../components/appNavigationController'; import appNotificationsManager from './appNotificationsManager'; +import AppPrivateSearchTab from '../../components/sidebarRight/tabs/search'; //console.log('appImManager included33!'); @@ -624,8 +625,9 @@ export class AppImManager { if(justReturn) { rootScope.broadcast('peer_changed', this.chat.peerId); - if(appSidebarRight.historyTabIds[appSidebarRight.historyTabIds.length - 1] === AppSidebarRight.SLIDERITEMSIDS.search) { - appSidebarRight.onCloseBtnClick(); + const searchTab = appSidebarRight.getTab(AppPrivateSearchTab); + if(searchTab) { + searchTab.close(); } appSidebarRight.sharedMediaTab.setPeer(this.chat.peerId, this.chat.threadId); diff --git a/src/scss/partials/_rightSidebar.scss b/src/scss/partials/_rightSidebar.scss index 997be695..98173d2b 100644 --- a/src/scss/partials/_rightSidebar.scss +++ b/src/scss/partials/_rightSidebar.scss @@ -736,7 +736,7 @@ } .user-caption { - padding: 6px 28px; + padding: 3px 28px 6px; } .user-title {