From df781bec0077229bcc06efb0e186dbcf4a96fb03 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Fri, 12 May 2023 17:50:46 +1200
Subject: [PATCH] add function to check for window width and use that
 throughout the app for more convenient future use

---
 src/web/App.mjs                      | 5 ++++-
 src/web/HTMLOperation.mjs            | 4 ++--
 src/web/waiters/ControlsWaiter.mjs   | 2 +-
 src/web/waiters/OperationsWaiter.mjs | 4 ++--
 src/web/waiters/RecipeWaiter.mjs     | 2 +-
 src/web/waiters/WindowWaiter.mjs     | 2 +-
 6 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/web/App.mjs b/src/web/App.mjs
index 0f381efa..0d0b341d 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -50,6 +50,9 @@ class App {
         this.breakpoint = 768;
     }
 
+    isMobileView() {
+        return window.innerWidth < this.breakpoint;
+    }
 
     /**
      * This function sets up the stage and creates listeners for all events.
@@ -297,7 +300,7 @@ class App {
      * @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width
      */
     initialiseUI() {
-        if (window.innerWidth < this.breakpoint) {
+        if (this.isMobileView()) {
             this.setMobileUI();
         } else {
             this.setDesktopUI(false);
diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs
index 820dd396..c84812af 100755
--- a/src/web/HTMLOperation.mjs
+++ b/src/web/HTMLOperation.mjs
@@ -64,14 +64,14 @@ class HTMLOperation {
 
         if (removeIcon) {
             html += "<i class='material-icons remove-icon op-icon'>delete</i>";
-        } else if (!removeIcon && window.innerWidth < this.app.breakpoint) {
+        } else if (!removeIcon && this.app.isMobileView()) {
             html += "<i class='material-icons check-icon op-icon'>check</i>";
         }
 
         // check if local storage is available *and* has favourites at all ( otherwise we use the default favs )
         const isFavourite = this.app.isLocalStorageAvailable() && localStorage.favourites?.includes(this.name);
 
-        if (window.innerWidth < this.app.breakpoint) {
+        if (this.app.isMobileView()) {
             html += `<i title="${this.name}" class='material-icons icon-add-favourite star-icon op-icon ${isFavourite ? "fav-op" : ""}'>
                     ${isFavourite ? "star" : "star_outline"}
                 </i>`;
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index 49721954..6c50fe13 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -450,7 +450,7 @@ ${navigator.userAgent}
         if (maximise) {
             pane.style.height = `${window.innerHeight - 40}px`;
         } else {
-            if (window.innerWidth < this.app.breakpoint) {
+            if (this.app.isMobileView()) {
                 this.app.assignAvailableHeight();
             }
         }
diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs
index 62cf6158..a65e4ee5 100755
--- a/src/web/waiters/OperationsWaiter.mjs
+++ b/src/web/waiters/OperationsWaiter.mjs
@@ -183,7 +183,7 @@ class OperationsWaiter {
      * @param {event} e
      */
     opListCreate(e) {
-        if (window.innerWidth < this.app.breakpoint) {
+        if (this.app.isMobileView()) {
             this.createMobileOpList(e);
         } else {
             this.createDesktopOpList(e);
@@ -313,7 +313,7 @@ class OperationsWaiter {
             this.removeIntent = false;
         }.bind(this));
 
-        if (window.innerWidth >= this.app.breakpoint) {
+        if (!this.app.isMobileView()) {
             $("#edit-favourites-list [data-toggle=popover]").popover();
         }
         $("#favourites-modal").modal();
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 0f2886a0..4dfed642 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -33,7 +33,7 @@ class RecipeWaiter {
      */
     initialiseOperationDragNDrop() {
         const recList = document.getElementById("rec-list");
-        const isMobileView = window.innerWidth < this.app.breakpoint;
+        const isMobileView = this.app.isMobileView();
 
         // Recipe list
         Sortable.create(recList, {
diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs
index b688e92b..d7f60b01 100755
--- a/src/web/waiters/WindowWaiter.mjs
+++ b/src/web/waiters/WindowWaiter.mjs
@@ -30,7 +30,7 @@ class WindowWaiter {
      * continuous resetting).
      */
     windowResize() {
-        if (window.innerWidth >= this.app.breakpoint) {
+        if (!this.app.isMobileView()) {
             this.onResizeToDesktop();
         } else {
             this.onResizeToMobile();