vanie

v0.0.4

Published

4 months ago

Vanie es una librería diseñada para el desarrollo de interfaces de usuario interactivas en el front-end. Con un enfoque en la creación de ventanas arrastrables, Vanie ofrece una experiencia de usuario familiar, inspirada en los sistemas operativos más emb

Downloads

0High
0Medium
0Low

neko_shooter

draggable drag window modals resizable UI js ventana re-escalable frontend widget panel vanilla component MacOS Linux Windows front end

Vanie

Versión | Novedades --- | ---
0.0.4 | Mejoras en la optimización en el evento cerrarPropiedades nuevas como: hayArrastre y ventanaArrastradaNuevo Evento arrastre

instalacion:

npm i vanie

Contenido:

Demo

Para correr esta demostración y probar su funcionamiento, solo instale las dependencias y ejecute:

npm run demo

Constructor

Opcional : En caso de usar globalVanie para asignar el estilo.

import Vanie from 'vanie';

// Crear una nueva instancia de Vanie con un estilo predefinido y un identificador
const ventana1 = new Vanie('windows-claro','ventana 1');

const estilos = {
    /* Ver la sección de como -- Modificar estilos -- para más detalles */
};
// Crear una nueva instancia de Vanie con un conjunto de estilos personalizado.
const ventana2 = new Vanie(estilos);

// Crear una nueva instancia de Vanie usando el compilador CSS de otra instancia existente.
const ventana3 = new Vanie(ventana2.compiladorCss);

Parámetros del estilo:

String : El nombre del estilo almacenado en el sistema global.
Estilos predefinidos disponibles: windows-claro, windows-oscuro , mac-claro , mac-oscuro , linux-claro , linux-oscuro
object : Un objeto que contiene las características del estilo a asignar. Una vez asignado, estará disponible globalmente para su uso posterior, lo que significa que solo necesitarás especificar el nombre del estilo en futuras instancias sin necesidad de reutilizar el objeto.
Para obtener más detalles, consulta la sección sobre cómo Modificar estilos.
CompiladorCssVanie : El compilador de estilos de una instancia existente de Vanie.

Parámetros del identificador : (-opcional-) Acepta un string o un número para más detalle, vaya a la sección identificador para saber más.

Conexión con el DOM y arranque.

Opcional : En caso de usar globalVanie para conectarse al DOM.

import Vanie from 'vanie';

const ventana1 = new Vanie('windows-claro');
const ventana2 = new Vanie('linux-oscuro');

// Asignar el elemento del DOM como contenedor principal para la ventana.
ventana1.asignarPadre(document.body);
ventana1.removerPadre(); // Desconectar la ventana del elemento del DOM

ventana2.padre = document.body; // También se puede asignar usando la propiedad padre
ventana2.abrir(); // Construye la Ventana y la muestra en pantalla.

Métodos y Propiedades:

asignarPadre( HTMLElement ) : Esta función asigna un elemento del DOM como el contenedor principal donde se alojará la ventana.
[get/set] padre : Esta propiedad asigna y retorna el contenedor padre que aloja la ventana.
removerPadre() : Este método desconecta la ventana del elemento del DOM.
abrir() : Esta función construye y muestra la ventana en pantalla.

Se recomienda usar el mismo padre para todas las instancias que cree o usar globalVanie para conectarse al DOM; de lo contrario, las funciones de posicionamiento y bloqueo se verán afectadas. Si se ve en la necesidad de usar diferentes padres, puede ir a Configuradores->desconectarseDelGestor para más información.

Estructura

Demostración gráfica de los elementos div que conforman las ventanas creadas con Vanie:

ventana:

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const instanciaVanie = new Vanie('mac-claro');
instanciaVanie.padre = raiz;

instanciaVanie.abrir();
console.log(instanciaVanie.ventana);// retorna el div asociado al elemento ventana.

get - ventana Si se ha construido satisfactoriamente la instancia Vanie retornara el HTMLElement que pertenece a la ventana de lo contrario retornara undefined.

cabecera:

Esta propiedad te permite personalizar el contenido de la cabecera de la ventana.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('linux-oscuro');
const ventana3 = new Vanie('windows-claro');
ventana1.padre = ventana2.padre = ventana3.padre = raiz;

// Cambiando el contenido de la cabecera usando innerHtml.
ventana1.cabecera = '<h2> ventana1 <h2>'; 

const boton = document.createElement('button');
boton.innerText = 'accion';
boton.style.width = '100px';
boton.style.height = '70%';
boton.style.backgroundColor = '#dd4814';

// Cambiando el contenido de la cabercera con un objeto HTMLElement.
ventana2.cabecera = boton;

const listaDeDiv = ()=>{
    const list = [];
    for(let i = 0; i < 5; i++){
        const div = document.createElement('div');
        div.style.height = div.style.width = '20px';
        div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        list.push(div);
    }
    return list;
}
// Cambiando el contenido de la cabercera con una lista de objetos HTMLElement.
ventana3.cabecera = listaDeDiv(); 

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

get - cabecera Si se ha construido satisfactoriamente la instancia Vanie retornara el HTMLElement que pertenece a la cabecera de la ventana de lo contrario retornara undefined.

set - cabecera Acepta tres tipos de parámetros:

string : Incorpora el contenido del string en el innerHTML del div de la cabecera. ⚠ Su grado de prioridad es máximo, por lo que cualquier modificación a objetos relacionados con la cabecera puede no aplicarse.
HTMLElement : Incorpora el objeto HTMLElement como un nodo hijo a la cabecera.
Array HTMLElement : Incorpora cada objeto HTMLElement del Array como un nodo hijo a la cabecera.

Si por alguna razón decide eliminar el contenido de la cabecera, puede hacerlo con el método limpiarCabecera() o asignarle un string vacío '' a la propiedad cabecera directamente.

