recipes/frontend/src/modal_dialog.rs
Greg Burri 8be2aa0129 - CSS for modal dialog
- User can click outside modal dialog to close it
2025-05-01 00:48:51 +02:00

70 lines
2.2 KiB
Rust

use futures::{future::FutureExt, pin_mut, select};
use web_sys::{Element, HtmlDialogElement, Node};
use crate::{
on_click,
utils::{SelectorExt, by_id, selector_and_clone},
};
/// Show a modal dialog with a copy of the given HTML element as content.
pub async fn show(element_selector: &str) -> bool {
show_and_initialize(element_selector, async |_| Some(()))
.await
.is_some()
}
/// Show a modal dialog with a copy of the given HTML element as content and execute an initilizer
/// to modify the given content.
pub async fn show_and_initialize<T, U>(element_selector: &str, initializer: T) -> Option<U>
where
T: AsyncFn(Element) -> U,
{
show_and_initialize_with_ok(element_selector, initializer, |_, result| result).await
}
/// 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<FInit, TInit, FOk, TOk>(
element_selector: &str,
initializer: FInit,
ok: FOk,
) -> Option<TOk>
where
FInit: AsyncFn(Element) -> TInit,
FOk: Fn(Element, TInit) -> TOk,
{
let dialog: HtmlDialogElement = by_id("modal-dialog");
let content_element = dialog.selector::<Element>(".content");
let element: Element = selector_and_clone(element_selector);
content_element.set_inner_html("");
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();
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();
result
}