Merge pull request #311 from fedwiki/paul90/dialog

Replacing jQuery UI Dialog
fedwiki · Feb 27, 2024 · 321199f · 321199f
2 parents 245b3a6 + bbdcaff
commit 321199f
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 36 deletions.
diff --git a/client/dialog/index.html b/client/dialog/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <link id="favicon" href="/favicon.png" rel="icon" type="image/png" />
+    <link href="/dialog/style.css" rel="stylesheet" />
+    <script>
+      window.addEventListener(
+        "message",
+        (event) => {
+          const data = event.data
+          console.log('data', data)
+          document.title = data.title
+          document.querySelector('.page').innerHTML = data.body
+        }
+      )
+    </script>
+  </head>
+  <body>
+    <div class="page">
+    </div>
+  </body>
+</html>
diff --git a/client/dialog/style.css b/client/dialog/style.css
@@ -0,0 +1,48 @@
+body {
+  inset: 0;
+  position: absolute;
+  background: #eee url('/images/crosses.png');
+  padding: 0;
+  margin: 0;
+  line-height: 1.3;
+  color: #333;
+}
+.page {
+  margin: 8px;
+  outline: none;
+  box-shadow: 2px 1px 4px rgba(0,0,0,0.2);
+  background: #eee;
+  padding: 8px;
+  position: absolute;
+  inset: 0px;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: #ccc #eee;
+}
+p {
+  margin: 8px;
+}
+.remote {
+  vertical-align: text-top;
+  width: 16px;
+  height: 16px
+}
+a {
+  text-decoration: none;
+}
+
+:is(#authors,#provenance) a {
+  margin-left: 16px;
+}
+
+.page:has(>img,svg) {
+  overflow: hidden;
+  scrollbar-gutter: auto;
+}
+
+.page > img,svg{
+  width: auto !important;
+  max-width: 100%;
+  max-height: 100%;
+}
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_flat_0_aaaaaa_40x100.png b/client/js/jquery-ui/1.11.4/images/ui-bg_flat_0_aaaaaa_40x100.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_flat_75_ffffff_40x100.png b/client/js/jquery-ui/1.11.4/images/ui-bg_flat_75_ffffff_40x100.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_glass_55_fbf9ee_1x400.png b/client/js/jquery-ui/1.11.4/images/ui-bg_glass_55_fbf9ee_1x400.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_glass_65_ffffff_1x400.png b/client/js/jquery-ui/1.11.4/images/ui-bg_glass_65_ffffff_1x400.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_glass_75_dadada_1x400.png b/client/js/jquery-ui/1.11.4/images/ui-bg_glass_75_dadada_1x400.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_glass_75_e6e6e6_1x400.png b/client/js/jquery-ui/1.11.4/images/ui-bg_glass_75_e6e6e6_1x400.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_glass_95_fef1ec_1x400.png b/client/js/jquery-ui/1.11.4/images/ui-bg_glass_95_fef1ec_1x400.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/client/js/jquery-ui/1.11.4/images/ui-bg_highlight-soft_75_cccccc_1x100.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-icons_222222_256x240.png b/client/js/jquery-ui/1.11.4/images/ui-icons_222222_256x240.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-icons_2e83ff_256x240.png b/client/js/jquery-ui/1.11.4/images/ui-icons_2e83ff_256x240.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-icons_454545_256x240.png b/client/js/jquery-ui/1.11.4/images/ui-icons_454545_256x240.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-icons_888888_256x240.png b/client/js/jquery-ui/1.11.4/images/ui-icons_888888_256x240.png
diff --git a/client/js/jquery-ui/1.11.4/images/ui-icons_cd0a0a_256x240.png b/client/js/jquery-ui/1.11.4/images/ui-icons_cd0a0a_256x240.png
diff --git a/client/js/jquery-ui/1.11.4/jquery-ui.min.css b/client/js/jquery-ui/1.11.4/jquery-ui.min.css
diff --git a/client/js/jquery-ui/1.11.4/jquery-ui.min.js b/client/js/jquery-ui/1.11.4/jquery-ui.min.js
diff --git a/lib/dialog.coffee b/lib/dialog.coffee
@@ -1,19 +1,18 @@
-# Dialog manages a single <div> that is used to present a
-# jQuery UI dialog used for detail display, usually on
-# double click.
+# Dialog manages a single popup window that is used to present a
+# dialog used for detail display, usually on double click.
 
-resolve = require './resolve'
-
-$dialog = null
+open = (title, html) ->
+  body = html
+  if typeof html is 'object'
+    body = html[0].outerHTML
 
-emit = ->
-  $dialog = $('<div></div>')
-    .html('This dialog will show every time!')
-    .dialog { autoOpen: false, title: 'Basic Dialog', height: 600, width: 800 }
+  dialogWindow = window.open('/dialog/#', 'dialog', 'popup,height=600,width=800')
 
-open = (title, html) ->
-  $dialog.html html
-  $dialog.dialog "option", "title", resolve.resolveLinks(title)
-  $dialog.dialog 'open'
+  if dialogWindow.location.pathname isnt '/dialog/'
+    # this will only happen when popup is first opened.
+    dialogWindow.addEventListener 'load', (event) ->
+      dialogWindow.postMessage({ title, body }, window.origin)
+  else
+    dialogWindow.postMessage({ title, body }, window.origin)
 
-module.exports = {emit, open}
+module.exports = { open }
diff --git a/lib/legacy.coffee b/lib/legacy.coffee
@@ -39,7 +39,6 @@ wiki.origin.get 'system/factories.json', (error, data) ->
     preLoadEditors data
 
 $ ->
-  dialog.emit()
 
 # FUNCTIONS used by plugins and elsewhere