diff --git a/package-lock.json b/package-lock.json index fef96fda..badbe27d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2742,6 +2742,11 @@ } } }, + "compute-scroll-into-view": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-1.0.11.tgz", + "integrity": "sha512-uUnglJowSe0IPmWOdDtrlHXof5CTIJitfJEyITHBW6zDVOGu9Pjk5puaLM73SLcwak0L4hEjO7Td88/a6P5i7A==" + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -10321,6 +10326,14 @@ "ajv-keywords": "^3.1.0" } }, + "scroll-into-view-if-needed": { + "version": "2.2.20", + "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.20.tgz", + "integrity": "sha512-P9kYMrhi9f6dvWwTGpO5I3HgjSU/8Mts7xL3lkoH5xlewK7O9Obdc5WmMCzppln7bCVGNmf3qfoZXrpCeyNJXw==", + "requires": { + "compute-scroll-into-view": "1.0.11" + } + }, "scss-tokenizer": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", @@ -10638,6 +10651,14 @@ "integrity": "sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==", "dev": true }, + "smooth-scroll-into-view-if-needed": { + "version": "1.1.23", + "resolved": "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-1.1.23.tgz", + "integrity": "sha512-52177sj5yR2novVCB+vJRCYEUkHFz2mq5UKmm5wwIWs0ZtC1sotVaTjKBsuNzBPF4nOV1NxMctyD4V/VMmivCQ==", + "requires": { + "scroll-into-view-if-needed": "2.2.20" + } + }, "snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", diff --git a/package.json b/package.json index d0f72535..f74f2ea6 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "ng-pick-datetime": "^7.0.0", "ngx-contextmenu": "^5.2.0", "rxjs": "^6.4.0", + "smooth-scroll-into-view-if-needed": "^1.1.23", "tslib": "^1.9.0", "zone.js": "^0.8.29" }, diff --git a/src/app/components/stream/stream-statuses/stream-statuses.component.ts b/src/app/components/stream/stream-statuses/stream-statuses.component.ts index c48085ab..b9669d97 100644 --- a/src/app/components/stream/stream-statuses/stream-statuses.component.ts +++ b/src/app/components/stream/stream-statuses/stream-statuses.component.ts @@ -277,7 +277,7 @@ export class StreamStatusesComponent implements OnInit, OnDestroy { setTimeout(() => { var element = this.statustream.nativeElement as HTMLElement; element.focus(); - }, 500); + }, 0); return false; } diff --git a/src/app/components/stream/stream.component.ts b/src/app/components/stream/stream.component.ts index 76a07e18..ad71ad8e 100644 --- a/src/app/components/stream/stream.component.ts +++ b/src/app/components/stream/stream.component.ts @@ -61,7 +61,9 @@ export class StreamComponent implements OnInit { } focus(): boolean { - this.streamStatusesComponent.focus(); + if (!this.overlayActive) { + this.streamStatusesComponent.focus(); + } return false; } diff --git a/src/app/pages/streams-main-display/streams-main-display.component.ts b/src/app/pages/streams-main-display/streams-main-display.component.ts index a97d04fb..96c0309a 100644 --- a/src/app/pages/streams-main-display/streams-main-display.component.ts +++ b/src/app/pages/streams-main-display/streams-main-display.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit, OnDestroy, QueryList, ViewChildren, ElementRef } from "@angular/core"; import { Observable, Subscription } from "rxjs"; import { Select } from "@ngxs/store"; +import scrollIntoView from "smooth-scroll-into-view-if-needed"; import { StreamElement } from "../../states/streams.state"; import { NavigationService } from "../../services/navigation.service"; @@ -35,11 +36,21 @@ export class StreamsMainDisplayComponent implements OnInit, OnDestroy { private focusOnColumn(columnIndex: number): void { if (columnIndex > -1) { setTimeout(() => { - this.streamsElementRef.toArray()[columnIndex].nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); + let element = this.streamsElementRef.toArray()[columnIndex].nativeElement; + element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); + + const scrolling = >scrollIntoView(element, { behavior: 'smooth', block: 'nearest'}); + scrolling + .then(() => { + this.streamComponents.toArray()[columnIndex].focus(); + }); + + // setTimeout(() => { + // this.streamComponents.toArray()[columnIndex].focus(); + // }, 500); + }, 0); + - console.warn(this.streamComponents); - this.streamComponents.toArray()[columnIndex].focus(); - }); } } -} +} \ No newline at end of file