ywana-core8 0.1.55 → 0.1.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.55",
+  "version": "0.1.56",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/site/index.js

@@ -2,4 +2,6 @@ export * from './site'
 export * from './siteContext'
 export * from './page'
 export * from './dialog'
-export * from './view'
+export * from './view'
+export * from './link'
+export * from './navigation'

package/src/site/link.js

@@ -0,0 +1,75 @@
+import { useEffect, useState, useRef } from "react"
+import React, { useContext } from 'react'
+import { SiteContext } from './siteContext'
+
+/**
+ * Use Hash Page
+ */
+export function useHashPage(defaultPage = "home") {
+    const getCurrentPageFromURL = () => {
+        const hash = window.location.hash.replace("#", "")
+        return hash || defaultPage
+    }
+
+    const [page, setPage] = useState(getCurrentPageFromURL())
+    const [history, setHistory] = useState([])
+    const isFirstLoad = useRef(true)
+
+    useEffect(() => {
+        const handleHashChange = () => {
+            const newPage = getCurrentPageFromURL()
+            if (!isFirstLoad.current) {
+                setHistory(prev => [...prev, page]) // Guarda la página anterior
+            } else {
+                isFirstLoad.current = false
+            }
+            setPage(newPage)
+        }
+
+        window.addEventListener("hashchange", handleHashChange)
+        return () => window.removeEventListener("hashchange", handleHashChange)
+    }, [page])
+
+    const goto = (id) => {
+        if (page) {
+            setHistory(prev => [...prev, page])
+        }
+        setPage(id)
+        window.location.hash = id
+    }
+
+    const goBack = () => {
+        if (history.length > 0) {
+            const lastPage = history[history.length - 1]
+            setHistory(prev => prev.slice(0, -1))
+            setPage(lastPage)
+            window.location.hash = lastPage
+        }
+    }
+
+    return { page, goto, goBack, history }
+}
+
+/**
+ * PageLink - Navegación declarativa usando el sistema de hash
+ * 
+ * Props:
+ * - page: string → ID de la página a mostrar
+ * - children: ReactNode → contenido visual del enlace
+ * - className: string → clases opcionales
+ * - style: object → estilos en línea opcionales
+ */
+export const PageLink = ({ page, children, className = '', style = {} }) => {
+    const { goto } = useContext(SiteContext)
+
+    const handleClick = (e) => {
+        e.preventDefault()
+        goto(page)
+    }
+
+    return (
+        <a href={`#${page}`} onClick={handleClick} className={className} style={style}>
+            {children}
+        </a>
+    )
+}

package/src/site/navigation.js

@@ -0,0 +1,51 @@
+import { useEffect, useState, useRef } from "react"
+import React, { useContext } from 'react'
+import { SiteContext } from './siteContext'
+
+/**
+ * Use Hash Page
+ */
+export function useHashPage(defaultPage = "home") {
+    const getCurrentPageFromURL = () => {
+        const hash = window.location.hash.replace("#", "")
+        return hash || defaultPage
+    }
+
+    const [page, setPage] = useState(getCurrentPageFromURL())
+    const [history, setHistory] = useState([])
+    const isFirstLoad = useRef(true)
+
+    useEffect(() => {
+        const handleHashChange = () => {
+            const newPage = getCurrentPageFromURL()
+            if (!isFirstLoad.current) {
+                setHistory(prev => [...prev, page]) // Guarda la página anterior
+            } else {
+                isFirstLoad.current = false
+            }
+            setPage(newPage)
+        }
+
+        window.addEventListener("hashchange", handleHashChange)
+        return () => window.removeEventListener("hashchange", handleHashChange)
+    }, [page])
+
+    const goto = (id) => {
+        if (page) {
+            setHistory(prev => [...prev, page])
+        }
+        setPage(id)
+        window.location.hash = id
+    }
+
+    const goBack = () => {
+        if (history.length > 0) {
+            const lastPage = history[history.length - 1]
+            setHistory(prev => prev.slice(0, -1))
+            setPage(lastPage)
+            window.location.hash = lastPage
+        }
+    }
+
+    return { page, goto, goBack, history }
+}

package/src/site/site.js

@@ -6,6 +6,7 @@ import { Tooltip } from '../html/tooltip'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
 import { ReactNotifications, Store } from 'react-notifications-component'
+import { useHashPage } from './navigation'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
 
@@ -25,25 +26,8 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     const [promptDialog, setPromptDialog] = useState()
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
-    const [history, setHistory] = useState([])
 
-    // 📌 Extraer la página actual desde la URL (por defecto "home")
-    const getCurrentPageFromURL = () => {
-        const path = window.location.pathname.replace("/", "")
-        return path || "home"
-    }
-    const [page, setPage] = useState(getCurrentPageFromURL())
-
-    useEffect(() => {
-        // 📌 Detectar cambios en la URL cuando el usuario presiona "Atrás" o "Adelante"
-        const handlePopState = (event) => {
-            const previousPage = event.state?.page || "home"
-            setPage(previousPage)
-        }
-
-        window.addEventListener("popstate", handlePopState)
-        return () => window.removeEventListener("popstate", handlePopState)
-    }, [])
+    const { page, goto, goBack } = useHashPage()
 
     const value = {
 
@@ -53,14 +37,6 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         dictionary,
         setDictionary,
         translate: useCallback((key) => dictionary?.[key]?.[lang] || key, [lang, dictionary]),
-        /*
-        translate: (key) => {
-            if (!key) return key
-            if (dictionary === undefined) return key
-            const term = dictionary[key]
-            return term ? term[lang] : key
-        },
-        */
 
         sideNav,
         setSideNav,
@@ -85,21 +61,8 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         setBreadcrumb,
 
         page,
-        goto: (id) => {
-            if (page) {
-                setHistory(prev => [...prev, page]) // 🔹 Guarda la página actual en el historial antes de cambiar
-            }
-            setPage(id)
-            window.history.pushState({ page: id }, "", `/${id}`) // 🔹 Actualiza la URL
-        },
-        goBack: () => {
-            if (history.length > 0) {
-                const lastPage = history[history.length - 1]
-                setHistory(prev => prev.slice(0, -1)) // 🔹 Elimina la última entrada del historial
-                setPage(lastPage) // 🔹 Vuelve a la página anterior
-                window.history.back() // 🔹 Regresa en la navegación del navegador
-            }
-        },
+        goto,
+        goBack,
 
         dialog,
         openDialog: (dialog) => { setDialog(dialog) },