You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
4.9 KiB
180 lines
4.9 KiB
import {Component, HostListener, Input, OnInit} from '@angular/core';
|
|
import HostRecord from '../../structures/HostRecord';
|
|
import {ActivatedRoute, Router} from '@angular/router';
|
|
import {AlertController, LoadingController, ModalController, PopoverController} from '@ionic/angular';
|
|
import {NodePickerComponent} from '../../components/editor/node-picker/node-picker.component';
|
|
import {HostOptionsComponent} from '../../components/editor/host-options/host-options.component';
|
|
import {EditorService} from '../../service/editor.service';
|
|
import {NodeTypeIcons} from '../../structures/node-types';
|
|
import {OptionMenuComponent} from '../../components/option-menu/option-menu.component';
|
|
import {VersionModalComponent} from '../../components/version-modal/version-modal.component';
|
|
|
|
@Component({
|
|
selector: 'app-editor',
|
|
templateUrl: './editor.page.html',
|
|
styleUrls: ['./editor.page.scss'],
|
|
})
|
|
export class EditorPage implements OnInit {
|
|
public typeIcons = NodeTypeIcons;
|
|
@Input() pageId: string;
|
|
@Input() hosted = false;
|
|
@Input() version?: number;
|
|
|
|
@Input()
|
|
set readonly(val: boolean) {
|
|
this.editorService.forceReadonly = val;
|
|
}
|
|
|
|
get readonly() {
|
|
return this.editorService.forceReadonly;
|
|
}
|
|
|
|
constructor(
|
|
protected route: ActivatedRoute,
|
|
protected router: Router,
|
|
protected loader: LoadingController,
|
|
protected popover: PopoverController,
|
|
protected alerts: AlertController,
|
|
protected modals: ModalController,
|
|
public readonly editorService: EditorService,
|
|
) {
|
|
this.route.params.subscribe(params => {
|
|
this.pageId = params.id;
|
|
});
|
|
|
|
this.editorService = editorService.getEditor();
|
|
}
|
|
|
|
ngOnInit() {}
|
|
|
|
ionViewDidEnter() {
|
|
if ( this.pageId ) {
|
|
this.editorService.startEditing(this.pageId, this.version);
|
|
} else if ( !this.hosted ) {
|
|
this.router.navigate(['/home']);
|
|
}
|
|
}
|
|
|
|
@HostListener('document:keydown.control.s', ['$event'])
|
|
onManualSave(event) {
|
|
event.preventDefault();
|
|
this.editorService.save();
|
|
}
|
|
|
|
async onOptionsClick(event: MouseEvent, node: HostRecord) {
|
|
if ( !this.editorService.canEdit() ) {
|
|
return;
|
|
}
|
|
|
|
const popover = await this.popover.create({
|
|
component: HostOptionsComponent,
|
|
event,
|
|
componentProps: {
|
|
editor: this,
|
|
index: this.editorService.immutableNodes.indexOf(node),
|
|
event,
|
|
hostRecord: node,
|
|
}
|
|
});
|
|
|
|
popover.onDidDismiss().then(result => {
|
|
const { event: dismissEvent , value } = result.data;
|
|
if ( value === 'delete_node' ) {
|
|
this.alerts.create({
|
|
header: 'Delete node?',
|
|
message: 'Are you sure you want to delete this node? Its contents will be unrecoverable.',
|
|
buttons: [
|
|
{
|
|
text: 'Keep It',
|
|
role: 'cancel',
|
|
},
|
|
{
|
|
text: 'Delete It',
|
|
role: 'ok',
|
|
handler: () => {
|
|
this.editorService.deleteNode(node.UUID);
|
|
}
|
|
}
|
|
],
|
|
}).then(alert => alert.present());
|
|
} else if ( value === 'move_up' ) {
|
|
this.editorService.moveNode(node, 'up');
|
|
} else if ( value === 'move_down' ) {
|
|
this.editorService.moveNode(node, 'down');
|
|
} else if ( value === 'add_before' ) {
|
|
this.onAddClick(event, 'before', node.UUID);
|
|
} else if ( value === 'add_after' ) {
|
|
this.onAddClick(event, 'after', node.UUID);
|
|
}
|
|
});
|
|
|
|
await popover.present();
|
|
}
|
|
|
|
async onAddClick(event: MouseEvent, position?: 'before' | 'after', positionNodeId?: string) {
|
|
if ( !this.editorService.canEdit() ) {
|
|
return;
|
|
}
|
|
|
|
const popover = await this.popover.create({
|
|
component: NodePickerComponent,
|
|
event,
|
|
});
|
|
|
|
popover.onDidDismiss().then(result => {
|
|
if ( !result.data ) {
|
|
return;
|
|
}
|
|
|
|
this.editorService.addNode(result.data, position, positionNodeId);
|
|
});
|
|
|
|
await popover.present();
|
|
}
|
|
|
|
async onPageMenuClick(event: MouseEvent) {
|
|
const popover = await this.popover.create({
|
|
event,
|
|
component: OptionMenuComponent,
|
|
componentProps: {
|
|
menuItems: [
|
|
{
|
|
name: 'Versions',
|
|
icon: 'fa fa-history',
|
|
value: 'view-versions',
|
|
title: 'View other versions of this page',
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
popover.onDidDismiss().then(async value => {
|
|
const { data } = value;
|
|
|
|
if ( data === 'view-versions' ) {
|
|
await this.showVersionModal();
|
|
}
|
|
});
|
|
|
|
await popover.present();
|
|
}
|
|
|
|
async showVersionModal() {
|
|
const modal = await this.modals.create({
|
|
component: VersionModalComponent,
|
|
componentProps: {
|
|
pageId: this.pageId,
|
|
},
|
|
cssClass: 'modal-big',
|
|
});
|
|
|
|
modal.onDidDismiss().then(reload => {
|
|
if ( reload ) {
|
|
this.editorService.startEditing(this.pageId);
|
|
}
|
|
});
|
|
|
|
await modal.present();
|
|
}
|
|
}
|