tg-mini-app-binder/src/modules/WebAppModule.js

A modular and extendable wrapper for the Telegram Mini App API to simplify interactions between your web app and the Telegram client.

/**
 * @class WebAppModule
 * @description Manages general WebApp properties and events.
 */
export default class WebAppModule {
    /**
     * @param {object} tg - The Telegram WebApp object.
     */
    constructor(tg) {
        this.tg = tg;
    }
   /**
     * Show Popup in the Mini App.
     * @param {JSON} data - contains title, message, buttons->optional
     * @param {object} callback - callback action
     */
    showPopup(data, callback ){
        this.tg.showPopup(data, callback);
    }
   /**
     * Show Alert in the Mini App.
     */
    showAlert(data, callback){
        this.tg.showAlert(data, callback);
    }
    /**
     * Show confirm in the Mini App.
     */
    showConfirm(data, callback){
        this.tg.showAlert(data, callback);
    }
   /**
     * open qr scanner.
     */
    showScanQrPopUp(data, callback) {
        this.tg.showScanQrPopUp(data, callback);
    }
       /**
     * Closes the qr scaner.
     */
    closeScanQrPopUp(){
        this.tg.closeScanQrPopUp();
    }
    /**
     * Closes the Mini App.
     */
    close() {
        this.tg.enableClosingConfirmation();
        this.tg.close();
    }

    /**
     * Expands the Mini App to its maximum height.
     */
    expand() {
        this.tg.expand();
    }

    /**
     * Checks if the Mini App is expanded.
     * @returns {boolean}
     */
    isExpanded() {
        return this.tg.isExpanded;
    }

    /**
     * Returns the platform the app is running on.
     * @returns {'ios' | 'android' | 'desktop' | 'test'}
     */
    getPlatform() {
        return this.tg.platform;
    }

    /**
     * Returns the color scheme of the Telegram app.
     * @returns {'light' | 'dark'}
     */
    getColorScheme() {
        return this.tg.colorScheme;
    }

    /**
     * Registers a callback for a specific event.
     * @param {'themeChanged' | 'viewportChanged' | 'mainButtonClicked'} eventType - The type of event to listen for.
     * @param {Function} callback - The function to call when the event occurs.
     */
    onEvent(eventType, callback) {
        this.tg.onEvent(eventType, callback);
    }

    /**
     * Unregisters an event callback.
     * @param {'themeChanged' | 'viewportChanged' | 'mainButtonClicked'} eventType - The type of event.
     * @param {Function} callback - The callback function to remove.
     */
    offEvent(eventType, callback) {
        this.tg.offEvent(eventType, callback);
    }
}