WIP: Zoom function

ransome1 · Mar 21, 2021 · bed1864 · bed1864
1 parent 0e792a2
commit bed1864
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 23 deletions.
diff --git a/src/css/style.css b/src/css/style.css
@@ -252,7 +252,7 @@ nav {
   padding: 1.5em;
   background: #ebebeb;
   --resizeable-width: 34em;
-  height: 100vh;
+  height: 100%;
   width: var(--resizeable-width);
   min-width: var(--min-width);
   max-width: var(--max-width);

diff --git a/src/locales/en/translation.missing.json b/src/locales/en/translation.missing.json
@@ -1,3 +1,5 @@
 {
-  "paste": "paste"
+  "paste": "paste",
+  "zoomIn": "zoomIn",
+  "zoomOut": "zoomOut"
 }
diff --git a/src/main.js b/src/main.js
@@ -81,7 +81,7 @@ const userData = new Store({
     filterDrawer: false,
     compactView: false,
     sortBy: "priority",
-    defaultFontSize: 16
+    zoom: 100
   }
 });
 const appData = {
@@ -136,8 +136,8 @@ const createWindow = () => {
     userData.set("sortBy", "priority");
   }
   // if default font size is not set
-  if(!userData.data.defaultFontSize) {
-    userData.set("defaultFontSize", 16);
+  if(!userData.data.zoom) {
+    userData.set("zoom", 100);
   }
   // if theme hasn't been set, sleek will adapt to OS preference
   if(!userData.data.theme && nativeTheme.shouldUseDarkColors) {
@@ -267,6 +267,21 @@ const createWindow = () => {
           }
         },
         { type: "separator" },
+        {
+          label: "Zoom In",
+          accelerator: "CmdOrCtrl+=",
+          click: function (item, focusedWindow) {
+            mainWindow.webContents.send("triggerFunction", "zoom", ["in"])
+          }
+        },
+        {
+          label: "Zoom Out",
+          accelerator: "CmdOrCtrl+-",
+          click: function (item, focusedWindow) {
+            mainWindow.webContents.send("triggerFunction", "zoom", ["out"])
+          }
+        },
+        { type: "separator" },
         {
           label: i18next.t("toggleDarkMode"),
           accelerator: "CmdOrCtrl+d",

diff --git a/src/render.js b/src/render.js
@@ -312,6 +312,31 @@ function positionSuggestionContainer() {
   suggestionContainer.style.top = modalFormInputPosition.top + modalFormInput.offsetHeight+2 + "px";
   suggestionContainer.style.left = modalFormInputPosition.left + "px";
 }
+function zoom(variable) {
+  try {
+    let zoom = window.userData.zoom;
+    if(variable==="in") {
+      // set max zoom size
+      if(window.userData.zoom===175) return Promise.resolve("Info: Maximum zoom reached");
+      zoom = window.userData.zoom + 5;
+      setUserData("zoom", zoom);
+      html.style.zoom = zoom + "%";
+      //html.style.fontSize = zoom + "px";
+      return Promise.resolve("Info: Zoomed in");
+    } else if(variable==="out") {
+      // set min zoom size
+      if(window.userData.zoom===25) return Promise.resolve("Info: Minimum zoom reached");
+      zoom = window.userData.zoom - 5;
+      setUserData("zoom", zoom);
+      html.style.zoom = zoom + "%";
+      return Promise.resolve("Info: Zoomed out");
+    }
+  } catch (error) {
+  // trigger matomo event
+  if(window.userData.matomoEvents) _paq.push(["trackEvent", "Error", "zoom()", error])
+  return Promise.reject("Error in zoom(): " + error);
+  }
+}
 // ########################################################################################################################
 // RESIZEABLE FILTER DRAWER
 // https://spin.atomicobject.com/2019/11/21/creating-a-resizable-html-element/
@@ -2252,20 +2277,12 @@ function configureEvents() {
     btnToggleViewContainer.onclick = function() {
       viewContainer.classList.toggle("is-active");
     }
-    scaleIncrease.onclick = function() {
-      // set max zoom size
-      if(window.userData.defaultFontSize===25) return false;
-      let defaultFontSize = window.userData.defaultFontSize + 1;
-      setUserData("defaultFontSize", defaultFontSize);
-      html.style.fontSize = defaultFontSize + "px";
-    }
-    scaleDecrease.onclick = function() {
-      // set min zoom size
-      if(window.userData.defaultFontSize===10) return false;
-      let defaultFontSize = window.userData.defaultFontSize - 1;
-      setUserData("defaultFontSize", defaultFontSize);
-      html.style.fontSize = defaultFontSize + "px";
-    }
+    scaleIncrease.onclick = function(el) {
+      zoom("in")
+    };
+    scaleDecrease.onclick = function(el) {
+      zoom("out")
+    };
     document.querySelector(".datepicker .clear-btn").addEventListener('click', function (e) {
       let todo = new TodoTxtItem(modalFormInput.value, [ new DueExtension(), new RecExtension() ]);
       todo.due = undefined;
@@ -2378,7 +2395,7 @@ function configureTodoTableTemplate() {
 function configureMainView() {
   try {
     // set scaling factor if default font size has changed
-    if(window.userData.defaultFontSize) html.style.fontSize = window.userData.defaultFontSize + "px";
+    if(window.userData.zoom) html.style.zoom = window.userData.zoom + "%";
     // empty the table containers before reading fresh data
     todoTableContainer.innerHTML = "";
     // add filename to application title
@@ -2743,6 +2760,13 @@ window.onload = async function () {
           console.log(error);
         });
         break;
+      case "zoom":
+        zoom(args.join()).then(function(result) {
+          console.log(result);
+        }).catch(function(error) {
+          console.log(error);
+        });
+        break;
     }
   });
 
@@ -2756,7 +2780,7 @@ window.onload = async function () {
   // call user data and write it to a global variable
   await getUserData().then(function(userData) {
     window.userData = userData;
-    console.log(window.userData.defaultFontSize);
+    console.log(window.userData.zoom);
     if(!userData.file) showOnboarding(true)
   }).catch(function(error) {
     console.log(error);

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -281,9 +281,8 @@ nav {
   float: left;
   padding: 1.5em;
   background: $mid-grey;
-
   --resizeable-width: 34em;
-  height: 100vh;
+  height: 100%;
   width: var(--resizeable-width);
   min-width: var(--min-width);
   max-width: var(--max-width);