ventana1.cabecera = '';
ventana2.cabecera = '';
ventana3.limpiarCabecera();

titulo:

Esta propiedad te permite asignar un titulo a la ventana.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-claro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;

// Usando innerHtml para establecer un título en la cabecera.
ventana1.cabecera = '<h2> ventana 1 <h2>';

// Asignando un string como título a la ventana2.
ventana2.titulo = 'ventana 2';

ventana1.abrir();
ventana2.abrir();

[get/set] titulo : Esta propiedad asigna y retorna el string del titulo.

¿Por qué usar título?

Aunque inicialmente el resultado de las propiedades cabecera y titulo pueda parecer similar, la diferencia radica en que el contenido asignado a la cabecera impide el arrastre de la ventana, mientras que título no interfiere con esta funcionalidad.

Si tu intención es darle un título a cada ventana sin afectar su capacidad de ser arrastrada, utiliza la propiedad titulo. Esto proporciona una manera clara de distinguir entre el contenido de la cabecera y el título de la ventana, asegurando una mejor experiencia al mantener la funcionalidad de arrastre intacta.

justificarCabecera:

Esta propiedad te permite controlar cómo se justifica el contenido dentro de la cabecera de la ventana. Puedes usar valores como 'space-evenly', 'center', entre otros, para ajustar la disposición del contenido de la cabecera según tus necesidades de diseño.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-claro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;

const boton = document.createElement('button');
boton.innerText = '➕';
boton.style.height = '100%';
boton.style.aspectRedio = 1;
boton.style.backgroundColor = 'transpatern';
ventana1.cabecera = boton;

ventana1.titulo = 'ventana 1'
ventana2.titulo = 'ventana 2'

ventana1.justificarCabecera = 'space-evenly'; // justificado uniforme
ventana2.justificarCabecera = 'center'; // justificado en el centro

ventana1.abrir();
ventana2.abrir();

[get/set] justificarCabecera : Esta propiedad asigna y retorna el string con la justificación del contenido de la cabecera.

Si por alguna razón decide eliminar el justificado de la cabecera, puede hacerlo asignando un string vacío ''.

ico:

Esta propiedad te permite asignar un icono a la ventana, que se mostrará junto al título en la cabecera. Puedes usar elementos HTML, como imágenes (<img>) o cualquier otro contenido HTML, para personalizar el icono de acuerdo a tus necesidades de diseño. Esto puede ayudar a identificar visualmente las ventanas.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-claro');
const ventana2 = new Vanie('linux-oscuro');
ventana2.padre = ventana1.padre = raiz;

ventana1.titulo = 'ventana 1'
ventana2.titulo = 'ventana 2'

const img = new Image;
img.style.height = '100%';
img.style.aspectRatio = 1;
img.setAttribute('src','https://cdn.icon-icons.com/icons2/643/PNG/512/mac-apple-osx-desktop-software-hardware_icon-icons.com_59289.png');

// Asignando un HTMLElement como nodo hijo de ico.
ventana1.ico = img;

// Usando innerHtml para establecer el contenido de ico.
ventana2.ico = '<div style ="font-size:30px;">💬</div>';

ventana1.justificarCabecera = ventana2.justificarCabecera = 'center';

ventana1.abrir();
ventana2.abrir();

get - ico Si se ha construido satisfactoriamente la instancia Vanie retornara el HTMLElement que pertenece al ico de la ventana de lo contrario retornara undefined.

set - ico Acepta tres tipos de parámetros:

string : Incorpora el contenido del string en el innerHTML del div ico.
HTMLElement : Incorpora el objeto HTMLElement como un nodo hijo del ico.
Array HTMLElement : Incorpora cada objeto HTMLElement del Array como un nodo hijo del ico.

Si por alguna razón decide eliminar el icono de la cabecera, puede hacerlo asignando un string vacío ''.

lienzo:

La propiedad lienzo te permite proporcionar contenido dinámico y personalizado a las ventanas Vanie, lo que es fundamental para crear interfaces de usuario interactivas y atractivas. Puedes utilizar una variedad de elementos HTML, esto proporciona una manera flexible de mostrar información y funcionalidades dentro de las ventanas.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('linux-oscuro');
const ventana3 = new Vanie('windows-claro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;

ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';
ventana3.titulo = 'ventana 3';

ventana3.justificarCabecera = ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';

const listaDiv = ()=>{
    const list = [];
    for(let i = 0; i < 5; i++){
        const div = document.createElement('div');
        div.style.height = div.style.width = '80px';
        div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        list.push(div);}
    return list;
}
// asigna cada HTMLElement contenida en el Array como un nodo hijo al lienzo;
ventana3.lienzo = listaDiv(); 

const img = new Image;
img.style.width = img.style.height = '100%';
img.setAttribute('src','https://get.wallhere.com/photo/sky-digital-art-nature-clouds-anime-2304638.jpg');

// asigna el HTMLElement como nodo hijo al contenedor HTMLElement del lienzo.
ventana2.lienzo = img;

// asigna el string al innerHTML al contenedor HTMLElement del lienzo.
ventana1.lienzo = 
    `<div style="width:100%; height:100%; background-color:#252850; color:white; font-size:24px;">
        contenido del lienzo
    </div>`;

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

// retorna la referencia del contenedor HTMLElement del lienzo.
console.log(ventana1.lienzo, ventana2.lienzo, ventana3.lienzo);

get - lienzo Si se ha construido satisfactoriamente la instancia Vanie, retornará el HTMLElement que pertenece al lienzo de la ventana de lo contrario, retornará undefined.

set - lienzo Acepta tres tipos de parámetros:

string : Incorpora el contenido del string en el innerHTML del div lienzo. ⚠ Su grado de prioridad es máximo, por lo que cualquier modificación puede no aplicarse.
HTMLElement : Incorpora el objeto HTMLElement como un nodo hijo del lienzo.
Array HTMLElement : Incorpora cada objeto HTMLElement del Array como un nodo hijo del lienzo.

Si por alguna razón decide eliminar el contenido del lienzo, puede hacerlo asignando un string vacío ''.

lienzoAgrega:

La función lienzoAgrega te permite añadir elementos adicionales al lienzo sin eliminar los elementos que ya están presentes. A diferencia de la asignación directa que reemplaza los elementos almacenados previamente por los nuevos elementos.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('linux-oscuro');

ventana2.padre = ventana1.padre = raiz;

ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';

ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';

const listaDiv = ()=>{
    const list = [];
    for(let i = 0; i < 5; i++){
        const div = document.createElement('div');
        div.style.height = div.style.width = '50px';
        div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        list.push(div);}
    return list;
}

ventana1.lienzo = listaDiv();

// Borra los elementos anteriores para asignar los nuevos elementos al lienzo
ventana1.lienzo = listaDiv(); 

ventana2.lienzo = listaDiv();

// Agrega los elementos adicionales al lienzo
ventana2.lienzoAgrega(...listaDiv()); 

ventana1.abrir();
ventana2.abrir();

//asignar el display una vez construido
ventana2.lienzo.style.display = ventana1.lienzo.style.display = 'flex';

lienzoAgrega(...HTMLElement): La funcion solo acepta objetos HTMLElement como argumentos. Si el lienzo previamente posee nodos hijos estos no seran eliminados como con la asignacion directa del lienzo.

lienzoRemueve:

La función lienzoRemueve te permite remover los elementos del lienzo especificados.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;
ventana1.titulo = 'ventana 1';
ventana1.justificarCabecera = 'center';

const listaDiv = ()=>{
    const list = [];
    for(let i = 0; i < 10; i++){
        const div = document.createElement('div');
        div.style.height = div.style.width = '50px';
        div.style.display = 'grid';
        div.style.placeContent = 'center';
        div.style.fontSize = '20px';
        div.style.backgroundColor = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        div.innerText = i;
        list.push(div);}
    return list;
}

const lista = listaDiv()

ventana1.lienzo = lista;
ventana1.lienzoRemueve(lista[2],lista[5]); // elimina los elementos del lienzo

ventana1.abrir();
ventana1.lienzo.style.display = 'flex';

lienzoRemove(...HTMLElement): La función solo acepta objetos HTMLElement como argumentos para poder removerlos del lienzo.

cargarURL:

La función cargarURL te permite integrar sitios web como contenido de un lienzo.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');

ventana2.padre = ventana1.padre = raiz;
ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';

ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';

// Agregando el sitio con un iframe
ventana1.lienzo = `
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE" 
    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
    encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen></iframe>`;

// Carga el sitio usando solo la URL
ventana2.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE'); 

ventana1.abrir();
ventana2.abrir();

cargarURL(string): Esta función aceptará una cadena con la URL del sitio web como parámetro para poder asignarlo al lienzo.

¿Por que usar cargarURL?

Deberías usar la función cargarURL en lugar de asignar directamente un iframe con la dirección del sitio web, ya que esto último puede impedir toda la interactividad de la ventana, lo que podría causar problemas. cargarURL resuelve este problema utilizando un bloqueador interno que impide que los eventos del mouse se desactiven.

bloquearLienzo y bloquearIframe:

Como su nombre indica, bloquearLienzo y bloquearIframe desactivan la interactividad del mouse para estos elementos.

ventana1.bloquearLienzo(true); // Bloquea la interactividad del lienzo.
ventana2.bloquearIframe(true); // Bloquea la interactividad del iframe creado al usar la función cargarURL.

bloquearLienzo(booleano) : Si el valor del parámetro es true, bloqueará la interactividad del mouse en el lienzo. Si es false, activará los eventos en el lienzo.

bloquearIframe(booleano) : Si el valor del parámetro es true, bloqueará la interactividad del mouse en el iframe si se ha cargado una URL con la función cargarURL de lo contrario, no surtirá efecto. Si es false, activará los eventos en el iframe. Es importante tener en cuenta que los objetos Vanie poseen un bloqueador automático, por lo que esta función no tendrá un efecto tan significativo a menos que se utilice dentro de los eventos de los objetos Vanie.

Persistencia

Las ventanas creadas con Vanie, los elementos HTMLElement devueltos por las propiedades relacionadas a la estructura pueden ser estilizados y recibir nodos hijos mediante sus propias funciones miembro.
Sin embargo, es importante tener en cuenta dos problemas:

Acceder a las funciones miembro de estos elementos antes de que la ventana se abra generará un error.
Vanie está diseñado para optimizar el uso de recursos, por lo que asignar directamente parámetros a estas propiedades mediante sus funciones miembro puede resultar en la pérdida de estas configuraciones al cerrar la ventana.

Para garantizar que las configuraciones se conserven, se recomienda utilizar los métodos y asignaciones mostrados anteriormente o realizar los cambios dentro del evento de apertura para asegurar la persistencia de su diseño.

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;
ventana3.justificarCabecera = ventana2.justificarCabecera = ventana1.justificarCabecera = 'center';

ventana1.titulo = 'ventana 1';
ventana2.titulo = 'ventana 2';
ventana3.titulo = 'ventana 3';

const iframe = `
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE" 
    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
    encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen></iframe>`;

// Si bien esto no es lo ideal, para efectos prácticos sirve como ejemplo.
ventana1.lienzo = iframe; // Aseguramos la persistencia del diseño

// Vaya a la sección de botones y eventos para conocer más detalles de esta función.
ventana2.addEventListener('abrir',()=>{
    /* Una forma de falsear la persistencia.
    Cada vez que el objeto sea construido y mostrado,
    las configuraciones hechas también serán ingresadas.*/
    ventana2.lienzo.innerHTML = iframe;
});

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

/* Una vez construido, se mostrará el diseño, 
pero al cerrar la ventana, el elemento no conservará las configuraciones previas.*/
ventana3.lienzo.innerHTML = iframe; 

// Reabrimos las ventanas al hacer doble click
document.addEventListener('dblclick',()=>{
    ventana1.abrir();
    ventana2.abrir();
    ventana3.abrir();
});

Coordenadas y posición

Son un conjunto de propiedades y funciones que lo ayudaran a gestionar de una forma facil el posicionamiento de las ventanas creadas por Vanie.

posicion:

La propiedad posicion le permite tanto modificar como obtener la posición de la ventana Vanie.

get - posicion : Retorna un objeto Punto que contiene la posición actual del objeto Vanie.

set - posicion : Permite cambiar la posición actual del objeto Vanie. Puede hacerse de dos formas:

Mediante un objeto Punto
A través de un objeto con los parámetros x e y.

Se aceptan tanto números como strings. Los strings permitidos son los utilizados para el posicionamiento de los elementos en CSS, tales como:
x: 'right' 'end' 'left' 'start' 'center'.
y: 'top' 'end' 'bottom' 'start' 'center'.

import Vanie from 'vanie';
import {Punto} from 'nauty'; // npm i nauty

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;
ventana1.justificarCabecera = 'center';

ventana1.titulo = 'ventana 1';

ventana1.abrir();

// Retorna el punto donde se encuentra la ventana.
console.log(ventana1.posicion); 

// Modifica la posición de la ventana mediante un objeto Punto.
venatan1.posicion = new Punto(0,0);

// Modifica la posición de la ventana mediante un objeto con los parámetros {x,y}.
ventana1.posicion = {x:0, y:0} 

/* Modificando la posición de la ventana mediante parámetros de posicionamiento de CSS.
Es especialmente útil cuando se desconoce la dimensión del contenedor padre o cuando este es dinámico.*/
const pos = new Punto;
pos.bNuevo('end','start');
ventana1.posicion = pos;
ventana1.posicion = {x:'center',y:'bottom'}

Si quiere saber más sobre el objeto Punto, revise la documentación de nauty.

coordenadas x, y:

Estas propiedades permiten tanto modificar como obtener las coordenadas x e y de la ventana.

x : Retorna y modifica la coordenada en el eje x.
y : Retorna y modifica la coordenada en el eje y.

Se aceptan tanto números como strings. Los strings permitidos son los utilizados para el posicionamiento de los elementos en CSS:
x: 'right' 'end' 'left' 'start' 'center'.
y: 'top' 'end' 'bottom' 'start' 'center'.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;
ventana1.justificarCabecera = 'center';

ventana1.titulo = 'ventana 1';

ventana1.abrir();

// Retorna las coordenadas en X, Y.
console.log(ventana1.x, ventana1.y); 

// Modifica la posición de la ventana.
venatan1.x = 0; 
ventana1.y = 0; 

// Modificando la posición de la ventana mediante parámetros de posicionamiento de CSS.
ventana1.x = 'center';
ventana1.y = 'center';

verificarPosicion:

La función verificarPosicion permite asegurar que la ventana se mantenga dentro del alcance del usuario, evitando que quede fuera de la pantalla y sea inaccesible.

Esta función se aplica automáticamente, pero está disponible en caso de requerirla explícitamente.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;
ventana1.justificarCabecera = 'center';

ventana1.titulo = 'ventana 1';

ventana1.abrir();

/* Se aplica automáticamente.
No es necesario aplicarla, pero está disponible si la necesita.*/
ventana1.verificarPosicion();

posicionPadre:

La propiedad posicionPadre retorna un objeto Punto con las coordenadas globales del contenedor principal.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;

// Retorna un objeto Punto con las coordenadas globales del contenedor padre.
console.log(ventana1.posicionPadre); 

ventana1.abrir();

cambiarPuntoDeApertura y pApertura:

La función cambiarPuntoDeApertura y la propiedad pApertura permiten definir la posición de apertura de la ventana. Se pueden especificar las coordenadas en los ejes x e y utilizando números o strings que representan posiciones en CSS, como:

x: 'right' 'end' 'left' 'start' 'center'.
y: 'top' 'end' 'bottom' 'start' 'center'.

pApertura ofrece una forma alternativa de realizar esta tarea, aceptando un objeto Punto o un objeto con las propiedades {x, y} para definir la posición de apertura.

import Vanie from 'vanie';
import { Punto } from "nauty"; // npm i nauty

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;

// Cambia la posición de apertura.
ventana1.cambiarPuntoDeApertura(0,0);
// Utiliza un objeto {x, y} para definir la posición de apertura.
ventana2.pApertura = {x:'right',y:'bottom'};  

const posicion = new Punto;
posicion.bNuevo('center','center');
// Cambia la posición de apertura apartir de un objeto Punto.
ventana3.pApertura = posicion;

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';

Si quiere saber más sobre el objeto Punto, revise la documentación de nauty.

cambiarPuntoDeRetorno y pRetorno:

La función cambiarPuntoDeRetorno y la propiedad pRetorno permiten definir la posición a la cual regresará la ventana cuando se minimice. Se pueden especificar las coordenadas en los ejes x e y utilizando números o strings que representan posiciones en CSS, como:

x: 'right' 'end' 'left' 'start' 'center'.
y: 'top' 'end' 'bottom' 'start' 'center'.

pRetorno ofrece una forma alternativa de realizar esta tarea, aceptando un objeto Punto o un objeto con las propiedades {x, y} para definir la posición de retorno.

import Vanie from 'vanie';
import { Punto } from "nauty"; //npm i nauty

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;

// Cambia la posición de retorno de la ventana 1.
ventana1.cambiarPuntoDeRetorno(0,0);

// Utiliza un objeto {x, y} para definir la posición de retorno de la ventana 2.
ventana2.pRetorno = {x:'right',y:0};  

const posicion = new Punto;
posicion.bNuevo(0,'bottom');

// Cambia la posición de retorno de la ventana 3 utilizando un objeto Punto.
ventana3.pRetorno = posicion;

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';

Si quiere saber más sobre el objeto Punto, revise la documentación de nauty.

desplazar y desplazo:

La función desplazar modifica el desplazamiento de la ventana en los ejes x e y. Mientras que la propiedad desplazo retorna un objeto Desplazo con los valores de desplazamiento.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;

ventana1.abrir();
ventana1.lienzo.style.backgroundColor = '#00000077';

let desplazamiento = 0;
document.addEventListener('wheel',e=>{
    desplazamiento += e.deltaY <0? 1 : -1;
    // Modifica el desplazamiento en los ejes x e y.
    ventana1.desplazar(desplazamiento,desplazamiento); 
});

// Retorna el objeto `Desplazo` con los parámetros de desplazamiento en dx y dy
console.log(ventana1.desplazo);

⚠ Tener en cuenta que el desplazamiento afecta a otras transformaciones, por lo que si desea que el desplazamiento se convierta en las coordenadas finales de la ventana, necesita hacer los cálculos necesarios y asignarlo a la posicion de la ventana.

Dimensión

Son un conjunto de propiedades y funciones que lo ayudaran a gestionar de una forma facil la dimensión de las ventanas creadas con Vanie.

dimension:

get - dimension : Retorna un objeto Dimension que contiene la dimensión actual del objeto Vanie.
set - dimension : Permite cambiar la dimensión actual del objeto Vanie. Puede hacerse de dos formas:

Mediante un objeto Dimension
A través de un objeto con los parámetros w y h.

Se aceptan tanto números como strings. Los strings permitidos son porcentajes.

import Vanie from 'vanie';
import {Dimension} from 'nauty';//npm i nauty

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');

ventana2.padre = ventana1.padre = raiz;

ventana1.abrir();
ventana2.abrir();

// asignando la dimension a la ventana 1 usando un objeto con los parametros {w,h}.
ventana1.dimension = {w:'80%', h:500} 

const dimension = new Dimension;
dimension.bNuevo(180,'20%');

// asignando la dimension a la venatan 2 usando un objeto Dimension.
ventana2.dimension = dimension;

ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor = '#00000077';

Si quiere saber más sobre el objeto Dimension, revise la documentación de nauty.

alto y ancho:

Retornan y modifican la altura y el ancho actuales de la ventana, respectivamente. Aceptan tanto números como strings, donde los strings pueden representar porcentajes.

alto: retorna y modifica la altura actual de la ventana.
ancho: retorna y modifica el ancho actual de la ventana.

import Vanie from 'vanie';
const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');

ventana1.padre = raiz;

ventana1.abrir();

ventana1.alto = '50%';// asignando la altura.
ventana1.ancho = 200; // asignando el ancho.
console.log(ventana1.alto, ventana1.ancho); // retorna el alto y ancho.

ventana1.lienzo.style.backgroundColor = '#00000077';

dimensionPadre:

La propiedad dimensionPadre devuelve un objeto Dimension que representa las dimensiones del contenedor principal de la ventana.

import Vanie from 'vanie';
const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
ventana1.padre = raiz;
ventana1.abrir();

// Retorna un objeto Dimension con las dimensiones del contenedor padre.
console.log(ventana1.dimensionPadre);

cambiarDimensionInicial y dApertura:

La función cambiarDimensionInicial y la propiedad dApertura permiten establecer las dimensiones con las que se abrirá inicialmente la ventana. Se pueden especificar tanto números como porcentajes.

dApertura Proporciona una alternativa para realizar esta tarea, aceptando un objeto Dimension o un objeto con las propiedades {w, h} para definir las dimensiones de apertura, ademas de retorna la un objeto Dimension con las dimension inicial.

import Vanie from 'vanie';
import { Dimension } from "nauty";

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;

// Cambia la dimension de apertura de la ventana 1.
ventana1.cambiarDimensionInicial(200,200);

// Utiliza un objeto {w, h} para definir la dimensión de apertura de la ventana 2.
ventana2.dApertura = {w:'100%',h:'20%'};  
const dimension = new Dimension;
dimension.bNuevo(500,'100%');

// Cambia la dimensión de apertura de la ventana 3 utilizando un objeto Dimension.
ventana3.dApertura = dimension;

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';

cambiarDimensionMinima y dMinima:

La función cambiarDimensionMinima y la propiedad dMinima permiten establecer las dimensiones mínimas con las que la ventana estará limitada. Solo se pueden utilizar números como parámetros.

dMinima proporciona una alternativa para realizar esta tarea, aceptando un objeto Dimension o un objeto con las propiedades {w, h} para definir las dimensiones mínimas. Además, retorna un objeto Dimension con las dimensiones mínimas.

import Vanie from 'vanie';
import { Dimension } from "nauty";//npm i nauty

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;

// Cambia la dimension minima de la ventana 1.
ventana1.cambiarDimensionMinima(200,200);

// Utiliza un objeto {w, h} para definir la dimensión minima de la ventana 2.
ventana2.dMinima = {w:200,h:200};  

// Cambia la dimensión minima de la ventana 3 utilizando un objeto Dimension.
ventana3.dMinima = new Dimension(200,200);

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';

Si quiere saber más sobre el objeto Dimension, revise la documentación de nauty.

cambiarDimensionFija y dFija:

La función cambiarDimensionFija y la propiedad dFija permiten establecer una dimensión inmutable con la que la ventana estará limitada, además de desactivar el botón y el evento maximizar. Solo se pueden utilizar números como parámetros.

dFija ofrece una alternativa para realizar esta tarea, aceptando un objeto Dimension o un objeto con las propiedades {w, h} para definir la dimensión. Además, retorna un objeto Dimension con la dimensión fija.

import Vanie from 'vanie';
import { Dimension } from "nauty";//npm i nauty

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');
const ventana3 = new Vanie('linux-oscuro');

ventana3.padre = ventana2.padre = ventana1.padre = raiz;

// Establece la dimensión fija de la ventana 1.
ventana1.cambiarDimensionFija(200,200);

// Utiliza un objeto {w, h} para definir la dimensión fija de la ventana 2.
ventana2.dFija = {w:200,h:200};

// Establece la dimensión fija de la ventana 3 utilizando un objeto Dimension.
ventana3.dFija = new Dimension(200,200);

ventana1.abrir();
ventana2.abrir();
ventana3.abrir();

ventana1.lienzo.style.backgroundColor =
ventana2.lienzo.style.backgroundColor =
ventana3.lienzo.style.backgroundColor = '#00000077';

Si quiere saber más sobre el objeto Dimension, revise la documentación de nauty.

eliminarDimensionFija:

Esta función elimina la inmutabilidad de la dimensión de la ventana para permitir su redimensionamiento nuevamente.

ventana1.eliminarDimensionFija();
ventana2.eliminarDimensionFija();
ventana3.eliminarDimensionFija();

cambiarDimensionDelLienzo y dLienzo:

La función cambiarDimensionDelLienzo permite ajustar la dimensión de la ventana con respecto al tamaño del lienzo, con la opción adicional de hacerla inmutable. Los dos primeros parámetros solo admiten números, mientras que el último parámetro es opcional. Si se desea hacer la dimensión inmutable, se asigna true.

La propiedaddLienzo ofrece una alternativa para realizar esta tarea, aceptando un objeto Dimension o un objeto con las propiedades {w, h} para definir el tamaño del liezo. Además, retorna un objeto Dimension con el ancho y la altura del lienzo.

⚠ La opción de inmutabilidad de esta función tiene MÁXIMA prioridad sobre otras funciones de redimensionamiento.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');

ventana2.padre = ventana1.padre = raiz;

ventana1.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
ventana2.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');


const r16_9 = {w:720,h:(720 * 9)/16}; // Relación de aspecto 16:9.

ventana1.dLienzo = r16_9; // Cambiando la dimensión del lienzo.

// Cambiando la dimensión del lienzo y haciéndola inmutable.
ventana2.cambiarDimensionDelLienzo(r16_9.w, r16_9.h,true);

ventana1.abrir();
ventana2.abrir();

cambiarDimensionDelLienzo(w, h, fijar) : w modifica el ancho, h modifica la altura, fijar al aignarle true la vuelve inmutable además de desactivar el botón y el evento maximizar.

fijarDimensionDelLienzo:

fijarDimensionDelLienzo(boolean) permite tomar la dimensión actual del lienzo y hacerla inmutable en caso de asignar true como parámetro. Si se asigna false, el lienzo se vuelve mutable nuevamente.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');

const ventana1 = new Vanie('mac-oscuro');
const ventana2 = new Vanie('windows-claro');

ventana2.padre = ventana1.padre = raiz;

ventana1.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');
ventana2.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');

const r16_9 = {w:720,h:(720 * 9)/16};

// Cambiando la dimensión del lienzo.
ventana1.cambiarDimensionDelLienzo(r16_9.w, r16_9.h);

// Cambiando la dimensión del lienzo y haciéndola inmutable.
ventana2.cambiarDimensionDelLienzo(r16_9.w, r16_9.h,true);

// Vuelve inmutable el lienzo.
ventana1.fijarDimensionDelLienzo(true) 

ventana1.abrir();
ventana2.abrir();

// Remueve la inmutabilidad del lienzo.
ventana2.fijarDimensionDelLienzo(false)

redimensionar:

Redimensionar impide que se redimensione la ventana por parte del usuario asignado false, o vuelva a redimensionarse al asignar true.

import Vanie from 'vanie';

const ventana = new Vanie('linux-oscuro');
ventana.padre = document.body;
ventana.redimensionar(false);// bloquea la redimension.
vantana.redimensionar(true); // desbloquea la redimension.
ventana.abrir();

Botones y Eventos

abrir:

Cumple varias tareas críticas como:

Permite la creación y visualización en pantalla de las ventanas.
Si la ventana está minimizada al ejecutar la función abrir, se restaurará a su estado anterior.
Si la ventana está visible en pantalla junto a otras ventanas al ejecutar abrir, tendrá el mismo efecto que la función subir colocándola por encima de las demás ventanas.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('linux-oscuro');
const ventana2 = new Vanie('windows-claro');

ventana2.padre = ventana1.padre = raiz;

ventana1.cargarURL('https://www.youtube.com/embed/GrG2-oX5z24?si=UPiNV_e5HOBdC7lE');

//Establece la posición de retorno al lugar donde se posiciona el botón cuando se minimiza.
ventana1.pRetorno = { 
    x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
    y: boton.getBoundingClientRect().top
}

const r16_9 = {w:720,h:(720 * 9)/16};
ventana1.cambiarDimensionDelLienzo(r16_9.w, r16_9.h);

ventana2.abrir(); // Abre una ventana de apoyo.
ventana2.lienzo.style.backgroundColor = '#00000077';

// Al hacer clic en el botón, se construirá y mostrará en pantalla.
// Si está minimizado, se desminimizará.
// Si ya está en pantalla, se posicionará por encima de otras ventanas.
boton.addEventListener('click',ventana1.abrir);

Evento abrir:

El evento abrir ejecutará una función que tú asignes únicamente en el momento en que la ventana se construya y se muestre en pantalla. No pasa ningún parámetro a la función otorgada.

Este evento es útil para ejecutar acciones específicas tan pronto como una ventana se muestre en pantalla.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;

ventana1.pRetorno = {
    x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
    y: boton.getBoundingClientRect().top
    }

let numDeVecesAbierta = 0;

// Ejecurara la funcion unicamente cuando la ventana sea construida y se muestre en pantalla.
ventana1.addEventListener('abrir',()=>{ 
    const color = { r: Math.random()*255, g: Math.random()*255, b: Math.random()*255}

    ventana1.lienzo.innerText = ++numDeVecesAbierta;
    ventana1.lienzo.style.color = `rgb(${255-color.r},${255-color.g},${255-color.b})`;
    ventana1.lienzo.style.fontSize = '120px';
    ventana1.lienzo.style.display = 'grid';
    ventana1.lienzo.style.placeContent = 'center';
    ventana1.lienzo.style.backgroundColor = `rgb(${color.r},${color.g},${color.b})`;
    });

boton.addEventListener('click',ventana1.abrir);

animarApertura:

La función animarApertura permite controlar si se desea animar la apertura de la ventana o anular dicha animación. Si se asigna false, se cancela la animación de apertura; de lo contrario, se carga la animación predeterminada.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;

ventana1.pRetorno = {
    x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
    y: boton.getBoundingClientRect().top
    }
ventana1.animarApertura(false);// false anula la animación de apertura de la ventana.
ventana1.abrir();

ventana1.addEventListener('abrir',()=>{
    ventana1.lienzo.style.backgroundColor = `#000000dd`;
    ventana1.animarApertura(true); // true carga la animación de apertura.
    });

boton.addEventListener('click',ventana1.abrir);

¿Por que anular la animacion de la ventana?

Al proporcionar esta funcionalidad, tienes el control sobre si deseas animar la apertura de la ventana o si prefieres que se abra de manera instantánea. Esto puede ser útil, por ejemplo, si deseas evitar una animación en una ventana que ya está abierta desde el principio.

minimizar:

El boton y la función minimizar tienen la capacidad de transformar la ventana:

Si la ventana está visible, la escala hasta que desaparece de la vista del usuario.
Si la ventana está minimizada, la devuelve a su estado anterior.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#000000dd`;

ventana1.pRetorno = {
    x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
    y: boton.getBoundingClientRect().top
    }
/* Si la ventana está visible, la transforma para desaparecerla de la vista del usuario; 
de lo contrario, la devuelve a su estado anterior.*/
boton.addEventListener('click',ventana1.minimizar);

Evento minimizar:

El evento minimizar ejecutará una función que tú asignes únicamente en el momento en que la ventana se minimice o desminimize. Pasa como argumento a la función un booleano: true si la ventana se ha minimizado y false si ha regresado a su estado anterior.

Es útil para ejecutar acciones específicas tan pronto como una ventana se termine de minimizar o desminimizar.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#000000dd`;

ventana1.pRetorno = {
    x: boton.getBoundingClientRect().left + boton.offsetWidth/2,
    y: boton.getBoundingClientRect().top
    }

ventana1.addEventListener('minimizar',seMinimizo=>{ 
// La función se ejecutará únicamente cuando la ventana se haya terminado de minimizar o desminimizar.
    if(seMinimizo){
        boton.style.transform = 'scale(1.4) rotate(360deg)';
    }
    else 
        boton.style.transform = '';
    });

boton.style.transition = 'transform .5s ease';
boton.addEventListener('click',ventana1.minimizar);

maximizar:

El botón y la función maximizar tienen la capacidad de modificar la dimensión de la ventana:

Si la ventana está visible, la dimensiona al 100% del tamaño del contendor padre.
Si la ventana está maximizada, la devuelve a su tamaño anterior.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#059b9add`;

/* Si la ventana está visible, la dimensiona al 100% del tamaño del contenedor padre; 
de lo contrario, la devuelve a su tamaño anterior.*/
boton.addEventListener('click',ventana1.maximizar);

Evento maximizar:

Ejecutará una función que asignes únicamente en el momento en que la ventana se maximice o desmaximice.
Pasa como argumento a la función un booleano: true si la ventana se ha maximizado y false si ha regresado a su tamaño anterior.

Es útil para ejecutar acciones específicas tan pronto como una ventana se maximice o desmaximice.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');
const barra = document.getElementById('barra');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#059b9add`;

ventana1.addEventListener('maximizar', seMaximizo=>{
// La función se ejecutará únicamente cuando la ventana se maximiza o desmaximiza.
    if(seMaximizo){
        barra.style.opacity = '0';
        barra.style.pointerEvents = 'none';
    }
    else{
        barra.style.opacity = '';
        barra.style.pointerEvents = '';
    }
});
boton.style.transition = 'transform .5s ease';
boton.addEventListener('click',ventana1.maximizar);

cerrar:

El botón y la función cerrar, cierra la ventana:

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#059b9add`;

boton.addEventListener('click',ventana1.cerrar);// Cierra la ventana

Evento cerrar:

El evento cerrar ejecutará una función que asignes únicamente en el momento en que la ventana se cierre. No pasa ningún parámetro a la función otorgada.

Este evento te brinda la oportunidad de ejecutar acciones específicas inmediatamente después de que una ventana se cierre. Puedes aprovecharlo para realizar tareas como ocultar elementos de la interfaz o realizar limpieza de recursos.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#059b9add`;

ventana1.addEventListener('cerrar', ()=>{
// La función se ejecutará únicamente cuando la ventana se cierre.
    boton.style.opacity = '0';
    boton.style.pointerEvents = 'none';
    });

boton.style.transition = 'transform .5s ease';

eliminarAlCerrar:

La función eliminarAlCerrar te brinda el control sobre si deseas mantener las configuraciones y elementos guardados al cerrar la ventana o eliminarlos por completo

Si se asigna false, se mantendrán las configuraciones y elementos al cerrar la ventana; de lo contrario, se eliminarán las configuraciones previamente establecidas en los elementos de la ventana.

Por defecto todas las ventanas eliminan su contenido.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const boton = document.getElementById('btn');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

/* Las configuraciones y elementos se mantendrán al momento de cerrar; 
solo se oculta la ventana y no se elimina.*/
ventana1.eliminarAlCerrar(false); 

ventana1.lienzo.style.backgroundColor = `#059b9add`;

boton.addEventListener('click',ventana1.abrir);

¿Por qué usar eliminarAlCerrar?

Al proporcionar esta funcionalidad, tienes el control sobre si deseas mantener los elementos de la ventana ocultos o eliminarlos por completo al cerrarla. Considera los pros y contras para decidir si esta función se adapta a tu proyecto.

Pros:

Mantener los elementos ocultos aseguras la persistencia en las configuraciones y los elementos sin importar el método que uses para asignarlos a la estructura de la ventana.
La posición y dimensión al momento de cerrar serán el punto de partida al momento de abrir.
Las configuraciones o estados que el usuario haya hecho dentro del contenido de la ventana se mantendrán.

Contras:

Si existen demasiados elementos con esta función activa, puede afectar el rendimiento, ya que cuanto más elementos haya, también habrá más eventos.
No se puede garantizar la animación de la apertura, ya que el estado donde cerro será el estado donde se abrira.
Si bien usted es el encargado de hacer que su proyecto sea o no responsivo, usar esta función puede hacer más complejo su trabajo.
Todas las configuraciones o estados que el usuario haya hecho se mantendrán, pero en elementos interactivos como videos o juegos quizás esto no sea tan buena idea, ya que estas estarán corriendo por detrás sin que el usuario tenga forma de detenerlos al momento de cerrar a menos que abra la ventana y lo detengan por los medios que usted haya proporcionado o sea usted mismo se encarge de configurar el Evento cerrar para detener este tipo de contenido.

media:

La función media tiene la capacidad de ajustar la dimensión de la ventana de la siguiente manera:

Si la ventana está visible, la dimensiona al 50% del tamaño del contenedor padre, posicionándose a la derecha o izquierda según lo definas.
Si la ventana ya fue modificada por esta función, la devuelve a su tamaño anterior.

media(string) : 'der' a la derecha, 'izq' a la izquierda.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const botonIzq = document.getElementById('btn-izq');
const botonDer = document.getElementById('btn-der');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();

ventana1.lienzo.style.backgroundColor = `#059b9add`;

botonDer.addEventListener('click',()=>{
/* modifica el tamaño de la ventana al 50% del contendor y lo posiciona a la derecha, 
si ya esta aplicado la devuelve a su tamaño anterior.*/
    ventana1.media('der'); 
});
botonIzq.addEventListener('click',()=>{
/* modifica el tamaño de la ventana al 50% del contendor y lo posiciona a la izquierda, 
si ya esta aplicado la devuelve a su tamaño anterior.*/
    ventana1.media('izq'); 
});

Evento media:

El evento media ejecutará una función que asignes únicamente cuando la ventana se posicione a un lado del contenedor con un tamaño del 50%. Pasa un objeto con los parámetros {lado, estado} a la función otorgada.

lado : Retorna el lado donde se posiciona la ventana; 'izq' = izquierda, 'der' = derecha.
estado : Retorna un booleano con el estado del evento; true = se ha aplicado media, false = regresa a su estado anterior.

Este evento te brinda la oportunidad de ejecutar acciones específicas inmediatamente cuando la ventana se posicione a un lado y se redimensione al 50%.

import Vanie from 'vanie';

const raiz = document.getElementById('raiz');
const botonIzq = document.getElementById('btn-izq');
const botonDer = document.getElementById('btn-der');

const ventana1 = new Vanie('windows-claro');

ventana1.padre = raiz;
ventana1.abrir();
const colorOriginal = `#059b9add`
ventana1.lienzo.style.backgroundColor = colorOriginal;

// Ejecutar la función cuando la ventana emita el evento media.
ventana1.addEventListener('media',data=>{
    if(data.estado){
        if(data.lado == 'izq')
        // Amarillo si está a la izquierda.
            ventana1.lienzo.style.backgroundColor = `#fdec6fdd`; 
        else
        // Naranja si está a la derecha.
            ventana1.lienzo.style.backgroundColor = `#ff6e49dd`; 
    }
    else
        // Restablecer el color de fondo original.
        ventana1.lienzo.style.backgroundColor = colorOriginal;
});

botonDer.addEventListener('click',()=>{
    ventana1.media('der');
});
botonIzq.addEventListener('click',()=>{
    ventana1.media('izq');
});

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vanie

instalacion:

Contenido:

Demo

Constructor

Conexión con el DOM y arranque.

Estructura

ventana:

cabecera:

titulo:

justificarCabecera:

ico:

lienzo:

lienzoAgrega:

lienzoRemueve:

cargarURL:

¿Por que usar cargarURL?

bloquearLienzo y bloquearIframe:

Persistencia

Coordenadas y posición

posicion:

coordenadas x, y:

verificarPosicion:

posicionPadre:

cambiarPuntoDeApertura y pApertura:

cambiarPuntoDeRetorno y pRetorno:

desplazar y desplazo:

Dimensión

dimension:

alto y ancho:

dimensionPadre:

cambiarDimensionInicial y dApertura:

cambiarDimensionMinima y dMinima:

cambiarDimensionFija y dFija:

eliminarDimensionFija:

cambiarDimensionDelLienzo y dLienzo:

fijarDimensionDelLienzo:

redimensionar:

Botones y Eventos

abrir:

Evento abrir:

animarApertura:

¿Por que anular la animacion de la ventana?

minimizar:

Evento minimizar:

maximizar:

Evento maximizar:

cerrar:

Evento cerrar:

eliminarAlCerrar:

¿Por qué usar eliminarAlCerrar?

media:

Evento media: