[plugins-functionality | DONE | ADDED ] HTML editor switch
This commit is contained in:
argirok
parent
9c370fd53b
commit
e5a98845a7
|
|
@ -9,11 +9,11 @@ import {PluginGraphInfo} from "./plugin-graph-info.component";
|
|||
<plugin-field-edit [value]="pluginObject.title"
|
||||
type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
<div class="uk-margin-top">
|
||||
<plugin-field-edit [value]="pluginObject.paragraph1"
|
||||
<plugin-field-edit [value]="pluginObject.paragraph1" [switchToHTMLEditor]="true"
|
||||
type="textarea" field="paragraph1" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
<div class="uk-margin-top">
|
||||
<plugin-field-edit [value]="pluginObject.paragraph2" class="uk-margin-xsmall-top"
|
||||
<plugin-field-edit [value]="pluginObject.paragraph2" class="uk-margin-xsmall-top" [switchToHTMLEditor]="true"
|
||||
type="textarea" field="paragraph2" (changed)="valueChanged($event)"></plugin-field-edit>
|
||||
</div>
|
||||
<div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link</div>
|
||||
|
|
|
|||
|
|
@ -29,12 +29,7 @@ export class PluginEditEvent {
|
|||
pluginEditEvent:PluginEditEvent;
|
||||
|
||||
valueChanged($event:PluginEditEvent){
|
||||
if(this.editTemplate){
|
||||
// this.pluginTemplate.object[$event.field]=$event.value;
|
||||
this.pluginObject[$event.field]=$event.value;
|
||||
}else{
|
||||
this.pluginObject[$event.field]=$event.value;
|
||||
}
|
||||
this.pluginObject[$event.field]=$event.value;
|
||||
this.valuesChanged.emit($event)
|
||||
}
|
||||
toggleSubMenu(open:boolean){
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
|
||||
import {PluginEditEvent} from "./base-plugin.form.component";
|
||||
import {AlertModal} from "../../../utils/modal/alert";
|
||||
import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
|
||||
|
||||
|
||||
@Component({
|
||||
|
|
@ -9,49 +11,72 @@ import {PluginEditEvent} from "./base-plugin.form.component";
|
|||
<mat-slide-toggle [checked]="value" (change)="updateObject($event.checked)"></mat-slide-toggle>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="type!='boolean'">
|
||||
<input *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)"
|
||||
type="checkbox" class="uk-checkbox">
|
||||
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()"
|
||||
type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
|
||||
<div *ngIf="type == 'textarea'" class="uk-grid">
|
||||
<ng-container *ngIf="switchToHTMLEditor ">
|
||||
<a class="uk-text-xsmall uk-text-right uk-margin-top uk-width-1-1" (click)="openHTMLEditor()"><span
|
||||
uk-icon="icon:code; ratio:0.5"></span> open editor</a>
|
||||
</ng-container>
|
||||
<div class="uk-width-1-1">
|
||||
<div input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea"
|
||||
[rows]="5" (valueChange)="updateObject($event)" inputClass=" uk-padding-remove "
|
||||
style="min-height: 100px; margin-left:-30px " class="uk-margin-top"></div>
|
||||
</div>
|
||||
|
||||
<!-- <a *ngIf="!editingModeOn" class="uk-float-right" (click)=" editClicked.emit({field: field, type: type}); editingModeOn = true ">Edit</a>-->
|
||||
<ng-container *ngIf="editingModeOn">
|
||||
<!-- <a *ngIf="editingModeOn" class="uk-float-right" (click)="editClicked.emit(null); editingModeOn = false ">close</a>-->
|
||||
<!-- <br>-->
|
||||
|
||||
<!--<input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
|
||||
[ngModel]="getSelectedPages().length ==checkboxes.length"/>-->
|
||||
<input *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)" type="checkbox" class="uk-checkbox">
|
||||
<div *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text" (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
|
||||
<div *ngIf="type == 'textarea'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea" (valueChange)="updateObject($event)" inputClass=" uk-padding-remove " style="min-height: 100px; margin-left:-30px " class="uk-margin-top"></div>
|
||||
<!--<div *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
|
||||
<div *ngIf="type == 'HTML'" class="uk-width-1-1">
|
||||
<ckeditor [readonly]="false"
|
||||
debounce="500"
|
||||
[formControl]="value"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
|
||||
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
|
||||
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
|
||||
'CreateDiv,Flash,PageBreak,' +
|
||||
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</div>-->
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<modal-alert #HTMLEditorModal (alertOutput)="closeHTMLEditor()" [large]="true"
|
||||
classTitle="uk-background-primary uk-light">
|
||||
<ckeditor [readonly]="false"
|
||||
debounce="100"
|
||||
[formControl]="HTMLForm.get('value')"
|
||||
[config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
|
||||
removeButtons: 'Save,NewPage,DocProps,Preview,Print,' +
|
||||
'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
|
||||
'CreateDiv,Flash,PageBreak,' +
|
||||
'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language,JustifyLeft,JustifyRight,JustifyCenter,JustifyBlock,FontSize,TextColor,BGColor',
|
||||
extraPlugins: 'divarea'}">
|
||||
</ckeditor>
|
||||
</modal-alert>
|
||||
`,
|
||||
|
||||
|
||||
})
|
||||
export class PluginFieldEditComponent {
|
||||
@Input() type;
|
||||
@Input() value;
|
||||
@Input() field;
|
||||
@Input() placeholder;
|
||||
@Output() editClicked:EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
|
||||
@Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter()
|
||||
editingModeOn: boolean = true;
|
||||
@Input() type;
|
||||
@Input() value;
|
||||
@Input() field;
|
||||
@Input() placeholder;
|
||||
@Input() switchToHTMLEditor;
|
||||
@Output() editClicked: EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
|
||||
@Output() changed: EventEmitter<PluginEditEvent> = new EventEmitter();
|
||||
htmlEditorView = false;
|
||||
@ViewChild('HTMLEditorModal') HTMLEditorModal: AlertModal;
|
||||
HTMLForm: UntypedFormGroup = this._fb.group({
|
||||
value: this._fb.control("")
|
||||
});
|
||||
|
||||
updateObject(value){
|
||||
console.log(value)
|
||||
this.value = value;
|
||||
this.changed.emit({field:this.field, value: this.value, type: this.type});
|
||||
}
|
||||
constructor(private _fb: UntypedFormBuilder) {
|
||||
}
|
||||
|
||||
updateObject(value) {
|
||||
console.log(value)
|
||||
this.value = value;
|
||||
this.changed.emit({field: this.field, value: this.value, type: this.type});
|
||||
}
|
||||
|
||||
openHTMLEditor() {
|
||||
this.HTMLForm.get('value').setValue(this.value)
|
||||
this.htmlEditorView = true;
|
||||
this.HTMLEditorModal.alertTitle = "HTML Editor";
|
||||
this.HTMLEditorModal.open();
|
||||
}
|
||||
|
||||
closeHTMLEditor() {
|
||||
this.htmlEditorView = false;
|
||||
this.updateObject(this.HTMLForm.get('value').value)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {PluginFieldEditComponent} from "./plugin-field-edit.component";
|
||||
import {InputModule} from "../../../sharedComponents/input/input.module";
|
||||
import {MatSlideToggleModule} from "@angular/material/slide-toggle";
|
||||
import {CKEditorModule} from "ng2-ckeditor";
|
||||
import {AlertModalModule} from "../../../utils/modal/alertModal.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, InputModule, MatSlideToggleModule
|
||||
CommonModule, RouterModule, FormsModule, InputModule, MatSlideToggleModule, CKEditorModule, AlertModalModule, FormsModule, ReactiveFormsModule
|
||||
],
|
||||
declarations: [PluginFieldEditComponent],
|
||||
exports: [PluginFieldEditComponent]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {RouterModule} from '@angular/router';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
||||
import {PluginEditWrapperComponent} from "./plugin-edit-wrapper.component";
|
||||
import {PluginOpenaireProductsFormComponent} from "../components/openaireProducts/plugin-openaire-products.form.component";
|
||||
import {PluginFieldEditModule} from "../utils/plugin-field-edit.module";
|
||||
|
|
@ -16,10 +16,14 @@ import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-grap
|
|||
import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component";
|
||||
import {PluginSearchBarFormComponent} from "../components/search-bar/plugin-search-bar.form.component";
|
||||
import {PluginCardInfoFormComponent} from "../components/card-info/plugin-card-info-form.component";
|
||||
import {CKEditorModule} from "ng2-ckeditor";
|
||||
import {InputModule} from "../../../sharedComponents/input/input.module";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
|
||||
CommonModule, RouterModule,
|
||||
ReactiveFormsModule, InputModule,
|
||||
FormsModule, PluginFieldEditModule, IconsModule, CKEditorModule,
|
||||
],
|
||||
declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent, PluginSearchBarFormComponent, PluginCardInfoFormComponent],
|
||||
exports: [PluginEditWrapperComponent]
|
||||
|
|
|
|||
Loading…
Reference in New Issue