- CSS for modal dialog

- User can click outside modal dialog to close it

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 }