Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

editor-refactor #18

Merged
garrettmills merged 16 commits from editor-refactor into master 2020-10-14 16:42:08 +00:00
Conversation 0 Commits 16 Files Changed 34 +34 -333
13 changed files with 34 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e30e8681e4 - Show all commits

6
src/app/app.component.scss
View File

@ -29,4 +29,10 @@
color: var(--noded-background-code);
}
}
&.files {
.tree-node-icon {
color: var(--noded-background-files);
}
}
}

4
src/app/components/components.module.ts
View File

@ -1,6 +1,5 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HostComponent } from './editor/host/host.component';
import {NodePickerComponent} from './editor/node-picker/node-picker.component';
import {IonicModule} from '@ionic/angular';
import {DatabaseComponent} from './editor/database/database.component';
@ -32,7 +31,6 @@ import {DirectivesModule} from '../directives/directives.module';
@NgModule({
declarations: [
HostComponent,
NodePickerComponent,
DatabaseComponent,
ColumnsComponent,
@ -67,7 +65,6 @@ import {DirectivesModule} from '../directives/directives.module';
DirectivesModule,
],
entryComponents: [
HostComponent,
NodePickerComponent,
DatabaseComponent,
ColumnsComponent,
@ -92,7 +89,6 @@ import {DirectivesModule} from '../directives/directives.module';
NormComponent,
],
exports: [
HostComponent,
NodePickerComponent,
DatabaseComponent,
ColumnsComponent,

89
src/app/components/editor/host/host.component.html
View File

@ -1,89 +0,0 @@
<ng-container>
<div
*ngIf="!page.isViewOnly() && ( record.type === 'paragraph'
|| record.type === 'header1'
|| record.type === 'header2'
|| record.type === 'header3'
|| record.type === 'header4'
|| record.type === 'block_code'
|| record.type === 'click_link' )"
class="host-host ion-padding"
contenteditable="true"
(keyup)="onKeyUp($event)"
(blur)="record.value=hostContainer.innerHTML"
(dblclick)="onHostDblClick()"
#hostContainer
[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', '<br>')"
></div>
<div
*ngIf="page.isViewOnly() && ( record.type === 'paragraph'
|| record.type === 'header1'
|| record.type === 'header2'
|| record.type === 'header3'
|| record.type === 'header4'
|| record.type === 'block_code'
|| record.type === 'click_link' )"
(click)="onHostDblClick()"
class="host-host ion-padding"
#hostContainer
[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', '<br>')"
></div>
<ul
*ngIf="record.type === 'ul' && !page.isViewOnly()"
class="host-host ion-padding"
>
<li
#liItems
contenteditable="true"
(keyup)="onUlKeyUp($event, i)"
(keydown)="onUlKeyDown($event, i)"
*ngFor="let line of listLines; let i = index"
[innerHTML]="listLines[i]"
></li>
</ul>
<ul
*ngIf="record.type === 'ul' && page.isViewOnly()"
class="host-host ion-padding"
>
<li
#liItems
*ngFor="let line of listLines; let i = index"
[innerHTML]="listLines[i]"
></li>
</ul>
<div *ngIf="record.type === 'page_sep'" class="hr-wrapper">
<hr>
</div>
<div
*ngIf="record.type === 'database_ref'"
class="db-wrapper"
>
<editor-database
[readonly]="page.isViewOnly()"
[hostRecord]="record"
(hostRecordChange)="onRecordChange($event)"
(requestParentSave)="onRequestParentSave($event)"
(requestParentDelete)="onRequestDelete($event)"
></editor-database>
</div>
<div class="code-wrapper" *ngIf="record.type === 'code_ref'">
<editor-code
[readonly]="page.isViewOnly()"
[hostRecord]="record"
(hostRecordChange)="onRecordChange($event)"
(requestParentSave)="onRequestParentSave($event)"
(requestParentDelete)="onRequestDelete($event)"
></editor-code>
</div>
<div class="files-wrapper" *ngIf="record.type === 'file_ref'">
<editor-files
[readonly]="page.isViewOnly()"
[hostRecord]="record"
(hostRecordChange)="onRecordChange($event)"
(requestParentSave)="onRequestParentSave($event)"
(requestParentDelete)="onRequestDelete($event)"
></editor-files>
</div>
</ng-container>

64
src/app/components/editor/host/host.component.scss
View File

@ -1,64 +0,0 @@
.host-host.header1 {
font-weight: bold;
font-size: 24pt;
}
.host-host.header2 {
font-weight: bold;
font-size: 21pt;
}
.host-host.header3 {
font-weight: bold;
font-size: 18pt;
}
.host-host.header4 {
font-weight: bold;
font-size: 16pt;
}
.host-host.block_code {
font-family: monospace;
font-size: 12pt;
background-color: #ddd;
margin-bottom: 15px;
}
.host-host.click_link {
color: #0141b0;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
.hr-wrapper {
margin: 50px 100px;
& hr {
background: #ccc;
height: 2px;
}
}
.node-indentation-level-num-1 {
margin-left: 15px;
}
.node-indentation-level-num-2 {
margin-left: 30px;
}
.node-indentation-level-num-3 {
margin-left: 45px;
}
.node-indentation-level-num-4 {
margin-left: 60px;
}
.node-indentation-level-num-5 {
margin-left: 75px;
}

174
src/app/components/editor/host/host.component.ts
View File

@ -1,174 +0,0 @@
import {Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, ViewChildren} from '@angular/core';
import HostRecord from '../../../structures/HostRecord';
import PageRecord from '../../../structures/PageRecord';
@Component({
selector: 'editor-host',
templateUrl: './host.component.html',
styleUrls: ['./host.component.scss'],
})
export class HostComponent implements OnInit {
@Input() page: PageRecord;
@Input() record: HostRecord;
@Output() recordChange = new EventEmitter<HostRecord>();
@Output() newHostRequested = new EventEmitter<HostComponent>();
@Output() destroyHostRequested = new EventEmitter<HostComponent>();
@Output() saveHostRequested = new EventEmitter<HostComponent>();
@ViewChild('hostContainer') hostContainer: ElementRef;
@ViewChildren('liItems') liItems;
public listLines: Array<string> = [];
constructor() { }
ngOnInit() {
}
onRecordChange($event) {
this.recordChange.emit($event);
}
onKeyUp($event) {
}
onUlKeyDown($event, index) {
if ( $event.code === 'Tab' ) {
$event.preventDefault();
const elem = this.liItems.toArray()[index];
let currentLevel = 0;
elem.nativeElement.className.split(' ').some(x => {
if ( x.startsWith('node-indentation-level-num-') ) {
currentLevel = Number(x.replace('node-indentation-level-num-', ''));
return true;
}
});
const newLevel = $event.shiftKey ? currentLevel - 1 : currentLevel + 1;
if ( newLevel <= 5 && newLevel >= 0 ) {
const existing = elem.nativeElement.className.split(' ').filter(x => !x.startsWith('node-indentation-level-num-'));
existing.push(`node-indentation-level-num-${newLevel}`);
elem.nativeElement.className = existing.join(' ');
}
}
}
onUlKeyUp($event, i) {
if ( $event.code === 'Enter' && !$event.shiftKey ) {
const e = this.liItems.toArray()[i].nativeElement;
e.innerText = e.innerText.trim();
if ( this.liItems.toArray()[i].nativeElement.innerText.trim() === '' ) {
this.newHostRequested.emit(this);
} else {
this.listLines.push('');
setTimeout(() => {
this.focusStart(this.liItems.toArray()[i + 1].nativeElement);
let newLevel = 0;
this.liItems.toArray()[i].nativeElement.className.split(' ').some(x => {
if ( x.startsWith('node-indentation-level-num-') ) {
newLevel = Number(x.replace('node-indentation-level-num-', ''));
return true;
}
});
const classes = this.liItems.toArray()[i + 1].nativeElement.className
.split(' ')
.filter(x => !x.startsWith('node-indentation-level-num-'));
classes.push(`node-indentation-level-num-${newLevel}`);
this.liItems.toArray()[i + 1].nativeElement.className = classes.join(' ');
}, 0);
}
} else if ( $event.code === 'Backspace' && this.liItems.toArray()[i].nativeElement.innerText.trim() === '' ) {
const newLines = [];
this.liItems.toArray().forEach((elem, index) => {
if ( index !== i ) {
newLines.push(elem.nativeElement.innerText ? elem.nativeElement.innerText.trim() : '');
}
});
this.listLines = newLines;
if ( i === 0 && this.listLines.length === 0 ) {
this.destroyHostRequested.emit(this);
} else {
setTimeout(() => {
this.focusEnd(this.liItems.toArray()[i - 1].nativeElement);
}, 0);
}
} else if ( $event.code === 'ArrowDown' ) {
const liArr = this.liItems.toArray();
if ( liArr.length > i + 1 ) {
setTimeout(() => {
this.focusStart(this.liItems.toArray()[i + 1].nativeElement);
}, 0);
}
} else if ( $event.code === 'ArrowUp' ) {
if ( i !== 0 ) {
setTimeout(() => {
this.focusStart(this.liItems.toArray()[i - 1].nativeElement);
}, 0);
}
} else {
const recordValue = this.liItems.toArray().map(item => {
const elem = item.nativeElement;
const value = elem.innerText.trim();
let indentationLevel = 0;
elem.className.split(' ').some(x => {
if ( x.startsWith('node-indentation-level-num-') ) {
indentationLevel = x.replace('node-indentation-level-num-', '');
return true;
}
});
return {value, indentationLevel};
});
this.record.value = JSON.stringify(recordValue);
}
}
onRequestDelete($event) {
this.destroyHostRequested.emit(this);
}
onRequestParentSave($event) {
this.saveHostRequested.emit(this);
}
onHostDblClick() {
}
takeFocus(fromTop = true) {
}
// TODO return an observable here, probably
focusEnd(item) {
const s = window.getSelection();
const r = document.createRange();
r.setStart(item, 0);
r.setEnd(item, 0);
s.removeAllRanges();
s.addRange(r);
}
// TODO return an observable here, probably
focusStart(item) {
const s = window.getSelection();
const r = document.createRange();
r.setStart(item, 0);
r.setEnd(item, 0);
s.removeAllRanges();
s.addRange(r);
setTimeout(() => {
const r2 = document.createRange();
r2.selectNodeContents(item);
r2.collapse(false);
const s2 = window.getSelection();
s2.removeAllRanges();
s2.addRange(r2);
}, 0);
}
}

2
src/app/components/editor/node-picker/node-picker.component.html
View File

@ -12,7 +12,7 @@
<ion-label>Code Editor</ion-label>
</ion-item>
<ion-item button (click)="onSelect('file_ref')" class="files">
<i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
<i class="fa" slot="start" [ngClass]="typeIcons.files"></i>
<ion-label>Upload Files</ion-label>
</ion-item>
</ion-list>

6
src/app/components/editor/node-picker/node-picker.component.scss
View File

@ -19,3 +19,9 @@ i {
color: var(--noded-background-code);
}
}
.files {
i {
color: var(--noded-background-files);
}
}

6
src/app/components/search/Search.component.scss
View File

@ -36,6 +36,12 @@
color: var(--noded-background-code);
}
}
&.files {
.search-icon {
color: var(--noded-background-files);
}
}
}
.search-assoc {

2
src/app/pages/editor/editor.page.html
View File

@ -23,7 +23,7 @@
*ngFor="let node of editorService.immutableNodes"
>
<div class="host-icons">
<i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : node.type)" title="WYSIWYG Node"></i>
<i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : node.type)"></i>
<button (click)="onOptionsClick($event, node)">
<i class="fa fa-ellipsis-v" title="Node options"></i>
</button>

4
src/app/pages/editor/editor.page.scss
View File

@ -28,6 +28,10 @@ ion-icon.invisible {
&.database_ref {
color: var(--noded-background-db);
}
&.file_ref {
color: var(--noded-background-files);
}
}
.host-add-button {

4
src/app/pages/editor/editor.page.ts
View File

@ -97,6 +97,10 @@ export class EditorPage implements OnInit {
popover.onDidDismiss().then(result => {
console.log('adding node', result.data);
if ( !result.data ) {
return;
}
this.editorService.addNode(result.data, position, positionNodeId);
});

2
src/app/structures/node-types.ts
View File

@ -7,4 +7,6 @@ export const NodeTypeIcons = {
database_ref: 'fa fa-database',
code: 'fa fa-code',
code_ref: 'fa fa-code',
file_ref: 'fa fa-archive',
files: 'fa fa-archive',
};

4
src/global.scss
View File

@ -46,6 +46,10 @@
--noded-background-code: #FF006E;
--noded-color-code: white;
--noded-background-code-hover: #FF5CA3;
--noded-background-files: #0E7B81;
--noded-color-files: white;
--noded-background-files-hover: #14AFB8;
}
div.picker-wrapper {