Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

Scroll to element when node is selected in nav sidebar
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Garrett Mills 2020-12-24 12:11:46 -06:00
parent 0c93860816
commit 9f104e8744
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
2 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/pages/editor/editor.page.html
View File

@ -59,22 +59,22 @@
</button>
</div>
<ng-container *ngIf="node.isNorm()">
<editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-norm>
<editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-norm>
</ng-container>
<ng-container *ngIf="node.type === 'markdown'">
<editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-markdown>
<editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-markdown>
</ng-container>
<ng-container *ngIf="node.type === 'database_ref'">
<editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-database>
<editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-database>
</ng-container>
<ng-container *ngIf="node.type === 'code_ref'">
<editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-code>
<editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-code>
</ng-container>
<ng-container *ngIf="node.type === 'file_ref'">
<editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-files>
<editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-files>
</ng-container>
<ng-container *ngIf="node.isForm()">
<editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID"></editor-node-form-input>
<editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-node-form-input>
</ng-container>
</div>
<button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">

34
src/app/pages/editor/editor.page.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener, Input, OnInit} from '@angular/core';
import {Component, ElementRef, HostListener, Input, OnInit, ViewChildren} from '@angular/core';
import HostRecord from '../../structures/HostRecord';
import {ActivatedRoute, Router} from '@angular/router';
import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular';
@ -23,8 +23,13 @@ export class EditorPage implements OnInit {
@Input() hosted = false;
@Input() version?: number;
@ViewChildren('nodeContainer') nodeContainers;
@ViewChildren('nodeContainer', { read: ElementRef }) nodeElements;
public pageType?: string;
protected scrollToNodeId?: string;
@Input()
set readonly(val: boolean) {
this.editorService.forceReadonly = val;
@ -48,6 +53,11 @@ export class EditorPage implements OnInit {
this.route.params.subscribe(params => {
this.pageId = params.id;
debug('Got page ID from route:', this.pageId, params);
if ( params.node_id ) {
debug('Scroll to node ID:', params.node_id);
this.scrollToNodeId = params.node_id;
}
});
this.editorService = editorService.getEditor();
@ -55,14 +65,30 @@ export class EditorPage implements OnInit {
ngOnInit() {}
ionViewDidEnter() {
async ionViewDidEnter() {
debug('Ion view did enter editor page.');
if ( this.pageId ) {
this.editorService.startEditing(this.pageId, this.version);
await this.editorService.startEditing(this.pageId, this.version);
} else if ( !this.hosted ) {
this.router.navigate(['/home']);
await this.router.navigate(['/home']);
}
setTimeout(() => {
if ( this.scrollToNodeId ) {
debug('Scrolling to node.');
const nodes = this.nodeContainers.toArray();
const elements = this.nodeElements.toArray();
debug('Nodes', {nodes, elements});
nodes.forEach((node, i) => {
if ( node.nodeId === this.scrollToNodeId ) {
elements[i].nativeElement.scrollIntoView();
}
});
}
}, 150);
}
@HostListener('document:keydown.control.s', ['$event'])