Add a status bar

It shows information to links and images while the mouse pointer is over them.
c3er · May 21, 2018 · 6d08a24 · 6d08a24
1 parent 926f337
commit 6d08a24
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -55,8 +55,6 @@ You can use and copy this tool under the conditions of the MIT license.
 
 External resources that are loaded from the Internet shall be blocked
 
-A status bar showing the link destination of the link that is currently hovered by the mouse pointer
-
 A context menu:
 
 - Copy currently selected text

diff --git a/index.html b/index.html
@@ -17,9 +17,32 @@
             .markdown-body ol ol ol {
                 list-style-type: decimal;
             }
+
+            #status-bar {
+                background-color: #ddd;
+                color: black;
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 25px;
+            }
+
+            #status-text {
+                font-family: Sans-serif;
+                font-size: 10pt;
+                line-height: 0;
+                vertical-align: middle;
+                padding-left: 10px;
+            }
+
+            body {
+                margin-bottom: 25px;
+            }
         </style>
     </head>
     <body>
         <div class="markdown-body" id="content"></div>
+        <div id="status-bar"><p id="status-text"></p></div>
     </body>
 </html>
diff --git a/index.js b/index.js
@@ -14,6 +14,12 @@ function alterTags(tagName, handler) {
     }
 }
 
+function setStatusBar(element, text) {
+    const statusTextElement = document.getElementById("status-text")
+    element.addEventListener("mouseover", () => statusTextElement.innerHTML = text)
+    element.addEventListener("mouseout", () => statusTextElement.innerHTML = "")
+}
+
 const markdown = require("markdown-it")({
     highlight: (text, language) => {
         // Originated from VS Code
@@ -56,12 +62,14 @@ ipcRenderer.on("fileOpen", (event, filePath, isMarkdownFile) => {
             }
             event.preventDefault()
         })
+        setStatusBar(link, target)
     })
     alterTags("img", image => {
         const imageUrl = image.getAttribute("src")
         if (!isInternetUrl(imageUrl)) {
             image.src = path.join(documentDirectory, imageUrl)
         }
+        setStatusBar(image, `${image.getAttribute("alt")} (${imageUrl})`)
     })
 
     document.title = `${filePath} - ${TITLE}`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdview",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "Standalone Markdown viewer",
   "keywords": [
     "markdown",