[#181] disable popovers on mobile UI on init and resizing events

Gruntfile.js

@@ -214,6 +214,7 @@ module.exports = function (grunt) {
                 },
                 devServer: {
                     port: grunt.option("port") || 8080,
+                    host: "0.0.0.0",
                     client: {
                         logging: "error",
                         overlay: true

src/web/App.mjs

@@ -878,6 +878,29 @@ class App {
             }
         }
     }
+
+    /**
+     * Aggregate all the desktop UI functions.
+     *
+     * Popovers and desktop layout are set on init, but we also need to
+     * update the UI correctly on window resizing events
+     */
+    setDesktopUI(minimise){
+        this.setDesktopLayout(minimise);
+        this.manager.ops.enableOpsListPopovers();
+    }
+
+
+    /**
+     * Aggregate all the mobile UI functions.
+     *
+     * Popovers and desktop layout are set on init, but we also need to
+     * update the UI correctly on window resizing events
+     */
+    setMobileUI(){
+        this.setMobileLayout();
+        this.manager.ops.disableOpsListPopovers();
+    }
 }
 
 export default App;

src/web/TODO.md

@@ -4,8 +4,6 @@
 ---
 
 #### Mobile UI ( on real device ):
-- disableOpsListPopover() on window resize event, not working 10/10 yet for modal op-lists
-
 - on mobile UI, there is almost no visual feedback when adding an operation to the recipe list. Since the recipe list is not visible like on desktop, this is very confusing UX
 - adding an operation only works with drag and drop, not on double tap or the like. This todo is related to the remaining mobile UI one.
   Dragging and dropping won't be an option on mobile, because then you can't scroll the operations list. I'm thinking to add
@@ -17,6 +15,8 @@
 - test drag and drop etc. Regular mobile events / UX
 - view-heights not correct due to variable taskbar on mobile devices
 
+- minor issue w popovers glitching in modal ( edit favourites ), but it only occurs on (laptop) browser < breakpoint, not on a real mobile device. It's minor but bothers me
+
 ### Desktop UI:
 ### General UI:
 - fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot of work though
@@ -25,6 +25,7 @@
 - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original
 
 ### Misc:
+- Gruntfile revert dev config
 - comb through CSS and improve organisation for better DevX. Ask repo owners to open another issue perhaps and just redo all of the stylesheets ( preferably with SASS )
 - delete this file when done :)
 

src/web/waiters/OperationsWaiter.mjs

@@ -185,18 +185,18 @@ class OperationsWaiter {
         if ( window.innerWidth < this.app.breakpoint ){
             this.disableOpsListPopovers();
         } else {
-            this.enableOpsListPopovers(e.target);
+            this.enableOpPopover(e.target);
         }
     }
 
 
     /**
-     * Sets up popovers, allowing the popover itself to gain focus which enables scrolling
+     * Enable the target operation popover itself to gain focus which
-     * and other interactions.
+     * enables scrolling and other interactions.
      *
      * @param {Element} el - The element to start selecting from
      */
-    enableOpsListPopovers(el) {
+    enableOpPopover(el) {
         $(el).find("[data-toggle=popover]").addBack("[data-toggle=popover]")
             .popover({trigger: "manual"})
             .on("mouseenter", function(e) {
@@ -218,6 +218,7 @@ class OperationsWaiter {
             });
     }
 
+
     /**
      * Disable popovers on all op-list list items
      */
@@ -225,6 +226,13 @@ class OperationsWaiter {
         $(document.querySelectorAll(".op-list .operation")).popover("disable");
     }
 
+    /**
+     * Enable popovers on all op-list list items
+     */
+    enableOpsListPopovers(){
+        $(document.querySelectorAll(".op-list .operation")).popover("enable");
+    }
+
 
     /**
      * Handler for operation doubleclick events.

src/web/waiters/RecipeWaiter.mjs

@@ -139,7 +139,7 @@ class RecipeWaiter {
             enableOpsElement = evt.item;
             $(evt.item).attr("data-toggle", "popover");
         }
-        this.manager.ops.enableOpsListPopovers(enableOpsElement);
+        this.manager.ops.enableOpPopover(enableOpsElement);
 
         if (evt.item.parentNode.id !== "rec-list") {
             return;

src/web/waiters/WindowWaiter.mjs

@@ -30,9 +30,9 @@ class WindowWaiter {
         debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])();
 
         if ( window.innerWidth >= this.app.breakpoint ) {
-            this.app.setDesktopLayout(false);
+            this.app.setDesktopUI(false);
         } else {
-            this.app.setMobileLayout();
+            this.app.setMobileUI();
         }
     }