@memberstack/dom 1.9.8 → 1.9.10

package/lib/methods/dom/methods.d.ts

@@ -1,6 +1,7 @@
 export declare type OpenModalParams = {
     type: "LOGIN" | "SIGNUP" | "FORGOT_PASSWORD" | "RESET_PASSWORD" | "PROFILE";
 };
+export declare const initDefaultMessageBox: () => void;
 export declare const showMessage: (msg: any, isError: any) => void;
 export declare const showLoader: (element?: any) => void;
 export declare const hideLoader: (element?: any) => void;

package/lib/methods/dom/methods.js

@@ -39,27 +39,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hideModal = exports.openModal = exports.handleRedirect = exports.hideLoader = exports.showLoader = exports.showMessage = void 0;
+exports.hideModal = exports.openModal = exports.handleRedirect = exports.hideLoader = exports.showLoader = exports.showMessage = exports.initDefaultMessageBox = void 0;
+var defaultMessageBox_js_1 = require("../../utils/defaultMessageBox.js");
 var main_dom_js_1 = __importDefault(require("./main-dom.js"));
-exports.showMessage = function (msg, isError) {
-    var cssEl = document.createElement("style");
-    var css = ".ms-error-message { position: fixed; left: 5%; right: 5%; bottom: 3%; z-index: 10000000; display: block; margin-right: auto; margin-left: auto; padding-top: 1em; padding-right: 10px; padding-bottom: 1em; border-radius: 3px; background-color: #fd3a57; box-shadow: 0 0 0 2px #fff; color: #fff; font-size: 1.1em; line-height: 1.8em; font-weight: 700; text-align: center; }";
-    cssEl.setAttribute("data-ms-style", "");
-    cssEl.appendChild(document.createTextNode(css));
-    document.head.appendChild(cssEl);
-    var color = isError ? "#FD3A57" : "#40c88b";
-    var messageHTML = "<div data-ms-message style=\"background: " + color + "\" class=\"ms-error-message\"><div id=\"ms-message\">" + msg + "</div></div>";
-    var div = document.createElement("div");
-    div.setAttribute("data-ms-message", "");
-    div.innerHTML = messageHTML;
-    document.body.appendChild(div);
+var initDefaultMessageBox = function () {
+    if (document.readyState !== "loading") {
+        initMessageBoxes();
+    }
+    else {
+        document.addEventListener("DOMContentLoaded", function (event) {
+            initMessageBoxes();
+        });
+    }
+    function initMessageBoxes() {
+        (0, defaultMessageBox_js_1.initCSS)();
+        (0, defaultMessageBox_js_1.addSuccessBox)();
+        (0, defaultMessageBox_js_1.addErrorBox)();
+    }
+};
+exports.initDefaultMessageBox = initDefaultMessageBox;
+var showMessage = function (msg, isError) {
+    if (!document.querySelector("[data-ms-message='success']")) {
+        (0, exports.initDefaultMessageBox)();
+    }
+    var messageBox;
+    if (isError) {
+        messageBox = document.querySelector("[data-ms-message='error']");
+    }
+    else {
+        messageBox = document.querySelector("[data-ms-message='success']");
+    }
+    //set text
+    var messageTextBox = messageBox.querySelector("[data-ms-message-text]");
+    if (messageTextBox) {
+        messageTextBox.innerHTML = msg;
+    }
+    messageBox.style.display = "block";
+    //add event listener to close button
+    var closeBtn = messageBox.querySelector("[data-ms-message-close]");
+    closeBtn === null || closeBtn === void 0 ? void 0 : closeBtn.addEventListener("click", function () {
+        messageBox.style.display = "none";
+    });
     setTimeout(function () {
-        var _a, _b;
-        (_a = document.querySelector("[data-ms-style]")) === null || _a === void 0 ? void 0 : _a.remove();
-        (_b = document.querySelector("[data-ms-message]")) === null || _b === void 0 ? void 0 : _b.remove();
-    }, 4000);
+        messageBox.style.display = "none";
+    }, 7000);
 };
-exports.showLoader = function (element) {
+exports.showMessage = showMessage;
+var showLoader = function (element) {
     if (element) {
         element.style.display = "block";
         return;
@@ -81,7 +107,8 @@ exports.showLoader = function (element) {
         });
     }
 };
-exports.hideLoader = function (element) {
+exports.showLoader = showLoader;
+var hideLoader = function (element) {
     var _a;
     if (element) {
         element.style.display = "none";
@@ -89,14 +116,16 @@ exports.hideLoader = function (element) {
     }
     (_a = document.querySelector("[data-ms-loader]")) === null || _a === void 0 ? void 0 : _a.remove();
 };
-exports.handleRedirect = function (redirect, redirectOverride) {
+exports.hideLoader = hideLoader;
+var handleRedirect = function (redirect, redirectOverride) {
     if (redirectOverride)
-        return window.location.href = redirectOverride;
-    if (redirect && (window.location.pathname !== redirect))
-        return window.location.href = redirect;
+        return (window.location.href = redirectOverride);
+    if (redirect && window.location.pathname !== redirect)
+        return (window.location.href = redirect);
 };
+exports.handleRedirect = handleRedirect;
 var modal;
-exports.openModal = function (type, params) {
+var openModal = function (type, params) {
     if (params === void 0) { params = {}; }
     return __awaiter(void 0, void 0, void 0, function () {
         var resolveModal, modalPromise;
@@ -110,13 +139,17 @@ exports.openModal = function (type, params) {
                     display: type.toLowerCase(),
                     params: params,
                     onSuccess: resolveModal,
-                }
+                },
             });
             return [2 /*return*/, modalPromise];
         });
     });
 };
-exports.hideModal = function () {
+exports.openModal = openModal;
+var hideModal = function () {
+    var _a;
     modal === null || modal === void 0 ? void 0 : modal.$destroy();
-    exports.hideLoader();
+    (0, exports.hideLoader)();
+    (_a = document.querySelector("#msOverlay")) === null || _a === void 0 ? void 0 : _a.remove();
 };
+exports.hideModal = hideModal;