Skip to content
Snippets Groups Projects
Commit 9b4d090c authored by rhenck's avatar rhenck
Browse files

Add fullscreen view of image items

#662
parent 19c32c40
No related branches found
No related tags found
No related merge requests found
Pipeline #61049 failed
......@@ -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
......
......@@ -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%;
}
......@@ -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'">
......
......@@ -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'">
......
......@@ -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>
......
......@@ -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);
}
}
}
// 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>) { }
}
......@@ -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,
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment