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();
+ }
+
}