|
|
|
@ -18,17 +18,19 @@ import { |
|
|
|
ChangeDetectorRef, |
|
|
|
Component, |
|
|
|
ElementRef, |
|
|
|
EventEmitter, |
|
|
|
forwardRef, |
|
|
|
Input, |
|
|
|
OnChanges, |
|
|
|
OnDestroy, |
|
|
|
OnInit, |
|
|
|
Output, |
|
|
|
SimpleChanges, |
|
|
|
ViewChild, ViewEncapsulation |
|
|
|
ViewChild, |
|
|
|
ViewEncapsulation |
|
|
|
} from '@angular/core'; |
|
|
|
import { ControlValueAccessor, UntypedFormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms'; |
|
|
|
import { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, UntypedFormControl, Validator } from '@angular/forms'; |
|
|
|
import { Ace } from 'ace-builds'; |
|
|
|
import { coerceBooleanProperty } from '@angular/cdk/coercion'; |
|
|
|
import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions'; |
|
|
|
import { Store } from '@ngrx/store'; |
|
|
|
import { AppState } from '@core/core.state'; |
|
|
|
@ -38,6 +40,7 @@ import { guid } from '@core/utils'; |
|
|
|
import { ResizeObserver } from '@juggle/resize-observer'; |
|
|
|
import { getAce } from '@shared/models/ace/ace.models'; |
|
|
|
import { beautifyJs } from '@shared/models/beautify.models'; |
|
|
|
import { coerceBoolean } from '@shared/decorators/coercion'; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
selector: 'tb-json-content', |
|
|
|
@ -79,41 +82,30 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid |
|
|
|
|
|
|
|
@Input() editorStyle: {[klass: string]: any}; |
|
|
|
|
|
|
|
private readonlyValue: boolean; |
|
|
|
get readonly(): boolean { |
|
|
|
return this.readonlyValue; |
|
|
|
} |
|
|
|
@Input() tbPlaceholder: string; |
|
|
|
|
|
|
|
@Input() |
|
|
|
set readonly(value: boolean) { |
|
|
|
this.readonlyValue = coerceBooleanProperty(value); |
|
|
|
} |
|
|
|
@coerceBoolean() |
|
|
|
hideToolbar = false; |
|
|
|
|
|
|
|
private validateContentValue: boolean; |
|
|
|
get validateContent(): boolean { |
|
|
|
return this.validateContentValue; |
|
|
|
} |
|
|
|
@Input() |
|
|
|
set validateContent(value: boolean) { |
|
|
|
this.validateContentValue = coerceBooleanProperty(value); |
|
|
|
} |
|
|
|
@coerceBoolean() |
|
|
|
readonly: boolean; |
|
|
|
|
|
|
|
private validateOnChangeValue: boolean; |
|
|
|
get validateOnChange(): boolean { |
|
|
|
return this.validateOnChangeValue; |
|
|
|
} |
|
|
|
@Input() |
|
|
|
set validateOnChange(value: boolean) { |
|
|
|
this.validateOnChangeValue = coerceBooleanProperty(value); |
|
|
|
} |
|
|
|
@coerceBoolean() |
|
|
|
validateContent: boolean; |
|
|
|
|
|
|
|
private requiredValue: boolean; |
|
|
|
get required(): boolean { |
|
|
|
return this.requiredValue; |
|
|
|
} |
|
|
|
@Input() |
|
|
|
set required(value: boolean) { |
|
|
|
this.requiredValue = coerceBooleanProperty(value); |
|
|
|
} |
|
|
|
@coerceBoolean() |
|
|
|
validateOnChange: boolean; |
|
|
|
|
|
|
|
@Input() |
|
|
|
@coerceBoolean() |
|
|
|
required: boolean; |
|
|
|
|
|
|
|
@Output() |
|
|
|
blur: EventEmitter<void> = new EventEmitter<void>(); |
|
|
|
|
|
|
|
fullscreen = false; |
|
|
|
|
|
|
|
@ -124,6 +116,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid |
|
|
|
errorShowed = false; |
|
|
|
|
|
|
|
private propagateChange = null; |
|
|
|
private onTouched = () => {}; |
|
|
|
|
|
|
|
constructor(public elementRef: ElementRef, |
|
|
|
protected store: Store<AppState>, |
|
|
|
@ -163,11 +156,17 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid |
|
|
|
this.updateView(); |
|
|
|
} |
|
|
|
}); |
|
|
|
if (this.validateContent) { |
|
|
|
this.jsonEditor.on('blur', () => { |
|
|
|
this.jsonEditor.on('blur', () => { |
|
|
|
if (this.validateContent) { |
|
|
|
this.contentValid = this.doValidate(true); |
|
|
|
this.cd.markForCheck(); |
|
|
|
}); |
|
|
|
} |
|
|
|
this.onTouched(); |
|
|
|
this.blur.next(); |
|
|
|
}); |
|
|
|
|
|
|
|
if (this.tbPlaceholder && this.tbPlaceholder.length) { |
|
|
|
this.createPlaceholder(); |
|
|
|
} |
|
|
|
this.editorResize$ = new ResizeObserver(() => { |
|
|
|
this.onAceEditorResize(); |
|
|
|
@ -177,6 +176,39 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
private createPlaceholder() { |
|
|
|
this.jsonEditor.on('input', this.updateEditorPlaceholder.bind(this)); |
|
|
|
setTimeout(this.updateEditorPlaceholder.bind(this), 100); |
|
|
|
} |
|
|
|
|
|
|
|
private updateEditorPlaceholder() { |
|
|
|
const shouldShow = !this.jsonEditor.session.getValue().length; |
|
|
|
let node: HTMLElement = (this.jsonEditor.renderer as any).emptyMessageNode; |
|
|
|
if (!shouldShow && node) { |
|
|
|
this.jsonEditor.renderer.getMouseEventTarget().removeChild(node); |
|
|
|
(this.jsonEditor.renderer as any).emptyMessageNode = null; |
|
|
|
} else if (shouldShow && !node) { |
|
|
|
const placeholderElement = $('<textarea></textarea>'); |
|
|
|
placeholderElement.text(this.tbPlaceholder); |
|
|
|
placeholderElement.addClass('ace_invisible ace_emptyMessage'); |
|
|
|
placeholderElement.css({ |
|
|
|
padding: '0 9px', |
|
|
|
width: '100%', |
|
|
|
border: 'none', |
|
|
|
textWrap: 'nowrap', |
|
|
|
whiteSpace: 'pre', |
|
|
|
overflow: 'hidden', |
|
|
|
resize: 'none', |
|
|
|
fontSize: '15px' |
|
|
|
}); |
|
|
|
const rows = this.tbPlaceholder.split('\n').length; |
|
|
|
placeholderElement.attr('rows', rows); |
|
|
|
node = placeholderElement[0]; |
|
|
|
(this.jsonEditor.renderer as any).emptyMessageNode = node; |
|
|
|
this.jsonEditor.renderer.getMouseEventTarget().appendChild(node); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
ngOnDestroy(): void { |
|
|
|
if (this.editorResize$) { |
|
|
|
this.editorResize$.disconnect(); |
|
|
|
@ -219,6 +251,7 @@ export class JsonContentComponent implements OnInit, ControlValueAccessor, Valid |
|
|
|
} |
|
|
|
|
|
|
|
registerOnTouched(fn: any): void { |
|
|
|
this.onTouched = fn; |
|
|
|
} |
|
|
|
|
|
|
|
setDisabledState(isDisabled: boolean): void { |
|
|
|
|
Andrew Shvayka
2 years ago
GitHub