added all keyboard shortcuts + contextmenu

jpbonch · May 10, 2023 · df1dceb · df1dceb
1 parent 470674b
commit df1dceb
Show file tree

Hide file tree

Showing 5 changed files with 297 additions and 24 deletions.
diff --git a/globe.png b/globe.png
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@
     background-color: black;
     border-right: 0;
     font-weight: bold;
-    line-height: 30px;
+    line-height: 40px;
     vertical-align: middle;
     white-space: nowrap;
     overflow: hidden
@@ -157,6 +157,87 @@
     background-color: black;
 }
 
+#zoomMenu{
+    position: fixed;
+    left: 15px;
+    top: 70px;
+    width: 250px;
+    height: 40px;
+    z-index: 999;
+    background-color: black;
+    display: none;
+    border: 1px solid yellowgreen
+}
+
+#currentZoom {
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    outline: 0;
+    color: yellowgreen;
+    font-family: 'Fira Code', monospace;
+}
+
+#findMenu{
+    position: fixed;
+    right: 15px;
+    top: 70px;
+    width: 250px;
+    height: 40px;
+    z-index: 999;
+    background-color: black;
+    display: none;
+    border: 1px solid yellowgreen
+}
+
+#findInput {
+    width: 150px;
+    height: 20px;
+    border: 0;
+    border-bottom: 2px solid yellowgreen;
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    outline: 0;
+    background-color: black;
+    color: yellowgreen;
+    font-family: 'Fira Code', monospace;
+}
+
+#findInput:focus{
+    outline: 0
+}
+
+.findMenuButton{
+    background-color: black;
+    color: yellowgreen;
+    border: 1px solid yellowgreen;
+}
+
+.findMenuButtonDiv{
+    position: absolute;
+    right: 5px;
+    top: 10px;
+}
+
+.favicon{
+    width: 15px;
+    height: 15px;
+    margin-left: -10px;
+    padding: 4px;
+    display: inline-block;
+}
+
+#contextmenu, #contextmenuSelect {
+    position: absolute;
+    background-color: black;
+    color: yellowgreen;
+    z-index: 999;
+    top:0;
+    left: 0;
+    display: none;
+}
+
 @media screen and (max-width: 300px){ 
     nav{
         display: none;
@@ -183,7 +264,7 @@
     </style>
   </head>
   <body id="browser">
-    <div id="controls">
+    <div id="controls" onblur="this.focus()" autofocus>
     <div id="titlebar">
         <nav id="navigation">
             <button id="back">
@@ -216,6 +297,30 @@
 
     </div>
     <div id="newTab"  class="smalltab">+</div></div>
+</div>
+<div id="findMenu">
+    <input type="text" id="findInput"/>
+    <div class="findMenuButtonDiv">
+    <button id="findNext" class="findMenuButton">v</button>
+    <button id="findPrev" class="findMenuButton">^</button>
+    <button id="closeFindMenu" class="findMenuButton">x</button>
+    </div>
+</div>
+<div id="zoomMenu">
+    <span id="currentZoom"></span>
+</div>
+<div id="contextmenu">
+    <div>Back</div>
+    <div>Forward</div>
+    <div>Reload</div>
+    <div>Print</div>
+    <div>View page source</div>
+    <div>Inspect</div>
+</div>
+<div id="contextmenuSelect">
+    <div>Copy</div>
+    <div>Search Google</div>
+    <div>Inspect</div>
 </div>
  <div id="webviews">
 

diff --git a/main.js b/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require("electron");
+const { app, BrowserWindow, ipcMain, Menu, MenuItem, webContents } = require("electron");
 const path = require("path");
 
 const createWindow = () => {
@@ -23,6 +23,7 @@ const createWindow = () => {
     }]
   }))
   win.setMenu(menu);
+  // win.setMenu(null);
   win.loadFile("index.html");
 };