cagz-directives

cagz-directives es una colección de directivas de Angular e Ionic para manejar eventos y detectar cambios de comportamiento en componentes y elementos HTML.

Estas directivas permiten escuchar gestos, redimensionamiento, visibilidad, posición del mouse, eventos de scroll y deslizamientos (swipes), facilitando el desarrollo de interfaces de usuario interactivas.

Probadas en web, Android, IOs, Electron

Instalación

Instala la librería en tu proyecto de Angular, Ionic:

npm install cagz-directives

Uso de las Directivas

GesturesDirective Esta directiva escucha eventos de gestos (gestures) en dispositivos móviles, como movimientos y presiones largas.

Uso

<div gesturesDirective
     [isVisualMove]="false|true"
     [isPinch]="false|true"
     [onlyMoveTo]="'' | 'vertical' | 'horizontal' | 'right' | 'bottom' | 'left' | 'top'"
     (moveTo)="onMoveTo($event)"
     (longPress)="onLongPress()">
</div>

Inputs

• isVisualMove: Habilita o deshabilita el movimiento visual.
• isPinch: Permite o restringe el gesto de pinza.
• onlyMoveTo: Define la dirección permitida para el movimiento (vertical, horizontal, right, bottom, left, top).

Outputs

• moveTo: Emite la dirección del movimiento.
• longPress: Emite un evento cuando se detecta una presión prolongada.

IsVisibleDirective

Detecta si un componente o etiqueta es visible en la ventana de visualización.

Uso

<div isVisibleDirective 
     (isVisible)="onVisible($event)">
</div>

Outputs

• isVisible: Emite un booleano indicando si el elemento es visible.

MousePositionDirective

Escucha los eventos del movimiento del mouse dentro de un elemento DIV, proporcionando la posición actual del mouse.

Uso

<div mousePositionDirective 
     (mousePosition)="change($event)">
</div>

Outputs

• mousePosition: Emite la posición actual del mouse en un objeto de tipo IMousePositionElement.

ResizeDirective

Escucha los eventos de redimensionamiento de un elemento, proporcionando información sobre el tamaño nuevo.

Uso

<div resizeDirective 
     (changed)="change($event)">
</div>

Outputs

• changed: Emite un objeto IResizeElement con los detalles de redimensionamiento.

ScrollDetectorDirective

Escucha eventos de desplazamiento (scroll) en un elemento.

Uso

<div scrollDetectorDirective 
     (scrolled)="onScroll($event)">
</div>

Outputs

• scrolled: Emite un objeto IScrolls con información del evento de desplazamiento.

SwipeDirective

Detecta eventos de deslizamiento (swipe) a la izquierda y derecha en un elemento.

Uso

<div swipeDirective 
     (swipeLeft)="onSwipeLeft()" 
     (swipeRight)="onSwipeRight()">
</div>

Outputs

• swipeLeft: Emite un evento cuando se detecta un deslizamiento hacia la izquierda.
• swipeRight: Emite un evento cuando se detecta un deslizamiento hacia la derecha.

Ejemplos de Uso

Ejemplo Completo

<div gesturesDirective
     [isVisualMove]="true"
     [isPinch]="true"
     [onlyMoveTo]="'vertical'"
     (moveTo)="handleMoveTo($event)"
     (longPress)="handleLongPress()">
</div>

<div isVisibleDirective 
     (isVisible)="handleVisibilityChange($event)">
</div>

<div mousePositionDirective 
     (mousePosition)="handleMousePositionChange($event)">
</div>

<div resizeDirective 
     (changed)="handleResizeChange($event)">
</div>

<div scrollDetectorDirective 
     (scrolled)="handleScrollEvent($event)">
</div>

<div swipeDirective 
     (swipeLeft)="handleSwipeLeft()" 
     (swipeRight)="handleSwipeRight()">
</div>

Contribuciones

Las contribuciones son bienvenidas. Si encuentras algún problema o tienes sugerencias para mejorar esta librería, crea un issue o un pull request en el repositorio.

Licencia

Esta librería está licenciada bajo MIT License. ¡Úsala libremente en tus proyectos!