* [yew-devel] [PATCH yew-widget-toolkit v2] tree wide: use gloo_utils::window/document/body
@ 2025-05-05 9:16 Dominik Csapak
2025-05-05 11:41 ` [yew-devel] applied: " Dietmar Maurer
0 siblings, 1 reply; 2+ messages in thread
From: Dominik Csapak @ 2025-05-05 9:16 UTC (permalink / raw)
To: yew-devel
instead of unwrapping it every time inline.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
changes from v1:
* usge gloo_utils instead of our own wrapper
Cargo.toml | 1 +
src/dom/align.rs | 2 +-
src/dom/focus.rs | 24 +++----------
src/dom/mod.rs | 6 ++--
src/state/theme.rs | 11 ++----
src/touch/side_dialog.rs | 4 +--
src/widget/data_table/data_table.rs | 8 ++---
| 5 +--
| 2 +-
src/widget/dialog.rs | 43 +++++++++++++----------
src/widget/form/managed_field.rs | 5 +--
| 5 +--
src/widget/rtl_switcher.rs | 6 ++--
src/widget/split_pane.rs | 2 +-
src/widget/theme_loader.rs | 6 +---
15 files changed, 48 insertions(+), 82 deletions(-)
diff --git a/Cargo.toml b/Cargo.toml
index 54c5056..15322af 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -61,6 +61,7 @@ wasm-logger = "0.2"
gloo-events = "0.2"
gloo-timers = "0.3"
gloo-history = "0.2"
+gloo-utils = "0.2"
serde = { version = "1.0", features = ["derive", "rc"] }
serde_json = "1.0"
wasm-bindgen-futures = "0.4"
diff --git a/src/dom/align.rs b/src/dom/align.rs
index 6d7450a..1f54b2d 100644
--- a/src/dom/align.rs
+++ b/src/dom/align.rs
@@ -381,7 +381,7 @@ fn get_containing_block(element: &HtmlElement) -> Option<HtmlElement> {
break;
}
if let Some(html) = node.into_html_element() {
- if let Ok(Some(style)) = window().unwrap().get_computed_style(&html) {
+ if let Ok(Some(style)) = gloo_utils::window().get_computed_style(&html) {
match style.get_property_value("transform") {
Ok(transform) if transform != "none" => return Some(html),
_ => {}
diff --git a/src/dom/focus.rs b/src/dom/focus.rs
index 101bab9..a0af7ae 100644
--- a/src/dom/focus.rs
+++ b/src/dom/focus.rs
@@ -49,10 +49,7 @@ pub fn focus_next_el(el: web_sys::HtmlElement, backwards: bool) {
return;
}
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
- let index = match document.active_element() {
+ let index = match gloo_utils::document().active_element() {
Some(active_element) => list.index_of(&active_element, 0),
None => -1,
};
@@ -108,9 +105,7 @@ pub fn roving_tabindex_next_el(el: web_sys::HtmlElement, backwards: bool, roving
}
fn get_active_index(list: &[web_sys::HtmlElement]) -> i32 {
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- let active_el = document.active_element();
+ let active_el = gloo_utils::document().active_element();
let active_node: Option<&web_sys::Node> = active_el.as_deref();
let mut index = 0;
@@ -157,10 +152,7 @@ pub fn focus_inside_el(el: web_sys::HtmlElement) -> bool {
return false;
}
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
- let index = match document.active_element() {
+ let index = match gloo_utils::document().active_element() {
Some(active_element) => list.index_of(&active_element, 0),
None => -1,
};
@@ -174,10 +166,7 @@ pub fn focus_inside_el(el: web_sys::HtmlElement) -> bool {
///
/// This is the case if the focused element is an input, textarea or is marked as 'contenteditable'.
pub fn focus_inside_input() -> bool {
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
- match document.active_element() {
+ match gloo_utils::document().active_element() {
Some(el) => match el.dyn_into::<web_sys::HtmlElement>() {
Ok(el) => {
let tag = el.tag_name().to_lowercase();
@@ -204,10 +193,7 @@ pub fn update_roving_tabindex_el(el: web_sys::HtmlElement) {
return;
}
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
- let active_el = document.active_element();
+ let active_el = gloo_utils::document().active_element();
let active_node: Option<&web_sys::Node> = active_el.as_deref();
let mut index = 0;
diff --git a/src/dom/mod.rs b/src/dom/mod.rs
index f61dd21..b5a1c71 100644
--- a/src/dom/mod.rs
+++ b/src/dom/mod.rs
@@ -58,8 +58,7 @@ impl IntoHtmlElement for web_sys::HtmlElement {
pub fn element_direction_rtl<T: IntoHtmlElement>(node: T) -> Option<bool> {
let el = node.into_html_element()?;
- let window = web_sys::window().unwrap();
- if let Ok(Some(style)) = window.get_computed_style(&el) {
+ if let Ok(Some(style)) = gloo_utils::window().get_computed_style(&el) {
if let Ok(direction) = style.get_property_value("direction") {
return Some(direction == "rtl");
}
@@ -70,8 +69,7 @@ pub fn element_direction_rtl<T: IntoHtmlElement>(node: T) -> Option<bool> {
/// Returns if the system prefers dark mode
pub fn get_system_prefer_dark_mode() -> bool {
- let window = web_sys::window().unwrap();
- if let Ok(Some(list)) = window.match_media("(prefers-color-scheme: dark)") {
+ if let Ok(Some(list)) = gloo_utils::window().match_media("(prefers-color-scheme: dark)") {
list.matches()
} else {
false
diff --git a/src/state/theme.rs b/src/state/theme.rs
index 0b6b65f..76af100 100644
--- a/src/state/theme.rs
+++ b/src/state/theme.rs
@@ -276,8 +276,7 @@ impl ThemeObserver {
let theme = Theme::load();
let system_prefer_dark = get_system_prefer_dark_mode();
- let window = web_sys::window().unwrap();
- let media_query = match window.match_media("(prefers-color-scheme: dark)") {
+ let media_query = match gloo_utils::window().match_media("(prefers-color-scheme: dark)") {
Ok(Some(media_query)) => media_query,
_ => panic!("window.match_media() failed!"),
};
@@ -322,9 +321,7 @@ impl ThemeObserver {
}) as Box<dyn Fn()>
});
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- let _ = document.add_event_listener_with_callback(
+ let _ = gloo_utils::document().add_event_listener_with_callback(
"pwt-theme-changed",
theme_changed_closure.as_ref().unchecked_ref(),
);
@@ -337,9 +334,7 @@ impl ThemeObserver {
None => return,
};
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- let _ = document.remove_event_listener_with_callback(
+ let _ = gloo_utils::document().remove_event_listener_with_callback(
"pwt-theme-changed",
theme_changed_closure.as_ref().unchecked_ref(),
);
diff --git a/src/touch/side_dialog.rs b/src/touch/side_dialog.rs
index 9d36ca5..0ff3bb6 100644
--- a/src/touch/side_dialog.rs
+++ b/src/touch/side_dialog.rs
@@ -185,9 +185,7 @@ impl Component for PwtSideDialog {
fn create(ctx: &Context<Self>) -> Self {
let props = ctx.props();
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- let last_active = document
+ let last_active = gloo_utils::document()
.active_element()
.and_then(|el| el.dyn_into::<HtmlElement>().ok());
diff --git a/src/widget/data_table/data_table.rs b/src/widget/data_table/data_table.rs
index 8f664af..f926955 100644
--- a/src/widget/data_table/data_table.rs
+++ b/src/widget/data_table/data_table.rs
@@ -815,9 +815,7 @@ impl<S: DataStore> PwtDataTable<S> {
fn get_row_el(&self, key: &Key) -> Option<web_sys::Element> {
let id = self.get_unique_item_id(key);
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- document.get_element_by_id(&id)
+ gloo_utils::document().get_element_by_id(&id)
}
fn focus_cell(&mut self, key: &Key) {
@@ -856,9 +854,7 @@ impl<S: DataStore> PwtDataTable<S> {
}
fn find_focused_cell(&self) -> Option<(Key, Option<usize>)> {
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- let active_el = document.active_element()?;
+ let active_el = gloo_utils::document().active_element()?;
dom_find_focus_pos(active_el, &self.unique_id)
}
--git a/src/widget/data_table/header_widget.rs b/src/widget/data_table/header_widget.rs
index 70bdf8b..3509ae6 100644
--- a/src/widget/data_table/header_widget.rs
+++ b/src/widget/data_table/header_widget.rs
@@ -427,12 +427,9 @@ impl<T: 'static> PwtHeaderWidget<T> {
}
fn focus_active_cell(&self) {
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
let get_cell_el = |cell_idx| -> Option<web_sys::HtmlElement> {
let id = self.unique_cell_id(cell_idx);
- let el = document.get_element_by_id(&id)?;
+ let el = gloo_utils::document().get_element_by_id(&id)?;
match el.dyn_into::<web_sys::HtmlElement>() {
Ok(el) => Some(el),
Err(_) => None,
--git a/src/widget/data_table/resizable_header.rs b/src/widget/data_table/resizable_header.rs
index 7243dc7..91a7e36 100644
--- a/src/widget/data_table/resizable_header.rs
+++ b/src/widget/data_table/resizable_header.rs
@@ -244,7 +244,7 @@ impl Component for PwtResizableHeader {
Msg::StartResize => {
self.rtl = element_direction_rtl(&self.node_ref);
- let window = web_sys::window().unwrap();
+ let window = gloo_utils::window();
let link = ctx.link();
let onpointermove = link.callback(|e: Event| {
let event = e.dyn_ref::<web_sys::PointerEvent>().unwrap_throw();
diff --git a/src/widget/dialog.rs b/src/widget/dialog.rs
index 68fc91b..0bff03c 100644
--- a/src/widget/dialog.rs
+++ b/src/widget/dialog.rs
@@ -5,7 +5,7 @@ use gloo_events::EventListener;
use gloo_timers::callback::Timeout;
use wasm_bindgen::prelude::Closure;
use wasm_bindgen::{JsCast, UnwrapThrowExt};
-use web_sys::{window, HtmlElement};
+use web_sys::HtmlElement;
use yew::html::{IntoEventCallback, IntoPropValue};
use yew::prelude::*;
@@ -154,8 +154,7 @@ impl PwtDialog {
impl Drop for PwtDialog {
fn drop(&mut self) {
if let Some(center_function) = self.center_function.take() {
- let window = web_sys::window().unwrap();
- window
+ gloo_utils::window()
.remove_event_listener_with_callback(
"resize",
center_function.as_ref().unchecked_ref(),
@@ -172,9 +171,7 @@ impl Component for PwtDialog {
fn create(ctx: &Context<Self>) -> Self {
ctx.link().send_message(Msg::Open);
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
- let last_active = document
+ let last_active = gloo_utils::document()
.active_element()
.and_then(|el| el.dyn_into::<HtmlElement>().ok());
@@ -184,7 +181,7 @@ impl Component for PwtDialog {
link.send_message(Msg::Center);
});
- window
+ gloo_utils::window()
.add_event_listener_with_callback(
"resize",
center_function.as_ref().unchecked_ref(),
@@ -253,10 +250,14 @@ impl Component for PwtDialog {
self.dragging_state = DragState::Dragging(
x,
y,
- EventListener::new(&window().unwrap(), "pointermove", move |event| {
- onmousemove.emit(event.clone().dyn_into().unwrap());
- }),
- EventListener::new(&window().unwrap(), "pointerup", move |event| {
+ EventListener::new(
+ &gloo_utils::window(),
+ "pointermove",
+ move |event| {
+ onmousemove.emit(event.clone().dyn_into().unwrap());
+ },
+ ),
+ EventListener::new(&gloo_utils::window(), "pointerup", move |event| {
onpointerup.emit(event.clone().dyn_into().unwrap());
}),
event.pointer_id(),
@@ -267,7 +268,7 @@ impl Component for PwtDialog {
}
Msg::PointerMove(event) => match &self.dragging_state {
DragState::Dragging(offset_x, offset_y, _, _, id) if *id == event.pointer_id() => {
- let window = window().unwrap();
+ let window = gloo_utils::window();
let width = window.inner_width().unwrap().as_f64().unwrap();
let height = window.inner_height().unwrap().as_f64().unwrap();
let x = (event.client_x() as f64).max(0.0).min(width) - offset_x;
@@ -324,10 +325,10 @@ impl Component for PwtDialog {
DragState::Dragging(
offset.0,
offset.1,
- EventListener::new(&window().unwrap(), "pointermove", move |event| {
+ EventListener::new(&gloo_utils::window(), "pointermove", move |event| {
onpointermove.emit(event.clone().dyn_into().unwrap());
}),
- EventListener::new(&window().unwrap(), "pointerup", move |event| {
+ EventListener::new(&gloo_utils::window(), "pointerup", move |event| {
onpointerup.emit(event.clone().dyn_into().unwrap());
}),
event.pointer_id(),
@@ -341,10 +342,16 @@ impl Component for PwtDialog {
let old_width = rect.width();
let old_height = rect.height();
- let viewport_height =
- window().unwrap().inner_height().unwrap().as_f64().unwrap();
- let viewport_width =
- window().unwrap().inner_width().unwrap().as_f64().unwrap();
+ let viewport_height = gloo_utils::window()
+ .inner_height()
+ .unwrap()
+ .as_f64()
+ .unwrap();
+ let viewport_width = gloo_utils::window()
+ .inner_width()
+ .unwrap()
+ .as_f64()
+ .unwrap();
// restrict to viewport
let client_x = (event.client_x() as f64).clamp(5.0, viewport_width - 5.0);
diff --git a/src/widget/form/managed_field.rs b/src/widget/form/managed_field.rs
index 0ca7ae0..11db44a 100644
--- a/src/widget/form/managed_field.rs
+++ b/src/widget/form/managed_field.rs
@@ -515,9 +515,6 @@ impl<MF: ManagedField + 'static> Component for ManagedFieldMaster<MF> {
*/
if let Some(label_id) = &props.label_id {
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
let label_clicked_closure = Closure::wrap({
let link = ctx.link().clone();
Box::new(move || {
@@ -525,7 +522,7 @@ impl<MF: ManagedField + 'static> Component for ManagedFieldMaster<MF> {
}) as Box<dyn Fn()>
});
- if let Some(el) = document.get_element_by_id(label_id) {
+ if let Some(el) = gloo_utils::document().get_element_by_id(label_id) {
let _ = el.add_event_listener_with_callback(
"click",
label_clicked_closure.as_ref().unchecked_ref(),
--git a/src/widget/menu/mod.rs b/src/widget/menu/mod.rs
index 0231430..446c26e 100644
--- a/src/widget/menu/mod.rs
+++ b/src/widget/menu/mod.rs
@@ -739,10 +739,7 @@ fn dom_focus_inside_submenu(event: &FocusEvent, item_id: &str) -> bool {
}
fn dom_focus_submenu(item_id: &str) {
- let window = web_sys::window().unwrap();
- let document = window.document().unwrap();
-
- let el = match document.get_element_by_id(item_id) {
+ let el = match gloo_utils::document().get_element_by_id(item_id) {
Some(el) => el,
None => return,
};
diff --git a/src/widget/rtl_switcher.rs b/src/widget/rtl_switcher.rs
index 5332bf9..2400dd7 100644
--- a/src/widget/rtl_switcher.rs
+++ b/src/widget/rtl_switcher.rs
@@ -51,8 +51,7 @@ impl Component for PwtRtlSwitcher {
fn update(&mut self, _ctx: &yew::Context<Self>, msg: Self::Message) -> bool {
match msg {
Msg::ToggleRtl => {
- let document = web_sys::window().unwrap().document().unwrap();
- let elements = document.get_elements_by_tag_name("html");
+ let elements = gloo_utils::document().get_elements_by_tag_name("html");
if let Some(html) = elements.get_with_index(0) {
if self.rtl {
if let Err(err) = html.remove_attribute("dir") {
@@ -74,8 +73,7 @@ impl Component for PwtRtlSwitcher {
}
fn create(_ctx: &yew::Context<Self>) -> Self {
- let document = web_sys::window().unwrap().document().unwrap();
- let elements = document.get_elements_by_tag_name("html");
+ let elements = gloo_utils::document().get_elements_by_tag_name("html");
let rtl = elements
.get_with_index(0)
.and_then(|html| html.get_attribute("dir"))
diff --git a/src/widget/split_pane.rs b/src/widget/split_pane.rs
index 106602f..f001290 100644
--- a/src/widget/split_pane.rs
+++ b/src/widget/split_pane.rs
@@ -540,7 +540,7 @@ impl Component for PwtSplitPane {
self.rtl = element_direction_rtl(&props.std_props.node_ref);
- let window = web_sys::window().unwrap();
+ let window = gloo_utils::window();
let link = ctx.link();
let onpointermove = link.callback(move |e: Event| {
let event = e.dyn_ref::<web_sys::PointerEvent>().unwrap_throw();
diff --git a/src/widget/theme_loader.rs b/src/widget/theme_loader.rs
index f8a0d40..594b56b 100644
--- a/src/widget/theme_loader.rs
+++ b/src/widget/theme_loader.rs
@@ -38,11 +38,7 @@ pub struct PwtThemeLoader {
}
fn get_document_root() -> Option<web_sys::Element> {
- let window = web_sys::window()?;
-
- let document = window.document()?;
-
- document.document_element()
+ gloo_utils::document().document_element()
}
fn set_css_density(density: ThemeDensity) {
--
2.39.5
_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel
^ permalink raw reply [flat|nested] 2+ messages in thread
* [yew-devel] applied: [PATCH yew-widget-toolkit v2] tree wide: use gloo_utils::window/document/body
2025-05-05 9:16 [yew-devel] [PATCH yew-widget-toolkit v2] tree wide: use gloo_utils::window/document/body Dominik Csapak
@ 2025-05-05 11:41 ` Dietmar Maurer
0 siblings, 0 replies; 2+ messages in thread
From: Dietmar Maurer @ 2025-05-05 11:41 UTC (permalink / raw)
To: Yew framework devel list at Proxmox, Dominik Csapak
applied
_______________________________________________
yew-devel mailing list
yew-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel
^ permalink raw reply [flat|nested] 2+ messages in thread
end of thread, other threads:[~2025-05-05 11:41 UTC | newest]
Thread overview: 2+ messages (download: mbox.gz / follow: Atom feed)
-- links below jump to the message on this page --
2025-05-05 9:16 [yew-devel] [PATCH yew-widget-toolkit v2] tree wide: use gloo_utils::window/document/body Dominik Csapak
2025-05-05 11:41 ` [yew-devel] applied: " Dietmar Maurer
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.