laravel-jstools/lib/entities/Modal/BS52Modal.js

JS tools for building front-side of Laravel applications

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BS52Modal = void 0;
const Modal_1 = require("./Modal");
const ContextTypeEnum_1 = require("../../types/ContextTypeEnum");
class BS52Modal extends Modal_1.Modal {
    constructor(modalId, modalUsage, modalData, showNoty, tools) {
        super(modalId, modalUsage, modalData, showNoty);
        this.titleEl = null;
        this.bodyCaptionEl = null;
        this.bodyEl = null;
        this.submitEl = null;
        this.submitTextEl = null;
        this.submitSpinnerEl = null;
        this.loadingSpinnerEl = null;
        this.cancelEl = null;
        this.cancelTextEl = null;
        this.overlayEl = null;
        this.alertEl = null;
        this.modalEl = document.getElementById(`${this.modalId}`);
        if (this.modalEl) {
            this.modal = new tools.bootstrap.Modal(`#${this.modalId}`);
            this.titleEl = this.modalEl.querySelector(`#${this.modalId}__title`);
            this.bodyCaptionEl = this.modalEl.querySelector(`#${this.modalId}__bodyCaption`);
            this.bodyEl = this.modalEl.querySelector(`#${this.modalId}__body`);
            this.submitEl = this.modalEl.querySelector(`#${this.modalId}__btnSubmit`);
            this.submitTextEl = this.modalEl.querySelector(`#${this.modalId}__btnSubmitText`);
            if (this.submitEl) {
                this.submitEl.onclick = () => {
                    this.submit();
                };
            }
            this.submitSpinnerEl = this.modalEl.querySelector(`#${this.modalId}__btnSubmitSpinner`);
            this.loadingSpinnerEl = this.modalEl.querySelector(`#${this.modalId}__loadingSpinner`);
            this.cancelEl = this.modalEl.querySelector(`#${this.modalId}__btnCancel`);
            this.cancelTextEl = this.modalEl.querySelector(`#${this.modalId}__btnCancelText`);
            this.overlayEl = this.modalEl.querySelector(`#${this.modalId}__overlay`);
            this.alertEl = this.modalEl.querySelector(`#${this.modalId}__alert`);
            this.modalEl.addEventListener('hidden.bs.modal', (event) => {
                this.onHiddenCallback();
            });
        }
    }
    showEl(el) {
        if (el === null || el === void 0 ? void 0 : el.classList.contains('d-none')) {
            el === null || el === void 0 ? void 0 : el.classList.remove('d-none');
        }
    }
    hideEl(el) {
        if (!(el === null || el === void 0 ? void 0 : el.classList.contains('d-none'))) {
            el === null || el === void 0 ? void 0 : el.classList.add('d-none');
        }
    }
    modalShow() {
        this.modal.show();
    }
    modalHide() {
        this.modal.hide();
    }
    modalShowAlerts(alertList, contextType) {
        if (this.alertEl) {
            const classList = [];
            Object.keys(ContextTypeEnum_1.ContextTypeEnum).forEach((key, index) => {
                classList.push(`alert-${key}`);
            });
            let html = '';
            if (alertList.length === 1) {
                html = alertList[0];
            }
            else {
                html += '<ul>';
                alertList.forEach((alert) => {
                    html += `<li>${alert}</li>`;
                });
                html += '</ul>';
            }
            this.alertEl.innerHTML = html;
            this.alertEl.classList.remove(...classList);
            this.alertEl.classList.add(`alert-${contextType}`);
            this.showEl(this.alertEl);
        }
    }
    modalClearAlerts() {
        if (this.alertEl) {
            this.alertEl.innerHTML = '';
            this.hideEl(this.alertEl);
        }
    }
    modalOverlayShow() {
        this.showEl(this.overlayEl);
    }
    modalOverlayHide() {
        this.hideEl(this.overlayEl);
    }
    modalSubmitShow() {
        this.showEl(this.submitEl);
    }
    modalSubmitHide() {
        this.hideEl(this.submitEl);
    }
    modalSubmitSpinnerShow() {
        this.showEl(this.submitSpinnerEl);
    }
    modalLoadingSpinnerShow() {
        this.showEl(this.loadingSpinnerEl);
    }
    modalExtraSpinnerShow() {
        if (this.extraSpinners) {
            this.extraSpinners.forEach((el) => {
                this.showEl(el);
            });
        }
    }
    modalSubmitSpinnerHide() {
        this.hideEl(this.submitSpinnerEl);
    }
    modalLoadingSpinnerHide() {
        this.hideEl(this.loadingSpinnerEl);
    }
    modalExtraSpinnerHide() {
        if (this.extraSpinners) {
            this.extraSpinners.forEach((el) => {
                this.hideEl(el);
            });
        }
    }
    modalButtonsEnable() {
        // need
    }
    modalButtonsDisable() {
        // need
    }
    modalSetTitle(text) {
        if (this.titleEl) {
            this.titleEl.innerHTML = text;
        }
    }
    modalSetSubmitText(text) {
        if (this.submitTextEl) {
            this.submitTextEl.innerHTML = text;
        }
    }
    modalSetCancelText(text) {
        if (this.cancelTextEl) {
            this.cancelTextEl.innerHTML = text;
        }
    }
    modalSetBodyCaption(text) {
        if (this.bodyCaptionEl) {
            this.bodyCaptionEl.innerHTML = text;
        }
    }
    modalSetBodyText(text) {
        if (this.bodyEl) {
            this.bodyEl.innerHTML = text;
        }
    }
}
exports.BS52Modal = BS52Modal;