Refactor gifs tab

src/components/emoticonsDropdown/index.ts

@@ -14,6 +14,7 @@ import GifsTab from "./tabs/gifs";
 import StickersTab from "./tabs/stickers";
 import { pause } from "../../helpers/schedulers";
 import { MOUNT_CLASS_TO } from "../../config/debug";
+import AppGifsTab from "../sidebarRight/tabs/gifs";
 
 export const EMOTICONSSTICKERGROUP = 'emoticons-dropdown';
 
@@ -133,7 +134,7 @@ export class EmoticonsDropdown {
       if(this.tabId === 1) {
         appSidebarRight.stickersTab.init();
       } else {
-        appSidebarRight.gifsTab.init();
+        new AppGifsTab(appSidebarRight).open();
       }
     });
 

src/components/inputSearch.ts

@@ -76,4 +76,4 @@ export default class InputSearch {
     this.input.removeEventListener('input', this.onInput);
     this.clearBtn.removeEventListener('click', this.onClearClick);
   }
-}
+}

src/components/sidebarRight/index.ts

@@ -14,22 +14,19 @@ const sharedMediaTab = new AppSharedMediaTab();
 const searchTab = new AppPrivateSearchTab();
 const stickersTab = new AppStickersTab();
 const pollResultsTab = new AppPollResultsTab();
-const gifsTab = new AppGifsTab();
 
 export class AppSidebarRight extends SidebarSlider {
   public static SLIDERITEMSIDS = {
     sharedMedia: 0,
     search: 1,
     stickers: 2,
-    pollResults: 3,
-    gifs: 4,
+    pollResults: 3
   };
 
   public sharedMediaTab: AppSharedMediaTab;
   public searchTab: AppPrivateSearchTab;
   public stickersTab: AppStickersTab;
   public pollResultsTab: AppPollResultsTab;
-  public gifsTab: AppGifsTab;
 
   constructor() {
     super({
@@ -38,8 +35,7 @@ export class AppSidebarRight extends SidebarSlider {
         [AppSidebarRight.SLIDERITEMSIDS.sharedMedia, sharedMediaTab],
         [AppSidebarRight.SLIDERITEMSIDS.search, searchTab],
         [AppSidebarRight.SLIDERITEMSIDS.stickers, stickersTab],
-        [AppSidebarRight.SLIDERITEMSIDS.pollResults, pollResultsTab],
-        [AppSidebarRight.SLIDERITEMSIDS.gifs, gifsTab]
+        [AppSidebarRight.SLIDERITEMSIDS.pollResults, pollResultsTab]
       ] as any[]), 
       canHideFirst: true,
       navigationType: 'right'
@@ -49,7 +45,6 @@ export class AppSidebarRight extends SidebarSlider {
     this.searchTab = searchTab;
     this.stickersTab = stickersTab;
     this.pollResultsTab = pollResultsTab;
-    this.gifsTab = gifsTab;
 
     mediaSizes.addListener('changeScreen', (from, to) => {
       if(to === ScreenSize.medium && from !== ScreenSize.mobile) {

src/components/sidebarRight/tabs/gifs.ts

@@ -1,26 +1,20 @@
-import { SliderTab } from "../../slider";
+import { SliderSuperTab } from "../../slider";
 import InputSearch from "../../inputSearch";
-import Scrollable from "../../scrollable";
 import animationIntersector from "../../animationIntersector";
-import appSidebarRight, { AppSidebarRight } from "..";
+import appSidebarRight from "..";
 import appUsersManager from "../../../lib/appManagers/appUsersManager";
 import appInlineBotsManager, { AppInlineBotsManager } from "../../../lib/appManagers/appInlineBotsManager";
 import GifsMasonry from "../../gifsMasonry";
-import { findUpClassName } from "../../../helpers/dom";
+import { findUpClassName, attachClickEvent } from "../../../helpers/dom";
 import appImManager from "../../../lib/appManagers/appImManager";
 import type { MyDocument } from "../../../lib/appManagers/appDocsManager";
 import mediaSizes from "../../../helpers/mediaSizes";
 
 const ANIMATIONGROUP = 'GIFS-SEARCH';
 
-export default class AppGifsTab implements SliderTab {
-  private container = document.getElementById('search-gifs-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 AppGifsTab extends SliderSuperTab {
   private inputSearch: InputSearch;
-  private gifsDiv = this.contentDiv.firstElementChild as HTMLDivElement;
-  private scrollable: Scrollable;
+  private gifsDiv: HTMLDivElement;
 
   private nextOffset = '';
   private loadedAll = false;
@@ -30,22 +24,27 @@ export default class AppGifsTab implements SliderTab {
 
   private searchPromise: ReturnType<AppInlineBotsManager['getInlineResults']>;
 
-  constructor() {
-    this.scrollable = new Scrollable(this.contentDiv, ANIMATIONGROUP);
+  protected init() {
+    this.container.id = 'search-gifs-container';
     
-    this.masonry = new GifsMasonry(this.gifsDiv, ANIMATIONGROUP, this.scrollable);
-
     this.inputSearch = new InputSearch('Search GIFs', (value) => {
       this.reset();
       this.search(value);
     });
-
-    this.gifsDiv.addEventListener('click', this.onGifsClick);
-
-    this.backBtn.parentElement.append(this.inputSearch.container);
+    
+    this.title.replaceWith(this.inputSearch.container);
+    
+    this.gifsDiv = document.createElement('div');
+    this.gifsDiv.classList.add('gifs-masonry');
+    attachClickEvent(this.gifsDiv, this.onGifsClick, {listenerSetter: this.listenerSetter});
+    
+    this.scrollable.append(this.gifsDiv);
+    
+    this.masonry = new GifsMasonry(this.gifsDiv, ANIMATIONGROUP, this.scrollable);
+    //this.backBtn.parentElement.append(this.inputSearch.container);
   }
 
-  onGifsClick = (e: MouseEvent) => {
+  private onGifsClick = (e: MouseEvent | TouchEvent) => {
     const target = findUpClassName(e.target, 'gif');
     if(!target) return;
 
@@ -66,8 +65,9 @@ export default class AppGifsTab implements SliderTab {
   public onCloseAfterTimeout() {
     this.reset();
     this.gifsDiv.innerHTML = '';
-    this.inputSearch.value = '';
     animationIntersector.checkAnimations(undefined, ANIMATIONGROUP);
+    this.inputSearch.remove();
+    return super.onCloseAfterTimeout();
   }
 
   private reset() {
@@ -77,13 +77,9 @@ export default class AppGifsTab implements SliderTab {
     this.masonry.lazyLoadQueue.clear();
   }
 
-  public init() {
-    appSidebarRight.selectTab(AppSidebarRight.SLIDERITEMSIDS.gifs);
-
+  protected onOpen() {
     appSidebarRight.toggleSidebar(true).then(() => {
-      //this.renderFeatured();
       this.search('', true);
-      this.reset();
 
       this.scrollable.onScrolledBottom = () => {
         this.search(this.inputSearch.value, false);
@@ -125,7 +121,8 @@ export default class AppGifsTab implements SliderTab {
       this.scrollable.onScroll();
     } catch(err) {
       this.searchPromise = null;
-      throw new Error(JSON.stringify(err));
+      console.error('gifs loading error:', err);
+      throw err;
     }
   }
-}
+}

src/index.hbs

@@ -197,12 +197,6 @@
             </div>
             <div class="sidebar-content"><div class="poll-results"></div></div>
           </div>
-          <div class="sidebar-slider-item chatlist-container" id="search-gifs-container">
-            <div class="sidebar-header">
-              <button class="btn-icon tgico-close sidebar-close-button"></button>
-            </div>
-            <div class="sidebar-content"><div class="gifs-masonry"></div></div>
-          </div>
         </div>
       </div>
     </div>