From f57aa5e5e5abf179ef8aa3134a15e5c86b5ee1cd Mon Sep 17 00:00:00 2001
From: alexcibotari <alexandru.cibotari@gmail.com>
Date: Sat, 28 Sep 2024 15:43:24 +0200
Subject: [PATCH] add Image Preview in Content Editor

---
 .../asset-select/asset-select.component.html  |  2 +-
 .../assets-select.component.html              |  1 +
 .../directives/image-preview.directive.ts     | 34 ++++++++++++++-----
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html b/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
index d49b9f6b..abc633ff 100644
--- a/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
+++ b/src/app/features/spaces/contents/shared/asset-select/asset-select.component.html
@@ -24,7 +24,7 @@
             @if (asset.type.startsWith('image/')) {
               <img
                 matListItemAvatar
-                llImagePreview
+                llImagePreview="3"
                 class="border object-contain bg-stripes-gray !rounded"
                 width="200"
                 height="200"
diff --git a/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html b/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
index c9af3dcd..dac0d4c9 100644
--- a/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
+++ b/src/app/features/spaces/contents/shared/assets-select/assets-select.component.html
@@ -23,6 +23,7 @@
           @if (asset.type.startsWith('image/')) {
             <img
               matListItemAvatar
+              llImagePreview="3"
               class="border object-contain bg-stripes-gray !rounded"
               width="200"
               height="200"
diff --git a/src/app/shared/directives/image-preview.directive.ts b/src/app/shared/directives/image-preview.directive.ts
index 19412799..90b4ff1d 100644
--- a/src/app/shared/directives/image-preview.directive.ts
+++ b/src/app/shared/directives/image-preview.directive.ts
@@ -1,17 +1,33 @@
-import { Directive, ElementRef, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, input } from '@angular/core';
 
 @Directive({
-  selector: '[llImagePreview]',
+  selector: 'img[llImagePreview]',
 })
 export class ImagePreviewDirective {
-  constructor(private hostElement: ElementRef<HTMLImageElement>) {
-    console.log('ImagePreviewDirective', hostElement.nativeElement);
+  scale = input<number>(2, { alias: 'llImagePreview' });
+
+  constructor(private hostElement: ElementRef<HTMLImageElement>) {}
+
+  @HostListener('mouseover')
+  public onMouseOver() {
+    if (this.hostElement.nativeElement.parentElement) {
+      this.hostElement.nativeElement.parentElement.style.overflow = 'visible';
+    }
+    this.hostElement.nativeElement.style.zIndex = '50';
+    this.hostElement.nativeElement.style.transform = `scale(${this.scale() || 2})`;
+    this.hostElement.nativeElement.style.transition = 'transform 0.3s ease-in-out';
   }
 
-  @HostListener('mouseover', ['$event'])
-  public onMouseOver(event: MouseEvent) {
-    const img = event.target as HTMLImageElement;
-    console.log('mouseover', event);
-    console.log('mouseover', img.srcset);
+  @HostListener('mouseout')
+  public onMouseOut() {
+    this.hostElement.nativeElement.style.transform = 'scale(1)';
+    this.hostElement.nativeElement.style.zIndex = '';
+    setTimeout(() => {
+      if (this.hostElement.nativeElement.parentElement) {
+        this.hostElement.nativeElement.style.transform = '';
+        this.hostElement.nativeElement.style.transition = '';
+        this.hostElement.nativeElement.parentElement.style.overflow = '';
+      }
+    }, 400);
   }
 }