From 7a504bb8de1112dd8c370ff5812e204020414dd7 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Sat, 8 Feb 2020 13:35:07 -0600 Subject: [PATCH] enable sidebar nav; fix build error --- src/app/app.component.ts | 54 +++++++++---------- .../editor/host/host.component.html | 13 +++++ .../components/editor/host/host.component.ts | 53 +++++++++++++++++- src/app/pages/editor/editor.page.html | 4 +- src/app/pages/editor/editor.page.ts | 22 +++++--- src/app/structures/HostRecord.ts | 2 +- 6 files changed, 108 insertions(+), 40 deletions(-) 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 @@
-
@@ -25,4 +25,4 @@ Save
- \ 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;