import { horizontalMenu, putPreloader, renderImageFromUrl, ripple } from "../../components/misc"; //import Scrollable from '../../components/scrollable'; import Scrollable from '../../components/scrollable_new'; import { $rootScope, findUpClassName } from "../utils"; import appMessagesManager from "./appMessagesManager"; import appPhotosManager from "./appPhotosManager"; import appPeersManager from "./appPeersManager"; import appUsersManager from "./appUsersManager"; import appProfileManager from "./appProfileManager"; import { RichTextProcessor } from "../richtextprocessor"; import { logger, LogLevels } from "../polyfill"; import appImManager from "./appImManager"; import appMediaViewer from "./appMediaViewer"; import LazyLoadQueue from "../../components/lazyLoadQueue"; import { wrapDocument, wrapAudio, wrapSticker } from "../../components/wrappers"; import AppSearch, { SearchGroup } from "../../components/appSearch"; import AvatarElement from "../../components/avatar"; import appForward from "../../components/appForward"; import { mediaSizes } from "../config"; import SidebarSlider, { SliderTab } from "../../components/slider"; import appStickersManager, { MTStickerSet, MTStickerSetCovered, MTStickerSetMultiCovered } from "./appStickersManager"; import animationIntersector, { AnimationItem } from "../../components/animationIntersector"; import PopupStickers from "../../components/popupStickers"; import SearchInput from "../../components/searchInput"; const testScroll = false; let setText = (text: string, el: HTMLDivElement) => { window.requestAnimationFrame(() => { if(el.childElementCount > 1) { el.firstElementChild.remove(); } let p = document.createElement('p'); p.innerHTML = text; el.prepend(p); el.style.display = ''; }); }; 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; private searchInput: SearchInput; private setsDiv = this.contentDiv.firstElementChild as HTMLDivElement; private scrollable: Scrollable; private lazyLoadQueue: LazyLoadQueue; constructor() { this.scrollable = new Scrollable(this.contentDiv, 'y', 'STICKERS-SEARCH', undefined, undefined, 2); this.scrollable.setVirtualContainer(this.setsDiv); this.lazyLoadQueue = new LazyLoadQueue(5); this.searchInput = new SearchInput('Search Stickers', (value) => { this.search(value); }); this.backBtn.parentElement.append(this.searchInput.container); this.setsDiv.addEventListener('click', (e) => { const sticker = findUpClassName(e.target, 'sticker-set-sticker'); if(sticker) { const docID = sticker.dataset.docID; appImManager.chatInputC.sendMessageWithDocument(docID); return; } const target = findUpClassName(e.target, 'sticker-set'); if(!target) return; const id = target.dataset.stickerSet as string; const access_hash = target.dataset.stickerSet as string; const button = findUpClassName(e.target, 'sticker-set-button') as HTMLElement; if(button) { e.preventDefault(); e.cancelBubble = true; button.setAttribute('disabled', 'true'); appStickersManager.getStickerSet({id, access_hash}).then(full => { appStickersManager.toggleStickerSet(full.set).then(changed => { if(changed) { button.innerText = full.set.installed_date ? 'Added' : 'Add'; button.classList.toggle('gray', !!full.set.installed_date); } }).finally(() => { //button.style.width = set.installed_date ? '68px' : '52px'; button.removeAttribute('disabled'); }); }); } else { appStickersManager.getStickerSet({id, access_hash}).then(full => { new PopupStickers(full.set).show(); }); } }); } public onCloseAfterTimeout() { this.setsDiv.innerHTML = ''; this.searchInput.value = ''; animationIntersector.checkAnimations(undefined, 'STICKERS-SEARCH'); } public renderSet(set: MTStickerSet) { console.log('renderSet:', set); const div = document.createElement('div'); div.classList.add('sticker-set'); const header = document.createElement('div'); header.classList.add('sticker-set-header'); const details = document.createElement('div'); details.classList.add('sticker-set-details'); details.innerHTML = `