diff --git a/src/app/components/editor/host-options/host-options.component.html b/src/app/components/editor/host-options/host-options.component.html index 506db30..6862e6f 100644 --- a/src/app/components/editor/host-options/host-options.component.html +++ b/src/app/components/editor/host-options/host-options.component.html @@ -1,6 +1,9 @@ - - + + +
+ +
{{ menuItems[i].name }}
diff --git a/src/app/components/editor/host-options/host-options.component.ts b/src/app/components/editor/host-options/host-options.component.ts index 75cda5a..6dccbed 100644 --- a/src/app/components/editor/host-options/host-options.component.ts +++ b/src/app/components/editor/host-options/host-options.component.ts @@ -14,13 +14,33 @@ export class HostOptionsComponent implements OnInit { @Input() event: Event; @Input() hostRecord: HostRecord; - public menuItems: Array<{name: string, icon: string, value: string, type?: string}> = []; - protected possibleMenuItems: Array<{name: string, icon: string, value: string, type?: string}> = [ + public menuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = []; + protected possibleMenuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [ + { + name: 'Move Up', + icons: ['fa-chevron-up'], + value: 'move_up', + }, + { + name: 'Add Node Before', + icons: ['fa-plus'], + value: 'add_before', + }, { name: 'Delete Node', - icon: 'trash', + icon: 'fa-trash', value: 'delete_node', }, + { + name: 'Add Node After', + icons: ['fa-plus'], + value: 'add_after', + }, + { + name: 'Move Down', + icons: ['fa-chevron-down'], + value: 'move_down', + }, ]; constructor( @@ -37,7 +57,7 @@ export class HostOptionsComponent implements OnInit { } } - async onSelect(value) { - await this.popover.dismiss(value); + async onSelect(event: MouseEvent, value) { + await this.popover.dismiss({event, value}); } } diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts index 0d7e65a..f8bbb21 100644 --- a/src/app/pages/editor/editor.page.ts +++ b/src/app/pages/editor/editor.page.ts @@ -68,15 +68,24 @@ export class EditorPage implements OnInit { }); popover.onDidDismiss().then(result => { - if ( result.data === 'delete_node' ) { + const { event: dismissEvent , value } = result.data; + if ( value === 'delete_node' ) { this.editorService.deleteNode(node.UUID); + } else if ( value === 'move_up' ) { + this.editorService.moveNode(node, 'up'); + } else if ( value === 'move_down' ) { + this.editorService.moveNode(node, 'down'); + } else if ( value === 'add_before' ) { + this.onAddClick(dismissEvent, 'before', node.UUID); + } else if ( value === 'add_after' ) { + this.onAddClick(dismissEvent, 'after', node.UUID); } }); await popover.present(); } - async onAddClick(event: MouseEvent) { + async onAddClick(event: MouseEvent, position?: 'before' | 'after', positionNodeId?: string) { if ( !this.editorService.canEdit() ) { return; } @@ -88,7 +97,7 @@ export class EditorPage implements OnInit { popover.onDidDismiss().then(result => { console.log('adding node', result.data); - this.editorService.addNode(result.data); + this.editorService.addNode(result.data, position, positionNodeId); }); // popover.onDidDismiss().then(arg => { diff --git a/src/app/service/editor.service.ts b/src/app/service/editor.service.ts index 0119d4e..f82cea7 100644 --- a/src/app/service/editor.service.ts +++ b/src/app/service/editor.service.ts @@ -91,6 +91,32 @@ export class EditorService { })); await this.saveNodesAsPage(this.currentPage, this.currentNodes); + this.dirtyOverride = false; + } + + async moveNode(node: HostRecord, direction: 'up' | 'down') { + if ( !this.currentPage ) { + throw new NoPageLoadedError(); + } + + const nodeIndex = this.currentNodes.findIndex(maybeNode => maybeNode.UUID === node.UUID); + if ( nodeIndex < 0 ) { + return; + } + + if ( direction === 'up' && nodeIndex > 0 ) { + const otherIdx = nodeIndex - 1; + const otherNode = this.currentNodes[otherIdx]; + this.currentNodes[otherIdx] = this.currentNodes[nodeIndex]; + this.currentNodes[nodeIndex] = otherNode; + } else if ( direction === 'down' && nodeIndex !== (this.currentNodes.length - 1) ) { + const otherIdx = nodeIndex + 1; + const otherNode = this.currentNodes[otherIdx]; + this.currentNodes[otherIdx] = this.currentNodes[nodeIndex]; + this.currentNodes[nodeIndex] = otherNode; + } + + this.dirtyOverride = true; } async saveNodesAsPage(page: PageRecord, nodes: HostRecord[]): Promise {