From 89c1ab12ab6369a37566257713b5eb6ad09b1532 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Thu, 27 Apr 2023 21:35:50 +1200
Subject: [PATCH] [#181] update opListCreate to desktopOpListCreate ( to always
 include drag events and popovers ) and the inverse for mobile. Now it is
 ready for window resizing

---
 src/web/App.mjs                      | 11 +++++------
 src/web/TODO.md                      |  2 --
 src/web/waiters/OperationsWaiter.mjs | 28 ++++++++++++++++++++++++----
 src/web/waiters/WindowWaiter.mjs     |  2 +-
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/web/App.mjs b/src/web/App.mjs
index 755216a7..b875743c 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -889,14 +889,13 @@ class App {
      */
     setDesktopUI(minimise){
         this.setDesktopLayout(minimise);
-
+        // repopulate to enable popovers and drag events
+        this.populateOperationsList();
         /**
          * We don't want to display any checkmarks on desktop, so we clear them.
          * It has no effect on the recipe list, it's purely a visual indicator
          */
         this.manager.recipe.clearAllSelectedClasses();
-
-        // @TODO: handle sortable, draggable, popovers functionality. Works fine on init but needs to work on window resizing too
     }
 
     /**
@@ -906,10 +905,10 @@ class App {
      */
     setMobileUI(){
         this.setMobileLayout();
-        // on window resizing below breakpoint, we need to put the checkmarks back
+        // repopulate to disable popovers and drag events
+        this.populateOperationsList();
+        // restore the appropriate checkmarks
         this.manager.recipe.updateSelectedOperations();
-
-        // @TODO: handle sortable, draggable, popovers functionality. Works fine on init but needs to work on window resizing too
     }
 }
 
diff --git a/src/web/TODO.md b/src/web/TODO.md
index 48c01a0d..d2022927 100644
--- a/src/web/TODO.md
+++ b/src/web/TODO.md
@@ -11,8 +11,6 @@
 - test drag and drop etc. Regular mobile events / UX
 - view-heights not correct due to variable taskbar on mobile devices
 
-- see if i can use OpWaiter > getSelectedOp for getting selected ops. Although I dont see 'selected-op' on any op?
-
 ### 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
diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs
index 25c0d9f7..89ec221e 100755
--- a/src/web/waiters/OperationsWaiter.mjs
+++ b/src/web/waiters/OperationsWaiter.mjs
@@ -185,14 +185,34 @@ class OperationsWaiter {
      */
     opListCreate(e) {
         if ( window.innerWidth < this.app.breakpoint ){
-            this.manager.recipe.createSortableSeedList(e.target, false);
-            this.disableOpsListPopovers();
+            this.mobileOpListCreate(e);
         } else {
-            this.manager.recipe.createSortableSeedList(e.target);
-            this.enableOpPopover(e.target);
+            this.desktopOpListCreate(e);
         }
     }
 
+    /**
+     * Create the desktop op-list which allows popovers
+     * and dragging
+     *
+     * @param {event} e
+     */
+    desktopOpListCreate(e){
+        this.manager.recipe.createSortableSeedList(e.target);
+        this.enableOpPopover(e.target);
+    }
+
+    /**
+     * Create the mobile op-list which does not allow
+     * popovers and dragging
+     *
+     * @param {event} e
+     */
+    mobileOpListCreate(e){
+        this.manager.recipe.createSortableSeedList(e.target, false);
+        this.disableOpsListPopovers();
+    }
+
 
     /**
      * Enable the target operation popover itself to gain focus which
diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs
index 6086a416..26354cb0 100755
--- a/src/web/waiters/WindowWaiter.mjs
+++ b/src/web/waiters/WindowWaiter.mjs
@@ -27,7 +27,7 @@ class WindowWaiter {
      * continuous resetting).
      */
     windowResize() {
-        // @TODO: maybe a debounce  is desireable although genrally people won't be resizing like crazy
+        // @TODO: maybe a debounce is desirable although generally people won't be resizing like crazy.. I think
         if ( window.innerWidth >= this.app.breakpoint ) {
             this.app.setDesktopUI(false);
         } else {