Proposal for Deployed Dashboards Enhancement Using Drag & Drop Functionality

assets/js/hooks/gridstack.js

@@ -15,16 +15,21 @@ const Gridstack = {
     if (this.props.externWindow) {
       this.handleBeforeUnloadEvent = this.handleBeforeUnloadEvent.bind(this);
       window.addEventListener("beforeunload", this.handleBeforeUnloadEvent);
-      this.getElement("canvas-close-button").addEventListener(
-        "click",
-        (event) => this.handleCanvasCloseClick()
-      );
       this.getElement("canvas-popin-button").addEventListener(
         "click",
         (event) => this.handleCanvasPopinClick()
       );
+    } else {
+      this.getElement("canvas-popout-button").addEventListener(
+        "click",
+        (event) => this.handleCanvasPopoutClick()
+      );
     }
 
+    this.getElement("canvas-close-button").addEventListener("click", (event) =>
+      this.handleCanvasCloseClick()
+    );
+
     const options = {
       //acceptWidgets: true,
       //removeable: true,
@@ -70,24 +75,23 @@ const Gridstack = {
     globalPubSub.broadcast("js_views", { type: "reposition" });
   },
   handleBeforeUnloadEvent(event) {
-    this.sendToParent("popin");
+    globalPubSub.broadcast("session", { type: "canvas_popin_clicked" });
   },
   handleCanvasCloseClick() {
     window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
-    this.sendToParent("close");
-    window.close();
+    globalPubSub.broadcast("session", { type: "canvas_close_clicked" });
   },
   handleCanvasPopinClick() {
     window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
-    this.sendToParent("popin");
+    globalPubSub.broadcast("session", { type: "canvas_popin_clicked" });
     window.close();
   },
+  handleCanvasPopoutClick() {
+    globalPubSub.broadcast("session", { type: "canvas_popout_clicked" });
+  },
   getElement(name) {
     return document.querySelector(`[data-el-${name}]`);
   },
-  sendToParent(message) {
-    window.opener.postMessage(message, window.location.origin);
-  },
 };
 
 export default Gridstack;

assets/js/hooks/session.js

@@ -76,8 +76,6 @@ const Session = {
     this.followedClientId = null;
     this.canvasWindow = null;
 
-    this.handleCanvasWindowMessage = this.handleCanvasWindowMessage.bind(this);
-
     setFavicon(this.faviconForEvaluationStatus(this.props.globalStatus));
 
     this.updateSectionListHighlight();
@@ -142,14 +140,6 @@ const Session = {
       this.handleCellIndicatorsClick(event)
     );
 
-    this.getElement("canvas-close-button").addEventListener("click", (event) =>
-      this.handleCanvasCloseClick()
-    );
-
-    this.getElement("canvas-popout-button").addEventListener("click", (event) =>
-      this.handleCanvasPopoutClick()
-    );
-
     this.getElement("views").addEventListener("click", (event) => {
       this.handleViewsClick(event);
     });
@@ -691,10 +681,13 @@ const Session = {
       "_blank",
       "toolbar=no, location=no, directories=no, titlebar=no, toolbar=0, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=600, height=600"
     );
-    window.addEventListener("message", this.handleCanvasWindowMessage);
     this.el.setAttribute("data-js-view", "canvas-popped-out");
   },
 
+  handleCanvasPopinClick() {
+    this.el.setAttribute("data-js-view", "canvas");
+  },
+
   handleViewCanvasPoppedoutClick() {
     this.closeCanvasWindow();
     this.el.setAttribute("data-js-view", "canvas");
@@ -1210,11 +1203,24 @@ const Session = {
   // Session event handlers
 
   handleSessionEvent(event) {
-    if (event.type === "cursor_selection_changed") {
-      this.sendLocationReport({
-        focusableId: event.focusableId,
-        selection: event.selection,
-      });
+    switch (event.type) {
+      case "cursor_selection_changed":
+        this.sendLocationReport({
+          focusableId: event.focusableId,
+          selection: event.selection,
+        });
+        break;
+      case "canvas_popout_clicked":
+        this.handleCanvasPopoutClick();
+        break;
+      case "canvas_popin_clicked":
+        this.handleCanvasPopinClick();
+        break;
+      case "canvas_close_clicked":
+        this.handleCanvasCloseClick();
+        break;
+      default:
+        console.log("Unknown event type: ", event.type);
     }
   },
 
@@ -1396,22 +1402,8 @@ const Session = {
     return this.view === "presentation";
   },
   closeCanvasWindow() {
-    window.removeEventListener("message", this.handleCanvasWindowMessage);
     this.canvasWindow && this.canvasWindow.close();
   },
-  handleCanvasWindowMessage(event) {
-    if (event.origin != window.location.origin) return;
-    switch (event.data) {
-      case "popin":
-        this.el.setAttribute("data-js-view", "canvas");
-        break;
-      case "close":
-        this.el.removeAttribute("data-js-view");
-        break;
-      default:
-        console.log("Got unkown message: ", event);
-    }
-  },
 };
 
 /**

assets/js/lib/pub_sub.js

@@ -1,9 +1,10 @@
 /**
- * A basic pub-sub implementation for client-side communication.
+ * A basic pub-sub implementation for client-side communication using the Broadcast Channel API.
  */
 export default class PubSub {
   constructor() {
     this.subscribersByTopic = {};
+    this.channelsByTopic = {};
   }
 
   /**
@@ -20,6 +21,18 @@ export default class PubSub {
       this.subscribersByTopic[topic] = [];
     }
 
+    if (!this.channelsByTopic[topic]) {
+      this.channelsByTopic[topic] = new BroadcastChannel(topic);
+
+      this.channelsByTopic[topic].addEventListener("message", (event) => {
+        if (Array.isArray(this.subscribersByTopic[topic])) {
+          this.subscribersByTopic[topic].forEach((callback) => {
+            callback(event.data);
+          });
+        }
+      });
+    }
+
     this.subscribersByTopic[topic].push(callback);
 
     return () => {
@@ -39,13 +52,24 @@ export default class PubSub {
     if (idx !== -1) {
       this.subscribersByTopic[topic].splice(idx, 1);
     }
+
+    if (this.subscribersByTopic[topic].length === 0) {
+      this.channelsByTopic[topic].close();
+      delete this.channelsByTopic[topic];
+    }
   }
 
   /**
    * Calls all functions linked to the given topic
    * and passes `payload` as the argument.
    */
   broadcast(topic, payload) {
+    if (!this.channelsByTopic[topic]) {
+      this.channelsByTopic[topic] = new BroadcastChannel(topic);
+    }
+
+    this.channelsByTopic[topic].postMessage(payload);
+
     if (Array.isArray(this.subscribersByTopic[topic])) {
       this.subscribersByTopic[topic].forEach((callback) => {
         callback(payload);