feat: add zoom functionality and front-end

Signed-off-by: jdev082 <jdev082@jdev.eu.org>

Author: jdev082

main/main.js

@@ -134,6 +134,13 @@ const template = [{
         mainWindow.webContents.executeJavaScript('toggleFind()');
     }
 },
+{
+    label: 'Zoom',
+    accelerator: 'Ctrl+J',
+    click: function() {
+        mainWindow.webContents.executeJavaScript('toggleZoom()');
+    }
+},
 {
     label: 'DevTools',
     accelerator: 'CmdOrCtrl+I',

src/functions.js

@@ -92,6 +92,11 @@ function toggleFind() {
     e.classList.toggle('hidden');
 }
 
+function toggleZoom() {
+    e = document.querySelector('#zoom')
+    e.classList.toggle('hidden')
+}
+
 function toggleFullScreen() {
     toggleDisplay(document.querySelector('#userchrome'));
     native.ipcToggleFs();

src/index.html

@@ -179,6 +179,7 @@ <h1>Welcome to Catalyst!</h1>
     <div id="webviews"></div>
     <!-- Find Window -->
     <input class="hidden" id="find" placeholder="Search..." />
+    <input class="hidden" id="zoom" placeholder="Set zoom factor..." />
     <script src="./functions.js"></script>
     <script src="./startup.js"></script>
     <script src="./bookmarks.js"></script>

src/listeners.js

@@ -4,6 +4,7 @@ reload = document.querySelector('#reload');
 backward = document.querySelector('#back');
 forward = document.querySelector('#forward');
 find = document.querySelector('#find');
+zoom = document.querySelector('#zoom');
 sidebar = document.querySelector('#tgl-sidebar');
 
 document.getElementById('more-btn').addEventListener('click', () => {
@@ -31,6 +32,10 @@ find.addEventListener('input', (event) => {
     }
 });
 
+zoom.addEventListener('input', (event) => {
+    document.querySelector('.current').setZoomFactor(parseInt(zoom.value));
+});
+
 sidebar.addEventListener('click', () => {
     toggleDisplay(document.getElementById('sidebar'));
 });

styles.css

@@ -275,7 +275,7 @@ ul {
     animation: spin 1s linear infinite;
 }
 
-#find {
+#find, #zoom {
     position: fixed;
     bottom: 0;
     width: 100vw;
@@ -284,7 +284,7 @@ ul {
     color: var(--foreground);
 }
 
-#find::placeholder {
+#find::placeholder, #zoom::placeholder {
     color: var(--foreground);
 }