Add ability to visit publicly available sites in "site viewer" mode

src/app/app-routing.module.ts

@@ -3,7 +3,6 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 import {LoginPage} from './pages/login/login.page';
 import {AuthService} from './service/auth.service';
 import {GuestOnlyGuard} from './service/guard/GuestOnly.guard';
-import {EditorGuard} from './service/guard/Editor.guard';
 
 const routes: Routes = [
   {
@@ -18,7 +17,6 @@ const routes: Routes = [
   },
   {
     path: 'editor',
-    canActivate: [EditorGuard],
     loadChildren: () => import('./components/components.module').then( m => m.ComponentsModule)
   },
   {

src/app/app.component.html

@@ -1,6 +1,6 @@
 <ion-app class="dark">
   <ion-split-pane contentId="main-content" *ngIf="ready$ | async">
-    <ion-menu class="sidebar" contentId="main-content" content="content" type="push" side="start" *ngIf="!api.isPublicUser">
+    <ion-menu class="sidebar" menuId="main-menu" contentId="main-content" content="content" type="push" side="start" *ngIf="!api.isPublicUser">
       <ion-header>
         <ion-toolbar color="primary">
           <ion-title style="font-weight: bold; color: white;">{{ appName }}

src/app/components/components.module.ts

@@ -33,7 +33,9 @@ import {DirectivesModule} from '../directives/directives.module';
 import {MarkdownModule} from 'ngx-markdown';
 import {VersionModalComponent} from './version-modal/version-modal.component';
 import {EditorPageRoutingModule} from '../pages/editor/editor-routing.module';
+import {ViewerPageRoutingModule} from '../pages/viewer/viewer-routing.module';
 import {EditorPage} from '../pages/editor/editor.page';
+import {ViewerPage} from '../pages/viewer/viewer.page';
 import {LoginPage} from '../pages/login/login.page';
 import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
 import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component';
@@ -77,6 +79,7 @@ import {FileBoxPageComponent} from './nodes/file-box/file-box-page.component';
     MarkdownEditorComponent,
     VersionModalComponent,
     EditorPage,
+    ViewerPage,
     LoginPage,
     WysiwygComponent,
     WysiwygEditorComponent,
@@ -103,6 +106,7 @@ import {FileBoxPageComponent} from './nodes/file-box/file-box-page.component';
     DirectivesModule,
     MarkdownModule,
     EditorPageRoutingModule,
+    ViewerPageRoutingModule,
     AngularResizedEventModule,
     IonicSelectableModule,
   ],
@@ -132,6 +136,7 @@ import {FileBoxPageComponent} from './nodes/file-box/file-box-page.component';
     MarkdownEditorComponent,
     VersionModalComponent,
     EditorPage,
+    ViewerPage,
     LoginPage,
     WysiwygComponent,
     WysiwygEditorComponent,
@@ -173,6 +178,7 @@ import {FileBoxPageComponent} from './nodes/file-box/file-box-page.component';
     MarkdownEditorComponent,
     VersionModalComponent,
     EditorPage,
+    ViewerPage,
     LoginPage,
     WysiwygComponent,
     WysiwygEditorComponent,

src/app/components/nodes/richtext/RichTextNode.component.ts

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

src/app/pages/editor/editor-routing.module.ts

@@ -2,10 +2,12 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { EditorPage } from './editor.page';
+import {EditorGuard} from '../../service/guard/Editor.guard';
 
 const routes: Routes = [
   {
     path: '',
+    canActivate: [EditorGuard],
     component: EditorPage
   }
 ];

src/app/pages/editor/editor.page.ts

@@ -19,6 +19,7 @@ import {DatabaseLinkComponent} from '../../components/editor/forms/database-link
 export class EditorPage implements OnInit {
   public typeIcons = NodeTypeIcons;
   @Input() pageId: string;
+  @Input() baseId: string;
   @Input() isFilloutMode = false;
   @Input() hosted = false;
   @Input() version?: number;
@@ -40,18 +41,20 @@ export class EditorPage implements OnInit {
   }
 
   constructor(
-    protected route: ActivatedRoute,
-    protected router: Router,
-    protected loader: LoadingController,
-    protected popover: PopoverController,
-    protected alerts: AlertController,
-    protected modals: ModalController,
-    public readonly editorService: EditorService,
+    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,
   ) {
     debug('Constructed editor page.');
+    this.editorService = editorService.getEditor();
 
     this.route.params.subscribe(params => {
-      this.pageId = params.id;
+      this.baseId = params.id;
+      this.pageId = params.page || params.id;
       debug('Got page ID from route:', this.pageId, params);
 
       if ( params.node_id ) {
@@ -59,8 +62,6 @@ export class EditorPage implements OnInit {
         this.scrollToNodeId = params.node_id;
       }
     });
-
-    this.editorService = editorService.getEditor();
   }
 
   ngOnInit() {}

src/app/pages/viewer/viewer-routing.module.ts

@@ -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 {}

src/app/pages/viewer/viewer.page.html

@@ -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>

src/app/pages/viewer/viewer.page.ts

@@ -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;
+    }
+}

src/app/service/guard/Editor.guard.ts

@@ -16,6 +16,7 @@ export class EditorGuard implements CanActivate {
     async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
         const checkCanActivate = async () => {
             const PageId = route.paramMap.get('id');
+            console.log('editor guard check can navigate', PageId, route, state);
 
             const canView = await this.api.checkPagePermission(String(PageId));
 

src/global.scss

@@ -215,3 +215,11 @@ body.dark {
     color: white;
   }
 }
+
+.custom-menu-item {
+  pointer-events: auto !important;
+
+  .item {
+    pointer-events: auto !important;
+  }
+}