dd/resources/js/nasa/components/tomAlert.js

import $ from 'jquery';

const TomAlert = {
    init() {
        this.oTomAlert = $(".tom-alert");
        this.oTomAlert.removeAttr('hidden');
        this.registerEvents();
    },

    show(oConfig = {}) {
        
        let oVirtualTrigger = $('<span></span>').attr({
            'tom-alert-type':           oConfig.sType || 'info',
            'tom-alert-msg':            oConfig.sMsg || '',
            'tom-alert-confirm':        oConfig.sConfirm || 'false',
            'tom-alert-url':            oConfig.sUrl || 'false',
            'tom-alert-icon-visible':   oConfig.sIconVisible || 'true',
            'tom-alert-border-variant': oConfig.sBorderVariant || 'true'
        });

        if (typeof oConfig.fConfirmed === 'function') {
            oVirtualTrigger.on('tomAlert:confirmed', oConfig.fConfirmed);
        }

        this.render(oVirtualTrigger);
    },

    render(oTriggerElement) {
        let _this = $(oTriggerElement);
        
        let sTomAlertType = _this.attr("tom-alert-type");
        let sTomAlertMsg = _this.attr("tom-alert-msg");
        
        let oClassIconMap = {
            'success': 'ri-checkbox-circle-line',
            'danger': 'ri-close-circle-line',
            'warning': 'ri-alert-line',
            'info': 'ri-information-2-line',
        };
        let oClassTextMap = {
            'success': 'text-success',
            'danger': 'text-danger',
            'warning': 'text-warning',
            'info': 'text-info',
        };
        
        let sClassIcon = oClassIconMap[sTomAlertType] || '';
        let sClassText = oClassTextMap[sTomAlertType] || '';
        
        let oTomAlertIcon = $(".tom-alert-icon");
        
        /// 图标
        oTomAlertIcon.attr("class", "tom-alert-icon "+sClassIcon+" "+sClassText);
        
        let sIconVisible = _this.attr("tom-alert-icon-visible");
        if (sIconVisible == "false") {
            oTomAlertIcon.hide();
        } else {
            oTomAlertIcon.show();
        }
        
        /// 边框
        let sBorderVariant = _this.attr("tom-alert-border-variant");
        if (sBorderVariant == "false") {
            this.oTomAlert.find(".tom-alert-inner").attr("class", "tom-alert-inner");
        } else {
            this.oTomAlert.find(".tom-alert-inner").attr("class", "tom-alert-inner "+"border-"+sTomAlertType);
        }
        
        /// 按钮颜色
        this.oTomAlert.find(".mac-btn-primary").attr("class", "mac-btn-primary "+"bg-"+sTomAlertType);
        
        /// 按钮切换
        let oBtnSubmit = this.oTomAlert.find(".tom-alert-footer .mac-btn-primary");
        let oBtnCancel = this.oTomAlert.find(".tom-alert-footer .mac-btn-secondary");
        let sTomAlertUrl = _this.attr("tom-alert-url");
        let sConfirm = _this.attr("tom-alert-confirm");
        
        this.oTomAlert.data("oCurrentTrigger", _this);
        this.oTomAlert.attr("data-current-url", sTomAlertUrl || "");
        
        if (sConfirm === "false") {
            oBtnCancel.hide();
        } else {
            oBtnCancel.show();
        }
        oBtnSubmit.addClass("js-tom-alert-submit");
        oBtnCancel.addClass("js-tom-alert-cancel");
        
        /// 信息
        $(".tom-alert-msg").html(sTomAlertMsg);
        
        /// 显示
        this.oTomAlert.addClass("is-active");
        this.oTomAlert.focus();
    },

    registerEvents() {
        const _self = this;

        $(document).on('keydown', '.tom-alert', function(oEvent) {
            if (oEvent.which === 13) {
                oEvent.preventDefault();
                _self.oTomAlert.find('.js-tom-alert-submit').trigger('click');
                return false;
            }
        });
        
        $(document).on('keydown', '.tom-alert', function(oEvent) {
            if (oEvent.which === 27) {
                oEvent.preventDefault();
                _self.oTomAlert.find('.js-tom-alert-cancel').trigger('click');
                return false;
            }
        });
        
        $(document).on('click', '.js-tom-alert-trigger', function() {
            _self.render(this);
        });

        $(document).on('click', '.js-tom-alert-cancel', function() {
            _self.oTomAlert.removeClass("is-active");
            let oActiveModal = $('.tom-modal.is-active').last();
            if (oActiveModal.length === 0) {
                return;
            }
            oActiveModal.focus();
        });
        
        $(document).on('click', '.js-tom-alert-submit', function() {
            let oTrigger = _self.oTomAlert.data("oCurrentTrigger");
            let sTargetUrl = _self.oTomAlert.attr("data-current-url");
            
            _self.oTomAlert.removeClass("is-active");

            if (oTrigger) {
                oTrigger.trigger('tomAlert:confirmed', [{ sUrl: sTargetUrl }]);
            }

            if (sTargetUrl && sTargetUrl !== "false") {
                window.location.href = sTargetUrl;
            }
            
            let oActiveModal = $('.tom-modal.is-active').last();
            if (oActiveModal.length === 0) {
                return;
            }
            oActiveModal.focus();
        });
    }
};

TomAlert.init();

if (typeof window !== 'undefined') {
    window.TomAlert = TomAlert;
}

export default TomAlert;