reading

site/src/main.rs

@@ -6,8 +6,9 @@ use data::{
 };
 use leptos::ev::KeyboardEvent;
 use leptos::prelude::*;
+use leptos::wasm_bindgen::JsCast;
 use wasm_bindgen_futures::{spawn_local, JsFuture};
-use web_sys::HtmlInputElement;
+use web_sys::{Element, HtmlInputElement};
 
 #[derive(Clone, Copy, PartialEq, Eq)]
 enum AudioState {
@@ -32,6 +33,8 @@ fn App() -> impl IntoView {
     let selected_id = RwSignal::new(None::<&'static str>);
     let query = RwSignal::new(String::new());
     let audio_ref = NodeRef::<leptos::html::Audio>::new();
+    let rules_panel_ref = NodeRef::<leptos::html::Section>::new();
+    let reading_card_ref = NodeRef::<leptos::html::Section>::new();
     let audio_state = RwSignal::new(AudioState::Ready);
 
     let select_word = move |id: &'static str| {
@@ -94,25 +97,49 @@ fn App() -> impl IntoView {
                             </div>
                         }.into_any())}
                     </section>
-                    <section class="rules-panel" aria-labelledby="rules-heading">
+                    <section node_ref=rules_panel_ref class="rules-panel" aria-labelledby="rules-heading">
                         <div class="rules-heading">
                             <p class="section-number">"02"</p>
                             <div>
                                 <h2 id="rules-heading">"Правила чтения"</h2>
                                 <p>"Полный справочник урока: правила, исключения и алгоритм."</p>
                             </div>
+                            <button
+                                class="fullscreen-button"
+                                type="button"
+                                title="Открыть правила чтения на весь экран"
+                                aria-label="Открыть правила чтения на весь экран"
+                                on:click=move |_| {
+                                    if let Some(panel) = rules_panel_ref.get() {
+                                        let panel: Element = panel.unchecked_into();
+                                        let _ = panel.request_fullscreen();
+                                    }
+                                }
+                            >"На весь экран"</button>
                         </div>
                         <div class="rules-scroll">{rules_view()}</div>
                     </section>
                 </aside>
 
-                <section class="reading-card" aria-labelledby="reading-heading">
+                <section node_ref=reading_card_ref class="reading-card" aria-labelledby="reading-heading">
                     <div class="section-heading">
                         <p class="section-number">"01"</p>
                         <div>
                             <h2 id="reading-heading">{reading_text.title}</h2>
                             <p>"Каждое слово — отдельная карточка для слуха и произношения."</p>
                         </div>
+                        <button
+                            class="fullscreen-button"
+                            type="button"
+                            title="Открыть текст на весь экран"
+                            aria-label="Открыть текст на весь экран"
+                            on:click=move |_| {
+                                if let Some(panel) = reading_card_ref.get() {
+                                    let panel: Element = panel.unchecked_into();
+                                    let _ = panel.request_fullscreen();
+                                }
+                            }
+                        >"На весь экран"</button>
                         <p class="word-count">{format!("{word_count} слов")}</p>
                     </div>
                     <p class="reading-text">