feat: allow to focus the viewport programmatically

SchweizerischeBundesbahnen · Feb 25, 2019 · 36e1387 · 36e1387
1 parent ff865fc
commit 36e1387
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/projects/scion/viewport/src/lib/viewport.component.scss b/projects/scion/viewport/src/lib/viewport.component.scss
@@ -8,6 +8,7 @@
   display: block;
   position: relative; // positioned anchor for viewport and scrollbars
   overflow: hidden;
+  outline: none;
   @include hide-scrollbars-when-inactive();
 
   > div.viewport {
@@ -16,7 +17,6 @@
     grid-template-columns: var(--grid-template-columns);
     grid-template-rows: var(--grid-template-rows);
     gap: var(--gap);
-
     outline: none;
     // use momentum-based scrolling so that the viewport client continues to scroll for a while after finishing the scroll gesture
     // and removing the finger from the touchscreen.

diff --git a/projects/scion/viewport/src/lib/viewport.component.ts b/projects/scion/viewport/src/lib/viewport.component.ts
@@ -8,7 +8,7 @@
  *  SPDX-License-Identifier: EPL-2.0
  */
 
-import { Component, DoCheck, ElementRef, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, Output, ViewChild } from '@angular/core';
+import { Component, DoCheck, ElementRef, EventEmitter, HostBinding, HostListener, Input, KeyValueDiffer, KeyValueDiffers, Output, ViewChild } from '@angular/core';
 import { NULL_DIMENSION, SciDimension } from '@scion/dimension';
 import { SciNativeScrollbarTrackSizeProvider } from './native-scrollbar-track-size-provider.service';
 
@@ -42,6 +42,9 @@ export class SciViewportComponent implements DoCheck {
   private _viewportDimension: SciDimension = NULL_DIMENSION;
   private _viewportClientDiffer: KeyValueDiffer<string, any>;
 
+  @HostBinding('attr.tabindex')
+  public tabindex = -1; // make the viewport programmatically focusable but do not include it in the tab order
+
   /**
    * @internal
    */
@@ -67,6 +70,11 @@ export class SciViewportComponent implements DoCheck {
     this._viewportClientDiffer = differs.find({}).create();
   }
 
+  @HostListener('focus')
+  public focus(): void { // do not rename to expose the same focus method like `HTMLElement.focus()`.
+    this._viewport && this._viewport.focus();
+  }
+
   /**
    * @internal
    */

diff --git a/projects/scion/workbench/src/lib/view/view.component.ts b/projects/scion/workbench/src/lib/view/view.component.ts
@@ -76,7 +76,7 @@ export class ViewComponent implements AfterViewInit, OnDestroy {
   }
 
   private onActivateView(): void {
-    this._viewport.viewportElement.focus();
+    this._viewport.focus();
     this._viewport.scrollTop = this._view.scrollTop;
     this._viewport.scrollLeft = this._view.scrollLeft;
   }