ng2-json-editor
Version:
Angular2 component for editing large json documents
105 lines • 4.75 kB
JavaScript
/*
* This file is part of ng2-json-editor.
* Copyright (C) 2017 CERN.
*
* ng2-json-editor is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of the
* License, or (at your option) any later version.
*
* ng2-json-editor is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with ng2-json-editor; if not, write to the Free Software Foundation, Inc.,
* 59 Temple Place, Suite 330, Boston, MA 02111-1307, USA.
* In applying this license, CERN does not
* waive the privileges and immunities granted to it by virtue of its status
* as an Intergovernmental Organization or submit itself to any jurisdiction.
*/
import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy, ViewChild } from '@angular/core';
import { DomUtilService, KatexService } from '../shared/services';
var StringInputComponent = (function () {
function StringInputComponent(domUtilService, katexService) {
this.domUtilService = domUtilService;
this.katexService = katexService;
this.blur = new EventEmitter();
this.onKeypress = new EventEmitter();
this.valueChange = new EventEmitter();
}
StringInputComponent.prototype.ngOnChanges = function (changes) {
var valueChange = changes['value'];
if (valueChange) {
this.contentModel = this.value;
if (this.latexPreviewEnabled && !valueChange.firstChange) {
this.renderLatex();
}
}
};
StringInputComponent.prototype.ngOnInit = function () {
if (this.shouldShowLatexPreview) {
this.latexPreviewShown = true;
}
};
StringInputComponent.prototype.ngAfterViewInit = function () {
// render latex preview on init, if it's enabled and value is not empty
if (this.shouldShowLatexPreview) {
this.renderLatex();
}
};
StringInputComponent.prototype.onBlur = function () {
if (this.shouldShowLatexPreview) {
this.latexPreviewShown = true;
this.value = this.contentModel;
}
this.blur.emit();
};
StringInputComponent.prototype.renderLatex = function () {
this.katexService.renderMathInText(this.value, this.latexPreviewEl.nativeElement);
};
StringInputComponent.prototype.hideLatexPreview = function (contentEditableEl) {
this.latexPreviewShown = false;
setTimeout(function () { return contentEditableEl.focus(); });
};
StringInputComponent.prototype.contentModelChange = function (value) {
this.contentModel = value;
this.valueChange.emit(value);
};
Object.defineProperty(StringInputComponent.prototype, "shouldShowLatexPreview", {
get: function () {
return this.latexPreviewEnabled && Boolean(this.value);
},
enumerable: true,
configurable: true
});
return StringInputComponent;
}());
export { StringInputComponent };
StringInputComponent.decorators = [
{ type: Component, args: [{
selector: 'string-input',
styles: [""],
template: "<span [class.hidden]=\"latexPreviewShown\" [attr.contenteditable]=\"!disabled\" [attr.data-path]=\"pathString\" [tabindex]=\"tabIndex\" [contentModel]=\"contentModel\" (contentModelChange)=\"contentModelChange($event)\" (blur)=\"onBlur()\" (keypress)=\"onKeypress.emit($event)\" attr.placeholder=\"{{placeholder || '\u2063'}}\" #contentEditable></span> <div [class.hidden]=\"!latexPreviewEnabled || !latexPreviewShown\" (click)=\"hideLatexPreview(contentEditable)\" (blur)=\"hideLatexPreview(contentEditable)\" #latexPreview></div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
StringInputComponent.ctorParameters = function () { return [
{ type: DomUtilService, },
{ type: KatexService, },
]; };
StringInputComponent.propDecorators = {
'latexPreviewEl': [{ type: ViewChild, args: ['latexPreview',] },],
'value': [{ type: Input },],
'disabled': [{ type: Input },],
'pathString': [{ type: Input },],
'placeholder': [{ type: Input },],
'tabIndex': [{ type: Input },],
'latexPreviewEnabled': [{ type: Input },],
'blur': [{ type: Output },],
'onKeypress': [{ type: Output },],
'valueChange': [{ type: Output },],
};
//# sourceMappingURL=string-input.component.js.map