feat(gioser): deck swipeable + minimize, brand+copyleft en taskbar (vista-web)
Nuevo módulo agnóstico: - `crates/modules/vista/vista-web` — Deck::mount(strip) instala swipe horizontal con snap a la página más cercana, estilo Flutter PageView. goto(idx, smooth) navega programáticamente. on_change(cb) fires tras snap. Drag decision: horizontal si dx > 8px y > 1.3*dy; sino cede al pan-y nativo (scroll vertical del contenido). resize listener ajusta --vista-offset sin animar usando .vista-instant un frame. App rediseñada: - Brand "GioSer" sacado del centro de la chacana → ahora en la taskbar junto al botón home (data-home). brand-dot dorado entre Gio·Ser. El centro de la chacana queda con sol limpio. - Copyleft + sergio@gioser.net a la derecha de la taskbar, abre https://sergio.gioser.net en nueva pestaña (target=_blank rel=noopener). - 4 drawers separados → reemplazados por un único `.deck` con `.deck-strip` vista-web manejado. Las páginas se crean dinámicamente al abrir un elemento por primera vez (`ensure_page_dom`). - Cada página tiene controles minimizar (─) y cerrar (×) arriba a la derecha, con ambience animada por elemento. - Click minimize → active=None, deck scale(0) hacia la cajita del taskbar (origin = bounding rect del taskbar-item). Página queda en memoria, tab sigue en la barra. - Click cajita del taskbar: - Si está activa → minimize (toggle). - Si está minimizada → restore con scale-up desde la cajita. - Click home / brand → minimize all (estilo Show Desktop, no destruye). - Swipe horizontal o click cajita → deck.goto(idx, smooth=true) con snap animado por vista-web. on_swipe sync de taskbar active state. - Cerrar página → remueve del strip + del Vec pages; si era activa, reemplaza por neighbor o hide deck si era la última. CSS: - Eliminado `.brand` fixed center y `.drawer` × 4 individuales. - `.deck` único + `.deck-strip` con `transform: translate3d(--vista-offset)` y transition transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1). - `.deck-strip.vista-dragging` / `.vista-instant` → transition: none. - `.deck-page[data-element]` cada una con su page-ambience animada (aire-drift, fuego-flicker, agua-tide, tierra static). - `.taskbar-brand` Cinzel 1.3rem dorado + .brand-dot. - `.taskbar-credit` con `.copyleft-mark` (© con scaleX(-1) = copyleft visual). - `.taskbar-spacer { flex:1 }` empuja credit a la derecha. - `.taskbar-item.active` glow del color del elemento + border-bottom. - `body.deck-visible` baja opacity del canvas + esconde tips y brand. Workspace verde + 18 tests (geom 6 + palette 4 + physics 3 + pluma-md 5). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
sergio
@@ -12,6 +12,7 @@ crate-type = ["cdylib", "rlib"]
|
||||
[dependencies]
|
||||
gioser-canvas-web = { path = "../../modules/gioser/gioser-canvas-web" }
|
||||
pluma-reader-web = { path = "../../modules/pluma/pluma-reader-web" }
|
||||
vista-web = { path = "../../modules/vista/vista-web" }
|
||||
wasm-bindgen.workspace = true
|
||||
wasm-bindgen-futures.workspace = true
|
||||
js-sys.workspace = true
|
||||
|
||||
@@ -12,10 +12,6 @@
|
||||
<body>
|
||||
<canvas id="gioser-canvas" aria-hidden="true"></canvas>
|
||||
|
||||
<header id="brand" class="brand">
|
||||
<h1 class="brand-title">Gio<span class="brand-dot">·</span>Ser</h1>
|
||||
</header>
|
||||
|
||||
<main id="tips" aria-label="Cuatro elementos">
|
||||
<a id="tip-aire" class="tip tip-aire" href="#aire" data-md="./md/aire.md" aria-label="Aire — Software e IA">
|
||||
<svg viewBox="0 0 48 48" class="tip-glyph" aria-hidden="true">
|
||||
@@ -59,55 +55,14 @@
|
||||
</a>
|
||||
</main>
|
||||
|
||||
<!-- DRAWERS: uno por elemento. Cada uno crece desde la posición del tip
|
||||
clickeado (origin set via CSS vars desde WASM) hasta fullscreen. -->
|
||||
<aside id="drawer-aire" class="drawer drawer-aire" data-element="aire" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Aire">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">aire</span>
|
||||
<h2 class="drawer-title">Aire</h2>
|
||||
<span class="drawer-tag">Software · IA · Aspiración</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-aire-content"></section>
|
||||
</aside>
|
||||
<!-- DECK: contenedor único con strip horizontal. Las páginas se inyectan
|
||||
dinámicamente desde WASM. vista-web maneja swipe + snap. -->
|
||||
<div id="deck" class="deck vista-deck" aria-hidden="true">
|
||||
<div id="deck-strip" class="deck-strip vista-strip" role="region" aria-label="Vistas abiertas"></div>
|
||||
</div>
|
||||
|
||||
<aside id="drawer-fuego" class="drawer drawer-fuego" data-element="fuego" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Fuego">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">fuego</span>
|
||||
<h2 class="drawer-title">Fuego</h2>
|
||||
<span class="drawer-tag">Inspiración</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-fuego-content"></section>
|
||||
</aside>
|
||||
|
||||
<aside id="drawer-tierra" class="drawer drawer-tierra" data-element="tierra" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Tierra">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">tierra</span>
|
||||
<h2 class="drawer-title">Tierra</h2>
|
||||
<span class="drawer-tag">Cuerpo</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-tierra-content"></section>
|
||||
</aside>
|
||||
|
||||
<aside id="drawer-agua" class="drawer drawer-agua" data-element="agua" aria-hidden="true">
|
||||
<button class="drawer-close" data-close-drawer aria-label="Cerrar Agua">×</button>
|
||||
<div class="drawer-ambience" aria-hidden="true"></div>
|
||||
<header class="drawer-head">
|
||||
<span class="drawer-mark">agua</span>
|
||||
<h2 class="drawer-title">Agua</h2>
|
||||
<span class="drawer-tag">Espiritualidad aplicada</span>
|
||||
</header>
|
||||
<section class="drawer-content" id="drawer-agua-content"></section>
|
||||
</aside>
|
||||
|
||||
<!-- TASKBAR estilo Windows: home a la izquierda + cajitas dinámicas
|
||||
de las vistas MD abiertas. Sincronizada por WASM. -->
|
||||
<nav class="taskbar" aria-label="Vistas abiertas">
|
||||
<!-- TASKBAR estilo Windows: home + GioSer + tabs + copyleft -->
|
||||
<nav class="taskbar" aria-label="Barra de vistas">
|
||||
<button class="taskbar-home" data-home aria-label="Volver al home" type="button">
|
||||
<svg viewBox="0 0 24 24" class="taskbar-home-glyph" aria-hidden="true">
|
||||
<path d="M3 12 L12 3 L21 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" stroke-linecap="round"/>
|
||||
@@ -115,8 +70,19 @@
|
||||
<circle cx="12" cy="17" r="0.8" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<a class="taskbar-brand" data-home href="#home" aria-label="GioSer · home">
|
||||
<span>Gio</span><span class="brand-dot">·</span><span>Ser</span>
|
||||
</a>
|
||||
|
||||
<span class="taskbar-divider" aria-hidden="true"></span>
|
||||
<ul class="taskbar-list" id="taskbar-list" role="presentation"></ul>
|
||||
<span class="taskbar-spacer" aria-hidden="true"></span>
|
||||
|
||||
<a class="taskbar-credit" href="https://sergio.gioser.net" target="_blank" rel="noopener noreferrer" aria-label="Copyleft sergio arroba gioser punto net">
|
||||
<span class="copyleft-mark" aria-hidden="true">©</span>
|
||||
<span class="taskbar-credit-text">sergio@gioser.net</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<script type="module">
|
||||
|
||||
+293
-142
@@ -1,22 +1,27 @@
|
||||
//! Entrypoint WASM de la landing GioSer.
|
||||
//!
|
||||
//! Responsabilidades:
|
||||
//! - Montar canvas WebGL2 + listeners de mouse/pointer/resize/keyboard/RAF.
|
||||
//! - Reposicionar los 4 tips DOM cada frame siguiendo el aro de la chacana,
|
||||
//! con clamp para que nunca salgan del viewport ni cubran la taskbar.
|
||||
//! - Inclinar el título "GioSer" central inyectando CSS vars de tilt+roll.
|
||||
//! - Manejar **click/tap dentro del aro** → vibración (impulso al shake spring).
|
||||
//! - Manejar **mouseleave del canvas** → tilt vuelve al frente con rebote.
|
||||
//! - Drawers MD por elemento que crecen desde la posición del botón
|
||||
//! clickeado hasta fullscreen (excepto la taskbar).
|
||||
//! - Taskbar estilo Windows: home a la izquierda + cajitas dinámicas por
|
||||
//! cada vista MD abierta, click cambia el activo.
|
||||
//! Capas:
|
||||
//! - **Canvas WebGL**: chacana animada (gioser-canvas-web).
|
||||
//! - **Tips**: 4 botones DOM en los cardinales, posicionados cada frame.
|
||||
//! - **Deck** (vista-web): contenedor único con páginas swipeable estilo
|
||||
//! Flutter `PageView`. Cada elemento del logo es una página dinámica.
|
||||
//! - **Taskbar**: barra abajo con home + brand "GioSer" + tabs activas +
|
||||
//! copyleft/email a la derecha. Sincronizada por WASM.
|
||||
//!
|
||||
//! Acciones (todas pasan por `AppState`):
|
||||
//! - `open_or_switch` — click en tip o abrir nueva pestaña.
|
||||
//! - `restore_from_tab` — click en cajita de la taskbar.
|
||||
//! - `minimize` — botón ─ de la página o Escape.
|
||||
//! - `close` — botón × de la página, remueve del taskbar.
|
||||
//! - `home` — botón casa o brand, minimiza todo (mantiene tabs).
|
||||
//! - `on_swipe` — callback de vista-web cuando el snap cambia.
|
||||
|
||||
use std::cell::RefCell;
|
||||
use std::rc::Rc;
|
||||
|
||||
use gioser_canvas_web::{tips, Renderer};
|
||||
use pluma_reader_web::Reader;
|
||||
use vista_web::Deck;
|
||||
use wasm_bindgen::prelude::*;
|
||||
use wasm_bindgen::JsCast;
|
||||
use web_sys::{
|
||||
@@ -24,121 +29,175 @@ use web_sys::{
|
||||
PointerEvent, Window,
|
||||
};
|
||||
|
||||
/// Botones se anclan entre la punta de la chacana y el aro grueso.
|
||||
const BUTTON_RADIUS_FACTOR: f32 = 1.32;
|
||||
/// Altura reservada para la taskbar abajo. Sincronizar con CSS `.taskbar { height }`.
|
||||
const TASKBAR_HEIGHT_PX: f32 = 52.0;
|
||||
/// Padding de seguridad alrededor de los botones para que nunca toquen los bordes.
|
||||
const BUTTON_HALF_W_PX: f32 = 90.0;
|
||||
const BUTTON_HALF_H_PX: f32 = 64.0;
|
||||
const VIEWPORT_MARGIN_PX: f32 = 14.0;
|
||||
const ELEMENTS: [&str; 4] = ["aire", "fuego", "tierra", "agua"];
|
||||
|
||||
#[derive(Default)]
|
||||
struct TaskbarState {
|
||||
/// Elementos abiertos (en orden de apertura), aparecen como cajitas.
|
||||
open: Vec<String>,
|
||||
/// Cuál está visible. `None` = home (sin drawer activo).
|
||||
struct DeckState {
|
||||
/// Pestañas abiertas en orden de apertura. Coincide con páginas en el strip.
|
||||
pages: Vec<String>,
|
||||
/// Cuál es la página visible. `None` = deck minimizado (pestañas siguen
|
||||
/// en la taskbar) o sin pestañas.
|
||||
active: Option<String>,
|
||||
}
|
||||
|
||||
struct AppState {
|
||||
document: Document,
|
||||
state: RefCell<TaskbarState>,
|
||||
deck: Deck,
|
||||
state: RefCell<DeckState>,
|
||||
}
|
||||
|
||||
impl AppState {
|
||||
fn open_tab(&self, element: &str, origin_x: f64, origin_y: f64, md_url: &str) {
|
||||
self.set_drawer_origin(element, origin_x, origin_y);
|
||||
{
|
||||
let mut s = self.state.borrow_mut();
|
||||
if !s.open.iter().any(|e| e == element) {
|
||||
s.open.push(element.to_string());
|
||||
}
|
||||
s.active = Some(element.to_string());
|
||||
fn open_or_switch(&self, element: &str, origin_x: f64, origin_y: f64, md_url: &str) {
|
||||
let was_visible = self.state.borrow().active.is_some();
|
||||
let was_in_pages = self.state.borrow().pages.iter().any(|e| e == element);
|
||||
if !was_in_pages {
|
||||
self.ensure_page_dom(element);
|
||||
self.state.borrow_mut().pages.push(element.to_string());
|
||||
}
|
||||
self.sync();
|
||||
self.state.borrow_mut().active = Some(element.to_string());
|
||||
let idx = self
|
||||
.state
|
||||
.borrow()
|
||||
.pages
|
||||
.iter()
|
||||
.position(|e| e == element)
|
||||
.unwrap_or(0);
|
||||
if was_visible {
|
||||
self.deck.goto(idx, true);
|
||||
} else {
|
||||
self.deck.goto(idx, false);
|
||||
self.show_deck(origin_x, origin_y);
|
||||
}
|
||||
self.sync_active_class();
|
||||
self.sync_taskbar();
|
||||
self.load_md_if_empty(element, md_url);
|
||||
}
|
||||
|
||||
fn switch_tab(&self, element: &str, origin_x: f64, origin_y: f64) {
|
||||
self.set_drawer_origin(element, origin_x, origin_y);
|
||||
let mut s = self.state.borrow_mut();
|
||||
if s.open.iter().any(|e| e == element) {
|
||||
s.active = Some(element.to_string());
|
||||
fn restore_from_tab(&self, element: &str, origin_x: f64, origin_y: f64) {
|
||||
let idx_opt = self
|
||||
.state
|
||||
.borrow()
|
||||
.pages
|
||||
.iter()
|
||||
.position(|e| e == element);
|
||||
let Some(idx) = idx_opt else { return };
|
||||
let was_visible = self.state.borrow().active.is_some();
|
||||
self.state.borrow_mut().active = Some(element.to_string());
|
||||
if was_visible {
|
||||
self.deck.goto(idx, true);
|
||||
} else {
|
||||
self.deck.goto(idx, false);
|
||||
self.show_deck(origin_x, origin_y);
|
||||
}
|
||||
drop(s);
|
||||
self.sync();
|
||||
self.sync_active_class();
|
||||
self.sync_taskbar();
|
||||
}
|
||||
|
||||
fn close_tab(&self, element: &str) {
|
||||
let mut s = self.state.borrow_mut();
|
||||
s.open.retain(|e| e != element);
|
||||
if s.active.as_deref() == Some(element) {
|
||||
s.active = s.open.last().cloned();
|
||||
fn minimize(&self, origin_x: f64, origin_y: f64) {
|
||||
self.state.borrow_mut().active = None;
|
||||
self.sync_active_class();
|
||||
self.sync_taskbar();
|
||||
self.hide_deck(origin_x, origin_y);
|
||||
}
|
||||
|
||||
fn close(&self, element: &str, origin_x: f64, origin_y: f64) {
|
||||
let was_active = self.state.borrow().active.as_deref() == Some(element);
|
||||
self.state.borrow_mut().pages.retain(|e| e != element);
|
||||
self.remove_page_dom(element);
|
||||
if was_active {
|
||||
let pages_now: Vec<String> = self.state.borrow().pages.clone();
|
||||
let new_active = pages_now.last().cloned();
|
||||
self.state.borrow_mut().active = new_active.clone();
|
||||
if let Some(new_active) = new_active {
|
||||
let idx = pages_now
|
||||
.iter()
|
||||
.position(|e| e == &new_active)
|
||||
.unwrap_or(0);
|
||||
self.deck.goto(idx, true);
|
||||
} else {
|
||||
self.hide_deck(origin_x, origin_y);
|
||||
}
|
||||
}
|
||||
drop(s);
|
||||
self.sync();
|
||||
self.sync_active_class();
|
||||
self.sync_taskbar();
|
||||
}
|
||||
|
||||
fn home(&self) {
|
||||
let mut s = self.state.borrow_mut();
|
||||
s.open.clear();
|
||||
s.active = None;
|
||||
drop(s);
|
||||
self.sync();
|
||||
// Minimiza el deck sin cerrar las pestañas (estilo "show desktop").
|
||||
let (ox, oy) = self
|
||||
.element_center(".taskbar-home")
|
||||
.unwrap_or((24.0, self.viewport_height() - 26.0));
|
||||
self.minimize(ox, oy);
|
||||
}
|
||||
|
||||
fn active(&self) -> Option<String> {
|
||||
self.state.borrow().active.clone()
|
||||
}
|
||||
|
||||
fn set_drawer_origin(&self, element: &str, x: f64, y: f64) {
|
||||
let id = format!("drawer-{}", element);
|
||||
if let Some(el) = self.document.get_element_by_id(&id) {
|
||||
if let Ok(el) = el.dyn_into::<HtmlElement>() {
|
||||
let _ = el.style().set_property("--origin-x", &format!("{:.1}px", x));
|
||||
let _ = el.style().set_property("--origin-y", &format!("{:.1}px", y));
|
||||
}
|
||||
fn on_swipe(&self, new_index: usize) {
|
||||
let element = self.state.borrow().pages.get(new_index).cloned();
|
||||
if let Some(element) = element {
|
||||
self.state.borrow_mut().active = Some(element);
|
||||
self.sync_active_class();
|
||||
self.sync_taskbar();
|
||||
}
|
||||
}
|
||||
|
||||
fn sync(&self) {
|
||||
let s = self.state.borrow();
|
||||
let body = match self.document.body() {
|
||||
Some(b) => b,
|
||||
None => return,
|
||||
};
|
||||
if s.active.is_some() {
|
||||
let _ = body.class_list().add_1("drawer-active");
|
||||
} else {
|
||||
let _ = body.class_list().remove_1("drawer-active");
|
||||
fn show_deck(&self, x: f64, y: f64) {
|
||||
self.set_deck_origin(x, y);
|
||||
if let Some(deck) = self.deck_el() {
|
||||
let _ = deck.class_list().add_1("open");
|
||||
let _ = deck.set_attribute("aria-hidden", "false");
|
||||
}
|
||||
for &e in &ELEMENTS {
|
||||
let cls = format!("drawer-active-{}", e);
|
||||
if s.active.as_deref() == Some(e) {
|
||||
let _ = body.class_list().add_1(&cls);
|
||||
} else {
|
||||
let _ = body.class_list().remove_1(&cls);
|
||||
}
|
||||
if let Some(body) = self.document.body() {
|
||||
let _ = body.class_list().add_1("deck-visible");
|
||||
}
|
||||
for &e in &ELEMENTS {
|
||||
let id = format!("drawer-{}", e);
|
||||
if let Some(el) = self.document.get_element_by_id(&id) {
|
||||
if let Ok(el) = el.dyn_into::<HtmlElement>() {
|
||||
if s.active.as_deref() == Some(e) {
|
||||
let _ = el.class_list().add_1("open");
|
||||
el.set_attribute("aria-hidden", "false").ok();
|
||||
} else {
|
||||
let _ = el.class_list().remove_1("open");
|
||||
el.set_attribute("aria-hidden", "true").ok();
|
||||
}
|
||||
}
|
||||
|
||||
fn hide_deck(&self, x: f64, y: f64) {
|
||||
self.set_deck_origin(x, y);
|
||||
if let Some(deck) = self.deck_el() {
|
||||
let _ = deck.class_list().remove_1("open");
|
||||
let _ = deck.set_attribute("aria-hidden", "true");
|
||||
}
|
||||
if let Some(body) = self.document.body() {
|
||||
let _ = body.class_list().remove_1("deck-visible");
|
||||
}
|
||||
}
|
||||
|
||||
fn deck_el(&self) -> Option<HtmlElement> {
|
||||
self.document
|
||||
.get_element_by_id("deck")
|
||||
.and_then(|e| e.dyn_into::<HtmlElement>().ok())
|
||||
}
|
||||
|
||||
fn set_deck_origin(&self, x: f64, y: f64) {
|
||||
if let Some(deck) = self.deck_el() {
|
||||
let _ = deck.style().set_property("--origin-x", &format!("{:.1}px", x));
|
||||
let _ = deck.style().set_property("--origin-y", &format!("{:.1}px", y));
|
||||
}
|
||||
}
|
||||
|
||||
fn sync_active_class(&self) {
|
||||
if let Some(body) = self.document.body() {
|
||||
let active = self.state.borrow().active.clone();
|
||||
for &e in &ELEMENTS {
|
||||
let cls = format!("deck-active-{}", e);
|
||||
if active.as_deref() == Some(e) {
|
||||
let _ = body.class_list().add_1(&cls);
|
||||
} else {
|
||||
let _ = body.class_list().remove_1(&cls);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn sync_taskbar(&self) {
|
||||
let s = self.state.borrow();
|
||||
if let Some(list) = self.document.get_element_by_id("taskbar-list") {
|
||||
let mut html = String::new();
|
||||
for e in &s.open {
|
||||
for e in &s.pages {
|
||||
let label = e.to_uppercase();
|
||||
let active = if s.active.as_deref() == Some(e.as_str()) {
|
||||
" active"
|
||||
@@ -154,8 +213,57 @@ impl AppState {
|
||||
}
|
||||
}
|
||||
|
||||
fn ensure_page_dom(&self, element: &str) {
|
||||
let sel = format!(".deck-page[data-element=\"{}\"]", element);
|
||||
if self
|
||||
.document
|
||||
.query_selector(&sel)
|
||||
.ok()
|
||||
.flatten()
|
||||
.is_some()
|
||||
{
|
||||
return;
|
||||
}
|
||||
let Some(strip) = self.document.get_element_by_id("deck-strip") else {
|
||||
return;
|
||||
};
|
||||
let (title, tag) = match element {
|
||||
"aire" => ("Aire", "Software · IA · Aspiración"),
|
||||
"fuego" => ("Fuego", "Inspiración"),
|
||||
"tierra" => ("Tierra", "Cuerpo"),
|
||||
"agua" => ("Agua", "Espiritualidad aplicada"),
|
||||
_ => return,
|
||||
};
|
||||
let html = format!(
|
||||
"<article class=\"deck-page\" data-element=\"{el}\" id=\"deck-page-{el}\">\
|
||||
<div class=\"page-controls\">\
|
||||
<button class=\"page-control-btn page-minimize\" data-minimize=\"{el}\" type=\"button\" aria-label=\"Minimizar {title}\">\
|
||||
<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 19 H19\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"/></svg>\
|
||||
</button>\
|
||||
<button class=\"page-control-btn page-close\" data-close-page=\"{el}\" type=\"button\" aria-label=\"Cerrar {title}\">×</button>\
|
||||
</div>\
|
||||
<div class=\"page-ambience\" aria-hidden=\"true\"></div>\
|
||||
<header class=\"page-head\">\
|
||||
<span class=\"page-mark\">{el}</span>\
|
||||
<h2 class=\"page-title\">{title}</h2>\
|
||||
<span class=\"page-tag\">{tag}</span>\
|
||||
</header>\
|
||||
<section class=\"page-content\" id=\"page-{el}-content\"></section>\
|
||||
</article>",
|
||||
el = element, title = title, tag = tag
|
||||
);
|
||||
let _ = strip.insert_adjacent_html("beforeend", &html);
|
||||
}
|
||||
|
||||
fn remove_page_dom(&self, element: &str) {
|
||||
let id = format!("deck-page-{}", element);
|
||||
if let Some(el) = self.document.get_element_by_id(&id) {
|
||||
el.remove();
|
||||
}
|
||||
}
|
||||
|
||||
fn load_md_if_empty(&self, element: &str, md_url: &str) {
|
||||
let content_id = format!("drawer-{}-content", element);
|
||||
let content_id = format!("page-{}-content", element);
|
||||
let Some(content_el) = self.document.get_element_by_id(&content_id) else {
|
||||
return;
|
||||
};
|
||||
@@ -163,9 +271,8 @@ impl AppState {
|
||||
return;
|
||||
};
|
||||
let inner = content.inner_html();
|
||||
// Si ya tiene contenido renderizado (pluma-doc) y no es loader/error, no re-fetch.
|
||||
if inner.contains("pluma-doc") {
|
||||
return;
|
||||
return; // ya hidratado
|
||||
}
|
||||
let reader = Reader::new(content);
|
||||
let element_owned = element.to_string();
|
||||
@@ -176,6 +283,27 @@ impl AppState {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fn element_center(&self, selector: &str) -> Option<(f64, f64)> {
|
||||
let el = self.document.query_selector(selector).ok().flatten()?;
|
||||
let rect = el.get_bounding_client_rect();
|
||||
Some((
|
||||
rect.left() + rect.width() / 2.0,
|
||||
rect.top() + rect.height() / 2.0,
|
||||
))
|
||||
}
|
||||
|
||||
fn taskbar_item_center(&self, element: &str) -> Option<(f64, f64)> {
|
||||
let sel = format!(".taskbar-item[data-task=\"{}\"]", element);
|
||||
self.element_center(&sel)
|
||||
}
|
||||
|
||||
fn viewport_height(&self) -> f64 {
|
||||
web_sys::window()
|
||||
.and_then(|w| w.inner_height().ok())
|
||||
.and_then(|v| v.as_f64())
|
||||
.unwrap_or(720.0)
|
||||
}
|
||||
}
|
||||
|
||||
#[wasm_bindgen(start)]
|
||||
@@ -202,17 +330,33 @@ pub fn boot() -> Result<(), JsValue> {
|
||||
);
|
||||
}
|
||||
|
||||
// Mount vista deck
|
||||
let strip_el: HtmlElement = document
|
||||
.get_element_by_id("deck-strip")
|
||||
.ok_or_else(|| JsValue::from_str("no #deck-strip"))?
|
||||
.dyn_into()?;
|
||||
let deck = Deck::mount(strip_el)?;
|
||||
|
||||
let app = Rc::new(AppState {
|
||||
document: document.clone(),
|
||||
deck: deck.clone(),
|
||||
state: RefCell::default(),
|
||||
});
|
||||
|
||||
// vista on_change → on_swipe del app
|
||||
{
|
||||
let app2 = app.clone();
|
||||
deck.on_change(move |idx| {
|
||||
app2.on_swipe(idx);
|
||||
});
|
||||
}
|
||||
|
||||
install_resize(&window, &canvas, &renderer)?;
|
||||
install_mouse(&document, &canvas, &renderer)?;
|
||||
install_canvas_pointer(&canvas, &renderer)?;
|
||||
install_canvas_leave(&canvas, &renderer)?;
|
||||
install_tip_clicks(&document, &app)?;
|
||||
install_drawer_close_buttons(&document, &app)?;
|
||||
install_deck_delegation(&document, &app)?;
|
||||
install_taskbar(&document, &app)?;
|
||||
install_keyboard(&document, &app)?;
|
||||
install_raf(&window, &document, &canvas, &renderer);
|
||||
@@ -261,7 +405,6 @@ fn install_mouse(
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Pointer down dentro del aro → impulso de vibración (click/tap shake).
|
||||
fn install_canvas_pointer(
|
||||
canvas: &HtmlCanvasElement,
|
||||
renderer: &Rc<RefCell<Renderer>>,
|
||||
@@ -286,7 +429,6 @@ fn install_canvas_pointer(
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Mouse sale del canvas → tilt vuelve al frente con rebote del spring.
|
||||
fn install_canvas_leave(
|
||||
canvas: &HtmlCanvasElement,
|
||||
renderer: &Rc<RefCell<Renderer>>,
|
||||
@@ -319,7 +461,7 @@ fn install_tip_clicks(document: &Document, app: &Rc<AppState>) -> Result<(), JsV
|
||||
let rect = el_for_rect.get_bounding_client_rect();
|
||||
let cx = rect.left() + rect.width() / 2.0;
|
||||
let cy = rect.top() + rect.height() / 2.0;
|
||||
app2.open_tab(&element, cx, cy, &md_url);
|
||||
app2.open_or_switch(&element, cx, cy, &md_url);
|
||||
});
|
||||
el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
@@ -327,36 +469,56 @@ fn install_tip_clicks(document: &Document, app: &Rc<AppState>) -> Result<(), JsV
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn install_drawer_close_buttons(
|
||||
document: &Document,
|
||||
app: &Rc<AppState>,
|
||||
) -> Result<(), JsValue> {
|
||||
let closes = document.query_selector_all("[data-close-drawer]")?;
|
||||
for i in 0..closes.length() {
|
||||
let Some(node) = closes.item(i) else { continue };
|
||||
let Ok(el) = node.dyn_into::<HtmlElement>() else {
|
||||
continue;
|
||||
/// Un listener en el deck delega clicks de minimize y close en cada página.
|
||||
/// Las páginas se crean dinámicamente, así que no podemos adjuntar listeners
|
||||
/// por botón en boot.
|
||||
fn install_deck_delegation(document: &Document, app: &Rc<AppState>) -> Result<(), JsValue> {
|
||||
let Some(deck_el) = document.get_element_by_id("deck") else {
|
||||
return Ok(());
|
||||
};
|
||||
let app2 = app.clone();
|
||||
let cb = Closure::<dyn FnMut(MouseEvent)>::new(move |e: MouseEvent| {
|
||||
let Some(target) = e.target() else { return };
|
||||
let Ok(target_el): Result<Element, _> = target.dyn_into() else {
|
||||
return;
|
||||
};
|
||||
let el_ref: &Element = el.as_ref();
|
||||
let element_attr = el_ref
|
||||
.closest(".drawer")
|
||||
.ok()
|
||||
.flatten()
|
||||
.and_then(|d| d.get_attribute("data-element"))
|
||||
.unwrap_or_default();
|
||||
let app2 = app.clone();
|
||||
let cb = Closure::<dyn FnMut(Event)>::new(move |e: Event| {
|
||||
// Minimize
|
||||
if let Ok(Some(btn)) = target_el.closest("[data-minimize]") {
|
||||
e.stop_propagation();
|
||||
app2.close_tab(&element_attr);
|
||||
});
|
||||
el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
}
|
||||
let element = btn.get_attribute("data-minimize").unwrap_or_default();
|
||||
// Origin = la cajita correspondiente en la taskbar (efecto
|
||||
// visual: la página se "encoge" hacia su entrada del taskbar).
|
||||
let origin = app2
|
||||
.taskbar_item_center(&element)
|
||||
.unwrap_or_else(|| center_of_element(&btn));
|
||||
app2.minimize(origin.0, origin.1);
|
||||
return;
|
||||
}
|
||||
// Close
|
||||
if let Ok(Some(btn)) = target_el.closest("[data-close-page]") {
|
||||
e.stop_propagation();
|
||||
let element = btn.get_attribute("data-close-page").unwrap_or_default();
|
||||
let origin = app2
|
||||
.taskbar_item_center(&element)
|
||||
.unwrap_or_else(|| center_of_element(&btn));
|
||||
app2.close(&element, origin.0, origin.1);
|
||||
}
|
||||
});
|
||||
deck_el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn center_of_element(el: &Element) -> (f64, f64) {
|
||||
let rect = el.get_bounding_client_rect();
|
||||
(
|
||||
rect.left() + rect.width() / 2.0,
|
||||
rect.top() + rect.height() / 2.0,
|
||||
)
|
||||
}
|
||||
|
||||
fn install_taskbar(document: &Document, app: &Rc<AppState>) -> Result<(), JsValue> {
|
||||
// Botón home
|
||||
// Home button & brand link comparten data-home — minimizan todo.
|
||||
let homes = document.query_selector_all("[data-home]")?;
|
||||
for i in 0..homes.length() {
|
||||
let Some(node) = homes.item(i) else { continue };
|
||||
@@ -364,13 +526,15 @@ fn install_taskbar(document: &Document, app: &Rc<AppState>) -> Result<(), JsValu
|
||||
continue;
|
||||
};
|
||||
let app2 = app.clone();
|
||||
let cb = Closure::<dyn FnMut(Event)>::new(move |_e: Event| {
|
||||
let cb = Closure::<dyn FnMut(Event)>::new(move |e: Event| {
|
||||
e.prevent_default();
|
||||
app2.home();
|
||||
});
|
||||
el.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
}
|
||||
// Delegación: 1 listener en la lista, dispatch por data-task del closest .taskbar-item.
|
||||
|
||||
// Delegación en la lista de tabs.
|
||||
if let Some(list) = document.get_element_by_id("taskbar-list") {
|
||||
let app2 = app.clone();
|
||||
let cb = Closure::<dyn FnMut(MouseEvent)>::new(move |e: MouseEvent| {
|
||||
@@ -385,7 +549,13 @@ fn install_taskbar(document: &Document, app: &Rc<AppState>) -> Result<(), JsValu
|
||||
let rect = item.get_bounding_client_rect();
|
||||
let cx = rect.left() + rect.width() / 2.0;
|
||||
let cy = rect.top() + rect.height() / 2.0;
|
||||
app2.switch_tab(&task, cx, cy);
|
||||
// Si la pestaña ya está activa, minimiza (toggle estilo Windows).
|
||||
let is_active = app2.state.borrow().active.as_deref() == Some(&task);
|
||||
if is_active {
|
||||
app2.minimize(cx, cy);
|
||||
} else {
|
||||
app2.restore_from_tab(&task, cx, cy);
|
||||
}
|
||||
}
|
||||
});
|
||||
list.add_event_listener_with_callback("click", cb.as_ref().unchecked_ref())?;
|
||||
@@ -398,8 +568,8 @@ fn install_keyboard(document: &Document, app: &Rc<AppState>) -> Result<(), JsVal
|
||||
let app2 = app.clone();
|
||||
let cb = Closure::<dyn FnMut(KeyboardEvent)>::new(move |e: KeyboardEvent| {
|
||||
if e.key() == "Escape" {
|
||||
if let Some(active) = app2.active() {
|
||||
app2.close_tab(&active);
|
||||
if app2.state.borrow().active.is_some() {
|
||||
app2.home();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -424,7 +594,6 @@ fn install_raf(
|
||||
renderer.borrow_mut().render(time_ms);
|
||||
let r = renderer.borrow();
|
||||
position_tips(&document, &canvas, &r);
|
||||
update_tilt_css(&document, &r);
|
||||
drop(r);
|
||||
if let Some(cb) = f.borrow().as_ref() {
|
||||
let _ = window2.request_animation_frame(cb.as_ref().unchecked_ref());
|
||||
@@ -457,7 +626,6 @@ fn position_tips(document: &Document, canvas: &HtmlCanvasElement, renderer: &Ren
|
||||
let clips = renderer.cardinal_positions_ndc(BUTTON_RADIUS_FACTOR);
|
||||
let cw = canvas.client_width().max(1) as f32;
|
||||
let ch = canvas.client_height().max(1) as f32;
|
||||
// Bounds en CSS pixels donde los botones pueden moverse libremente.
|
||||
let min_x = VIEWPORT_MARGIN_PX + BUTTON_HALF_W_PX;
|
||||
let max_x = (cw - VIEWPORT_MARGIN_PX - BUTTON_HALF_W_PX).max(min_x);
|
||||
let min_y = VIEWPORT_MARGIN_PX + BUTTON_HALF_H_PX;
|
||||
@@ -480,23 +648,6 @@ fn position_tips(document: &Document, canvas: &HtmlCanvasElement, renderer: &Ren
|
||||
}
|
||||
}
|
||||
|
||||
fn update_tilt_css(document: &Document, renderer: &Renderer) {
|
||||
let (pitch, yaw, roll) = renderer.tilt_degrees();
|
||||
if let Some(brand) = document.get_element_by_id("brand") {
|
||||
if let Ok(brand) = brand.dyn_into::<HtmlElement>() {
|
||||
let _ = brand
|
||||
.style()
|
||||
.set_property("--tilt-x", &format!("{:.2}deg", pitch));
|
||||
let _ = brand
|
||||
.style()
|
||||
.set_property("--tilt-y", &format!("{:.2}deg", yaw));
|
||||
let _ = brand
|
||||
.style()
|
||||
.set_property("--tilt-z", &format!("{:.2}deg", roll));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn install_panic_hook() {
|
||||
static SET: std::sync::Once = std::sync::Once::new();
|
||||
SET.call_once(|| {
|
||||
|
||||
+195
-152
@@ -11,6 +11,9 @@
|
||||
|
||||
--ease-emerge: cubic-bezier(0.22, 0.61, 0.20, 1);
|
||||
--ease-magma: cubic-bezier(0.32, 0, 0.05, 1);
|
||||
--ease-page: cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
|
||||
--taskbar-height: 52px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -37,52 +40,22 @@ html, body {
|
||||
z-index: 0;
|
||||
transition: opacity 600ms var(--ease-emerge), filter 600ms var(--ease-emerge);
|
||||
}
|
||||
|
||||
/* === Marca central: GioSer sobre la superficie de la chacana === */
|
||||
.brand {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 6;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
transform-style: preserve-3d;
|
||||
/* perspective hace que la rotación del título dé sensación 3D igual que la chacana.
|
||||
rotateZ refleja el shake de click — el título tiembla con la cruz. */
|
||||
transform:
|
||||
translate(-50%, -50%)
|
||||
perspective(900px)
|
||||
rotateX(var(--tilt-x, 0deg))
|
||||
rotateY(var(--tilt-y, 0deg))
|
||||
rotateZ(var(--tilt-z, 0deg));
|
||||
transition: transform 30ms linear;
|
||||
}
|
||||
.brand-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
font-size: clamp(2.6rem, 6vw, 5.4rem);
|
||||
margin: 0;
|
||||
letter-spacing: 0.08em;
|
||||
color: #f4eedf;
|
||||
text-shadow:
|
||||
0 0 22px rgba(216, 168, 93, 0.55),
|
||||
0 0 50px rgba(183, 126, 52, 0.30),
|
||||
0 0 80px rgba(216, 168, 93, 0.15);
|
||||
}
|
||||
.brand-dot {
|
||||
color: var(--gold);
|
||||
margin: 0 0.05em;
|
||||
text-shadow:
|
||||
0 0 14px var(--gold),
|
||||
0 0 32px rgba(245, 144, 86, 0.55);
|
||||
body.deck-visible #gioser-canvas {
|
||||
opacity: 0.30;
|
||||
filter: blur(4px) saturate(80%);
|
||||
}
|
||||
|
||||
/* === Tips (botones cardinales) === */
|
||||
/* === Tips (botones cardinales sobre el aro) === */
|
||||
#tips {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
body.deck-visible #tips {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tip {
|
||||
@@ -116,8 +89,7 @@ html, body {
|
||||
transition:
|
||||
box-shadow 350ms var(--ease-emerge),
|
||||
border-color 350ms var(--ease-emerge),
|
||||
background 350ms var(--ease-emerge),
|
||||
opacity 300ms ease;
|
||||
background 350ms var(--ease-emerge);
|
||||
}
|
||||
.tip::before {
|
||||
content: "";
|
||||
@@ -172,96 +144,112 @@ html, body {
|
||||
.tip-agua { color: var(--agua); }
|
||||
.tip-tierra { color: var(--tierra); }
|
||||
|
||||
/* Cuando un drawer está abierto, los tips se ocultan suavemente. */
|
||||
body.drawer-active .tip {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
body.drawer-active #gioser-canvas {
|
||||
opacity: 0.35;
|
||||
filter: blur(4px) saturate(80%);
|
||||
}
|
||||
body.drawer-active .brand {
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
|
||||
/* === Drawers (visor MD full-screen) === */
|
||||
.drawer {
|
||||
/* === DECK: contenedor único de páginas swipeable === */
|
||||
.deck {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 52px; /* reservamos la altura de la taskbar */
|
||||
bottom: var(--taskbar-height);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
|
||||
transform: scale(0.0);
|
||||
overflow: hidden;
|
||||
touch-action: pan-y;
|
||||
background:
|
||||
radial-gradient(ellipse at center, var(--drawer-glow, rgba(216, 168, 93, 0.15)), transparent 65%),
|
||||
radial-gradient(ellipse at center, var(--deck-glow, rgba(216, 168, 93, 0.15)), transparent 65%),
|
||||
rgba(6, 5, 13, 0.96);
|
||||
backdrop-filter: blur(28px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(140%);
|
||||
transition:
|
||||
transform 700ms var(--ease-magma),
|
||||
transform 600ms var(--ease-magma),
|
||||
opacity 450ms ease,
|
||||
visibility 0s 700ms;
|
||||
overflow: hidden;
|
||||
visibility 0s 600ms;
|
||||
}
|
||||
.drawer.open {
|
||||
.deck.open {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
transition:
|
||||
transform 700ms var(--ease-magma),
|
||||
transform 600ms var(--ease-magma),
|
||||
opacity 450ms ease,
|
||||
visibility 0s;
|
||||
}
|
||||
/* Acento del deck según elemento activo: glow radial del color. */
|
||||
body.deck-active-aire .deck { --deck-glow: rgba(208, 219, 255, 0.22); }
|
||||
body.deck-active-fuego .deck { --deck-glow: rgba(245, 144, 86, 0.28); }
|
||||
body.deck-active-agua .deck { --deck-glow: rgba(108, 208, 243, 0.22); }
|
||||
body.deck-active-tierra .deck { --deck-glow: rgba(212, 152, 115, 0.24); }
|
||||
|
||||
.drawer-aire { --drawer-glow: rgba(208, 219, 255, 0.22); --drawer-accent: var(--aire); }
|
||||
.drawer-fuego { --drawer-glow: rgba(245, 144, 86, 0.28); --drawer-accent: var(--fuego); }
|
||||
.drawer-agua { --drawer-glow: rgba(108, 208, 243, 0.22); --drawer-accent: var(--agua); }
|
||||
.drawer-tierra { --drawer-glow: rgba(212, 152, 115, 0.24); --drawer-accent: var(--tierra); }
|
||||
/* Strip horizontal con páginas — vista-web traslada esto. */
|
||||
.deck-strip {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translate3d(var(--vista-offset, 0px), 0, 0);
|
||||
transition: transform 360ms var(--ease-page);
|
||||
will-change: transform;
|
||||
}
|
||||
.deck-strip.vista-dragging,
|
||||
.deck-strip.vista-instant {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* Ambience: capa decorativa con efectos según elemento. */
|
||||
.drawer-ambience {
|
||||
.deck-page {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* contenido alineado al pop-snap mismo si la lista de páginas viviera
|
||||
dentro de scroll nativo; con vista-web esto es informativo nomás. */
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.deck-page[data-element="aire"] { --page-accent: var(--aire); }
|
||||
.deck-page[data-element="fuego"] { --page-accent: var(--fuego); }
|
||||
.deck-page[data-element="agua"] { --page-accent: var(--agua); }
|
||||
.deck-page[data-element="tierra"] { --page-accent: var(--tierra); }
|
||||
|
||||
/* Ambience por página */
|
||||
.page-ambience {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.drawer-aire .drawer-ambience {
|
||||
.deck-page[data-element="aire"] .page-ambience {
|
||||
background:
|
||||
radial-gradient(circle at 18% 22%, rgba(208, 219, 255, 0.20), transparent 38%),
|
||||
radial-gradient(circle at 78% 68%, rgba(208, 219, 255, 0.14), transparent 40%),
|
||||
radial-gradient(circle at 45% 90%, rgba(180, 200, 255, 0.10), transparent 45%);
|
||||
animation: aire-drift 28s ease-in-out infinite alternate;
|
||||
}
|
||||
.drawer-fuego .drawer-ambience {
|
||||
.deck-page[data-element="fuego"] .page-ambience {
|
||||
background:
|
||||
radial-gradient(circle at 50% 100%, rgba(245, 144, 86, 0.35), transparent 55%),
|
||||
radial-gradient(circle at 25% 80%, rgba(255, 90, 40, 0.18), transparent 35%),
|
||||
radial-gradient(circle at 80% 85%, rgba(255, 140, 60, 0.18), transparent 35%);
|
||||
animation: fuego-flicker 5s ease-in-out infinite;
|
||||
}
|
||||
.drawer-agua .drawer-ambience {
|
||||
.deck-page[data-element="agua"] .page-ambience {
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 95%, rgba(60, 160, 230, 0.30), transparent 60%),
|
||||
radial-gradient(ellipse at 20% 70%, rgba(108, 208, 243, 0.15), transparent 50%),
|
||||
radial-gradient(ellipse at 80% 75%, rgba(108, 208, 243, 0.12), transparent 50%);
|
||||
animation: agua-tide 14s ease-in-out infinite alternate;
|
||||
}
|
||||
.drawer-tierra .drawer-ambience {
|
||||
.deck-page[data-element="tierra"] .page-ambience {
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 100%, rgba(120, 80, 40, 0.40), transparent 60%),
|
||||
radial-gradient(ellipse at 22% 88%, rgba(180, 130, 80, 0.20), transparent 45%),
|
||||
radial-gradient(ellipse at 78% 88%, rgba(150, 100, 60, 0.22), transparent 45%);
|
||||
}
|
||||
|
||||
@keyframes aire-drift {
|
||||
from { transform: translate(-4%, -1%); }
|
||||
to { transform: translate(4%, 2%); }
|
||||
@@ -276,15 +264,56 @@ body.drawer-active .brand {
|
||||
to { transform: translateY(-3%); }
|
||||
}
|
||||
|
||||
/* === Drawer head + close === */
|
||||
.drawer-head {
|
||||
/* Head + controls */
|
||||
.page-controls {
|
||||
position: absolute;
|
||||
top: 1.8vh;
|
||||
right: 1.8vw;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.page-control-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
color: var(--page-accent, var(--gold));
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
transition:
|
||||
background 200ms ease,
|
||||
border-color 200ms ease,
|
||||
transform 250ms var(--ease-emerge);
|
||||
}
|
||||
.page-control-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border-color: currentColor;
|
||||
}
|
||||
.page-minimize svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.page-close {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.page-close:hover { transform: rotate(90deg); }
|
||||
|
||||
.page-head {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 7vh 8vw 2vh;
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent, var(--gold));
|
||||
}
|
||||
.drawer-mark {
|
||||
.page-mark {
|
||||
display: inline-block;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.7rem;
|
||||
@@ -294,16 +323,16 @@ body.drawer-active .brand {
|
||||
margin-bottom: 0.4rem;
|
||||
text-indent: 0.55em;
|
||||
}
|
||||
.drawer-title {
|
||||
.page-title {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
font-size: clamp(2.4rem, 6vw, 4.6rem);
|
||||
margin: 0;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent, var(--gold));
|
||||
text-shadow: 0 0 28px currentColor, 0 0 56px rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
.drawer-tag {
|
||||
.page-tag {
|
||||
display: block;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.78rem;
|
||||
@@ -313,54 +342,18 @@ body.drawer-active .brand {
|
||||
margin-top: 0.7rem;
|
||||
text-indent: 0.32em;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
position: absolute;
|
||||
top: 2.4vh;
|
||||
right: 2.4vw;
|
||||
z-index: 5;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: var(--drawer-accent);
|
||||
font-size: 1.6rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 200ms ease, transform 250ms var(--ease-emerge), border-color 200ms ease;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
.drawer-close:hover {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border-color: currentColor;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* === Drawer content (MD render via pluma-reader-web) === */
|
||||
.drawer-content {
|
||||
.page-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-height: calc(100vh - 22vh);
|
||||
overflow-y: auto;
|
||||
padding: 1vh 10vw 8vh;
|
||||
opacity: 0;
|
||||
transition: opacity 500ms ease 250ms;
|
||||
transition: opacity 400ms ease 250ms;
|
||||
}
|
||||
.drawer.open .drawer-content {
|
||||
.deck.open .deck-page .page-content {
|
||||
opacity: 1;
|
||||
}
|
||||
.drawer-content::-webkit-scrollbar { width: 6px; }
|
||||
.drawer-content::-webkit-scrollbar-thumb {
|
||||
background: var(--drawer-accent);
|
||||
border-radius: 3px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* === pluma-doc: estilos del visor MD === */
|
||||
/* === pluma-doc dentro de la página === */
|
||||
.pluma-doc {
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
@@ -375,7 +368,7 @@ body.drawer-active .brand {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent);
|
||||
text-shadow: 0 0 18px currentColor;
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 1.4em;
|
||||
@@ -384,7 +377,7 @@ body.drawer-active .brand {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.5rem;
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent);
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 1.6em;
|
||||
padding-bottom: 0.3em;
|
||||
@@ -400,7 +393,7 @@ body.drawer-active .brand {
|
||||
}
|
||||
.pluma-doc p { margin: 0; }
|
||||
.pluma-doc a {
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent);
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid currentColor;
|
||||
transition: opacity 200ms ease;
|
||||
@@ -414,12 +407,12 @@ body.drawer-active .brand {
|
||||
padding: 0.12em 0.45em;
|
||||
border-radius: 4px;
|
||||
font-size: 0.92em;
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent);
|
||||
}
|
||||
.pluma-doc pre {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-left: 3px solid var(--drawer-accent);
|
||||
border-left: 3px solid var(--page-accent);
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.2rem;
|
||||
overflow-x: auto;
|
||||
@@ -431,7 +424,7 @@ body.drawer-active .brand {
|
||||
padding: 0;
|
||||
}
|
||||
.pluma-doc blockquote {
|
||||
border-left: 3px solid var(--drawer-accent);
|
||||
border-left: 3px solid var(--page-accent);
|
||||
padding: 0.4em 1.2em;
|
||||
color: rgba(232, 234, 245, 0.75);
|
||||
font-style: italic;
|
||||
@@ -440,11 +433,11 @@ body.drawer-active .brand {
|
||||
}
|
||||
.pluma-doc ul, .pluma-doc ol { padding-left: 1.6em; }
|
||||
.pluma-doc li { margin: 0.4em 0; }
|
||||
.pluma-doc li::marker { color: var(--drawer-accent); }
|
||||
.pluma-doc li::marker { color: var(--page-accent); }
|
||||
.pluma-doc hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, transparent, var(--drawer-accent), transparent);
|
||||
background: linear-gradient(to right, transparent, var(--page-accent), transparent);
|
||||
margin: 2em 0;
|
||||
}
|
||||
.pluma-doc table {
|
||||
@@ -458,11 +451,10 @@ body.drawer-active .brand {
|
||||
text-align: left;
|
||||
}
|
||||
.pluma-doc th {
|
||||
color: var(--drawer-accent);
|
||||
color: var(--page-accent);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.pluma-loading, .pluma-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -478,34 +470,27 @@ body.drawer-active .brand {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-right: 1rem;
|
||||
border: 1px solid var(--drawer-accent);
|
||||
border: 1px solid var(--page-accent);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: pluma-spin 1s linear infinite;
|
||||
}
|
||||
.pluma-error {
|
||||
color: var(--fuego);
|
||||
font-style: italic;
|
||||
}
|
||||
@keyframes pluma-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.pluma-error { color: var(--fuego); font-style: italic; }
|
||||
@keyframes pluma-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* === Responsive === */
|
||||
/* === Taskbar estilo Windows === */
|
||||
.taskbar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 52px;
|
||||
height: var(--taskbar-height);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0 0.7rem;
|
||||
background:
|
||||
linear-gradient(to top, rgba(6, 5, 13, 0.92), rgba(8, 6, 22, 0.78));
|
||||
gap: 0.5rem;
|
||||
padding: 0 0.8rem;
|
||||
background: linear-gradient(to top, rgba(6, 5, 13, 0.94), rgba(8, 6, 22, 0.80));
|
||||
backdrop-filter: blur(24px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(140%);
|
||||
border-top: 1px solid rgba(216, 168, 93, 0.22);
|
||||
@@ -538,12 +523,34 @@ body.drawer-active .brand {
|
||||
filter: drop-shadow(0 0 6px currentColor);
|
||||
}
|
||||
|
||||
.taskbar-brand {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-weight: 700;
|
||||
font-size: 1.30rem;
|
||||
letter-spacing: 0.07em;
|
||||
color: #f4eedf;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 0 14px rgba(216, 168, 93, 0.45);
|
||||
padding: 0 0.55rem;
|
||||
user-select: none;
|
||||
transition: text-shadow 220ms ease, color 220ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.taskbar-brand:hover {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 20px rgba(216, 168, 93, 0.7), 0 0 36px rgba(245, 144, 86, 0.30);
|
||||
}
|
||||
.taskbar-brand .brand-dot {
|
||||
color: var(--gold);
|
||||
margin: 0 0.05em;
|
||||
}
|
||||
|
||||
.taskbar-divider {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 26px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
margin: 0 0.2rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.taskbar-list {
|
||||
@@ -575,6 +582,7 @@ body.drawer-active .brand {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 260ms var(--ease-emerge);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.taskbar-item:hover {
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
@@ -600,16 +608,51 @@ body.drawer-active .brand {
|
||||
.taskbar-item[data-task="tierra"] { --task-color: var(--tierra); }
|
||||
.taskbar-item[data-task="agua"] { --task-color: var(--agua); }
|
||||
|
||||
.taskbar-spacer {
|
||||
flex: 1;
|
||||
min-width: 0.6rem;
|
||||
}
|
||||
|
||||
.taskbar-credit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.04em;
|
||||
color: rgba(216, 168, 93, 0.75);
|
||||
text-decoration: none;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
transition: all 220ms var(--ease-emerge);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.taskbar-credit:hover {
|
||||
color: var(--gold);
|
||||
border-color: rgba(216, 168, 93, 0.25);
|
||||
background: rgba(216, 168, 93, 0.06);
|
||||
}
|
||||
.copyleft-mark {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
/* © con escala horizontal -1 = copyleft visual. */
|
||||
transform: scaleX(-1);
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.tip { min-width: 110px; padding: 0.7rem 0.9rem; }
|
||||
.tip-glyph { width: 36px; height: 36px; }
|
||||
.tip-label { font-size: 0.72rem; }
|
||||
.tip-sub { display: none; }
|
||||
.brand-title { font-size: clamp(2rem, 10vw, 3rem); }
|
||||
.drawer-head { padding: 5vh 5vw 1vh; }
|
||||
.drawer-content { padding: 0 5vw 5vh; }
|
||||
.page-head { padding: 5vh 5vw 1vh; }
|
||||
.page-content { padding: 0 5vw 5vh; }
|
||||
.taskbar { height: 46px; padding: 0 0.4rem; gap: 0.3rem; }
|
||||
.taskbar-home { width: 36px; height: 36px; }
|
||||
.taskbar-item { height: 34px; padding: 0 0.7rem; font-size: 0.65rem; }
|
||||
.drawer { bottom: 46px; }
|
||||
.taskbar-brand { font-size: 1.05rem; padding: 0 0.3rem; }
|
||||
.taskbar-credit-text { display: none; }
|
||||
.deck { bottom: 46px; }
|
||||
:root { --taskbar-height: 46px; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
[package]
|
||||
name = "vista-web"
|
||||
version.workspace = true
|
||||
edition.workspace = true
|
||||
license.workspace = true
|
||||
authors.workspace = true
|
||||
publish.workspace = true
|
||||
|
||||
[dependencies]
|
||||
wasm-bindgen.workspace = true
|
||||
js-sys.workspace = true
|
||||
|
||||
[dependencies.web-sys]
|
||||
workspace = true
|
||||
features = [
|
||||
"Window",
|
||||
"Document",
|
||||
"Element",
|
||||
"HtmlElement",
|
||||
"CssStyleDeclaration",
|
||||
"DomTokenList",
|
||||
"Event",
|
||||
"EventTarget",
|
||||
"PointerEvent",
|
||||
"MouseEvent",
|
||||
]
|
||||
@@ -0,0 +1,282 @@
|
||||
//! Vista — deck horizontal de páginas con swipe estilo Flutter `PageView`.
|
||||
//!
|
||||
//! Agnóstico del dominio: opera sobre un elemento DOM "strip" cuyos hijos
|
||||
//! son las páginas. Cada hijo debe tener `flex: 0 0 100%` o equivalente
|
||||
//! para que el deck pueda calcular el offset correcto.
|
||||
//!
|
||||
//! Comportamiento:
|
||||
//! - Drag horizontal (mouse o touch) → strip se traslada con el dedo.
|
||||
//! - Release → snap a la página más cercana, animación CSS.
|
||||
//! - `goto(idx)` → scrolla programáticamente (click en tabs externos).
|
||||
//! - Diferencia entre gesto vertical y horizontal: si el primer movimiento
|
||||
//! es vertical, cede al native scroll del contenido (cada página puede
|
||||
//! tener su propio overflow-y).
|
||||
//!
|
||||
//! No inyecta CSS — el caller provee:
|
||||
//! ```css
|
||||
//! .vista-deck { overflow: hidden; touch-action: pan-y; }
|
||||
//! .vista-strip {
|
||||
//! display: flex;
|
||||
//! width: 100%;
|
||||
//! height: 100%;
|
||||
//! transform: translate3d(var(--vista-offset, 0px), 0, 0);
|
||||
//! transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
|
||||
//! }
|
||||
//! .vista-strip.vista-dragging,
|
||||
//! .vista-strip.vista-instant { transition: none; }
|
||||
//! .vista-page { flex: 0 0 100%; height: 100%; overflow-y: auto; }
|
||||
//! ```
|
||||
|
||||
use std::cell::RefCell;
|
||||
use std::rc::Rc;
|
||||
|
||||
use wasm_bindgen::prelude::*;
|
||||
use wasm_bindgen::JsCast;
|
||||
use web_sys::{Event, HtmlElement, PointerEvent};
|
||||
|
||||
/// Umbral en pixels para confirmar gesto horizontal vs vertical.
|
||||
const DRAG_DECISION_PX: f64 = 8.0;
|
||||
/// Cuán más horizontal que vertical debe ser el delta para considerarse "swipe".
|
||||
const HORIZONTAL_BIAS: f64 = 1.3;
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct Deck {
|
||||
strip: HtmlElement,
|
||||
inner: Rc<RefCell<Inner>>,
|
||||
}
|
||||
|
||||
struct Inner {
|
||||
current_index: usize,
|
||||
pointer_start: Option<(f64, f64, i32)>, // (x, y, pointer_id)
|
||||
drag_active: bool,
|
||||
drag_start_offset: f64,
|
||||
on_change: Option<Box<dyn FnMut(usize)>>,
|
||||
}
|
||||
|
||||
impl Deck {
|
||||
/// Monta el deck sobre el `strip`. El strip debe tener
|
||||
/// `display: flex; transform: translate3d(var(--vista-offset, 0px), ...);`
|
||||
/// y children con `flex: 0 0 100%`.
|
||||
pub fn mount(strip: HtmlElement) -> Result<Self, JsValue> {
|
||||
let inner = Rc::new(RefCell::new(Inner {
|
||||
current_index: 0,
|
||||
pointer_start: None,
|
||||
drag_active: false,
|
||||
drag_start_offset: 0.0,
|
||||
on_change: None,
|
||||
}));
|
||||
|
||||
install_pointerdown(&strip, &inner)?;
|
||||
install_pointermove(&strip, &inner)?;
|
||||
install_pointerend(&strip, &inner, "pointerup")?;
|
||||
install_pointerend(&strip, &inner, "pointercancel")?;
|
||||
install_pointerend(&strip, &inner, "pointerleave")?;
|
||||
install_resize(&strip, &inner)?;
|
||||
|
||||
Ok(Self { strip, inner })
|
||||
}
|
||||
|
||||
/// Navega a la página por índice. Con `smooth=false` se aplica
|
||||
/// `.vista-instant` un frame para saltar sin transición.
|
||||
pub fn goto(&self, index: usize, smooth: bool) {
|
||||
let width = self.strip.client_width() as f64;
|
||||
let offset = -(index as f64) * width;
|
||||
if !smooth {
|
||||
let _ = self.strip.class_list().add_1("vista-instant");
|
||||
}
|
||||
let _ = self
|
||||
.strip
|
||||
.style()
|
||||
.set_property("--vista-offset", &format!("{}px", offset));
|
||||
if !smooth {
|
||||
// Quitamos `vista-instant` en el siguiente frame para restaurar la
|
||||
// transición ordinaria.
|
||||
let strip = self.strip.clone();
|
||||
let cb = Closure::once(Box::new(move || {
|
||||
let _ = strip.class_list().remove_1("vista-instant");
|
||||
}) as Box<dyn FnOnce()>);
|
||||
if let Some(w) = web_sys::window() {
|
||||
let _ = w.request_animation_frame(cb.as_ref().unchecked_ref());
|
||||
}
|
||||
cb.forget();
|
||||
}
|
||||
let mut i = self.inner.borrow_mut();
|
||||
let changed = i.current_index != index;
|
||||
i.current_index = index;
|
||||
if changed {
|
||||
if let Some(cb) = i.on_change.as_mut() {
|
||||
cb(index);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Índice de página actualmente visible.
|
||||
pub fn current_index(&self) -> usize {
|
||||
self.inner.borrow().current_index
|
||||
}
|
||||
|
||||
/// Cantidad de páginas hijas del strip (live: lee el DOM).
|
||||
pub fn page_count(&self) -> u32 {
|
||||
self.strip.child_element_count()
|
||||
}
|
||||
|
||||
/// Registra (o reemplaza) el callback de cambio de página. Se dispara
|
||||
/// tras el snap de un swipe, o tras un `goto()` que cambie de índice.
|
||||
pub fn on_change<F: FnMut(usize) + 'static>(&self, cb: F) {
|
||||
self.inner.borrow_mut().on_change = Some(Box::new(cb));
|
||||
}
|
||||
|
||||
pub fn strip(&self) -> &HtmlElement {
|
||||
&self.strip
|
||||
}
|
||||
}
|
||||
|
||||
fn install_pointerdown(
|
||||
strip: &HtmlElement,
|
||||
inner: &Rc<RefCell<Inner>>,
|
||||
) -> Result<(), JsValue> {
|
||||
let strip2 = strip.clone();
|
||||
let inner2 = inner.clone();
|
||||
let cb = Closure::<dyn FnMut(PointerEvent)>::new(move |e: PointerEvent| {
|
||||
let mut i = inner2.borrow_mut();
|
||||
let width = strip2.client_width() as f64;
|
||||
i.pointer_start = Some((
|
||||
e.client_x() as f64,
|
||||
e.client_y() as f64,
|
||||
e.pointer_id(),
|
||||
));
|
||||
i.drag_active = false;
|
||||
i.drag_start_offset = -(i.current_index as f64) * width;
|
||||
});
|
||||
strip.add_event_listener_with_callback("pointerdown", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn install_pointermove(
|
||||
strip: &HtmlElement,
|
||||
inner: &Rc<RefCell<Inner>>,
|
||||
) -> Result<(), JsValue> {
|
||||
let strip2 = strip.clone();
|
||||
let inner2 = inner.clone();
|
||||
let cb = Closure::<dyn FnMut(PointerEvent)>::new(move |e: PointerEvent| {
|
||||
let mut i = inner2.borrow_mut();
|
||||
let Some((sx, sy, pid)) = i.pointer_start else {
|
||||
return;
|
||||
};
|
||||
let dx = e.client_x() as f64 - sx;
|
||||
let dy = e.client_y() as f64 - sy;
|
||||
if !i.drag_active {
|
||||
let abs_dx = dx.abs();
|
||||
let abs_dy = dy.abs();
|
||||
if abs_dx > DRAG_DECISION_PX && abs_dx > abs_dy * HORIZONTAL_BIAS {
|
||||
// Empieza drag horizontal.
|
||||
i.drag_active = true;
|
||||
let _ = strip2.class_list().add_1("vista-dragging");
|
||||
// Capturar pointer para que los `move` sigan llegando aunque
|
||||
// el cursor se vaya del strip.
|
||||
let _ = strip2.set_pointer_capture(pid);
|
||||
} else if abs_dy > DRAG_DECISION_PX {
|
||||
// Movimiento vertical predominante — cancelar este drag.
|
||||
i.pointer_start = None;
|
||||
return;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if i.drag_active {
|
||||
let offset = i.drag_start_offset + dx;
|
||||
let _ = strip2
|
||||
.style()
|
||||
.set_property("--vista-offset", &format!("{}px", offset));
|
||||
e.prevent_default();
|
||||
}
|
||||
});
|
||||
strip.add_event_listener_with_callback("pointermove", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn install_pointerend(
|
||||
strip: &HtmlElement,
|
||||
inner: &Rc<RefCell<Inner>>,
|
||||
event_name: &str,
|
||||
) -> Result<(), JsValue> {
|
||||
let strip2 = strip.clone();
|
||||
let inner2 = inner.clone();
|
||||
let cb = Closure::<dyn FnMut(PointerEvent)>::new(move |e: PointerEvent| {
|
||||
let mut i = inner2.borrow_mut();
|
||||
let was_active = i.drag_active;
|
||||
i.drag_active = false;
|
||||
i.pointer_start = None;
|
||||
if !was_active {
|
||||
return;
|
||||
}
|
||||
let _ = strip2.class_list().remove_1("vista-dragging");
|
||||
let _ = strip2.release_pointer_capture(e.pointer_id());
|
||||
let width = strip2.client_width() as f64;
|
||||
let offset = current_offset_px(&strip2);
|
||||
let n_pages = strip2.child_element_count() as usize;
|
||||
if width <= 0.0 || n_pages == 0 {
|
||||
return;
|
||||
}
|
||||
// Snap a la página más cercana (clamp a [0, n-1]).
|
||||
let raw = -offset / width;
|
||||
let target = raw.round().max(0.0) as usize;
|
||||
let target = target.min(n_pages - 1);
|
||||
let snapped_offset = -(target as f64) * width;
|
||||
let _ = strip2
|
||||
.style()
|
||||
.set_property("--vista-offset", &format!("{}px", snapped_offset));
|
||||
let changed = i.current_index != target;
|
||||
i.current_index = target;
|
||||
if changed {
|
||||
if let Some(cb) = i.on_change.as_mut() {
|
||||
cb(target);
|
||||
}
|
||||
}
|
||||
});
|
||||
strip.add_event_listener_with_callback(event_name, cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
fn install_resize(strip: &HtmlElement, inner: &Rc<RefCell<Inner>>) -> Result<(), JsValue> {
|
||||
let Some(window) = web_sys::window() else {
|
||||
return Ok(());
|
||||
};
|
||||
let strip2 = strip.clone();
|
||||
let inner2 = inner.clone();
|
||||
let cb = Closure::<dyn FnMut()>::new(move || {
|
||||
// Reposicionar sin animación para que un resize no cause un slide.
|
||||
let idx = inner2.borrow().current_index;
|
||||
let _ = strip2.class_list().add_1("vista-instant");
|
||||
let width = strip2.client_width() as f64;
|
||||
let offset = -(idx as f64) * width;
|
||||
let _ = strip2
|
||||
.style()
|
||||
.set_property("--vista-offset", &format!("{}px", offset));
|
||||
let strip_for_clear = strip2.clone();
|
||||
let cb2 = Closure::once(Box::new(move || {
|
||||
let _ = strip_for_clear.class_list().remove_1("vista-instant");
|
||||
}) as Box<dyn FnOnce()>);
|
||||
if let Some(w) = web_sys::window() {
|
||||
let _ = w.request_animation_frame(cb2.as_ref().unchecked_ref());
|
||||
}
|
||||
cb2.forget();
|
||||
});
|
||||
window.add_event_listener_with_callback("resize", cb.as_ref().unchecked_ref())?;
|
||||
cb.forget();
|
||||
Ok(())
|
||||
}
|
||||
|
||||
/// Lee `--vista-offset` del strip como número de pixels (default 0).
|
||||
fn current_offset_px(strip: &HtmlElement) -> f64 {
|
||||
let s = strip.style().get_property_value("--vista-offset").unwrap_or_default();
|
||||
let trimmed = s.trim().trim_end_matches("px");
|
||||
trimmed.parse::<f64>().unwrap_or(0.0)
|
||||
}
|
||||
|
||||
/// Suprime warnings de uso no-utilizado durante compilación host (no-WASM).
|
||||
#[doc(hidden)]
|
||||
pub fn __unused_event_marker(_e: &Event) {}
|
||||
Reference in New Issue
Block a user