Add fullscreen view of image items

#662

docs/release-notes-common.md

@@ -6,6 +6,7 @@ Allgemein
 - Abschnittsnummerierung
   - Es werden alle Abschnitte seitenübergreifend durchnummeriert. Einzelne Seitenabschnitte können via Seitenabschnittsmenu davon ausgenommen werden.
 - Audio und Video: Neue Eigenschaft - Hintergrundfarbe
+- Bilder werden beim Anwählen in einem Vollbild-Dialog angezeigt
 
 ### Änderungen
 - Kontrollkästchen: Wenn keine Vorbelegung definiert ist, gilt der Wert als nicht-ausgewählt anstatt nicht-definiert

projects/common/assets/common-styles.css

@@ -107,3 +107,12 @@ blockquote p {
 .reduced-overlay-index.cdk-overlay-container {
   z-index: 100 !important;
 }
+
+.image-fullscreen-dialog {
+  max-width: 95vw !important;
+  max-height: 95vh;
+}
+
+.image-fullscreen-dialog mat-dialog-content {
+  max-height: 100%;
+}

projects/common/components/compound-elements/cloze/cloze.component.ts

@@ -41,6 +41,7 @@ import { ClozeChildOverlay } from './cloze-child-overlay.component';
                       [ngTemplateOutlet]="paragraphs"
                       [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
         <img *ngIf="part.type === 'blockImage'"
+             imageFullscreen [imgSrc]="$any(part.attrs.src) | safeResourceUrl"
              [src]="part.attrs.src" [alt]="$any(part.attrs.alt)">
       </ng-container>
     </div>
@@ -149,6 +150,7 @@ import { ClozeChildOverlay } from './cloze-child-overlay.component';
         </ng-container>
         <ng-container *ngIf="$any(subPart).type === 'inlineImage'">
           <img [src]="subPart.attrs.src" [alt]="subPart.attrs.alt"
+               imageFullscreen [imgSrc]="subPart.attrs.src"
                [style.display]="'inline-block'"
                [style.height]="'1em'"
                [style.vertical-align]="'middle'">

projects/common/components/media-elements/image.component.ts

@@ -17,6 +17,7 @@ import { ElementComponent } from '../../directives/element-component.directive';
          (mouseleave)="magnifierVisible = false">
       <img #image
            draggable="false"
+           imageFullscreen [imgSrc]="elementModel.src | safeResourceUrl"
            [src]="elementModel.src | safeResourceUrl"
            [alt]="elementModel.alt"
            [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">

projects/common/components/text-image-panel.component.ts

@@ -21,6 +21,7 @@ import { DragNDropValueObject, TextImageLabel } from 'common/models/elements/lab
       <img *ngIf="label.imgSrc"
            [style.object-fit]="'scale-down'"
            [style.max-width.%]="100"
+           imageFullscreen [imgSrc]="label.imgSrc | safeResourceUrl"
            [src]="label.imgSrc | safeResourceUrl" alt="Image Placeholder">
       <div *ngIf="label.text !== ''" class="text" [innerHTML]="label.text | safeResourceHTML"></div>
     </div>

projects/common/components/text/text.component.ts

@@ -4,6 +4,7 @@ import {
 import { TextElement } from 'common/models/elements/text/text';
 import { ValueChangeElement } from 'common/models/elements/element';
 import { ElementComponent } from '../../directives/element-component.directive';
+import { ImageFullscreenDialog, ImageFullscreenDirective } from 'common/directives/image-fullscreen.directive';
 
 @Component({
   selector: 'aspect-text',
@@ -31,10 +32,12 @@ import { ElementComponent } from '../../directives/element-component.directive';
            [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
            [style.column-count]="elementModel.columnCount"
            tooltipEventTooltip
+           (click)="openFullscreenImage($event)"
            [innerHTML]="savedText || elementModel.text | safeResourceHTML"
            (contextmenu)="$event.preventDefault()"
            (pointerdown)="startTextSelection($event)">
       </div>
+      <ng-container imageFullscreen></ng-container>
     </div>
   `,
   styles: [
@@ -65,6 +68,8 @@ export class TextComponent extends ElementComponent implements AfterViewInit, On
     colorName: string | undefined
   }>();
 
+  @ViewChild(ImageFullscreenDirective) imageFullScreenDirective!: ImageFullscreenDirective;
+
   selectedColor!: string | undefined;
 
   static textComponents: { [id: string]: TextComponent } = {};
@@ -86,4 +91,11 @@ export class TextComponent extends ElementComponent implements AfterViewInit, On
   ngOnDestroy(): void {
     delete TextComponent.textComponents[this.elementModel.id];
   }
+
+  openFullscreenImage(event: MouseEvent) {
+    const targetElement = event.target as HTMLImageElement;
+    if (targetElement.nodeName === 'IMG') {
+      this.imageFullScreenDirective.openFullScreenDialog(targetElement.src, targetElement.alt);
+    }
+  }
 }

projects/common/directives/image-fullscreen.directive.ts

+// eslint-disable-next-line max-classes-per-file
+import {
+  Component, Directive, HostListener, inject, Input
+} from '@angular/core';
+import {
+  MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef
+} from '@angular/material/dialog';
+import { SafeResourceUrl } from '@angular/platform-browser';
+
+@Directive({
+  selector: '[imageFullscreen]',
+  standalone: true
+})
+export class ImageFullscreenDirective {
+  @Input() imgSrc!: SafeResourceUrl;
+  @Input() alt!: string;
+
+  readonly dialog = inject(MatDialog);
+
+  @HostListener('click') onClick() {
+    this.openFullScreenDialog(this.imgSrc, this.alt);
+  }
+
+  openFullScreenDialog(src: SafeResourceUrl, alt: string): void {
+    this.dialog.open(ImageFullscreenDialog, {
+      data: { src, alt },
+      panelClass: 'image-fullscreen-dialog'
+    });
+  }
+}
+
+@Component({
+  standalone: true,
+  imports: [MatDialogModule],
+  template: `
+    <mat-dialog-content (click)="dialogRef.close()">
+      <img [style.padding.px]="5" [src]="data.src" [alt]="data.alt">
+    </mat-dialog-content>
+  `
+})
+export class ImageFullscreenDialog {
+  readonly data = inject<{ src: string, alt: string }>(MAT_DIALOG_DATA);
+
+  constructor(public dialogRef: MatDialogRef<ImageFullscreenDialog>) { }
+}

projects/common/shared.module.ts

@@ -87,6 +87,7 @@ import { MathTableComponent } from './components/input-elements/math-table.compo
 import { TextAreaMathComponent } from './components/input-elements/text-area-math.component';
 import { DragImageComponent } from './components/input-elements/drop-list/drag-image.component';
 import { DraggableDirective } from './components/input-elements/drop-list/draggable.directive';
+import { ImageFullscreenDirective } from 'common/directives/image-fullscreen.directive';
 
 @NgModule({
   imports: [
@@ -112,7 +113,8 @@ import { DraggableDirective } from './components/input-elements/drop-list/dragga
     MatListModule,
     CdkConnectedOverlay,
     CdkOverlayOrigin,
-    DraggableDirective
+    DraggableDirective,
+    ImageFullscreenDirective
   ],
   declarations: [
     ButtonComponent,