@memberstack/dom 1.9.7 → 1.9.9

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,25 +39,49 @@ 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.initDefaultMessageBox = function () {
+    if (document.readyState !== "loading") {
+        initMessageBoxes();
+    }
+    else {
+        document.addEventListener("DOMContentLoaded", function (event) {
+            initMessageBoxes();
+        });
+    }
+    function initMessageBoxes() {
+        defaultMessageBox_js_1.initCSS();
+        defaultMessageBox_js_1.addSuccessBox();
+        defaultMessageBox_js_1.addErrorBox();
+    }
+};
 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);
+    if (!document.querySelector("[data-ms-message='success']")) {
+        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) {
     if (element) {
@@ -72,7 +96,14 @@ exports.showLoader = function (element) {
     var div = document.createElement("div");
     div.setAttribute("data-ms-loader", "true");
     div.innerHTML = loaderHTML;
-    document.body.appendChild(div);
+    if (document.readyState !== "loading") {
+        document.body.appendChild(div);
+    }
+    else {
+        document.addEventListener("DOMContentLoaded", function (event) {
+            document.body.appendChild(div);
+        });
+    }
 };
 exports.hideLoader = function (element) {
     var _a;
@@ -84,9 +115,9 @@ exports.hideLoader = function (element) {
 };
 exports.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);
 };
 var modal;
 exports.openModal = function (type, params) {
@@ -103,13 +134,15 @@ exports.openModal = function (type, params) {
                     display: type.toLowerCase(),
                     params: params,
                     onSuccess: resolveModal,
-                }
+                },
             });
             return [2 /*return*/, modalPromise];
         });
     });
 };
 exports.hideModal = function () {
+    var _a;
     modal === null || modal === void 0 ? void 0 : modal.$destroy();
     exports.hideLoader();
+    (_a = document.querySelector("#msOverlay")) === null || _a === void 0 ? void 0 : _a.remove();
 };