Comments: Updated reply-to and general styling

[bookstack] / resources / js / services / drawio.js

diff --git a/resources/js/services/drawio.js b/resources/js/services/drawio.js
index 4f93982607b8358bfd1166a4b9c0829f8695520d..efc071d3ec4b51a94b4060329b633d340b72ad97 100644 (file)
--- a/resources/js/services/drawio.js
+++ b/resources/js/services/drawio.js
@@ -1,52 +1,12 @@
+// Docs: https://www.diagrams.net/doc/faq/embed-mode
+
 let iFrame = null;
 let lastApprovedOrigin;
 let onInit; let
     onSave;
 
-/**
- * Show the draw.io editor.
- * @param {String} drawioUrl
- * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
- * @param {Function} onSaveCallback - Is called with the drawing data on save.
- */
-function show(drawioUrl, onInitCallback, onSaveCallback) {
-    onInit = onInitCallback;
-    onSave = onSaveCallback;
-
-    iFrame = document.createElement('iframe');
-    iFrame.setAttribute('frameborder', '0');
-    window.addEventListener('message', drawReceive);
-    iFrame.setAttribute('src', drawioUrl);
-    iFrame.setAttribute('class', 'fullscreen');
-    iFrame.style.backgroundColor = '#FFFFFF';
-    document.body.appendChild(iFrame);
-    lastApprovedOrigin = (new URL(drawioUrl)).origin;
-}
-
-function close() {
-    drawEventClose();
-}
-
-/**
- * Receive and handle a message event from the draw.io window.
- * @param {MessageEvent} event
- */
-function drawReceive(event) {
-    if (!event.data || event.data.length < 1) return;
-    if (event.origin !== lastApprovedOrigin) return;
-
-    const message = JSON.parse(event.data);
-    if (message.event === 'init') {
-        drawEventInit();
-    } else if (message.event === 'exit') {
-        drawEventClose();
-    } else if (message.event === 'save') {
-        drawEventSave(message);
-    } else if (message.event === 'export') {
-        drawEventExport(message);
-    } else if (message.event === 'configure') {
-        drawEventConfigure();
-    }
+function drawPostMessage(data) {
+    iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
 }
 
 function drawEventExport(message) {
@@ -75,15 +35,54 @@ function drawEventConfigure() {
 }
 
 function drawEventClose() {
+    // eslint-disable-next-line no-use-before-define
     window.removeEventListener('message', drawReceive);
     if (iFrame) document.body.removeChild(iFrame);
 }
 
-function drawPostMessage(data) {
-    iFrame.contentWindow.postMessage(JSON.stringify(data), lastApprovedOrigin);
+/**
+ * Receive and handle a message event from the draw.io window.
+ * @param {MessageEvent} event
+ */
+function drawReceive(event) {
+    if (!event.data || event.data.length < 1) return;
+    if (event.origin !== lastApprovedOrigin) return;
+
+    const message = JSON.parse(event.data);
+    if (message.event === 'init') {
+        drawEventInit();
+    } else if (message.event === 'exit') {
+        drawEventClose();
+    } else if (message.event === 'save') {
+        drawEventSave(message);
+    } else if (message.event === 'export') {
+        drawEventExport(message);
+    } else if (message.event === 'configure') {
+        drawEventConfigure();
+    }
 }
 
-async function upload(imageData, pageUploadedToId) {
+/**
+ * Show the draw.io editor.
+ * @param {String} drawioUrl
+ * @param {Function} onInitCallback - Must return a promise with the xml to load for the editor.
+ * @param {Function} onSaveCallback - Is called with the drawing data on save.
+ */
+export function show(drawioUrl, onInitCallback, onSaveCallback) {
+    onInit = onInitCallback;
+    onSave = onSaveCallback;
+
+    iFrame = document.createElement('iframe');
+    iFrame.setAttribute('frameborder', '0');
+    window.addEventListener('message', drawReceive);
+    iFrame.setAttribute('src', drawioUrl);
+    iFrame.setAttribute('class', 'fullscreen');
+    iFrame.style.backgroundColor = '#FFFFFF';
+    document.body.appendChild(iFrame);
+    lastApprovedOrigin = (new URL(drawioUrl)).origin;
+}
+
+export async function upload(imageData, pageUploadedToId) {
     const data = {
         image: imageData,
         uploaded_to: pageUploadedToId,
@@ -92,12 +91,16 @@ async function upload(imageData, pageUploadedToId) {
     return resp.data;
 }
 
+export function close() {
+    drawEventClose();
+}
+
 /**
  * Load an existing image, by fetching it as Base64 from the system.
  * @param drawingId
  * @returns {Promise<string>}
  */
-async function load(drawingId) {
+export async function load(drawingId) {
     try {
         const resp = await window.$http.get(window.baseUrl(`/images/drawio/base64/${drawingId}`));
         return `data:image/png;base64,${resp.data.content}`;
@@ -109,7 +112,3 @@ async function load(drawingId) {
         throw error;
     }
 }
-
-export default {
-    show, close, upload, load,
-};