Added dialog triggers to panel edit and view pages.

fe/src/services/PanelService.js

@@ -15,6 +15,13 @@ export const RemovePanelStyle = () => {
 export const StripPanelHTML = (html, aspectRatio) => {
   const parser = new DOMParser()
   const doc = parser.parseFromString(html, 'text/html')
+  let scripts = []
+
+  if (doc.querySelectorAll('script').length > 0) {
+    const stripped = StripPanelScripts(doc)
+    doc.body = stripped.body
+    scripts = stripped.scripts
+  }
 
   const body = doc.body
   const bodyContents = body.innerHTML
@@ -24,9 +31,41 @@ export const StripPanelHTML = (html, aspectRatio) => {
   panelBody.style = `aspect-ratio: ${aspectRatio}`
   panelBody.innerHTML = bodyContents
 
+  if (scripts.length > 0) {
+    SetPanelScripts(scripts)
+  }
+
   return panelBody.outerHTML
 }
 
+export const StripPanelScripts = (doc) => {
+  const scriptEls = doc.querySelectorAll('script')
+  const scripts = []
+
+  scriptEls.forEach((script) => {
+    if (script.getAttribute('no-compile') != '') scripts.push(script.innerHTML)
+    script.remove()
+  })
+
+  return { body: doc.body, scripts }
+}
+
+export const SetPanelScripts = (scripts) => {
+  scripts.forEach((script) => {
+    const scriptEl = document.createElement('script')
+    scriptEl.setAttribute('custom_panel_script', true)
+    scriptEl.innerHTML = script
+    document.body.appendChild(scriptEl)
+  })
+}
+
+export const RemovePanelScripts = () => {
+  const scripts = document.querySelectorAll('script[custom_panel_script]')
+  scripts.forEach((script) => {
+    script.remove()
+  })
+}
+
 export const PanelButtonListeners = (panelEl, callback) => {
   panelEl.querySelectorAll('[mcrm__button]').forEach((button) => {
     button.addEventListener('click', () => {
@@ -34,3 +73,27 @@ export const PanelButtonListeners = (panelEl, callback) => {
     })
   })
 }
+
+export const PanelDialogListeners = (panelEl) => {
+  panelEl.querySelectorAll('[mcrm__dialog-trigger]').forEach((dialogTrigger) => {
+    const dialogEl = document.querySelector(dialogTrigger.getAttribute('dialog-trigger'))
+
+    if (dialogEl) {
+      dialogTrigger.addEventListener('click', () => {
+        dialogEl.show()
+      })
+    }
+  })
+
+  document.querySelectorAll('dialog, dialog .dialog__close').forEach((dialogClose) => {
+    dialogClose.addEventListener('click', (e) => {
+      if (
+        e.target.classList.contains('dialog__close') ||
+        e.target.closest('.dialog__close') ||
+        e.target.tagName == 'DIALOG'
+      ) {
+        dialogClose.closest('dialog').close()
+      }
+    })
+  })
+}