From 36e1387a5277854f9b781f6c9963ff1e02c86735 Mon Sep 17 00:00:00 2001 From: Daniel Wiehl Date: Sun, 24 Feb 2019 01:48:04 +0100 Subject: [PATCH] feat: allow to focus the viewport programmatically --- .../scion/viewport/src/lib/viewport.component.scss | 2 +- projects/scion/viewport/src/lib/viewport.component.ts | 10 +++++++++- .../scion/workbench/src/lib/view/view.component.ts | 2 +- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/projects/scion/viewport/src/lib/viewport.component.scss b/projects/scion/viewport/src/lib/viewport.component.scss index 6ecd46842..c8eb2bfcb 100644 --- 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 index 811d86174..13d1cf7bf 100644 --- 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; + @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 index a3770734a..e13f86226 100644 --- 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; }