From c17352e433cdc2734cc9dcd9598fa4ad92ddc90a Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Thu, 25 Jun 2020 17:36:44 +0200
Subject: [PATCH] Ctrl click for content items.

---
 .../shared/list/content.component.html        |  2 +-
 .../angular/tab-router-link.directive.ts      | 38 +++++++++++++++++++
 frontend/app/framework/declarations.ts        |  1 +
 frontend/app/framework/module.ts              |  4 +-
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/framework/angular/tab-router-link.directive.ts

diff --git a/frontend/app/features/content/shared/list/content.component.html b/frontend/app/features/content/shared/list/content.component.html
index 59acf4ae4..e8857bd87 100644
--- a/frontend/app/features/content/shared/list/content.component.html
+++ b/frontend/app/features/content/shared/list/content.component.html
@@ -1,4 +1,4 @@
-<tr [routerLink]="link">
+<tr [sqxTabRouterLink]="link">
     <td class="cell-select inline-edit" sqxStopClick>
         <input type="checkbox" class="form-check"
             [ngModel]="selected" 
diff --git a/frontend/app/framework/angular/tab-router-link.directive.ts b/frontend/app/framework/angular/tab-router-link.directive.ts
new file mode 100644
index 000000000..36b07f117
--- /dev/null
+++ b/frontend/app/framework/angular/tab-router-link.directive.ts
@@ -0,0 +1,38 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Directive, HostListener, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Directive({
+    selector: '[sqxTabRouterLink]'
+})
+export class TabRouterlinkDirective {
+    @Input('sqxTabRouterLink')
+    public commands: any;
+
+    constructor(
+        private readonly router: Router,
+        private readonly route: ActivatedRoute
+    ) {
+    }
+
+    @HostListener('click', ['$event'])
+    public onClick(event: MouseEvent) {
+        const urlTree = this.router.createUrlTree(this.commands, {
+            relativeTo: this.route
+        });
+
+        if (event.ctrlKey) {
+            const url = this.router.serializeUrl(urlTree);
+
+            window.open(url, '_blank');
+        } else {
+            this.router.navigateByUrl(urlTree);
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/app/framework/declarations.ts b/frontend/app/framework/declarations.ts
index d4c2c23a8..a58921d19 100644
--- a/frontend/app/framework/declarations.ts
+++ b/frontend/app/framework/declarations.ts
@@ -70,6 +70,7 @@ export * from './angular/status-icon.component';
 export * from './angular/stop-click.directive';
 export * from './angular/sync-scrolling.directive';
 export * from './angular/sync-width.directive';
+export * from './angular/tab-router-link.directive';
 export * from './angular/template-wrapper.directive';
 export * from './angular/title.component';
 export * from './internal';
diff --git a/frontend/app/framework/module.ts b/frontend/app/framework/module.ts
index 83e35b0ab..08797850e 100644
--- a/frontend/app/framework/module.ts
+++ b/frontend/app/framework/module.ts
@@ -12,7 +12,7 @@ import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, ConfirmClickDirective, ControlErrorsComponent, CopyDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, HighlightPipe, HoverBackgroundDirective, IFrameEditorComponent, ImageSourceDirective, IndeterminateValueDirective, ISODatePipe, JsonEditorComponent, KeysPipe, KNumberPipe, LightenPipe, ListViewComponent, LoadingInterceptor, LoadingService, LocalStoreService, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MoneyPipe, MonthPipe, OnboardingService, OnboardingTooltipComponent, PagerComponent, PanelComponent, PanelContainerDirective, ParentLinkDirective, PopupLinkDirective, ProgressBarComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, SyncScollingDirective, SyncWidthDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, TooltipDirective, TransformInputDirective } from './declarations';
+import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterceptor, CanDeactivateGuard, CheckboxGroupComponent, ClipboardService, CodeComponent, CodeEditorComponent, ColorPickerComponent, ConfirmClickDirective, ControlErrorsComponent, CopyDirective, DarkenPipe, DatePipe, DateTimeEditorComponent, DayOfWeekPipe, DayPipe, DialogRendererComponent, DialogService, DisplayNamePipe, DropdownComponent, DurationPipe, EditableTitleComponent, ExternalLinkDirective, FileDropDirective, FileSizePipe, FocusOnInitDirective, FormAlertComponent, FormErrorComponent, FormHintComponent, FromNowPipe, FullDateTimePipe, HighlightPipe, HoverBackgroundDirective, IFrameEditorComponent, ImageSourceDirective, IndeterminateValueDirective, ISODatePipe, JsonEditorComponent, KeysPipe, KNumberPipe, LightenPipe, ListViewComponent, LoadingInterceptor, LoadingService, LocalStoreService, MarkdownPipe, MessageBus, ModalDialogComponent, ModalDirective, ModalPlacementDirective, MoneyPipe, MonthPipe, OnboardingService, OnboardingTooltipComponent, PagerComponent, PanelComponent, PanelContainerDirective, ParentLinkDirective, PopupLinkDirective, ProgressBarComponent, ResizedDirective, ResizeService, ResourceLoaderService, RootViewComponent, SafeHtmlPipe, SafeUrlPipe, ScrollActiveDirective, ShortcutComponent, ShortcutService, ShortDatePipe, ShortTimePipe, StarsComponent, StatusIconComponent, StopClickDirective, SyncScollingDirective, SyncWidthDirective, TabRouterlinkDirective, TagEditorComponent, TemplateWrapperDirective, TempService, TitleComponent, TitleService, ToggleComponent, TooltipDirective, TransformInputDirective } from './declarations';
 
 @NgModule({
     imports: [
@@ -87,6 +87,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         StopClickDirective,
         SyncScollingDirective,
         SyncWidthDirective,
+        TabRouterlinkDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,
@@ -163,6 +164,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
         StopClickDirective,
         SyncScollingDirective,
         SyncWidthDirective,
+        TabRouterlinkDirective,
         TagEditorComponent,
         TemplateWrapperDirective,
         TitleComponent,