feat: improve control panel operation

noviga · Mar 21, 2024 · d11a742 · d11a742
1 parent aea4d1d
commit d11a742
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 27 deletions.
diff --git a/examples/hello_world.rs b/examples/hello_world.rs
@@ -1,4 +1,4 @@
-use leptos::{ev::keydown, html::Div, *};
+use leptos::{ev::keydown, *};
 use leptos_use::use_event_listener;
 use lerni::*;
 
@@ -23,7 +23,7 @@ pub fn Counter() -> impl IntoView {
 
     let node_ref = create_node_ref();
     _ = use_event_listener(document().body(), keydown, move |e| {
-        if is_slide_visible(&node_ref) {
+        if is_active_slide(node_ref) {
             if e.key() == "Enter" {
                 set_counter.set(counter.get() + 1);
             } else if e.key() == "Escape" && counter.get() > 0 {
@@ -32,31 +32,19 @@ pub fn Counter() -> impl IntoView {
         }
     });
 
-    let on_click = move |_| {
-        let panel_item_refs: Option<Vec<NodeRef<Div>>> = use_context();
-        if let Some(panel_item_refs) = panel_item_refs {
-            let slide_number = slide_number(&node_ref);
-            if let Some(n) = slide_number {
-                let panel_item_ref = panel_item_refs.get(n);
-                if let Some(panel_item_ref) = panel_item_ref {
-                    if let Some(e) = panel_item_ref.get() {
-                        _ = e.inner_html("<label class=\"label is-large\">Counter: 0</label>");
-                    }
-                }
-            }
+    create_effect(move |_| {
+        if let Some(el) = node_ref.get() {
+            let panel_item =
+                view! { <label class="label is-large">"Counter: " {move || counter.get()}</label> };
+            _ = el.on_mount(move |_| mount_on_panel(node_ref, panel_item));
         }
-    };
+    });
 
     view! {
         <Slide node_ref=node_ref>
-            <Column rows=2>
-                <Label>
-                    "Counter (press 'Enter' and 'Escape' to change): " {move || counter.get()}
-                </Label>
-                <Button on_click=on_click>
-                    "Push Me"
-                </Button>
-            </Column>
+            <Label>
+                "Counter (press 'Enter' and 'Escape' to change): " {move || counter.get()}
+            </Label>
         </Slide>
     }
 }

diff --git a/src/utils.rs b/src/utils.rs
@@ -70,8 +70,8 @@ pub mod keys {
     pub const DIGIT_9: u32 = 57;
 }
 
-/// Check whether a slide is visible.
-pub fn is_slide_visible(node_ref: &NodeRef<Div>) -> bool {
+/// Check whether a slide is active.
+pub fn is_active_slide(node_ref: NodeRef<Div>) -> bool {
     if let Some(node) = node_ref.get() {
         if let Some(parent) = node.parent_element() {
             return parent.get_attribute("hidden").is_none();
@@ -82,12 +82,26 @@ pub fn is_slide_visible(node_ref: &NodeRef<Div>) -> bool {
 }
 
 /// Check whether a slide is visible.
-pub fn slide_number(node_ref: &NodeRef<Div>) -> Option<usize> {
-    if let Some(node) = node_ref.get() {
+pub fn slide_number(node_ref: NodeRef<Div>) -> Option<usize> {
+    if let Some(node) = node_ref.get_untracked() {
         if let Some(parent) = node.parent_element() {
             return parent.get_attribute("number").and_then(|n| n.parse().ok());
         }
     }
 
     None
 }
+
+/// Mount a child view on a panel.
+pub fn mount_on_panel(node_ref: NodeRef<Div>, item: impl IntoView) {
+    let panel_item_refs: Option<Vec<NodeRef<Div>>> = use_context();
+    if let Some(panel_item_refs) = panel_item_refs {
+        if let Some(n) = slide_number(node_ref) {
+            if let Some(panel_item_ref) = panel_item_refs.get(n) {
+                if let Some(el) = panel_item_ref.get_untracked() {
+                    _ = el.child(item);
+                }
+            }
+        }
+    }
+}