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.
134 lines
3.6 KiB
134 lines
3.6 KiB
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';
|
|
|
|
@Component({
|
|
selector: 'app-editor',
|
|
templateUrl: './editor.page.html',
|
|
styleUrls: ['./editor.page.scss'],
|
|
})
|
|
export class EditorPage implements OnInit {
|
|
public hostRecords: Array<HostRecord> = [new HostRecord('Click to edit page...')];
|
|
public pageRecord: PageRecord = new PageRecord();
|
|
|
|
@ViewChildren('editorHosts') editorHosts;
|
|
@ViewChild('titleBar', {static: false}) titleBar;
|
|
|
|
constructor(
|
|
protected pages: PageService,
|
|
) { }
|
|
|
|
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<HostRecord>) => {
|
|
this.hostRecords = hosts;
|
|
});
|
|
});
|
|
}
|
|
|
|
onAddClick() {
|
|
this.hostRecords.push(new HostRecord(''));
|
|
setTimeout(() => {
|
|
const host = this.editorHosts.toArray().reverse()[0].hostContainer.nativeElement;
|
|
const s = window.getSelection();
|
|
const r = document.createRange();
|
|
r.setStart(host, 0);
|
|
r.setEnd(host, 0);
|
|
s.removeAllRanges();
|
|
s.addRange(r);
|
|
}, 0);
|
|
}
|
|
|
|
onNewHostRequested($event) {
|
|
const insertAfter = this.getIndexFromRecord($event.record);
|
|
const record = new HostRecord('');
|
|
const newHosts = []
|
|
this.hostRecords.forEach((rec, i) => {
|
|
newHosts.push(rec);
|
|
if ( i === insertAfter ) {
|
|
newHosts.push(record);
|
|
}
|
|
})
|
|
|
|
this.hostRecords = newHosts;
|
|
|
|
setTimeout(() => {
|
|
const host = this.editorHosts.toArray()[insertAfter + 1].hostContainer.nativeElement;
|
|
const s = window.getSelection();
|
|
const r = document.createRange();
|
|
r.setStart(host, 0);
|
|
r.setEnd(host, 0);
|
|
s.removeAllRanges();
|
|
s.addRange(r);
|
|
}, 0);
|
|
|
|
}
|
|
|
|
onDestroyHostRequested($event) {
|
|
let removedIndex = 0;
|
|
const newHostRecords = this.editorHosts.filter((host, i) => {
|
|
if ( $event.record === host.record ) {
|
|
removedIndex = i;
|
|
}
|
|
return host.record !== $event.record;
|
|
});
|
|
|
|
const removedHost = this.editorHosts[removedIndex];
|
|
|
|
const hostRecords = newHostRecords.map(host => host.record);
|
|
this.hostRecords = hostRecords;
|
|
|
|
setTimeout(() => {
|
|
let focusIndex;
|
|
if ( removedIndex === 0 && this.editorHosts.toArray().length ) {
|
|
focusIndex = 0;
|
|
} else if ( removedIndex !== 0 ) {
|
|
focusIndex = removedIndex - 1;
|
|
}
|
|
|
|
if ( focusIndex >= 0 ) {
|
|
const host = this.editorHosts.toArray()[focusIndex].hostContainer.nativeElement;
|
|
const s = window.getSelection();
|
|
const r = document.createRange();
|
|
r.setStart(host, 0);
|
|
r.setEnd(host, 0);
|
|
s.removeAllRanges();
|
|
s.addRange(r);
|
|
}
|
|
}, 0);
|
|
}
|
|
|
|
protected getIndexFromRecord(record) {
|
|
let index;
|
|
this.editorHosts.toArray().forEach((host, i) => {
|
|
if ( host.record === record ) {
|
|
index = i;
|
|
}
|
|
});
|
|
|
|
return index;
|
|
}
|
|
|
|
onSaveClick() {
|
|
this.pageRecord.Name = this.titleBar.el.innerText.trim();
|
|
|
|
// First, save the page record itself
|
|
this.pages.save(this.pageRecord).subscribe(pageRecord => {
|
|
this.pageRecord = pageRecord;
|
|
|
|
// Now, save the nodes
|
|
this.pages.save_nodes(pageRecord, this.hostRecords).subscribe(result => {
|
|
this.hostRecords = result;
|
|
});
|
|
});
|
|
}
|
|
|
|
}
|