First approach for search dialog

c3er · Jun 19, 2023 · f507609 · f507609
1 parent 5243435
commit f507609
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 1 deletion.
diff --git a/app/css/screen.css b/app/css/screen.css
@@ -1,7 +1,9 @@
 :root {
+    --element-dark-bgcolor: #292a2d;
     --status-bar-height: 20px;
     --std-border-color: #ccc;
     --std-border-width: 1px;
+    --text-dark-color: #f8f8f2;
 }
 
 #status-bar {
@@ -71,6 +73,34 @@
     display: table-cell;
 }
 
+.dialog-input-field {
+    margin: 1em 0;
+    width: 100%;
+}
+
+#search-input {
+    width: 100%;
+}
+
+.dialog-buttons {
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.dialog-buttons button {
+    height: 2em;
+    min-width: 70px;
+}
+
+dialog {
+    width: 80%;
+}
+
+input {
+    box-sizing: border-box;
+}
+
 #content {
     display: flex;
     position: fixed;
@@ -201,4 +231,9 @@
     .toc-expand-button:hover {
         background-color: #777;
     }
+
+    dialog, input {
+        background-color: var(--element-dark-bgcolor);
+        color: var(--text-dark-color)
+    }
 }
diff --git a/app/index.html b/app/index.html
@@ -22,6 +22,20 @@
         <script src="index.js"></script>
     </head>
     <body>
+        <!-- Based on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de -->
+        <dialog id="search-dialog">
+            <form>
+                <div class="dialog-input-field">
+                    <label for="search-input">Search:</label>
+                    <input id="search-input" type="text" />
+                </div>
+                <div class="dialog-buttons">
+                    <button id="search-ok-button" value="default">OK</button>
+                    <button value="cancel" formmethod="dialog">Cancel</button>
+                </div>
+            </form>
+        </dialog>
+
         <div id="menu-border"></div>
 
         <div id="blocked-content-info" hidden="true">

diff --git a/app/index.js b/app/index.js
@@ -15,6 +15,7 @@ const log = require("./lib/log/log")
 const navigation = require("./lib/navigation/navigationRenderer")
 const rawText = require("./lib/rawText/rawTextRenderer")
 const renderer = require("./lib/renderer/common")
+const search = require("./lib/renderer/search")
 const toc = require("./lib/toc/tocRenderer")
 
 const TITLE = "Markdown Viewer"
@@ -142,6 +143,7 @@ function handleDOMContentLoadedEvent() {
     contentBlocking.init(document, window)
     rawText.init(document, window, updateStatusBar)
     navigation.init(document)
+    search.init(document, handleSearch)
 
     // Based on https://davidwalsh.name/detect-system-theme-preference-change-using-javascript
     const match = matchMedia("(prefers-color-scheme: dark)")
@@ -151,6 +153,10 @@ function handleDOMContentLoadedEvent() {
     ipc.send(ipc.messages.finishLoad)
 }
 
+function handleSearch(value) {
+    console.log(value)
+}
+
 function handleContextMenuEvent(event) {
     event.preventDefault()
 
@@ -343,3 +349,5 @@ ipc.listen(ipc.messages.print, () => {
 
     scrollTo(scrollPosition)
 })
+
+ipc.listen(ipc.messages.find, () => search.showDialog())
diff --git a/app/lib/ipc/ipcShared.js b/app/lib/ipc/ipcShared.js
@@ -22,6 +22,7 @@ exports.messages = {
     resetContentBlocking: "reset-content-blocking",
     restorePosition: "restore-position",
     updateToc: "update-toc",
+    search: "search",
     unblockAll: "unblock-all",
     unblockURL: "unblock-url",
     viewRawText: "view-raw-text",

diff --git a/app/lib/renderer/search.js b/app/lib/renderer/search.js
@@ -0,0 +1,18 @@
+let _document
+let _searchDialog
+
+exports.init = (document, callback) => {
+    _document = document
+
+    _searchDialog = _document.getElementById("search-dialog")
+    _searchDialog.addEventListener("close", () => callback(_searchDialog.returnValue))
+
+    const okButton = _document.getElementById("search-ok-button")
+    const searchInputElement = _document.getElementById("search-input")
+    okButton.addEventListener("click", event => {
+        event.preventDefault()
+        _searchDialog.close(searchInputElement.value)
+    })
+}
+
+exports.showDialog = () => _searchDialog.showModal()
diff --git a/app/main.js b/app/main.js
@@ -212,7 +212,16 @@ function createMainMenu() {
         },
         {
             label: "&Edit",
-            submenu: [{ role: "copy" }],
+            submenu: [
+                { role: "copy" },
+                {
+                    label: "Find...",
+                    accelerator: "CmdOrCtrl+F",
+                    click() {
+                        ipc.send(ipc.messages.search)
+                    },
+                },
+            ],
         },
         {
             label: "&View",