- ![]()
-
+
+ ();
isInfoPanelHidden: boolean = false;
+ hasCoordinatedAnimation: boolean = false;
+ private originalPosition: any = null;
comments: string[] = [];
+ @HostListener('document:keydown', ['$event'])
+ handleKeyDown(event: KeyboardEvent): void {
+ if (event.key === 'Escape') {
+ this.closeFullscreenAnimated();
+ }
+ }
+
+ ngOnInit(): void {
+ // Bloquear el scroll del body cuando se abre la imagen en pantalla completa
+ document.body.style.overflow = 'hidden';
+
+ // Verificar si hay información de transición disponible
+ const transitionData = (document as any).__imageTransition;
+ if (transitionData && Date.now() - transitionData.timestamp < 200) {
+ this.hasCoordinatedAnimation = true;
+ this.setupCoordinatedAnimation(transitionData);
+ // Limpiar la información de transición
+ delete (document as any).__imageTransition;
+ }
+ }
+
+ private setupCoordinatedAnimation(transitionData: any): void {
+ // Guardar la posición original para la animación de salida
+ this.originalPosition = { ...transitionData };
+
+ // Aplicar CSS variables para la animación coordinada
+ const container = document.querySelector(
+ '.mid-res-image-container'
+ ) as HTMLElement;
+ if (container) {
+ container.style.setProperty('--start-x', `${transitionData.x}px`);
+ container.style.setProperty('--start-y', `${transitionData.y}px`);
+ container.style.setProperty(
+ '--start-width',
+ `${transitionData.width}px`
+ );
+ container.style.setProperty(
+ '--start-height',
+ `${transitionData.height}px`
+ );
+ container.classList.add('coordinated-animation');
+ }
+ }
+
+ ngOnDestroy(): void {
+ // Restaurar el scroll del body cuando se destruye el componente
+ document.body.style.overflow = 'auto';
+ }
+
hideInfoPanel(event: MouseEvent): void {
event.stopPropagation();
- this.isInfoPanelHidden = !this.isInfoPanelHidden;
+ this.isInfoPanelHidden = true;
+ // tienes que coger el div 'panel' y cambiar su display a none
+ // Esto es para que no se vea el panel de información cuando se cierra
+ // Ademas, tienes que mostrar un botón para mostrar de nuevo el panel
+ document
+ .querySelector('.panel')
+ ?.setAttribute('style', 'display: none;');
}
showInfoPanel(event: MouseEvent): void {
event.stopPropagation();
- this.isInfoPanelHidden = !this.isInfoPanelHidden;
+ this.isInfoPanelHidden = false;
}
closeFullscreen(event: MouseEvent): void {
event.stopPropagation();
+ this.closeFullscreenAnimated();
}
- openFullscreen(event: MouseEvent): void {
- event.stopPropagation();
+ private closeFullscreenAnimated(): void {
+ // Iniciar animación de salida
+ this.startExitAnimation();
+
+ // Emitir el evento de cerrado después de la animación
+ setTimeout(() => {
+ // Restaurar el scroll del body
+ document.body.style.overflow = 'auto';
+ this.closed.emit();
+ }, 600); // Duración de la animación de salida
+ }
+
+ private startExitAnimation(): void {
+ const container = document.querySelector(
+ '.mid-res-image-container'
+ ) as HTMLElement;
+ if (container) {
+ // Remover animaciones de entrada
+ container.classList.remove('coordinated-animation');
+
+ // Si tenemos información de la posición original, configurar para retorno coordinado
+ if (this.hasCoordinatedAnimation && this.originalPosition) {
+ // Volver a establecer las variables CSS para la animación de retorno
+ container.style.setProperty(
+ '--end-x',
+ `${this.originalPosition.x}px`
+ );
+ container.style.setProperty(
+ '--end-y',
+ `${this.originalPosition.y}px`
+ );
+ container.style.setProperty(
+ '--end-width',
+ `${this.originalPosition.width}px`
+ );
+ container.style.setProperty(
+ '--end-height',
+ `${this.originalPosition.height}px`
+ );
+ container.classList.add('coordinated-exit');
+ } else {
+ // Animación de salida simple si no hay coordinación
+ container.classList.add('simple-exit');
+ }
+ }
}
editImage(event: MouseEvent): void {
@@ -48,21 +158,16 @@ export class MidResImage {
downloadImage(event: MouseEvent): void {
event.stopPropagation();
+ // debe descargar la imagen en resolución media (720p)
}
shareImage(event: MouseEvent): void {
event.stopPropagation();
+ // tiene que abrir un modal para compartir la imagen en redes sociales
}
buyImage(event: MouseEvent): void {
event.stopPropagation();
- }
-
- toggleCommentForm(event: MouseEvent): void {
- event.stopPropagation();
- }
-
- close() {
- this.closed.emit();
+ // tiene que abrir un modal para comprar la imagen
}
}
+ ![]()
+
+ @if(isInfoPanelHidden) {
+
- @if(isInfoPanelHidden) {
-
-
+ }
+