[#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

@@ -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
     }
 }
 

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

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.mobileOpListCreate(e);
-            this.disableOpsListPopovers();
         } else {
-            this.manager.recipe.createSortableSeedList(e.target);
+            this.desktopOpListCreate(e);
-            this.enableOpPopover(e.target);
         }
     }
 
+    /**
+     * 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

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 {