diff --git a/src/app/app.component.html b/src/app/app.component.html index 3c0a439..250f09f 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -31,7 +31,7 @@ - + Menu diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 96d77f9..7990df4 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -70,8 +70,9 @@ export class AppComponent implements OnInit { }); } - showOptions() { + showOptions($event) { this.popover.create({ + event: $event, component: OptionPickerComponent, componentProps: { toggleDark: () => this.toggleDark(), diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts index f88cec1..b0ddaf1 100644 --- a/src/app/components/components.module.ts +++ b/src/app/components/components.module.ts @@ -11,11 +11,45 @@ import {CodeComponent} from './editor/code/code.component'; import {MonacoEditorModule} from 'ngx-monaco-editor'; import {FilesComponent} from './editor/files/files.component'; import {OptionPickerComponent} from './option-picker/option-picker.component'; +import {HostOptionsComponent} from './editor/host-options/host-options.component'; @NgModule({ - declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent], - imports: [CommonModule, IonicModule, AgGridModule, FormsModule, MonacoEditorModule], - entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent], - exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent] + declarations: [ + HostComponent, + NodePickerComponent, + DatabaseComponent, + ColumnsComponent, + CodeComponent, + FilesComponent, + OptionPickerComponent, + HostOptionsComponent + ], + imports: [ + CommonModule, + IonicModule, + AgGridModule, + FormsModule, + MonacoEditorModule + ], + entryComponents: [ + HostComponent, + NodePickerComponent, + DatabaseComponent, + ColumnsComponent, + CodeComponent, + FilesComponent, + OptionPickerComponent, + HostOptionsComponent + ], + exports: [ + HostComponent, + NodePickerComponent, + DatabaseComponent, + ColumnsComponent, + CodeComponent, + FilesComponent, + OptionPickerComponent, + HostOptionsComponent + ] }) export class ComponentsModule {} diff --git a/src/app/components/editor/host-options/host-options.component.html b/src/app/components/editor/host-options/host-options.component.html new file mode 100644 index 0000000..506db30 --- /dev/null +++ b/src/app/components/editor/host-options/host-options.component.html @@ -0,0 +1,6 @@ + + + + {{ menuItems[i].name }} + + diff --git a/src/app/components/editor/host-options/host-options.component.scss b/src/app/components/editor/host-options/host-options.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/editor/host-options/host-options.component.ts b/src/app/components/editor/host-options/host-options.component.ts new file mode 100644 index 0000000..75cda5a --- /dev/null +++ b/src/app/components/editor/host-options/host-options.component.ts @@ -0,0 +1,43 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {PopoverController} from '@ionic/angular'; +import {EditorPage} from '../../../pages/editor/editor.page'; +import HostRecord from '../../../structures/HostRecord'; + +@Component({ + selector: 'editor-host-options', + templateUrl: './host-options.component.html', + styleUrls: ['./host-options.component.scss'], +}) +export class HostOptionsComponent implements OnInit { + @Input() editor: EditorPage; + @Input() index: number; + @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}> = [ + { + name: 'Delete Node', + icon: 'trash', + value: 'delete_node', + }, + ]; + + constructor( + protected popover: PopoverController, + ) { } + + ngOnInit() { + for ( const item of this.possibleMenuItems ) { + if ( !item.type ) { + this.menuItems.push(item); + } else if ( item.type === this.hostRecord.type ) { + this.menuItems.push(item); + } + } + } + + async onSelect(value) { + await this.popover.dismiss(value); + } +} diff --git a/src/app/components/editor/host/host.component.ts b/src/app/components/editor/host/host.component.ts index 1add980..bf15461 100644 --- a/src/app/components/editor/host/host.component.ts +++ b/src/app/components/editor/host/host.component.ts @@ -61,7 +61,7 @@ export class HostComponent implements OnInit { this.record.type = 'block_code'; } else if ( innerText.startsWith('http') ) { this.record.type = 'click_link'; - } else if ( innerText === '---' ) { + } else if ( innerText === '===' ) { this.record.type = 'page_sep'; } else if ( innerText.startsWith('-') || innerText.startsWith(' -') ) { this.record.type = 'ul'; diff --git a/src/app/pages/editor/editor.page.html b/src/app/pages/editor/editor.page.html index 8ba7b40..91a3563 100644 --- a/src/app/pages/editor/editor.page.html +++ b/src/app/pages/editor/editor.page.html @@ -16,10 +16,27 @@ -
-
- +
+ + + +
diff --git a/src/app/pages/editor/editor.page.scss b/src/app/pages/editor/editor.page.scss index e69de29..5092988 100644 --- a/src/app/pages/editor/editor.page.scss +++ b/src/app/pages/editor/editor.page.scss @@ -0,0 +1,7 @@ +ion-icon { + transition: all 0.2s linear; +} + +ion-icon.invisible { + opacity: 0; +} diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts index 4ec60ee..28ffbf9 100644 --- a/src/app/pages/editor/editor.page.ts +++ b/src/app/pages/editor/editor.page.ts @@ -5,6 +5,7 @@ import {PageService} from '../../service/page.service'; import {ActivatedRoute, Router} from '@angular/router'; import {LoadingController, PopoverController} from '@ionic/angular'; import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component'; +import {HostOptionsComponent} from '../../components/editor/host-options/host-options.component'; @Component({ selector: 'app-editor', @@ -15,6 +16,7 @@ export class EditorPage implements OnInit { public hostRecords: Array = [new HostRecord('Click to edit page...')]; public pageRecord: PageRecord = new PageRecord(); public pageId: string; + public visibleButtons: Array = []; @ViewChildren('editorHosts') editorHosts; @ViewChild('titleBar', {static: false}) titleBar; @@ -33,6 +35,20 @@ export class EditorPage implements OnInit { ngOnInit() {} + buttonIsVisible(index) { + return this.visibleButtons.includes(index); + } + + makeVisible(index) { + if ( !this.buttonIsVisible(index) ) { + this.visibleButtons.push(index); + } + } + + makeInvisible(index) { + this.visibleButtons = this.visibleButtons.filter(x => x !== index); + } + ionViewDidEnter() { if ( this.pageId ) { this.pages.load(this.pageId).subscribe(pageRecord => { @@ -96,7 +112,7 @@ export class EditorPage implements OnInit { } else if ( type === 'click_link' ) { return 'https://'; } else if ( type === 'page_sep' ) { - return '---'; + return '==='; } else { return ''; } @@ -179,4 +195,27 @@ export class EditorPage implements OnInit { }); } + async onOptionsClick($event, i) { + const popover = await this.popover.create({ + component: HostOptionsComponent, + event: $event, + componentProps: { + editor: this, + index: i, + event: $event, + hostRecord: this.hostRecords[i], + } + }); + + popover.onDidDismiss().then((result) => { + console.log({result}); + if ( result.data === 'delete_node' ) { + $event.record = this.hostRecords[i]; + this.onDestroyHostRequested($event); + } + }) + + await popover.present(); + } + }