Skip to content
Permalink
Browse files

feat(slimscroll): implement slimscroll in console output

  • Loading branch information
jkuri committed Sep 20, 2017
1 parent cebf63b commit 9620379c419830c7e2af894e935c55375584f39f
@@ -1,6 +1,6 @@
<div class="window-terminal-container dracula-ansi-theme" *ngIf="!noData">
<div class="window-terminal-container dracula-ansi-theme" *ngIf="!noData" slimScroll [options]="scrollOptions" [scrollEvents]="scrollEvents">
<div class="terminal" *ngFor="let cmd of commands; let i = index;" [id]="i">
<div class="command-line" (click)="toogleCommand(i)" [class.is-opened]="cmd.visible">
<div class="command-line" (click)="toggleCommand(i)" [class.is-opened]="cmd.visible">
<span class="command" [innerHTML]="cmd.command"></span>
<span class="time" *ngIf="cmd.time">{{ cmd.time }}</span>
<span class="time" *ngIf="!cmd.time">
@@ -9,6 +9,7 @@ import {
} from '@angular/core';
import { DOCUMENT } from '@angular/common';
import * as AnsiUp from 'ansi_up';
import { SlimScrollEvent, ISlimScrollOptions } from 'ngx-slimscroll';

@Component({
selector: 'app-terminal',
@@ -21,13 +22,26 @@ export class AppTerminalComponent implements OnInit {
commands: { command: string, visible: boolean, output: string, time: string }[];
noData: boolean;
initScroll: boolean;
scrollOptions: ISlimScrollOptions;
scrollEvents: EventEmitter<SlimScrollEvent>;

constructor(
private elementRef: ElementRef,
@Inject(DOCUMENT) private document: any
) {
this.commands = [];
this.initScroll = true;
this.scrollOptions = {
barBackground: '#666',
gridBackground: '#000',
barBorderRadius: '10',
barWidth: '7',
gridWidth: '7',
barMargin: '2px 5px',
gridMargin: '2px 5px',
gridBorderRadius: '10',
alwaysVisible: false
};

this.scrollEvents = new EventEmitter<SlimScrollEvent>();
}

ngOnInit() {
@@ -115,31 +129,28 @@ export class AppTerminalComponent implements OnInit {
});
}

setTimeout(() => this.checkScrollBottom());
setTimeout(() => {
const ev: SlimScrollEvent = {
type: 'scrollToBottom',
easing: 'linear',
duration: 50
};
this.scrollEvents.emit(ev);
});
}

checkScrollBottom(): void {
const body = this.document.body;

if (this.initScroll) {
window.scrollTo(0, body.scrollHeight);
this.initScroll = false;
} else {
const top = window.pageYOffset || this.document.documentElement.scrollTop ||
this.document.body.scrollTop || 0;
const scrollHeight = this.document.body.scrollHeight;
const clientHeight = this.document.body.clientHeight;
const height = scrollHeight - clientHeight;
const diff = 250;

if (height - diff < top) {
window.scrollTo(0, body.scrollHeight);
}
}
toggleCommand(index: number) {
this.commands[index].visible = !this.commands[index].visible;
setTimeout(() => this.recalculate());
}

toogleCommand(index: number) {
this.commands[index].visible = !this.commands[index].visible;
recalculate(): void {
const event: SlimScrollEvent = {
type: 'recalculate',
easing: 'linear'
};

this.scrollEvents.emit(event);
}

getDuration(millis: number): string {
@@ -14,7 +14,7 @@
border-radius: 10px
box-shadow: 1px 2px 10px rgba($background, 0.7)
border: 1px solid $divider

height: 600px

.terminal
display: block
@@ -26,14 +26,12 @@
.command-line
display: flex
align-items: center
margin: 2px 5px
margin: 1px 5px
cursor: pointer
height: 20px
position: relative
padding-left: 15px

&:hover, &.is-opened
background: lighten(#000000, 7)
background: lighten(#000000, 10)

.icon
margin-right: 3px
@@ -46,19 +44,18 @@
.command
font-size: 12px
color: $white
font-weight: $weight-semibold
font-weight: $weight-bold !important

span
font-size: 12px
color: $white
font-weight: $weight-semibold

.time
position: absolute
display: block
font-size: 12px
color: $white
right: 5px
right: 10px
outline: none
border: none

@@ -76,7 +73,8 @@
margin: 0 !important
font-family: $font-family-roboto-mono
font-size: 12px
padding: 10px 10px 10px 25px !important
padding: 0 25px 0 25px !important
background: #000000
white-space: pre-wrap
word-wrap: break-word
font-weight: $weight-normal !important

0 comments on commit 9620379

Please sign in to comment.
You can’t perform that action at this time.