parent
400a985c11
commit
4a1df4ee6a
@ -0,0 +1,41 @@
|
|||||||
|
import {EditorNodeContract} from '../EditorNode.contract';
|
||||||
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
|
import {EditorService} from '../../../service/editor.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'editor-richtext',
|
||||||
|
template: `
|
||||||
|
<sla-text></sla-text>
|
||||||
|
<sla-editable></sla-editable>
|
||||||
|
<sla-ng></sla-ng>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class RichTextNodeComponent extends EditorNodeContract implements OnInit {
|
||||||
|
@Input() nodeId: string;
|
||||||
|
@Input() editorUUID?: string;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public editorService: EditorService,
|
||||||
|
) { super(); }
|
||||||
|
|
||||||
|
isDirty(): boolean | Promise<boolean> {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
writeChangesToNode(): void | Promise<void> {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.editorService = this.editorService.getEditor(this.editorUUID);
|
||||||
|
this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
|
||||||
|
if ( !this.node.Value ) {
|
||||||
|
this.node.Value = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( this.node.Value.Value ) {
|
||||||
|
this.initialValue = this.node.Value.Value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,19 @@
|
|||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { Routes, RouterModule } from '@angular/router';
|
||||||
|
|
||||||
|
import {ViewerPage} from './viewer.page';
|
||||||
|
import {EditorGuard} from '../../service/guard/Editor.guard';
|
||||||
|
|
||||||
|
const routes: Routes = [
|
||||||
|
{
|
||||||
|
path: 'site',
|
||||||
|
canActivate: [EditorGuard],
|
||||||
|
component: ViewerPage
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [RouterModule.forChild(routes)],
|
||||||
|
exports: [RouterModule],
|
||||||
|
})
|
||||||
|
export class ViewerPageRoutingModule {}
|
@ -0,0 +1,125 @@
|
|||||||
|
<ng-container>
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-menu-button [menu]="'main-menu'"></ion-menu-button>
|
||||||
|
</ion-buttons>
|
||||||
|
<ion-title #titleBar>
|
||||||
|
<div style="display: flex; flex-direction: row;">
|
||||||
|
<button (click)="openNav()">
|
||||||
|
<i class="fa fa-bars" style="font-size: 1.1em"></i>
|
||||||
|
</button>
|
||||||
|
<ion-input
|
||||||
|
style="flex: 1; font-size: 18pt"
|
||||||
|
[value]="rootPageName"
|
||||||
|
[readonly]="true"
|
||||||
|
class="title-input"
|
||||||
|
></ion-input>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
*ngIf="rootPageId && editorService.currentPageId && editorService.currentPageId !== rootPageId"
|
||||||
|
style="font-size: 14pt; padding-top: 10px; padding-bottom: 15px;"
|
||||||
|
>
|
||||||
|
<i *ngIf="editorService.currentPageType" [ngClass]="typeIcons[editorService.currentPageType]" style="font-size: 14pt; margin: auto 10px;"></i>
|
||||||
|
{{ editorService.mutablePageName }}
|
||||||
|
</div>
|
||||||
|
</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<button
|
||||||
|
class="save-button"
|
||||||
|
(click)="editorService.triggerSave()"
|
||||||
|
title="Manually save this note"
|
||||||
|
*ngIf="editorService.isEditing && editorService.canEdit()"
|
||||||
|
>
|
||||||
|
<i *ngIf="!(editorService.isSaving || editorService.willSave)" class="fa fa-check-circle"></i>
|
||||||
|
{{ (editorService.isSaving || editorService.willSave) ? 'Saving...' : 'Saved!' }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
*ngIf="editorService.isEditing && editorService.canEdit() && !isFilloutMode"
|
||||||
|
title="More page options"
|
||||||
|
(click)="onPageMenuClick($event)"
|
||||||
|
class="clear-btn"
|
||||||
|
style="padding: 10px;"
|
||||||
|
>
|
||||||
|
<i class="fa fa-ellipsis-v"></i>
|
||||||
|
</button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<ng-container *ngIf="editorService.notAvailable">
|
||||||
|
<div class="editor-root ion-padding" style="text-align: center; padding-top: 100px; color: #494949; font-size: 1.2em;">
|
||||||
|
Sorry, this page is not available offline yet.
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
<ion-menu *ngIf="menuTree.length" side="start" [menuId]="'site-' + rootPageId" [contentId]="'site-menu-content-' + rootPageId">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>{{ rootPageName }}</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content [id]="'site-menu-content-' + rootPageId">
|
||||||
|
<ion-list *ngFor="let item of menuTree">
|
||||||
|
<ng-template *ngTemplateOutlet="navMenuItem; context: {item: item}"></ng-template>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
</ion-menu>
|
||||||
|
<ng-container *ngIf="!editorService.notAvailable">
|
||||||
|
<div class="editor-root ion-padding">
|
||||||
|
<div
|
||||||
|
class="host-container"
|
||||||
|
style="display: flex; margin-bottom: 20px;"
|
||||||
|
*ngFor="let node of editorService.immutableNodes"
|
||||||
|
>
|
||||||
|
<div class="host-icons" *ngIf="!isFilloutMode && editorService.canEdit()">
|
||||||
|
<button (click)="onOptionsClick($event, node)" *ngIf="editorService.canEdit()" class="clear-btn">
|
||||||
|
<i class="fa fa-ellipsis-v" title="Node options"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ng-container *ngIf="node.isNorm()">
|
||||||
|
<editor-norm style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-norm>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="node.type === 'markdown'">
|
||||||
|
<editor-markdown style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-markdown>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="node.type === 'database_ref'">
|
||||||
|
<editor-database style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-database>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="node.type === 'code_ref'">
|
||||||
|
<editor-code style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-code>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="node.type === 'file_ref'">
|
||||||
|
<editor-files style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-files>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="node.type === 'file_box'">
|
||||||
|
<editor-file-box style="flex: 1;" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-file-box>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="node.isForm()">
|
||||||
|
<editor-node-form-input style="flex: 1;" [isFilloutMode]="isFilloutMode" [nodeId]="node.UUID" [editorUUID]="editorService.instanceUUID" #nodeContainer></editor-node-form-input>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
<button *ngIf="editorService.canEdit() && !isFilloutMode" class="host-add-button" (click)="onAddClick($event)">
|
||||||
|
<i class="fa fa-plus"></i> Add Node
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
</ion-content>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-template #navMenuItem let-baseItem="item" let-indent="indent">
|
||||||
|
<ion-item
|
||||||
|
*ngIf="!baseItem.virtual"
|
||||||
|
[ngStyle]="{marginLeft: 20 * (indent || 0) + 'px', padding: '3px'}"
|
||||||
|
button
|
||||||
|
class="ion-activatable custom-menu-item"
|
||||||
|
(click)="navigate(baseItem.id)"
|
||||||
|
>
|
||||||
|
{{ baseItem.name }}
|
||||||
|
</ion-item>
|
||||||
|
<ng-container *ngIf="baseItem.children && baseItem.children.length">
|
||||||
|
<ng-container *ngFor="let item of baseItem.children">
|
||||||
|
<ng-template *ngTemplateOutlet="navMenuItem; context: {item: item, indent: (indent || 0) + (baseItem.virtual ? 0 : 1)}"></ng-template>
|
||||||
|
</ng-container>
|
||||||
|
</ng-container>
|
||||||
|
</ng-template>
|
@ -0,0 +1,98 @@
|
|||||||
|
import {EditorPage} from '../editor/editor.page';
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {ActivatedRoute, Router} from '@angular/router';
|
||||||
|
import {Location} from '@angular/common';
|
||||||
|
import {AlertController, LoadingController, MenuController, ModalController, PopoverController} from '@ionic/angular';
|
||||||
|
import {EditorService} from '../../service/editor.service';
|
||||||
|
import {ApiService} from '../../service/api.service';
|
||||||
|
import {debug} from '../../utility';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-viewer',
|
||||||
|
templateUrl: './viewer.page.html',
|
||||||
|
styleUrls: ['../editor/editor.page.scss', './viewer.page.scss'],
|
||||||
|
})
|
||||||
|
export class ViewerPage extends EditorPage {
|
||||||
|
public rootPageId?: string;
|
||||||
|
protected cachedRootPageName?: string;
|
||||||
|
public menuTree: any[] = [];
|
||||||
|
private lookingUpRootPageName = false;
|
||||||
|
|
||||||
|
public get rootPageName(): string {
|
||||||
|
if ( !this.cachedRootPageName ) {
|
||||||
|
if ( this.pageId === this.rootPageId ) {
|
||||||
|
this.cachedRootPageName = this.editorService.mutablePageName;
|
||||||
|
} else {
|
||||||
|
if ( !this.lookingUpRootPageName ) {
|
||||||
|
this.cachedRootPageName = '';
|
||||||
|
this.lookingUpRootPageName = true;
|
||||||
|
this.lookupRootPageName();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.cachedRootPageName;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
public readonly route: ActivatedRoute,
|
||||||
|
public readonly router: Router,
|
||||||
|
public readonly loader: LoadingController,
|
||||||
|
public readonly popover: PopoverController,
|
||||||
|
public readonly alerts: AlertController,
|
||||||
|
public readonly modals: ModalController,
|
||||||
|
public editorService: EditorService,
|
||||||
|
public readonly api: ApiService,
|
||||||
|
public readonly menu: MenuController,
|
||||||
|
public readonly activatedRoute: ActivatedRoute,
|
||||||
|
public readonly location: Location,
|
||||||
|
) {
|
||||||
|
super(route, router, loader, popover, alerts, modals, editorService);
|
||||||
|
this.editorService = this.editorService.getEditor();
|
||||||
|
debug('Viewer page component', this);
|
||||||
|
}
|
||||||
|
|
||||||
|
async ionViewDidEnter() {
|
||||||
|
this.rootPageId = this.baseId;
|
||||||
|
this.menuTree = await this.api.getMenuItems(true, this.rootPageId);
|
||||||
|
if ( this.menuTree.length === 1 && this.menuTree[0].virtual ) {
|
||||||
|
this.menuTree = this.menuTree[0].children;
|
||||||
|
}
|
||||||
|
|
||||||
|
return await super.ionViewDidEnter();
|
||||||
|
}
|
||||||
|
|
||||||
|
async openNav() {
|
||||||
|
if ( await this.menu.isOpen(`site-${this.rootPageId}`) ) {
|
||||||
|
await this.menu.close(`site-${this.rootPageId}`);
|
||||||
|
} else {
|
||||||
|
await this.menu.enable(true, `site-${this.rootPageId}`);
|
||||||
|
await this.menu.open(`site-${this.rootPageId}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async navigate(id: string) {
|
||||||
|
await this.editorService.stopEditing();
|
||||||
|
await this.editorService.startEditing(id);
|
||||||
|
|
||||||
|
let newLocation: string = window.location.pathname;
|
||||||
|
newLocation = newLocation.split(';').filter(x => !x.startsWith('page=')).join(';');
|
||||||
|
if ( id !== this.rootPageId ) {
|
||||||
|
newLocation += `;page=${id}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.location.replaceState(newLocation);
|
||||||
|
}
|
||||||
|
|
||||||
|
async lookupRootPageName() {
|
||||||
|
if ( !this.rootPageId ) {
|
||||||
|
this.lookingUpRootPageName = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const page = await this.editorService.loadPage(this.rootPageId);
|
||||||
|
console.log('loaded root page', page);
|
||||||
|
this.cachedRootPageName = page.Name;
|
||||||
|
this.lookingUpRootPageName = false;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue