mirror of https://github.com/Squidex/squidex.git
sowobm
8 years ago
12 changed files with 252 additions and 122 deletions
@ -1 +0,0 @@ |
|||
<div class="editor" #editor></div> |
|||
@ -1,8 +0,0 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.editor { |
|||
background: $color-dark-foreground; |
|||
border: 1px solid $color-input; |
|||
height: 30rem; |
|||
} |
|||
@ -1,105 +0,0 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
import { Types } from './../utils/types'; |
|||
|
|||
import { ResourceLoaderService } from './../services/resource-loader.service'; |
|||
|
|||
declare var tinymce: any; |
|||
|
|||
export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-rich-editor', |
|||
styleUrls: ['./rich-editor.component.scss'], |
|||
templateUrl: './rich-editor.component.html', |
|||
providers: [SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class RichEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
private tinyEditor: any; |
|||
private tinyInitTimer: any; |
|||
private value: string; |
|||
private isDisabled = false; |
|||
|
|||
@ViewChild('editor') |
|||
public editor: ElementRef; |
|||
|
|||
constructor( |
|||
private readonly resourceLoader: ResourceLoaderService |
|||
) { |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
clearTimeout(this.tinyInitTimer); |
|||
|
|||
tinymce.remove(this.editor); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
const self = this; |
|||
|
|||
this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.4/tinymce.min.js').then(() => { |
|||
tinymce.init({ |
|||
setup: (editor: any) => { |
|||
self.tinyEditor = editor; |
|||
self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); |
|||
|
|||
self.tinyEditor.on('change', () => { |
|||
const value = editor.getContent(); |
|||
|
|||
if (this.value !== value) { |
|||
this.value = value; |
|||
|
|||
self.callChange(value); |
|||
} |
|||
}); |
|||
|
|||
self.tinyEditor.on('blur', () => { |
|||
self.callTouched(); |
|||
}); |
|||
|
|||
this.tinyInitTimer = |
|||
setTimeout(() => { |
|||
self.tinyEditor.setContent(this.value || ''); |
|||
}, 500); |
|||
}, |
|||
removed_menuitems: 'newdocument', plugins: 'code', target: this.editor.nativeElement |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
public writeValue(value: string) { |
|||
this.value = Types.isString(value) ? value : ''; |
|||
|
|||
if (this.tinyEditor) { |
|||
this.tinyEditor.setContent(this.value); |
|||
} |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
|
|||
if (this.tinyEditor) { |
|||
this.tinyEditor.setMode(isDisabled ? 'readonly' : 'design'); |
|||
} |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
} |
|||
@ -0,0 +1,40 @@ |
|||
<div class="editor" #editor></div> |
|||
|
|||
<div class="modal asset-selector" *sqxModalView="assetsDialog;onRoot:true"> |
|||
<div class="modal-backdrop"></div> |
|||
<div class="modal-dialog"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h4 class="modal-title mce-title">Select an asset</h4> |
|||
|
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="closeAssetDialog()"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<form [formGroup]="assetsForm" (ngSubmit)="closeAssetDialog()"> |
|||
<div class="row"> |
|||
<sqx-asset class="col-3" *ngFor="let asset of assetsItems" [asset]="asset" (clicked)="onAssetClicked($event)" ></sqx-asset> |
|||
</div> |
|||
<div class="clearfix" *ngIf="assetsPager.numberOfItems > 0"> |
|||
<div class="float-right pagination"> |
|||
<span class="pagination-text">{{assetsPager.itemFirst}}-{{assetsPager.itemLast}} of {{assetsPager.numberOfItems}}</span> |
|||
|
|||
<button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoPrev" (click)="goPrev()"> |
|||
<i class="icon-angle-left"></i> |
|||
</button> |
|||
<button class="btn btn-link btn-decent pagination-button" [disabled]="!assetsPager.canGoNext" (click)="goNext()"> |
|||
<i class="icon-angle-right"></i> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group clearfix text-right"> |
|||
<button type="submit" class="btn btn-sm btn-secondary" (click)="closeAssetDialog()">Cancel</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,36 @@ |
|||
@import '_mixins'; |
|||
@import '_vars'; |
|||
|
|||
.editor { |
|||
background: $color-dark-foreground; |
|||
border: 1px solid $color-input; |
|||
height: 30rem; |
|||
} |
|||
.asset-selector { |
|||
z-index: 65560; |
|||
|
|||
.modal-header { |
|||
background: transparent; |
|||
border-bottom: 1px solid #c5c5c5; |
|||
|
|||
.modal-title { |
|||
text-decoration: none; |
|||
color: #333; |
|||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; |
|||
text-shadow: none; |
|||
} |
|||
} |
|||
|
|||
.modal-content { |
|||
width: 100%; |
|||
border-radius: 0; |
|||
-webkit-border-radius: 0; |
|||
} |
|||
.modal-dialog { |
|||
max-width: 900px; |
|||
} |
|||
|
|||
.btn { |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,165 @@ |
|||
/* |
|||
* Squidex Headless CMS |
|||
* |
|||
* @license |
|||
* Copyright (c) Sebastian Stehle. All rights reserved |
|||
*/ |
|||
|
|||
import { AfterViewInit, Component, forwardRef, ElementRef, OnDestroy, ViewChild } from '@angular/core'; |
|||
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms'; |
|||
|
|||
import { AppComponentBase } from './app.component-base'; |
|||
import { AssetUrlPipe } from './pipes'; |
|||
import { ApiUrlConfig, ModalView, AppsStoreService, AssetDto, AssetsService, ImmutableArray, DialogService, AuthService, Pager, Types, ResourceLoaderService } from './../declarations-base'; |
|||
|
|||
declare var tinymce: any; |
|||
|
|||
export const SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR: any = { |
|||
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RichEditorComponent), multi: true |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'sqx-rich-editor', |
|||
styleUrls: ['./rich-editor.component.scss'], |
|||
templateUrl: './rich-editor.component.html', |
|||
providers: [SQX_RICH_EDITOR_CONTROL_VALUE_ACCESSOR] |
|||
}) |
|||
export class RichEditorComponent extends AppComponentBase implements ControlValueAccessor, AfterViewInit, OnDestroy { |
|||
private callChange = (v: any) => { /* NOOP */ }; |
|||
private callTouched = () => { /* NOOP */ }; |
|||
private tinyEditor: any; |
|||
private tinyInitTimer: any; |
|||
private value: string; |
|||
private isDisabled = false; |
|||
private assetSelectorClickHandler: any = null; |
|||
public assetsItems: ImmutableArray<AssetDto>; |
|||
public assetsPager = new Pager(0, 0, 12); |
|||
private assetUrlGenerator: AssetUrlPipe; |
|||
|
|||
@ViewChild('editor') |
|||
public editor: ElementRef; |
|||
|
|||
public assetsDialog = new ModalView(); |
|||
public assetsForm = this.formBuilder.group({ |
|||
name: [''] |
|||
}); |
|||
|
|||
constructor(dialogs: DialogService, apps: AppsStoreService, authService: AuthService, |
|||
private readonly resourceLoader: ResourceLoaderService, |
|||
private readonly formBuilder: FormBuilder, |
|||
private readonly assetsService: AssetsService, |
|||
private readonly apiUrlConfig: ApiUrlConfig |
|||
) { |
|||
super(dialogs, apps, authService); |
|||
this.assetUrlGenerator = new AssetUrlPipe(this.apiUrlConfig); |
|||
} |
|||
|
|||
private load() { |
|||
this.appNameOnce() |
|||
.switchMap(app => this.assetsService.getAssets(app, this.assetsPager.pageSize, this.assetsPager.skip)) |
|||
.subscribe(dtos => { |
|||
this.assetsItems = ImmutableArray.of(dtos.items); |
|||
this.assetsPager = this.assetsPager.setCount(dtos.total); |
|||
}, error => { |
|||
this.notifyError(error); |
|||
}); |
|||
} |
|||
|
|||
public goNext() { |
|||
this.assetsPager = this.assetsPager.goNext(); |
|||
|
|||
this.load(); |
|||
} |
|||
|
|||
public goPrev() { |
|||
this.assetsPager = this.assetsPager.goPrev(); |
|||
|
|||
this.load(); |
|||
} |
|||
|
|||
public ngOnDestroy() { |
|||
clearTimeout(this.tinyInitTimer); |
|||
|
|||
tinymce.remove(this.editor); |
|||
} |
|||
|
|||
public ngAfterViewInit() { |
|||
const self = this; |
|||
|
|||
this.resourceLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.4/tinymce.min.js').then(() => { |
|||
tinymce.init({ |
|||
setup: (editor: any) => { |
|||
self.tinyEditor = editor; |
|||
self.tinyEditor.setMode(this.isDisabled ? 'readonly' : 'design'); |
|||
|
|||
self.tinyEditor.on('change', () => { |
|||
const value = editor.getContent(); |
|||
|
|||
if (this.value !== value) { |
|||
this.value = value; |
|||
|
|||
self.callChange(value); |
|||
} |
|||
}); |
|||
|
|||
self.tinyEditor.on('blur', () => { |
|||
self.callTouched(); |
|||
}); |
|||
|
|||
this.tinyInitTimer = |
|||
setTimeout(() => { |
|||
self.tinyEditor.setContent(this.value || ''); |
|||
}, 500); |
|||
}, |
|||
removed_menuitems: 'newdocument', plugins: 'code,image', target: this.editor.nativeElement, file_picker_types: 'image', file_picker_callback: (cb: any, value: any, meta: any) => { |
|||
self.load(); |
|||
self.assetsDialog.show(); |
|||
self.assetSelectorClickHandler = { |
|||
cb: cb, |
|||
meta: meta |
|||
}; |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
public writeValue(value: string) { |
|||
this.value = Types.isString(value) ? value : ''; |
|||
|
|||
if (this.tinyEditor) { |
|||
this.tinyEditor.setContent(this.value); |
|||
} |
|||
} |
|||
|
|||
public setDisabledState(isDisabled: boolean): void { |
|||
this.isDisabled = isDisabled; |
|||
|
|||
if (this.tinyEditor) { |
|||
this.tinyEditor.setMode(isDisabled ? 'readonly' : 'design'); |
|||
} |
|||
} |
|||
|
|||
public registerOnChange(fn: any) { |
|||
this.callChange = fn; |
|||
} |
|||
|
|||
public registerOnTouched(fn: any) { |
|||
this.callTouched = fn; |
|||
} |
|||
|
|||
public closeAssetDialog() { |
|||
this.assetsDialog.hide(); |
|||
this.assetSelectorClickHandler = null; |
|||
} |
|||
|
|||
public onAssetClicked(asset: AssetDto) { |
|||
if (this.assetSelectorClickHandler != null) { |
|||
this.assetSelectorClickHandler.cb(this.assetUrlGenerator.transform(asset), { |
|||
description: asset.fileName, |
|||
width: asset.pixelWidth, |
|||
height: asset.pixelHeight |
|||
}); |
|||
this.closeAssetDialog(); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue