From fa0de5f2dfad6e9b91d8c6e90c12fd63e42452db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Camilo=20Gonz=C3=A1lez?= Date: Tue, 19 Mar 2024 15:52:36 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=A6=20Organizar=20Ficha=20en=20partes?= =?UTF-8?q?=20para=20no=20enloquecer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/componentes/{ => Ficha}/Ficha.astro | 115 ++---------------------- src/componentes/Ficha/Galeria.astro | 58 ++++++++++++ src/componentes/Ficha/Red.astro | 42 +++++++++ src/componentes/Ficha/SeccionFicha.ts | 26 ++++++ src/pages/egresados.astro | 2 +- src/pages/index.astro | 2 +- 6 files changed, 135 insertions(+), 110 deletions(-) rename src/componentes/{ => Ficha}/Ficha.astro (81%) create mode 100644 src/componentes/Ficha/Galeria.astro create mode 100644 src/componentes/Ficha/Red.astro create mode 100644 src/componentes/Ficha/SeccionFicha.ts diff --git a/src/componentes/Ficha.astro b/src/componentes/Ficha/Ficha.astro similarity index 81% rename from src/componentes/Ficha.astro rename to src/componentes/Ficha/Ficha.astro index 8690cc0..0cd3bf5 100644 --- a/src/componentes/Ficha.astro +++ b/src/componentes/Ficha/Ficha.astro @@ -1,4 +1,7 @@ --- +import Galeria from './Galeria.astro'; +import Red from './Red.astro'; + const secciones = [ { nombre: 'Enlaces', slug: 'enlaces' }, { nombre: 'Proyectos', slug: 'proyecto' }, @@ -44,17 +47,7 @@ const secciones = [

-
- - - -

Red de colaboración entre personas

-
+ { secciones.map((seccion) => ( @@ -65,9 +58,7 @@ const secciones = [ )) } -
-
-
+ @@ -85,64 +76,21 @@ const secciones = [ } from '@/utilidades/cerebro'; import type { ElementoFicha, ElementoProyecto, Ficha, LLavesMultiples, Listas, LlavesListasEgresados } from '@/tipos'; import { marked } from 'marked'; - import 'photoswipe/style.css'; - import Galeria from 'photoswipe/lightbox'; - - class SeccionFicha extends HTMLElement { - lista: HTMLUListElement; - - constructor() { - super(); - this.lista = this.querySelector('.contenido') as HTMLUListElement; - } - - agregarElemento(elemento: HTMLElement) { - this.lista.appendChild(elemento); - } - - limpiar() { - this.lista.innerHTML = ''; - } - - mostrar() { - this.classList.add('visible'); - } - - esconder() { - this.classList.remove('visible'); - } - } - - customElements.define('enflujo-seccion-ficha', SeccionFicha); - import type { ListasEgresados } from 'procesador/egresados'; - const urlBase = import.meta.env.BASE_URL; + import SeccionFicha from './SeccionFicha'; + const ficha = document.getElementById('contenedorFicha') as HTMLDivElement; const lista = document.getElementById('listaFicha') as HTMLTitleElement; const botonCerrarFicha = document.getElementById('cerrarFicha') as HTMLDivElement; const titulo = document.getElementById('tituloFicha') as HTMLParagraphElement; const conteoFicha = document.getElementById('conteoFicha') as HTMLDivElement; - - const seccionImagenes = document.getElementById('fichaImagenes') as HTMLDivElement; - const contenedorImagenes = document.getElementById('listaImagenes') as HTMLDivElement; const contenedorSuperior = document.getElementById('contenedorCajaSuperior') as HTMLDivElement; - - const galeria = new Galeria({ - gallery: '#listaImagenes', - children: 'a', - pswpModule: () => import('photoswipe') - }); - galeria.init(); - const siguiente = document.getElementById('fichaElementoSiguiente') as HTMLSpanElement; const anterior = document.getElementById('fichaElementoAnterior') as HTMLSpanElement; - const contenedorDescripcion = ficha.querySelector( '.seccionDatos[data-nombre="descripcion"]' ) as HTMLDivElement; const descripcionFicha = contenedorDescripcion.querySelector('p') as HTMLParagraphElement; - - // const seccionEnlaces = document.getElementById('fichaEnlaces') as HTMLDivElement; const seccionEnlaces = ficha.querySelector('.seccionDatos[data-nombre="enlaces"]') as SeccionFicha; // Cargar ficha anterior o ficha siguiente al hace click en los botones @@ -242,55 +190,6 @@ const secciones = [ seccionEnlaces.esconder(); } - // Llenar imágenes, si hay - if (datos.imagenes && datos.imagenes.length) { - contenedorImagenes.innerHTML = ''; - seccionImagenes.style.display = 'flex'; - - datos.imagenes.forEach((elemento) => { - const imagenAncho = document.createElement('a'); - imagenAncho.classList.add('imagenAncho'); - imagenAncho.href = `${urlBase}/imgs/fotos/${datos.id}/${elemento.grande}`; - imagenAncho.setAttribute('data-pswp-width', `${elemento.ancho}`); - imagenAncho.setAttribute('data-pswp-height', `${elemento.alto}`); - - const imagen = document.createElement('img'); - imagen.classList.add('imagenFicha'); - imagen.src = `${urlBase}/imgs/fotos/${datos.id}/${elemento.peque}`; - imagen.alt = ''; - - imagenAncho.appendChild(imagen); - contenedorImagenes.append(imagenAncho); - imagen.alt = ''; - - imagen.addEventListener('click', () => { - imagen.classList.toggle('grande'); - }); - }); - } else { - seccionImagenes.style.display = 'none'; - } - - /** - * RED Académica de lideres - */ - const seccionRed = document.getElementById('fichaRed') as HTMLDivElement; - const contenedorRed = document.getElementById('redAcademica') as HTMLIFrameElement; - const enlaceRed = document.getElementById('enlaceRedAcademia') as HTMLAnchorElement; - const idAcademia = datos.academia; - - if (idAcademia) { - seccionRed.style.display = 'block'; - contenedorRed.src = `https://academia.uniandes.edu.co/academynetsweb/personnet.html?&personId=${idAcademia}&highlight=${idAcademia}&minified=true&scale=50&force=-100"`; - enlaceRed.onclick = () => { - const enlace = `https://academia.uniandes.edu.co/academynetsweb/personnet.html?&personId=${idAcademia}&highlight=${idAcademia}`; - enlaceRed.setAttribute('href', enlace); - }; - } else { - contenedorRed.src = ''; - seccionRed.style.display = 'none'; - } - const vistaActual = vista.get(); if (!vistaActual) return; diff --git a/src/componentes/Ficha/Galeria.astro b/src/componentes/Ficha/Galeria.astro new file mode 100644 index 0000000..c638eb2 --- /dev/null +++ b/src/componentes/Ficha/Galeria.astro @@ -0,0 +1,58 @@ +--- + +--- + +
+
+
+ + diff --git a/src/componentes/Ficha/Red.astro b/src/componentes/Ficha/Red.astro new file mode 100644 index 0000000..bf23715 --- /dev/null +++ b/src/componentes/Ficha/Red.astro @@ -0,0 +1,42 @@ +--- + +--- + +
+ + + +

Red de colaboración entre personas

+
+ + diff --git a/src/componentes/Ficha/SeccionFicha.ts b/src/componentes/Ficha/SeccionFicha.ts new file mode 100644 index 0000000..40d2ee4 --- /dev/null +++ b/src/componentes/Ficha/SeccionFicha.ts @@ -0,0 +1,26 @@ +export default class SeccionFicha extends HTMLElement { + lista: HTMLUListElement; + + constructor() { + super(); + this.lista = this.querySelector('.contenido') as HTMLUListElement; + } + + agregarElemento(elemento: HTMLElement) { + this.lista.appendChild(elemento); + } + + limpiar() { + this.lista.innerHTML = ''; + } + + mostrar() { + this.classList.add('visible'); + } + + esconder() { + this.classList.remove('visible'); + } +} + +customElements.define('enflujo-seccion-ficha', SeccionFicha); diff --git a/src/pages/egresados.astro b/src/pages/egresados.astro index 18165f2..3849aa2 100644 --- a/src/pages/egresados.astro +++ b/src/pages/egresados.astro @@ -3,7 +3,7 @@ import Mapa from '@/componentes/Mapa.astro'; import Plantilla from '@/plantillas/Plantilla.astro'; import listas from '../../estaticos/listas.json'; import LineaTiempo from '@/componentes/LineaTiempo.astro'; -import Ficha from '@/componentes/Ficha.astro'; +import Ficha from '@/componentes/Ficha/Ficha.astro'; import Cabezote from '@/componentes/Cabezote.astro'; import EgresadosNombres from '@/componentes/EgresadosNombres.astro'; import ListasEgresados from '@/componentes/ListasEgresados.astro'; diff --git a/src/pages/index.astro b/src/pages/index.astro index 1bff919..876815f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,7 +3,7 @@ import Mapa from '@/componentes/Mapa.astro'; import Plantilla from '@/plantillas/Plantilla.astro'; import listas from '../../estaticos/listas.json'; import LineaTiempo from '@/componentes/LineaTiempo.astro'; -import Ficha from '@/componentes/Ficha.astro'; +import Ficha from '@/componentes/Ficha/Ficha.astro'; import Cabezote from '@/componentes/Cabezote.astro'; import Creditos from '@/componentes/Creditos.astro'; import Listas from '@/componentes/Listas.astro';