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> </button>
</div> </div>
<ng-container *ngIf="node.isNorm()"> <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>
<ng-container *ngIf="node.type === 'markdown'"> <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>
<ng-container *ngIf="node.type === 'database_ref'"> <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>
<ng-container *ngIf="node.type === 'code_ref'"> <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>
<ng-container *ngIf="node.type === 'file_ref'"> <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>
<ng-container *ngIf="node.isForm()"> <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> </ng-container>
</div> </div>
<button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)"> <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 HostRecord from '../../structures/HostRecord';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular'; import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular';
@ -23,8 +23,13 @@ export class EditorPage implements OnInit {
@Input() hosted = false; @Input() hosted = false;
@Input() version?: number; @Input() version?: number;
@ViewChildren('nodeContainer') nodeContainers;
@ViewChildren('nodeContainer', { read: ElementRef }) nodeElements;
public pageType?: string; public pageType?: string;
protected scrollToNodeId?: string;
@Input() @Input()
set readonly(val: boolean) { set readonly(val: boolean) {
this.editorService.forceReadonly = val; this.editorService.forceReadonly = val;
@ -48,6 +53,11 @@ export class EditorPage implements OnInit {
this.route.params.subscribe(params => { this.route.params.subscribe(params => {
this.pageId = params.id; this.pageId = params.id;
debug('Got page ID from route:', this.pageId, params); 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(); this.editorService = editorService.getEditor();
@ -55,14 +65,30 @@ export class EditorPage implements OnInit {
ngOnInit() {} ngOnInit() {}
ionViewDidEnter() { async ionViewDidEnter() {
debug('Ion view did enter editor page.'); debug('Ion view did enter editor page.');
if ( this.pageId ) { if ( this.pageId ) {
this.editorService.startEditing(this.pageId, this.version); await this.editorService.startEditing(this.pageId, this.version);
} else if ( !this.hosted ) { } 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']) @HostListener('document:keydown.control.s', ['$event'])