diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 015d4ed..6f1235f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,47 +1,43 @@
-import { Component } from "@angular/core";
+import {Component, OnInit} from '@angular/core';
-import { Platform } from "@ionic/angular";
-import { SplashScreen } from "@ionic-native/splash-screen/ngx";
-import { StatusBar } from "@ionic-native/status-bar/ngx";
-import { ApiService } from "./service/api.service";
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { ApiService } from './service/api.service';
+import {Router} from '@angular/router';
@Component({
- selector: "app-root",
- templateUrl: "app.component.html",
- styleUrls: ["app.component.scss"]
+ selector: 'app-root',
+ templateUrl: 'app.component.html',
+ styleUrls: ['app.component.scss']
})
-export class AppComponent {
- public appPages = [
- {
- title: "Home",
- url: "/home",
- icon: "home"
- },
- {
- title: "List",
- url: "/list",
- icon: "list"
- },
- {
- title: "Editor",
- url: "/editor",
- icon: "edit"
- }
- ];
+export class AppComponent implements OnInit {
public nodes = [];
+ public options = {
+ actionMapping: {
+ mouse: {
+ dblClick: (tree, node, $event) => {
+ console.log({tree, node, $event});
+ const id = node.data.id;
+ this.router.navigate(['/editor', {id}]);
+ }
+ }
+ }
+ };
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
- private api: ApiService
+ private api: ApiService,
+ protected router: Router,
) {
this.initializeApp();
}
- ionViewDidEnter() {
- this.api.get("/menu/items").subscribe(result => {
+ ngOnInit() {
+ this.api.get('/menu/items').subscribe(result => {
this.nodes = result.data;
});
}
diff --git a/src/app/components/editor/host/host.component.html b/src/app/components/editor/host/host.component.html
index 089317b..2f3c160 100644
--- a/src/app/components/editor/host/host.component.html
+++ b/src/app/components/editor/host/host.component.html
@@ -10,4 +10,17 @@
[ngClass]="{'paragraph': record.type === 'paragraph', 'header1': record.type === 'header1', 'header2': record.type === 'header2', 'header3': record.type === 'header3', 'header4': record.type === 'header4', 'block_code': record.type === 'block_code', 'click_link': record.type === 'click_link'}"
[innerHTML]="record.value.replace('\n', '
')"
>
+
diff --git a/src/app/components/editor/host/host.component.ts b/src/app/components/editor/host/host.component.ts
index cdde888..a6e0e25 100644
--- a/src/app/components/editor/host/host.component.ts
+++ b/src/app/components/editor/host/host.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewChildren} from '@angular/core';
import HostRecord from '../../../structures/HostRecord';
@Component({
@@ -12,6 +12,9 @@ export class HostComponent implements OnInit {
@Output() newHostRequested = new EventEmitter();
@Output() destroyHostRequested = new EventEmitter();
@ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
+ @ViewChildren('liItems') liItems;
+
+ public listLines: Array = [];
constructor() { }
@@ -42,11 +45,59 @@ export class HostComponent implements OnInit {
this.record.type = 'block_code';
} else if ( innerText.startsWith('http') ) {
this.record.type = 'click_link';
+ } else if ( innerText.startsWith('-') || innerText.startsWith(' -') ) {
+ this.record.type = 'ul';
+ this.listLines = [this.record.value];
+ setTimeout(() => {
+ const item = this.liItems.toArray()[0].nativeElement;
+ const s = window.getSelection();
+ const r = document.createRange();
+ r.setStart(item, 0);
+ r.setEnd(item, 0);
+ s.removeAllRanges();
+ s.addRange(r);
+ }, 0);
} else {
this.record.type = 'paragraph';
}
}
+ onLIKeyUp($event, i) {
+ console.log({$event});
+ if ( $event.code === 'Enter' ) {
+ const newListLines = [];
+ this.liItems.forEach((li, index) => {
+ newListLines.push(li.nativeElement.innerText.trim());
+ if ( index === i ) {
+ newListLines.push('');
+ }
+ });
+
+ this.listLines = newListLines;
+ // this.listLines[i] = this.liItems[i].innerText.trim()
+ // const newLines = []
+ // this.listLines.forEach((rec, x) => {
+ // newLines.push(rec.trim());
+ // if ( i === x ) {
+ // newLines.push('');
+ // }
+ // })
+
+
+ // this.listLines = newLines;
+
+ // setTimeout(() => {
+ // const item = this.liItems.toArray()[i + 1].nativeElement;
+ // const s = window.getSelection();
+ // const r = document.createRange();
+ // r.setStart(item, 0);
+ // r.setEnd(item, 0);
+ // s.removeAllRanges();
+ // s.addRange(r);
+ // }, 10);
+ }
+ }
+
onHostDblClick() {
if ( this.record.type === 'click_link' ) {
window.open(this.record.value.trim(), '_blank');
diff --git a/src/app/pages/editor/editor.page.html b/src/app/pages/editor/editor.page.html
index 7a8fd70..289c696 100644
--- a/src/app/pages/editor/editor.page.html
+++ b/src/app/pages/editor/editor.page.html
@@ -15,7 +15,7 @@
-
\ No newline at end of file
+
diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts
index 5d8c37e..117048a 100644
--- a/src/app/pages/editor/editor.page.ts
+++ b/src/app/pages/editor/editor.page.ts
@@ -2,6 +2,7 @@ import {Component, Host, OnInit, ViewChild, ViewChildren} from '@angular/core';
import HostRecord from '../../structures/HostRecord';
import PageRecord from '../../structures/PageRecord';
import {PageService} from '../../service/page.service';
+import {ActivatedRoute} from '@angular/router';
@Component({
selector: 'app-editor',
@@ -11,26 +12,33 @@ import {PageService} from '../../service/page.service';
export class EditorPage implements OnInit {
public hostRecords: Array = [new HostRecord('Click to edit page...')];
public pageRecord: PageRecord = new PageRecord();
+ public pageId: string;
@ViewChildren('editorHosts') editorHosts;
@ViewChild('titleBar', {static: false}) titleBar;
constructor(
protected pages: PageService,
- ) { }
+ protected route: ActivatedRoute,
+ ) {
+ this.route.params.subscribe(params => {
+ this.pageId = params.id;
+ });
+ }
ngOnInit() {
console.log('Editor component: ', this);
}
ionViewDidEnter() {
- const pageId = prompt('What is the ID of the page to load?');
- this.pages.load(pageId).subscribe(pageRecord => {
- this.pageRecord = pageRecord;
- this.pages.get_nodes(pageRecord).subscribe((hosts: Array) => {
- this.hostRecords = hosts;
+ if ( this.pageId ) {
+ this.pages.load(this.pageId).subscribe(pageRecord => {
+ this.pageRecord = pageRecord;
+ this.pages.get_nodes(pageRecord).subscribe((hosts: Array) => {
+ this.hostRecords = hosts;
+ });
});
- });
+ }
}
onAddClick() {
diff --git a/src/app/structures/HostRecord.ts b/src/app/structures/HostRecord.ts
index c158603..56b6af3 100644
--- a/src/app/structures/HostRecord.ts
+++ b/src/app/structures/HostRecord.ts
@@ -1,6 +1,6 @@
export default class HostRecord {
public value = '';
- public type: 'paragraph'|'header1'|'header2'|'header3'|'header4'|'block_code'|'click_link' = 'paragraph';
+ public type: 'paragraph'|'header1'|'header2'|'header3'|'header4'|'block_code'|'click_link'|'ul' = 'paragraph';
public CreatedAt: string;
public PageId: string;