Refactor search & sticker tabs

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);

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});
   }

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();
+        }
       }
     });
 

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);
 

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) {

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) {

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;
   }
-}
+}

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;
   }
-}
+}

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 {
       });
     });
   }
-}
+}

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);

src/index.hbs

@@ -178,25 +178,6 @@
               </div>
             </div>
           </div>
-          <div class="sidebar-slider-item chatlist-container" id="search-private-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-close sidebar-close-button"></button>
-            </div>
-            <div class="chatlist-container"></div>
-          </div>
-          <div class="sidebar-slider-item chatlist-container" id="stickers-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-close sidebar-close-button"></button>
-            </div>
-            <div class="sidebar-content"><div class="sticker-sets"></div></div>
-          </div>
-          <div class="sidebar-slider-item chatlist-container" id="poll-results-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-close sidebar-close-button"></button>
-              <div class="sidebar-header__title">Results</div>
-            </div>
-            <div class="sidebar-content"><div class="poll-results"></div></div>
-          </div>
         </div>
       </div>
     </div>

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);

src/scss/partials/_rightSidebar.scss

@@ -736,7 +736,7 @@
     }
   
     .user-caption {
-      padding: 6px 28px;
+      padding: 3px 28px 6px;
     }
 
     .user-title {