components/open-event/open-event.component.ts

0001 import {
0002   ChangeDetectionStrategy,
0003   Component,
0004   ElementRef,
0005   TemplateRef,
0006   ViewChild,
0007   ViewContainerRef,
0008   inject,
0009 } from '@angular/core';
0010 import { MatIconButton } from '@angular/material/button';
0011 import { MatDialog, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
0012 import { MatIcon } from '@angular/material/icon';
0013 import { MatTooltip } from '@angular/material/tooltip';
0014 import { DataSelectorComponent } from '../data-selector/data-selector.component';
0015
0016 /**
0017  * "Open data" toolbar button of the display: drops down the data selector
0018  * (presets, physics cases, or geometry/events by URL or file). Show applies
0019  * the choice to the running display through the selector's shared path and
0020  * closes the panel. The same control sits on the config page.
0021  */
0022 @Component({
0023   selector: 'app-open-event',
0024   templateUrl: './open-event.component.html',
0025   styleUrls: ['./open-event.component.scss'],
0026   changeDetection: ChangeDetectionStrategy.OnPush,
0027   imports: [MatDialogClose, MatIcon, MatIconButton, MatTooltip, DataSelectorComponent],
0028 })
0029 export class OpenEventComponent {
0030   private readonly dialog = inject(MatDialog);
0031   private readonly viewContainerRef = inject(ViewContainerRef);
0032
0033   @ViewChild('openBtn', { read: ElementRef }) openBtn!: ElementRef<HTMLElement>;
0034   @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<unknown>;
0035   private dialogRef: MatDialogRef<unknown> | null = null;
0036
0037   openDialog(): void {
0038     if (this.dialogRef) {
0039       this.closeDialog();
0040       return;
0041     }
0042
0043     // Hangs from the button's left edge, clamped to the viewport so the panel
0044     // stays reachable when the button sits near the right of a narrow window
0045     const rect = this.openBtn.nativeElement.getBoundingClientRect();
0046     const dialogWidth = 480;
0047     const left = Math.max(8, Math.min(rect.left, window.innerWidth - dialogWidth - 8));
0048     const top = rect.bottom + 12;
0049
0050     this.dialogRef = this.dialog.open(this.dialogTemplate, {
0051       position: { top: `${top}px`, left: `${left}px` },
0052       hasBackdrop: false,
0053       panelClass: 'custom-position-dialog',
0054       autoFocus: false,
0055       viewContainerRef: this.viewContainerRef,
0056     });
0057     this.dialogRef.afterClosed().subscribe(() => {
0058       this.dialogRef = null;
0059     });
0060   }
0061
0062   closeDialog(): void {
0063     this.dialogRef?.close();
0064   }
0065 }