Add output panel

assets/css/js_interop.css

@@ -296,20 +296,58 @@ solely client-side operations.
 
 /* === Session views === */
 
-[data-el-session][data-js-view="code-zen"] [data-el-view-toggle="code-zen"] {
+[data-el-session][data-js-view] [data-el-view-activate] {
+  @apply pointer-events-none;
+}
+
+[data-el-session]:not([data-js-view]) [data-el-view-deactivate-button] {
+  @apply hidden;
+}
+
+[data-el-session][data-js-view="output-panel-popped-out"]
+  [data-el-view-activate="output-panel"],
+[data-el-session]:not([data-js-view="output-panel-popped-out"])
+  [data-el-view-output-panel-popin-button] {
+  @apply hidden;
+}
+
+[data-el-session][data-js-view="output-panel"]
+  [data-el-view-activate="output-panel"],
+[data-el-session][data-js-view="output-panel-popped-out"]
+  [data-el-view-output-panel-popin-button] {
+  @apply text-green-bright-400;
+}
+
+[data-el-session][data-js-view="code-zen"] [data-el-view-activate="code-zen"] {
   @apply text-green-bright-400;
 }
 
 [data-el-session][data-js-view="presentation"]
-  [data-el-view-toggle="presentation"] {
+  [data-el-view-activate="presentation"] {
   @apply text-green-bright-400;
 }
 
-[data-el-session][data-js-view="custom"] [data-el-view-toggle="custom"] {
+[data-el-session][data-js-view="custom"] [data-el-view-activate="custom"] {
   @apply text-green-bright-400;
 }
 
-[data-el-session][data-js-view]
+[data-el-session]:not([data-js-view="output-panel"]) [data-el-output-panel] {
+  @apply hidden;
+}
+
+[data-el-session][data-js-view="output-panel"] [data-el-notebook-content] {
+  @apply absolute w-1/2 left-0 px-16 py-4;
+}
+
+[data-el-session][data-js-view="output-panel"] [data-el-notebook-indicators] {
+  @apply sm:fixed bottom-[0.4rem] right-1/2;
+}
+
+[data-el-session]:is(
+    [data-js-view="code-zen"],
+    [data-js-view="presentation"],
+    [data-js-view="custom"]
+  )
   :is([data-el-actions], [data-el-insert-buttons]) {
   @apply hidden;
 }

assets/js/hooks/external_window.js

@@ -0,0 +1,49 @@
+import { getAttributeOrDefault, parseBoolean } from "../lib/attribute";
+/**
+ * A hook for external windows.
+ */
+const ExternalWindow = {
+  mounted() {
+    this.props = this.getProps();
+
+    if (!this.props.isWindowEmbedded) {
+      this.handleBeforeUnloadEvent = this.handleBeforeUnloadEvent.bind(this);
+      window.addEventListener("beforeunload", this.handleBeforeUnloadEvent);
+      this.getElement("external-window-close-button").addEventListener(
+        "click",
+        (event) => this.handleExternalWindowCloseClick()
+      );
+      this.getElement("external-window-popin-button").addEventListener(
+        "click",
+        (event) => this.handleExternalWindowPopinClick()
+      );
+    }
+  },
+  updated() {
+    this.props = this.getProps();
+  },
+  getProps() {
+    return {
+      isWindowEmbedded: this.el.hasAttribute("data-window-embedded"),
+    };
+  },
+  handleBeforeUnloadEvent(event) {
+    this.sendToParent("external_window_popin_clicked");
+  },
+  handleExternalWindowCloseClick() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    this.sendToParent("external_window_close_clicked");
+  },
+  handleExternalWindowPopinClick() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    this.sendToParent("external_window_popin_clicked");
+  },
+  getElement(name) {
+    return document.querySelector(`[data-el-${name}]`);
+  },
+  sendToParent(message) {
+    window.opener.postMessage(message, window.location.origin);
+  },
+};
+
+export default ExternalWindow;

assets/js/hooks/index.js

@@ -5,6 +5,7 @@ import CellEditor from "./cell_editor";
 import Dropzone from "./dropzone";
 import EditorSettings from "./editor_settings";
 import EmojiPicker from "./emoji_picker";
+import ExternalWindow from "./external_window";
 import FocusOnUpdate from "./focus_on_update";
 import Headline from "./headline";
 import Highlight from "./highlight";
@@ -31,6 +32,7 @@ export default {
   Dropzone,
   EditorSettings,
   EmojiPicker,
+  ExternalWindow,
   FocusOnUpdate,
   Headline,
   Highlight,

assets/js/hooks/session.js

@@ -76,6 +76,10 @@ const Session = {
     this.clientsMap = {};
     this.lastLocationReportByClientId = {};
     this.followedClientId = null;
+    this.outputPanelWindow = null;
+
+    this.handleExternalWindowMessage =
+      this.handleExternalWindowMessage.bind(this);
 
     setFavicon(this.faviconForEvaluationStatus(this.props.globalStatus));
 
@@ -88,6 +92,12 @@ const Session = {
     this._handleDocumentFocus = this.handleDocumentFocus.bind(this);
     this._handleDocumentClick = this.handleDocumentClick.bind(this);
 
+    this.el.addEventListener("output_panel:activate", (event) => {
+      if (this.el.getAttribute("data-js-view") != "output-panel-popped-out") {
+        this.el.setAttribute("data-js-view", "output-panel");
+      }
+    });
+
     document.addEventListener("keydown", this._handleDocumentKeyDown, true);
     document.addEventListener("mousedown", this._handleDocumentMouseDown);
     // Note: the focus event doesn't bubble, so we register for the capture phase
@@ -135,9 +145,29 @@ const Session = {
       this.handleCellIndicatorsClick(event)
     );
 
-    this.getElement("views").addEventListener("click", (event) => {
-      this.handleViewsClick(event);
-    });
+    this.getElement("views").addEventListener("click", (event) =>
+      this.handleActivateViewClick(event)
+    );
+
+    this.getElement("view-deactivate-button").addEventListener(
+      "click",
+      (event) => this.handleDeactivateViewClick()
+    );
+
+    this.getElement("output-panel-close-button").addEventListener(
+      "click",
+      (event) => this.handleOutputPanelCloseClick()
+    );
+
+    this.getElement("output-panel-popout-button").addEventListener(
+      "click",
+      (event) => this.handleOutputPanelPopoutClick()
+    );
+
+    this.getElement("view-output-panel-popin-button").addEventListener(
+      "click",
+      (event) => this.handleOutputPanelPopinClick()
+    );
 
     this.getElement("section-toggle-collapse-all-button").addEventListener(
       "click",
@@ -663,6 +693,26 @@ const Session = {
     }
   },
 
+  handleOutputPanelCloseClick() {
+    this.closeOutputPanelWindow();
+    this.el.removeAttribute("data-js-view");
+  },
+
+  handleOutputPanelPopoutClick() {
+    this.outputPanelWindow = window.open(
+      window.location.pathname + `/external-window?type=output-panel`,
+      "_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.handleExternalWindowMessage);
+    this.el.setAttribute("data-js-view", "output-panel-popped-out");
+  },
+
+  handleOutputPanelPopinClick() {
+    this.closeOutputPanelWindow();
+    this.el.setAttribute("data-js-view", "output-panel");
+  },
+
   /**
    * Focuses cell or any other element based on the current
    * URL and hook attributes.
@@ -1085,22 +1135,35 @@ const Session = {
     });
   },
 
-  handleViewsClick(event) {
-    const button = event.target.closest(`[data-el-view-toggle]`);
+  handleActivateViewClick(event) {
+    const button = event.target.closest(`[data-el-view-activate]`);
 
     if (button) {
-      const view = button.getAttribute("data-el-view-toggle");
-      this.toggleView(view);
+      const view = button.getAttribute("data-el-view-activate");
+      this.activateView(view);
     }
   },
 
+  handleDeactivateViewClick() {
+    this.deactivateView();
+  },
+
   toggleView(view) {
-    if (view === this.view) {
-      this.unsetView();
+    if (this.view) {
+      this.deactivateView();
+    } else {
+      this.activateView(view);
+    }
+  },
 
-      if (view === "custom") {
-        this.unsubscribeCustomViewFromSettings();
-      }
+  activateView(view) {
+    if (view === "output-panel") {
+      this.setView(view, {
+        showSection: true,
+        showMarkdown: false,
+        showOutput: true,
+        spotlight: false,
+      });
     } else if (view === "code-zen") {
       this.setView(view, {
         showSection: false,
@@ -1146,6 +1209,14 @@ const Session = {
     }
   },
 
+  deactivateView() {
+    this.unsetView();
+
+    if (this.view === "custom") {
+      this.unsubscribeCustomViewFromSettings();
+    }
+  },
+
   setView(view, options) {
     this.view = view;
     this.viewOptions = options;
@@ -1502,6 +1573,21 @@ const Session = {
   getElement(name) {
     return this.el.querySelector(`[data-el-${name}]`);
   },
+
+  closeOutputPanelWindow() {
+    window.removeEventListener("message", this.handleExternalWindowMessage);
+    this.outputPanelWindow && this.outputPanelWindow.close();
+    this.outputPanelWindow = null;
+  },
+
+  handleExternalWindowMessage(event) {
+    if (event.origin != window.location.origin) return;
+    if (event.data === "external_window_popin_clicked") {
+      this.handleOutputPanelPopinClick();
+    } else if (event.data === "external_window_close_clicked") {
+      this.handleOutputPanelCloseClick();
+    }
+  },
 };
 
 /**