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 overflow-auto;
+}
+
+[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 +395,18 @@ solely client-side operations.
   :is([data-el-sidebar], [data-el-side-panel], [data-el-toggle-sidebar]) {
   @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;
+}

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/output_panel.js

@@ -0,0 +1,102 @@
+import { getAttributeOrThrow, parseInteger } from "../lib/attribute";
+/**
+ * A hook for the output panel.
+ */
+
+const OutputPanel = {
+  mounted() {
+    this.props = this.getProps();
+    this.initializeDragAndDrop();
+  },
+  update() {
+    this.props = this.getProps();
+  },
+  getProps() {
+    return {
+      phxTarget: getAttributeOrThrow(this.el, "data-phx-target", parseInteger),
+    };
+  },
+
+  /**
+   * Initializes drag and drop event handlers.
+   */
+  initializeDragAndDrop() {
+    let isDragging = false;
+    let draggedEl = null;
+
+    const startDragging = (element = null) => {
+      if (!isDragging) {
+        isDragging = true;
+        draggedEl = element;
+
+        this.el.setAttribute("data-js-dragging", "");
+      }
+    };
+
+    const stopDragging = () => {
+      if (isDragging) {
+        isDragging = false;
+        this.el.removeAttribute("data-js-dragging");
+      }
+    };
+
+    this.el.addEventListener("dragstart", (event) => {
+      startDragging(event.target);
+    });
+
+    this.el.addEventListener("dragenter", (event) => {
+      startDragging();
+    });
+
+    this.el.addEventListener("dragleave", (event) => {
+      if (!this.el.contains(event.relatedTarget)) {
+        stopDragging();
+      }
+    });
+
+    this.el.addEventListener("dragover", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+    });
+
+    this.el.addEventListener("drop", (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+
+      const insertDropEl = event.target.closest(
+        `[data-el-output-panel-row-drop-area]`
+      );
+
+      if (insertDropEl && draggedEl) {
+        console.log(draggedEl);
+        const cellId = getAttributeOrThrow(draggedEl, "data-cell-id");
+        const dstRow = getAttributeOrThrow(
+          insertDropEl,
+          "data-drop-area-row-index",
+          parseInteger
+        );
+
+        this.pushEventTo(this.props.phxTarget, "handle_move_item_to_new_row", {
+          cell_id: cellId,
+          row_num: dstRow,
+        });
+      }
+      console.log(event);
+
+      stopDragging();
+    });
+
+    this.handleEvent("finish_file_drop", (event) => {
+      const inputEl = document.querySelector(
+        `#add-file-entry-modal input[type="file"]`
+      );
+
+      if (inputEl) {
+        inputEl.files = files;
+        inputEl.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    });
+  },
+};
+
+export default OutputPanel;