- CSS for modal dialog

- User can click outside modal dialog to close it

frontend/src/modal_dialog.rs

@@ -1,5 +1,5 @@
 use futures::{future::FutureExt, pin_mut, select};
-use web_sys::{Element, HtmlDialogElement};
+use web_sys::{Element, HtmlDialogElement, Node};
 
 use crate::{
     on_click,
@@ -25,20 +25,17 @@ where
 /// Show a modal dialog with a copy of the given HTML element as content and execute an initilizer
 /// to modify the given content.
 /// Call the given function when OK is pressed.
-pub async fn show_and_initialize_with_ok<T, V, W, U>(
+pub async fn show_and_initialize_with_ok<FInit, TInit, FOk, TOk>(
     element_selector: &str,
-    initializer: T,
-    ok: V,
-) -> Option<W>
+    initializer: FInit,
+    ok: FOk,
+) -> Option<TOk>
 where
-    T: AsyncFn(Element) -> U,
-    V: Fn(Element, U) -> W,
+    FInit: AsyncFn(Element) -> TInit,
+    FOk: Fn(Element, TInit) -> TOk,
 {
     let dialog: HtmlDialogElement = by_id("modal-dialog");
 
-    let input_ok: Element = dialog.selector(".ok");
-    let input_cancel: Element = dialog.selector(".cancel");
-
     let content_element = dialog.selector::<Element>(".content");
 
     let element: Element = selector_and_clone(element_selector);
@@ -46,16 +43,25 @@ where
     content_element.append_child(&element).unwrap();
     let init_result = initializer(element.clone()).await;
 
+    let input_ok: Element = dialog.selector(".ok");
+    let input_cancel: Element = dialog.selector(".cancel");
+
     dialog.show_modal().unwrap();
 
     let click_ok = on_click::OnClick::new(&input_ok).fuse();
     let click_cancel = on_click::OnClick::new(&input_cancel).fuse();
 
-    pin_mut!(click_ok, click_cancel);
+    let dialog_cloned = dialog.clone();
+    let click_dialog =
+        on_click::OnClick::new_with_filter(&dialog, move |node| node == &dialog_cloned as &Node)
+            .fuse();
+
+    pin_mut!(click_ok, click_cancel, click_dialog);
 
     let result = select! {
         () = click_ok => Some(ok(element, init_result)),
         () = click_cancel => None,
+        () = click_dialog => None,
     };
 
     dialog.close();

frontend/src/on_click.rs

@@ -7,7 +7,7 @@ use std::{
     task::{Context, Poll},
 };
 use wasm_bindgen::prelude::*;
-use web_sys::EventTarget;
+use web_sys::{EventTarget, Node};
 
 // From: https://docs.rs/gloo-events/latest/gloo_events/struct.EventListener.html
 
@@ -19,11 +19,25 @@ pub struct OnClick {
 
 impl OnClick {
     pub fn new(target: &EventTarget) -> Self {
+        Self::new_with_filter(target, |_| true)
+    }
+
+    pub fn new_with_filter<F>(target: &EventTarget, filter: F) -> Self
+    where
+        F: Fn(&Node) -> bool + 'static,
+    {
         let (sender, receiver) = mpsc::unbounded();
 
-        // Attach an event listener.
-        let listener = EventListener::new(target, "click", move |_event| {
-            sender.unbounded_send(()).unwrap_throw();
+        let listener = EventListener::new(target, "click", move |event| {
+            let mut send = true;
+            if let Some(event_target) = event.target() {
+                if let Some(node) = event_target.dyn_ref::<Node>() {
+                    send = filter(node);
+                }
+            }
+            if send {
+                sender.unbounded_send(()).unwrap_throw();
+            }
         });
 
         Self { receiver, listener }

frontend/src/pages/dev_panel.rs

@@ -1,4 +1,4 @@
-use gloo::{events::EventListener, utils::document};
+use gloo::{console::log, events::EventListener, utils::document};
 use wasm_bindgen_futures::spawn_local;
 
 use crate::{
@@ -61,7 +61,11 @@ pub fn setup_page() {
 
     EventListener::new(&by_id("test-modal-dialog"), "click", move |_event| {
         spawn_local(async move {
-            modal_dialog::show("#hidden-templates .modal-test-message").await;
+            if modal_dialog::show("#hidden-templates .modal-test-message").await {
+                log!("Ok");
+            } else {
+                log!("Cancel");
+            }
         });
     })
     .forget();

frontend/src/utils.rs

@@ -49,6 +49,23 @@ impl SelectorExt for Element {
     }
 }
 
+// Not used anymore.
+// pub trait NodeHelperExt {
+//     fn is_parent(&self, child: &Node) -> bool;
+// }
+// impl NodeHelperExt for Node {
+//     fn is_parent(&self, child: &Node) -> bool {
+//         let mut node = child.clone();
+//         while let Some(parent) = node.parent_node() {
+//             if &parent == self {
+//                 return true;
+//             }
+//             node = parent;
+//         }
+//         false
+//     }
+// }
+
 pub fn selector<T>(selectors: &str) -> T
 where
     T: JsCast,