From 7fff6f51dc2054bbd5365c866715d7303fd2a46b Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Tue, 2 May 2023 18:29:30 +1200
Subject: [PATCH] [#181] use 'regular' listeners for the maximiser icons, left
 a note for future reference

---
 src/web/Manager.mjs                       | 13 +++++++++++--
 src/web/TODO.md                           |  1 -
 src/web/stylesheets/layout/_structure.css | 12 ++++++------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index b1720b66..3c8506fa 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -141,7 +141,16 @@ class Manager {
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
-        this.addDynamicListener(".btn-maximise", "click", this.controls.handlePaneMaximising, this.controls);
+        /**
+         *  A note for the Controls listeners below:
+         *
+         *  I would strongly prefer to just add one listener to all elements with the .btn-maximise class,
+         *  but for a reason I have not been able to uncover ( something to do with addDynamicListener? ) click events
+         *  don't properly bubble and the hitbox to maximise is unacceptably tiny
+         */
+        document.getElementById("maximise-recipe").addEventListener("click", this.controls.handlePaneMaximising.bind(this.controls))
+        document.getElementById("maximise-input").addEventListener("click", this.controls.handlePaneMaximising.bind(this.controls))
+        document.getElementById("maximise-output").addEventListener("click", this.controls.handlePaneMaximising.bind(this.controls))
 
         // Operations
         this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);
@@ -291,7 +300,7 @@ class Manager {
      * @param {Object} [scope=this] - The object to bind to the callback function
      *
      * @example
-     * // Calls the save function whenever the the keyup or paste events are triggered on any element
+     * // Calls the save function whenever the keyup or paste events are triggered on any element
      * // with the .saveable class
      * this.addMultiEventListener(".saveable", "keyup paste", this.save, this);
      */
diff --git a/src/web/TODO.md b/src/web/TODO.md
index 2d1a8037..96a121ae 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -9,7 +9,6 @@
 - view-heights not correct due to variable taskbar on mobile devices
 
 - need long press checks on mobile to add favourites and switch ingredient order
-- fix "hitbox" ( event bubbling ) for maximiser icon / button
 
 ### Desktop UI:
 ### General UI:
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 1fad5edd..b5662bf7 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -6,6 +6,12 @@
  * @license Apache-2.0
  */
 
+#banner { height: var(--banner-height); }
+#operations { height: var(--operations-height); }
+#recipe { height: var(--recipe-height); }
+#IO { height: var(--io-height); }
+#controls { height: var(--controls-height); }
+
 #banner,
 #content-wrapper {
     position: absolute;
@@ -23,12 +29,6 @@
     margin-top: var(--banner-height);
 }
 
-#banner { height: var(--banner-height); }
-#operations { height: var(--operations-height); }
-#recipe { height: var(--recipe-height); }
-#IO { height: var(--io-height); }
-#controls { height: var(--controls-height); }
-
 #controls {
     bottom: 0;
 }