auto-scroll to footer when growing and visible

This commit is contained in:
Nicolas Constant 2019-08-15 19:40:17 -04:00
parent 956b8894a0
commit 733c21af7d
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
2 changed files with 16 additions and 3 deletions

View File

@ -21,7 +21,7 @@
(suggestionSelectedEvent)="suggestionSelected($event)" (hasSuggestionsEvent)="suggestionsChanged($event)">
</app-autosuggest>
<div class="status-editor__footer">
<div class="status-editor__footer" #footer>
<button type="submit" title="reply" class="status-editor__footer--send-button" *ngIf="statusReplyingToWrapper">
<span *ngIf="!isSending">REPLY!</span>
<app-waiting-animation class="waiting-icon" *ngIf="isSending"></app-waiting-animation>

View File

@ -111,6 +111,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
@Output() onClose = new EventEmitter();
@ViewChild('reply') replyElement: ElementRef;
@ViewChild('fileInput') fileInputElement: ElementRef;
@ViewChild('footer') footerElement: ElementRef;
@ViewChild(ContextMenuComponent) public contextMenu: ContextMenuComponent;
private _isDirectMention: boolean;
@ -223,7 +224,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
}
private getWordByPos(str, pos) {
str = str.replace(/(\r\n|\n|\r)/gm,"");
str = str.replace(/(\r\n|\n|\r)/gm, "");
var left = str.substr(0, pos);
var right = str.substr(pos);
@ -512,7 +513,7 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
let mentionExtraChars = 0;
let links = status.split(' ').filter(x => x.startsWith('http://') || x.startsWith('https://'));
for (let link of links) {
if(link.length > 23){
if (link.length > 23) {
mentionExtraChars += link.length - 23;
}
}
@ -612,9 +613,21 @@ export class CreateStatusComponent implements OnInit, OnDestroy {
if (scrolling > 110) {
this.replyElement.nativeElement.style.height = `0px`;
this.replyElement.nativeElement.style.height = `${this.replyElement.nativeElement.scrollHeight}px`;
setTimeout(() => {
if (this.checkVisible(this.footerElement.nativeElement)) {
this.footerElement.nativeElement.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'start' });
}
}, 0);
}
}
private checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}
public onContextMenu($event: MouseEvent): void {
this.contextMenuService.show.next({
// Optional - if unspecified, all context menu components will open