markup-hyperlink-component.component.html
36ec30717412master

markup-hyperlink-component.component.html
View Options

			<!-- hyperlink opening external link -->
			<a *ngIf="segment[3].length === 1 && action === 'external'"
			[attr.href]= segment[3][0].link
			target="_blank"
			[ngClass]="segment[2]">
			{{segment[1]}}
			</a>

			<!-- hyperlink opening menu -->
			<a *ngIf="segment[3].length === 1 && action === 'menu'" [matMenuTriggerFor]="simpleMenu" [ngClass]="segment[2]">
			{{segment[1]}}
			</a>

			<!-- If there is a semantic overlap, e.g. the segment is polysemantic, then the
			style is defined by class "polysemantic" and onClick opens a menu with submenues, always -->
			<a *ngIf="segment[3].length > 1" [matMenuTriggerFor]="polyMenuOpen" [matMenuTriggerData]= segment[3] class = "semantic-markup polysemantic">
			{{segment[1]}}
			</a>

			<!-- simple menu -->
			<mat-menu #simpleMenu="matMenu">
			<div mat-menu-item title = 'open resource "{{segment[3][0].link}}" in data browser'>open resource in data browser</div>
			<div mat-menu-item title = 'edit text "{{segment[3][0].linkText}}"'>edit text</div>
			<div mat-menu-item title = 'edit semantic annotation "{{segment[3][0].cssClass}}"'>edit semantic annotation "{{segment[3][0].cssClass}}"</div>
			<div mat-menu-item title = 'delete semantic annotation "{{segment[3][0].cssClass}}"'>delete semantic annotation "{{segment[3][0].cssClass}}"</div>
			</mat-menu>

			<!-- submenu if polysemantic -->
			<mat-menu #polyMenuOpen="matMenu" class="poly-menu">
			<a mat-menu-item *ngFor="let item of segment[3], let i = index" [attr.href]= item.link target="_blank">
			<span [class]="item.cssClass">{{item.linkText}}</span>
			</a>
			</mat-menu>