diff --git a/src/components/emoticonsDropdown/index.ts b/src/components/emoticonsDropdown/index.ts index 16187ffa..9ce25ba9 100644 --- a/src/components/emoticonsDropdown/index.ts +++ b/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(); } }); diff --git a/src/components/inputSearch.ts b/src/components/inputSearch.ts index 514e70f1..fbea8de4 100644 --- a/src/components/inputSearch.ts +++ b/src/components/inputSearch.ts @@ -76,4 +76,4 @@ export default class InputSearch { this.input.removeEventListener('input', this.onInput); this.clearBtn.removeEventListener('click', this.onClearClick); } -} \ No newline at end of file +} diff --git a/src/components/sidebarRight/index.ts b/src/components/sidebarRight/index.ts index 5303fe96..959950e0 100644 --- a/src/components/sidebarRight/index.ts +++ b/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) { diff --git a/src/components/sidebarRight/tabs/gifs.ts b/src/components/sidebarRight/tabs/gifs.ts index 8bfa7bc8..609b8608 100644 --- a/src/components/sidebarRight/tabs/gifs.ts +++ b/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; - 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; } } -} \ No newline at end of file +} diff --git a/src/index.hbs b/src/index.hbs index 7869e6f3..7a561ebe 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -197,12 +197,6 @@ -