mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2024-12-05 01:31:32 +00:00
Code Issues Releases Wiki Activity

Move scrolling logic to MessagesComponent

Browse Source
This commit is contained in:
Kristóf Tóth 2019-10-03 13:04:32 +02:00
parent d6874335cd
commit 25433a1ccd
3 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/dashboard/dashboard.component.html
View File

@ -1,10 +1,8 @@
<div [attr.class]="layout | async"> <div [attr.class]="layout | async">
<div class="tfw-grid-main-components"> <div class="tfw-grid-main-components">
<div class="tfw-header"><app-header></app-header></div> <div class="tfw-header"><app-header></app-header></div>
<div [ngClass]="{'hide-attribute': hideMessages | async}" <div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages">
class="tfw-messages" <app-messages></app-messages>
#tfwmessages>
<app-messages (newMessageEvent)="scrollMessagesToBottom()"></app-messages>
</div> </div>
<div class="tfw-web tao-grid-top-left" <div class="tfw-web tao-grid-top-left"
[ngClass]="{'deploy-blur': deploying || (polling | async)}"> [ngClass]="{'deploy-blur': deploying || (polling | async)}">

12
src/app/dashboard/dashboard.component.ts
View File

@ -7,6 +7,7 @@ import { DashboardConfigService } from '../services/config.service';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { delay, retryWhen, tap } from 'rxjs/operators'; import { delay, retryWhen, tap } from 'rxjs/operators';
import { FSMUpdateService } from '../services/fsmupdate.service'; import { FSMUpdateService } from '../services/fsmupdate.service';
import { MessagesComponent } from '../messages/messages.component';
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
@ -18,7 +19,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
polling = new BehaviorSubject<boolean>(false); polling = new BehaviorSubject<boolean>(false);
deploymentNotificationSubscription: Subscription; deploymentNotificationSubscription: Subscription;
@ViewChild('webiframe', {static: false}) webiframe: ElementRef; @ViewChild('webiframe', {static: false}) webiframe: ElementRef;
@ViewChild('tfwmessages', {static: false}) messages: ElementRef; @ViewChild(MessagesComponent, {static: false}) messages: MessagesComponent;
@ViewChild('urlbar', {static: false}) urlbar: ElementRef; @ViewChild('urlbar', {static: false}) urlbar: ElementRef;
layout = this.configService.layout; layout = this.configService.layout;
@ -69,7 +70,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
subscribeResizeOnLayoutChange() { subscribeResizeOnLayoutChange() {
this.configService.layout.subscribe(() => { this.configService.layout.subscribe(() => {
this.emitResizeEvent(); this.emitResizeEvent();
setTimeout(() => this.scrollMessagesToBottom(), 0); setTimeout(() => this.messages.scrollToBottom(), 0);
}); });
} }
@ -132,13 +133,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
this.terminalMenuItem.next(item); this.terminalMenuItem.next(item);
} }
scrollMessagesToBottom() {
const element = this.messages.nativeElement;
// This must be done in the Angular event loop to avoid messing up
// change detection (not in the template like ConsoleComponent does)
element.scrollTop = element.scrollHeight;
}
iframeLoad() { iframeLoad() {
if (this.webiframe && this.iframeUrl.value) { if (this.webiframe && this.iframeUrl.value) {
const href = this.webiframe.nativeElement.contentWindow.frames.location.href; const href = this.webiframe.nativeElement.contentWindow.frames.location.href;

11
src/app/messages/messages.component.ts
View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output } from '@angular/core'; import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
import { MessageData, Message } from '../message-types/bot-messages'; import { MessageData, Message } from '../message-types/bot-messages';
import { MarkdownService } from '../services/markdown.service'; import { MarkdownService } from '../services/markdown.service';
import { WebSocketService } from '../services/websocket.service'; import { WebSocketService } from '../services/websocket.service';
@ -19,7 +19,8 @@ export class MessagesComponent implements OnInit {
constructor( constructor(
private markdownService: MarkdownService, private markdownService: MarkdownService,
private websocketService: WebSocketService, private websocketService: WebSocketService,
private changeDetectorRef: ChangeDetectorRef private changeDetectorRef: ChangeDetectorRef,
private ref: ElementRef
) {} ) {}
ngOnInit() { ngOnInit() {
@ -27,6 +28,7 @@ export class MessagesComponent implements OnInit {
message => { message => {
this.writeMessage(message); this.writeMessage(message);
this.newMessageEvent.emit(); this.newMessageEvent.emit();
this.scrollToBottom();
}); });
this.websocketService.connect(); this.websocketService.connect();
@ -41,6 +43,11 @@ export class MessagesComponent implements OnInit {
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
} }
scrollToBottom() {
const element = this.ref.nativeElement.parentElement;
element.scrollTop = element.scrollHeight;
}
transformMessage(message: MessageData) { transformMessage(message: MessageData) {
message.message = this.convertMarkdownToHTML(message.message); message.message = this.convertMarkdownToHTML(message.message);
if (!message.timestamp) { if (!message.timestamp) {