144 lines
4.4 KiB
TypeScript
144 lines
4.4 KiB
TypeScript
import { PopupElement } from "./popup";
|
|
import appStickersManager from "../lib/appManagers/appStickersManager";
|
|
import { RichTextProcessor } from "../lib/richtextprocessor";
|
|
import Scrollable from "./scrollable_new";
|
|
import { wrapSticker } from "./wrappers";
|
|
import LazyLoadQueue from "./lazyLoadQueue";
|
|
import { putPreloader } from "./misc";
|
|
import animationIntersector from "./animationIntersector";
|
|
import { findUpClassName } from "../lib/utils";
|
|
import appImManager from "../lib/appManagers/appImManager";
|
|
import { StickerSet } from "../layer";
|
|
|
|
export default class PopupStickers extends PopupElement {
|
|
private stickersFooter: HTMLElement;
|
|
private stickersDiv: HTMLElement;
|
|
private h6: HTMLElement;
|
|
|
|
private set: StickerSet.stickerSet;
|
|
|
|
constructor(private stickerSetInput: {
|
|
//_: 'inputStickerSetID',
|
|
id: string,
|
|
access_hash: string
|
|
}) {
|
|
super('popup-stickers', null, {closable: true, body: true});
|
|
|
|
this.h6 = document.createElement('h6');
|
|
this.h6.innerText = 'Loading...';
|
|
|
|
this.header.append(this.h6);
|
|
|
|
this.onClose = () => {
|
|
animationIntersector.checkAnimations(false);
|
|
this.stickersFooter.removeEventListener('click', this.onFooterClick);
|
|
this.stickersDiv.removeEventListener('click', this.onStickersClick);
|
|
this.element.removeEventListener('click', onOverlayClick);
|
|
};
|
|
|
|
this.onCloseAfterTimeout = () => {
|
|
animationIntersector.checkAnimations(undefined, 'STICKERS-POPUP');
|
|
};
|
|
|
|
const onOverlayClick = (e: MouseEvent) => {
|
|
if(!findUpClassName(e.target, 'popup-container')) {
|
|
this.closeBtn.click();
|
|
}
|
|
};
|
|
|
|
this.element.addEventListener('click', onOverlayClick);
|
|
|
|
const div = document.createElement('div');
|
|
div.classList.add('sticker-set');
|
|
|
|
this.stickersDiv = document.createElement('div');
|
|
this.stickersDiv.classList.add('sticker-set-stickers');
|
|
|
|
putPreloader(this.stickersDiv);
|
|
|
|
this.stickersFooter = document.createElement('div');
|
|
this.stickersFooter.classList.add('sticker-set-footer');
|
|
|
|
div.append(this.stickersDiv);
|
|
|
|
this.stickersFooter.innerText = 'Loading...';
|
|
|
|
this.body.append(div);
|
|
const scrollable = new Scrollable(this.body);
|
|
this.body.append(this.stickersFooter);
|
|
|
|
// const editButton = document.createElement('button');
|
|
// editButton.classList.add('btn-primary');
|
|
|
|
// this.stickersFooter.append(editButton);
|
|
|
|
this.loadStickerSet();
|
|
}
|
|
|
|
onFooterClick = () => {
|
|
this.stickersFooter.setAttribute('disabled', 'true');
|
|
|
|
appStickersManager.toggleStickerSet(this.set).then(() => {
|
|
this.closeBtn.click();
|
|
}).catch(() => {
|
|
this.stickersFooter.removeAttribute('disabled');
|
|
});
|
|
};
|
|
|
|
onStickersClick = (e: MouseEvent) => {
|
|
const target = findUpClassName(e.target, 'sticker-set-sticker');
|
|
if(!target) return;
|
|
|
|
const fileID = target.dataset.docID;
|
|
if(appImManager.chatInputC.sendMessageWithDocument(fileID)) {
|
|
this.closeBtn.click();
|
|
} else {
|
|
console.warn('got no doc by id:', fileID);
|
|
}
|
|
};
|
|
|
|
private loadStickerSet() {
|
|
return appStickersManager.getStickerSet(this.stickerSetInput).then(set => {
|
|
//console.log('PopupStickers loadStickerSet got set:', set);
|
|
|
|
this.set = set.set;
|
|
|
|
animationIntersector.checkAnimations(true);
|
|
|
|
this.h6.innerHTML = RichTextProcessor.wrapEmojiText(set.set.title);
|
|
!set.set.installed_date ? this.stickersFooter.classList.add('add') : this.stickersFooter.classList.remove('add');
|
|
this.stickersFooter.innerHTML = set.set.hasOwnProperty('installed_date') ? '<div style="cursor: pointer; margin: 0 auto; width: 150px;">Remove stickers</div>' : `<button class="btn-primary">ADD ${set.set.count} STICKERS</button>`;
|
|
|
|
this.stickersFooter.addEventListener('click', this.onFooterClick);
|
|
|
|
if(set.documents.length) {
|
|
this.stickersDiv.addEventListener('click', this.onStickersClick);
|
|
}
|
|
|
|
const lazyLoadQueue = new LazyLoadQueue();
|
|
|
|
this.stickersDiv.innerHTML = '';
|
|
for(let doc of set.documents) {
|
|
if(doc._ == 'documentEmpty') {
|
|
continue;
|
|
}
|
|
|
|
const div = document.createElement('div');
|
|
div.classList.add('sticker-set-sticker');
|
|
|
|
wrapSticker({
|
|
doc,
|
|
div,
|
|
lazyLoadQueue,
|
|
group: 'STICKERS-POPUP',
|
|
play: true,
|
|
loop: true,
|
|
width: 80,
|
|
height: 80
|
|
});
|
|
|
|
this.stickersDiv.append(div);
|
|
}
|
|
});
|
|
}
|
|
} |