[PATCH yew-widget-toolkit 1/2] touch: side dialog: prevent gestures on scrolling inner elements

[PATCH yew-widget-toolkit 1/2] touch: side dialog: prevent gestures on scrolling inner elements

[Dominik Csapak]

When the SideDialog contains a child that is itself scrollable, the
GestureDetector would happily apply and call the drag/swipe etc. gesture
callbacks and e.g. drag the Sheet down while it was being scrolled.

To fix that, check the elements from the event target up to the
SideDialog container if any of these are scrolling and omit the handling
of the events.

It's currently unclear if it has any advantages of doing this in the
gesture detector itself, but it seems not necessary until now. If it
turns out it is, moving and adapting the code there should not be that
difficult.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/side_dialog.rs | 79 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 78 insertions(+), 1 deletion(-)

diff --git a/src/touch/side_dialog.rs b/src/touch/side_dialog.rs
index 9bc23c9..a379424 100644
--- a/src/touch/side_dialog.rs
+++ b/src/touch/side_dialog.rs
@@ -1,7 +1,7 @@
 use std::rc::Rc;
 
 use wasm_bindgen::JsCast;
-use web_sys::HtmlElement;
+use web_sys::{Element, EventTarget, HtmlElement};
 
 use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
@@ -262,6 +262,14 @@ impl Component for PwtSideDialog {
                 true
             }
             Msg::Drag(event) => {
+                if scrolling_element_in_range(
+                    event.target(),
+                    self.slider_ref.clone(),
+                    props.location,
+                ) {
+                    // don't do anything, children is scrolling
+                    return false;
+                }
                 let x = event.x() as f64;
                 let y = event.y() as f64;
                 match event.phase {
@@ -301,6 +309,14 @@ impl Component for PwtSideDialog {
                 }
             }
             Msg::Swipe(event) => {
+                if scrolling_element_in_range(
+                    event.target(),
+                    self.slider_ref.clone(),
+                    props.location,
+                ) {
+                    // don't do anything, children is scrolling
+                    return false;
+                }
                 let angle = event.direction; // -180 to + 180
                 let dismiss = match props.location {
                     SideDialogLocation::Left => !(-135.0..=135.0).contains(&angle),
@@ -448,3 +464,64 @@ impl From<SideDialog> for VNode {
         VNode::from(comp)
     }
 }
+
+/// Checks if there is any element in the range from `target` to `boundary` that is scrollable
+/// in the direction we would close the side dialog. (`target` must be a descendant of `boundary`).
+fn scrolling_element_in_range(
+    target: Option<EventTarget>,
+    boundary: NodeRef,
+    location: SideDialogLocation,
+) -> bool {
+    let Some(element) = target.and_then(|t| t.dyn_into::<Element>().ok()) else {
+        return false;
+    };
+
+    let Some(boundary) = boundary.cast::<Element>() else {
+        return false;
+    };
+
+    let mut element = Some(element);
+
+    while let Some(el) = element {
+        if el == boundary {
+            break;
+        }
+        if let Some(html) = el.dyn_ref::<HtmlElement>()
+            && check_scrolling(html, location)
+        {
+            return true;
+        }
+        element = el.parent_element();
+    }
+
+    false
+}
+
+/// Returns true if the element is in a state where it can scroll relative to the direction we
+/// would like to close the side dialog, e.g. for SideDialogLocation::Bottom it means returning tru
+/// if the element can scroll up, etc.
+fn check_scrolling(el: &HtmlElement, location: SideDialogLocation) -> bool {
+    match location {
+        SideDialogLocation::Bottom => {
+            if el.scroll_top() > 0 {
+                return true;
+            }
+        }
+        SideDialogLocation::Top => {
+            if el.scroll_top() != el.scroll_height() - el.offset_height() {
+                return true;
+            }
+        }
+        SideDialogLocation::Right => {
+            if el.scroll_left() > 0 {
+                return true;
+            }
+        }
+        SideDialogLocation::Left => {
+            if el.scroll_left() != el.scroll_width() - el.offset_width() {
+                return true;
+            }
+        }
+    }
+    false
+}
-- 
2.47.3

[PATCH yew-widget-toolkit 2/2] touch: fab menu: allow infinite children with the Sheet variant

[Dominik Csapak]

Since the SideDialog now has proper protection against it's child
scrolling, we can now lift the 6 element limit for the Sheet variant.

We keep it for the Material3 variant, since that cannot be scrolled
sensibly.

To properly show the child list, put them into their own container, so
the 'Cancel' button is always visible, and limit the height of the
SideDialog to 90% of the dynamic viewport height.

To prevent triggering the refresh logic of mobile browsers, add
'overscroll-behavior: contain' to the scrollable list.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/fab_menu.rs | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/touch/fab_menu.rs b/src/touch/fab_menu.rs
index a834f2d..161fee0 100644
--- a/src/touch/fab_menu.rs
+++ b/src/touch/fab_menu.rs
@@ -1,7 +1,9 @@
 use yew::prelude::*;
 
 use crate::css::{self, ColorScheme};
-use crate::props::{ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder};
+use crate::props::{
+    ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder, WidgetStyleBuilder,
+};
 use crate::touch::{SideDialog, SideDialogController};
 use crate::tr;
 use crate::widget::{Button, Column, Container};
@@ -219,15 +221,18 @@ impl Component for PwtFabMenu {
             .class(fab_classes)
             .on_activate(ctx.link().callback(|_| Msg::Toggle));
 
-        let btn_class = match props.variant {
-            FabMenuVariant::Sheet => classes!("pwt-button-text"),
-            FabMenuVariant::Material3 => classes!(color, "pwt-fab-menu-item", "medium"),
+        let (btn_class, btn_limit) = match props.variant {
+            FabMenuVariant::Sheet => (classes!("pwt-button-text"), None),
+            FabMenuVariant::Material3 => (classes!(color, "pwt-fab-menu-item", "medium"), Some(6)),
         };
 
         let children = props.children.iter().enumerate().filter_map(|(i, child)| {
-            if i >= 6 {
-                log::error!("FabMenu only supports 6 child buttons.");
-                return None;
+            match btn_limit {
+                Some(limit) if i >= limit => {
+                    log::error!("FabMenu only supports '{limit}' child buttons.");
+                    return None;
+                }
+                _ => {}
             }
 
             let on_activate = child.on_activate.clone();
@@ -253,12 +258,14 @@ impl Component for PwtFabMenu {
                         .controller(controller.clone())
                         .location(crate::touch::SideDialogLocation::Bottom)
                         .on_close(ctx.link().callback(|_| Msg::Toggle))
+                        .style("max-height", "90dvh")
                         .with_child(
                             Column::new()
                                 .class(css::FlexFit)
+                                .style("overscroll-behavior", "contain")
                                 .padding(2)
                                 .gap(1)
-                                .children(children)
+                                .with_child(Column::new().class(css::FlexFit).children(children))
                                 .with_child(html!(<hr />))
                                 .with_child(
                                     Button::new(tr!("Cancel"))
-- 
2.47.3

superseded: [PATCH yew-widget-toolkit 1/2] touch: side dialog: prevent gestures on scrolling inner elements

[Dominik Csapak]

found some smaller bugs with this, so superseded by v2:
https://lore.proxmox.com/yew-devel/20260603125144.3065467-1-d.csapak@proxmox.com/T/#t