refactor: move toast message to its respective file

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -77,6 +77,7 @@ function RemoteFunctions(config = {}) {
         "redraw",
         "onElementSelected", // an item is selected in live preview
         "onElementCleanup",
+        "onNonEditableElementClick", // called when user clicks on a non-editable element
         "handleConfigChange",
         // below  function gets called to render the dropdown when user clicks on the ... menu in the options box,
         // the handler should retrun html tor ender the dropdown item.
@@ -1420,7 +1421,6 @@ function RemoteFunctions(config = {}) {
         dismissNodeMoreOptionsBox();
         dismissMoreOptionsDropdown();
         dismissNodeInfoBox();
-        dismissToastMessage();
         cleanupPreviousElementState();
 
         // this should also be there when users are in highlight mode
@@ -1430,10 +1430,13 @@ function RemoteFunctions(config = {}) {
             return false;
         }
 
-        // if element is not editable and user clicks on it, then we show a toast notification saying
-        // that this element is not editable
+        // when user clicks on a non-editable element
         if (!element.hasAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR)) {
-            showToastMessage("notEditable");
+            getAllNodeMoreOptionsHandlers().forEach(handler => {
+                if (handler.onNonEditableElementClick) {
+                    handler.onNonEditableElementClick(element);
+                }
+            });
         }
 
         // make sure that the element is actually visible to the user
@@ -2122,68 +2125,9 @@ function RemoteFunctions(config = {}) {
         dismissNodeMoreOptionsBox();
         dismissMoreOptionsDropdown();
         dismissNodeInfoBox();
-        dismissToastMessage();
         getAllNodeMoreOptionsHandlers().forEach(handler => (handler.dismiss && handler.dismiss()));
     }
 
-    let _toastTimeout = null;
-
-    const TOAST_TYPE_MAPPING = {
-        notEditable: strings.toastNotEditable,
-        copyFirstTime: strings.toastCopyFirstTime
-    };
-
-    /**
-     * this function is to show a toast notification at the bottom center of the screen
-     * this toast message is used when user tries to edit a non-editable element
-     * @param {String} toastType - toastType determines the message to display in the toast
-     * @param {Number} duration - optional duration in milliseconds (default: 3000)
-     */
-    function showToastMessage(toastType, duration = 3000) {
-        // clear any existing toast & timer, if there are any
-        dismissToastMessage();
-
-        // create a new fresh toast container
-        const toast = window.document.createElement('div');
-        toast.id = 'phoenix-toast-notification';
-        toast.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
-        const shadow = toast.attachShadow({ mode: 'open' });
-
-        const styles = cssStyles.toastMessage;
-
-        const content = `
-            <div class="toast-container">
-                <div class="toast-message">${TOAST_TYPE_MAPPING[toastType]}</div>
-            </div>
-        `;
-
-        shadow.innerHTML = `<style>${styles}</style>${content}`;
-        window.document.body.appendChild(toast);
-
-        // Auto-dismiss after the given time
-        _toastTimeout = setTimeout(() => {
-            if (toast && toast.parentNode) {
-                toast.remove();
-            }
-            _toastTimeout = null;
-        }, duration);
-    }
-
-    /**
-     * this function is to dismiss the toast message
-     * and clear its timeout (if any)
-     */
-    function dismissToastMessage() {
-        const toastMessage = window.document.getElementById('phoenix-toast-notification');
-        if (toastMessage) {
-            toastMessage.remove();
-        }
-        if (_toastTimeout) {
-            clearTimeout(_toastTimeout);
-        }
-        _toastTimeout = null;
-    }
-
     /**
      * Helper function to cleanup previously clicked element highlighting and state
      */
@@ -2312,7 +2256,6 @@ function RemoteFunctions(config = {}) {
         "applyDOMEdits": applyDOMEdits,
         "updateConfig": updateConfig,
         "dismissUIAndCleanupState": dismissUIAndCleanupState,
-        "showToastMessage": showToastMessage,
         "escapeKeyPressInEditor": _escapeKeyPressInEditor,
         "getMode": function() { return config.mode; }
     };

src/extensionsIntegrated/phoenix-pro/browser-context/toast-message.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2021 - present core.ai
+ * SPDX-License-Identifier: LicenseRef-Proprietary
+ */
+/*global GLOBALS, strings, cssStyles, LivePreviewView, customReturns*/
+
+let _toastTimeout = null;
+
+const TOAST_TYPE_MAPPING = {
+    notEditable: strings.toastNotEditable,
+    copyFirstTime: strings.toastCopyFirstTime
+};
+
+/**
+ * this function is to show a toast notification at the bottom center of the screen
+ * this toast message is used when user tries to edit a non-editable element
+ * @param {String} toastType - toastType determines the message to display in the toast
+ * @param {Number} duration - optional duration in milliseconds (default: 3000)
+ */
+function showToastMessage(toastType, duration = 3000) {
+    // clear any existing toast & timer, if there are any
+    dismissToastMessage();
+
+    // create a new fresh toast container
+    const toast = window.document.createElement("div");
+    toast.id = "phoenix-toast-notification";
+    toast.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
+    const shadow = toast.attachShadow({ mode: "open" });
+
+    const styles = cssStyles.toastMessage;
+
+    const content = `
+            <div class="toast-container">
+                <div class="toast-message">${TOAST_TYPE_MAPPING[toastType]}</div>
+            </div>
+        `;
+
+    shadow.innerHTML = `<style>${styles}</style>${content}`;
+    window.document.body.appendChild(toast);
+
+    // Auto-dismiss after the given time
+    _toastTimeout = setTimeout(() => {
+        if (toast && toast.parentNode) {
+            toast.remove();
+        }
+        _toastTimeout = null;
+    }, duration);
+}
+
+/**
+ * this function is to dismiss the toast message
+ * and clear its timeout (if any)
+ */
+function dismissToastMessage() {
+    const toastMessage = window.document.getElementById("phoenix-toast-notification");
+    if (toastMessage) {
+        toastMessage.remove();
+    }
+    if (_toastTimeout) {
+        clearTimeout(_toastTimeout);
+    }
+    _toastTimeout = null;
+}
+
+// this is just a wrapper function which calls the show toast message
+// its needed to discard the element param that is passed to it by remote functions
+function onNonEditableElementClick(element) {
+    showToastMessage("notEditable");
+}
+
+// Register with LivePreviewView
+LivePreviewView.registerNodeMoreOptionsHandler("toast-message", {
+    onNonEditableElementClick: onNonEditableElementClick,
+    dismiss: dismissToastMessage
+});
+
+customReturns.showToastMessage = showToastMessage;

src/extensionsIntegrated/phoenix-pro/main.js

@@ -23,6 +23,7 @@ define(function (require, exports, module) {
     const DragAndDropCode = require("text!./browser-context/dragAndDrop.js");
     const HotCornersCode = require("text!./browser-context/hot-corners.js");
     const GenericToolsCode = require("text!./browser-context/generic-tools.js");
+    const ToastMessageCode = require("text!./browser-context/toast-message.js");
     const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
 
     function _addRemoteScripts() {
@@ -46,6 +47,7 @@ define(function (require, exports, module) {
         LiveDevProtocol.addRemoteFunctionScript("DragAndDrop", DragAndDropCode);
         LiveDevProtocol.addRemoteFunctionScript("HotCornersCode", HotCornersCode);
         LiveDevProtocol.addRemoteFunctionScript("GenericTools", GenericToolsCode);
+        LiveDevProtocol.addRemoteFunctionScript("ToastMessageCode", ToastMessageCode);
     }
     _addRemoteScripts();
 });