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

This commit is contained in:
Robin Scholtes 2023-04-24 11:32:34 +12:00
parent a252c34968
commit 4a761673c0
6 changed files with 42 additions and 9 deletions

View file

@ -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
* and other interactions.
* Enable the target operation popover itself to gain focus which
* 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.

View file

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

View file

@ -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();
}
}