Add output panel

assets/css/js_interop.css

@@ -296,20 +296,59 @@ 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-embedded] {
+  @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;
 }
@@ -357,3 +396,40 @@ solely client-side operations.
   :is([data-el-sidebar], [data-el-side-panel], [data-el-toggle-sidebar]) {
   @apply hidden;
 }
+
+[data-el-session][data-js-view^="output-panel"]
+  ~ #app-settings-modal
+  [data-el-app-settings-enable-output-panel-button] {
+  @apply hidden;
+}
+
+[data-el-session]:not([data-js-view="output-panel-popped-out"])
+  ~ #app-settings-modal
+  [data-el-app-settings-popin-output-panel-button] {
+  @apply hidden;
+}
+
+/* === Output Panel === */
+
+[data-el-output-panel-content]:not([data-js-dragging]) {
+  @apply gap-4 pt-4;
+}
+
+[data-el-output-panel-content]:not([data-js-dragging])
+  [data-el-output-panel-row-drop-area] {
+  @apply hidden;
+}
+
+[data-el-output-panel-row-drop-area][data-js-dragging] {
+  @apply h-16;
+}
+
+[data-el-output-panel-content][data-js-dragging]
+  [data-el-output-panel-item-options-controls] {
+  @apply hidden;
+}
+
+[data-el-output-panel-content]:not([data-js-dragging])
+  [data-el-output-panel-item-options-drag-label] {
+  @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";
@@ -13,6 +14,7 @@ import ImageOutput from "./image_output";
 import JSView from "./js_view";
 import KeyboardControl from "./keyboard_control";
 import MarkdownRenderer from "./markdown_renderer";
+import OutputPanel from "./output_panel";
 import ScrollOnUpdate from "./scroll_on_update";
 import Session from "./session";
 import TextareaAutosize from "./textarea_autosize";
@@ -31,6 +33,7 @@ export default {
   Dropzone,
   EditorSettings,
   EmojiPicker,
+  ExternalWindow,
   FocusOnUpdate,
   Headline,
   Highlight,
@@ -39,6 +42,7 @@ export default {
   JSView,
   KeyboardControl,
   MarkdownRenderer,
+  OutputPanel,
   ScrollOnUpdate,
   Session,
   TextareaAutosize,

assets/js/hooks/js_view.js

@@ -221,9 +221,9 @@ const JSView = {
     this.iframe.className = "w-full h-0 absolute z-[1]";
 
     const notebookEl = document.querySelector(`[data-el-notebook]`);
-    const notebookContentEl = notebookEl.querySelector(
-      `[data-el-notebook-content]`
-    );
+    const notebookContentEl =
+      notebookEl && notebookEl.querySelector(`[data-el-notebook-content]`);
+    const outputPanelEl = document.querySelector(`[data-el-output-panel]`);
 
     // Most placeholder position changes are accompanied by changes to the
     // notebook content element height (adding cells, inserting newlines
@@ -234,8 +234,9 @@ const JSView = {
     const resizeObserver = new ResizeObserver((entries) => {
       this.repositionIframe();
     });
-    resizeObserver.observe(notebookContentEl);
-    resizeObserver.observe(notebookEl);
+    notebookContentEl && resizeObserver.observe(notebookContentEl);
+    notebookEl && resizeObserver.observe(notebookEl);
+    outputPanelEl && resizeObserver.observe(outputPanelEl);
 
     // On certain events, like section/cell moved, a global event is
     // dispatched to trigger reposition. This way we don't need to
@@ -307,19 +308,21 @@ const JSView = {
 
   repositionIframe() {
     const { iframe, iframePlaceholder } = this;
-    const notebookEl = document.querySelector(`[data-el-notebook]`);
+    const containerEl =
+      document.querySelector(`[data-el-notebook]`) ||
+      document.querySelector(`[data-el-output-panel]`);
 
     if (isElementHidden(iframePlaceholder)) {
       // When the placeholder is hidden, we hide the iframe as well
       iframe.classList.add("hidden");
     } else {
       iframe.classList.remove("hidden");
-      const notebookBox = notebookEl.getBoundingClientRect();
+      const notebookBox = containerEl.getBoundingClientRect();
       const placeholderBox = iframePlaceholder.getBoundingClientRect();
-      const top = placeholderBox.top - notebookBox.top + notebookEl.scrollTop;
+      const top = placeholderBox.top - notebookBox.top + containerEl.scrollTop;
       iframe.style.top = `${top}px`;
       const left =
-        placeholderBox.left - notebookBox.left + notebookEl.scrollLeft;
+        placeholderBox.left - notebookBox.left + containerEl.scrollLeft;
       iframe.style.left = `${left}px`;
       iframe.style.height = `${placeholderBox.height}px`;
       iframe.style.width = `${placeholderBox.width}px`;

assets/js/hooks/output_panel.js

@@ -0,0 +1,125 @@
+import {
+  getAttributeOrThrow,
+  getAttributeOrDefault,
+  parseInteger,
+} from "../lib/attribute";
+import { globalPubSub } from "../lib/pub_sub";
+/**
+ * A hook for the output panel.
+ */
+
+const OutputPanel = {
+  mounted() {
+    this.props = this.getProps();
+    this.isDragging = false;
+    this.draggedEl = null;
+
+    this.el.addEventListener("dragstart", (event) => {
+      this.startDragging(event.target);
+    });
+
+    this.el.addEventListener("dragend", (event) => {
+      this.stopDragging();
+    });
+
+    this.el.addEventListener("dragenter", (event) => {
+      //console.log("Valid drop area", event);
+    });
+
+    this.el.addEventListener("dragleave", (event) => {
+      //console.log("Valid drop area left", event);
+    });
+
+    this.el.addEventListener("dragover", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+    });
+
+    this.el.addEventListener("drop", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      const dstEl = event.target.closest(`[phx-hook="Dropzone"]`);
+
+      const srcEl = this.draggedEl.closest(`[data-el-output-panel-item]`);
+
+      if (dstEl && srcEl) {
+        const cellId = getAttributeOrThrow(srcEl, "data-cell-id");
+        const srcRow = getAttributeOrThrow(
+          srcEl,
+          "data-row-index",
+          parseInteger
+        );
+        const srcCol = getAttributeOrThrow(
+          srcEl,
+          "data-col-index",
+          parseInteger
+        );
+        let dstRow = getAttributeOrThrow(dstEl, "data-row-index", parseInteger);
+        let dstCol = getAttributeOrDefault(
+          dstEl,
+          "data-col-index",
+          null,
+          parseInteger
+        );
+
+        if (dstCol !== null) {
+          console.log("New position");
+          console.log("Rows", srcRow, "->", dstRow);
+          console.log("Cols", srcCol, "->", dstCol);
+          // when dropping on the right side, move element one column to the right
+          if (srcRow !== dstRow && event.layerX > dstEl.offsetWidth / 2)
+            dstCol += 1;
+          if (srcRow === dstRow && srcCol < dstCol) dstCol += 1;
+
+          this.pushEventTo(this.props.phxTarget, "handle_move_item", {
+            cell_id: cellId,
+            row_index: dstRow,
+            col_index: dstCol,
+          });
+        } else {
+          console.log("New row");
+          console.log("Rows", srcRow, "->", dstRow);
+          console.log("Cols", srcCol, "->", dstCol);
+          this.pushEventTo(
+            this.props.phxTarget,
+            "handle_move_item_to_new_row",
+            {
+              cell_id: cellId,
+              row_index: dstRow,
+            }
+          );
+        }
+      }
+      setTimeout(
+        () => globalPubSub.broadcast("js_views", { type: "reposition" }),
+        200
+      );
+      this.stopDragging();
+    });
+  },
+  update() {
+    this.props = this.getProps();
+  },
+  getProps() {
+    return {
+      phxTarget: getAttributeOrThrow(this.el, "data-phx-target", parseInteger),
+    };
+  },
+  startDragging(element) {
+    if (!this.isDragging) {
+      this.isDragging = true;
+      this.draggedEl = element;
+
+      this.el.setAttribute("data-js-dragging", "");
+    }
+  },
+  stopDragging() {
+    if (this.isDragging) {
+      this.isDragging = false;
+      this.el.removeAttribute("data-js-dragging");
+    }
+  },
+};
+
+export default OutputPanel;