Add files type icons and colors
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
fdeea85450
commit
e30e8681e4
@ -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>
|
|
@ -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;
|
|
||||||
}
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in new issue