ng2-json-editor
Version:
Angular2 component for editing large json documents
184 lines • 12.5 kB
JavaScript
/*
* This file is part of ng2-json-editor.
* Copyright (C) 2016 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.
*/
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { AbstractFieldComponent } from '../abstract-field';
import { AppGlobalsService, ProblemsService, ComponentTypeService, JsonStoreService, KeysStoreService, SchemaValidationService, PathUtilService, DomUtilService } from '../shared/services';
var PrimitiveFieldComponent = (function (_super) {
__extends(PrimitiveFieldComponent, _super);
function PrimitiveFieldComponent(schemaValidationService, componentTypeService, appGlobalsService, problemsService, jsonStoreService, keysStoreService, pathUtilService, domUtilService, changeDetectorRef) {
var _this = _super.call(this, appGlobalsService, problemsService, pathUtilService, changeDetectorRef, jsonStoreService) || this;
_this.schemaValidationService = schemaValidationService;
_this.componentTypeService = componentTypeService;
_this.appGlobalsService = appGlobalsService;
_this.problemsService = problemsService;
_this.jsonStoreService = jsonStoreService;
_this.keysStoreService = keysStoreService;
_this.pathUtilService = pathUtilService;
_this.domUtilService = domUtilService;
_this.changeDetectorRef = changeDetectorRef;
_this.internalErrors = [];
return _this;
}
PrimitiveFieldComponent.prototype.ngOnInit = function () {
var _this = this;
_super.prototype.ngOnInit.call(this);
if (this.value !== this.schema.default) {
this.lastCommitedValue = this.value;
}
this.problemsService
.internalCategorizedProblems$
.takeUntil(this.isDestroyed)
.subscribe(function (internalCategorizedErrorMap) {
_this.internalErrors = internalCategorizedErrorMap.errors[_this.pathString] || [];
});
this.appGlobalsService
.adminMode$
.takeUntil(this.isDestroyed)
.subscribe(function (adminMode) {
_this.changeDetectorRef.markForCheck();
});
this.validate();
};
PrimitiveFieldComponent.prototype.ngOnDestroy = function () {
_super.prototype.ngOnDestroy.call(this);
if (this.internalErrors.length > 0) {
this.problemsService.setInternalProblemsForPath(this.pathString, []);
}
};
PrimitiveFieldComponent.prototype.commitValueChange = function () {
var _this = this;
this.validate();
this.lastCommitedValue = this.value;
this.jsonStoreService.setIn(this.path, this.value);
if (this.schema.onValueChange) {
// setTimeout to workaround the case when the value is changed back to previous value inside onValuChange callback
setTimeout(function () { return _this.schema.onValueChange(_this.path, _this.value, _this.jsonStoreService, _this.keysStoreService); });
}
};
PrimitiveFieldComponent.prototype.onBlur = function () {
this.domUtilService.clearHighlight();
if (this.value !== this.lastCommitedValue) {
this.commitValueChange();
}
};
PrimitiveFieldComponent.prototype.onKeypress = function (event) {
if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault();
document.activeElement.blur();
}
};
PrimitiveFieldComponent.prototype.onValueChange = function (value) {
this.value = this.schema.omitStripWhitespace ? value : value.trim();
};
PrimitiveFieldComponent.prototype.onSearchableDropdownSelect = function (value) {
this.onValueChange(value);
this.commitValueChange();
};
PrimitiveFieldComponent.prototype.onCompletionSelect = function (selection) {
this.commitValueChange();
var onCompletionSelect = this.schema.autocompletionConfig.onCompletionSelect;
if (onCompletionSelect) {
onCompletionSelect(this.path, selection, this.jsonStoreService, this.keysStoreService);
}
};
Object.defineProperty(PrimitiveFieldComponent.prototype, "tabIndex", {
get: function () {
return this.disabled ? -1 : 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PrimitiveFieldComponent.prototype, "tooltipPosition", {
get: function () {
if (this.pathString.startsWith(this.appGlobalsService.firstElementPathForCurrentTab)) {
return 'bottom';
}
else {
return 'top';
}
},
enumerable: true,
configurable: true
});
PrimitiveFieldComponent.prototype.hasErrors = function () {
return _super.prototype.hasErrors.call(this) || this.internalErrors.length > 0;
};
Object.defineProperty(PrimitiveFieldComponent.prototype, "errorClass", {
get: function () {
return !this.replaceJsonPatches[0] && this.hasErrors() ? 'error' : '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(PrimitiveFieldComponent.prototype, "isPathToAnIndex", {
get: function () {
return typeof this.path[this.path.length - 1] === 'number';
},
enumerable: true,
configurable: true
});
PrimitiveFieldComponent.prototype.validate = function () {
if (this.value != null && this.value !== '' && this.externalErrors.length === 0) {
this.internalErrors = this.schemaValidationService.validateValue(this.value, this.schema);
this.problemsService.setInternalProblemsForPath(this.pathString, this.internalErrors);
}
};
return PrimitiveFieldComponent;
}(AbstractFieldComponent));
export { PrimitiveFieldComponent };
PrimitiveFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'primitive-field',
encapsulation: ViewEncapsulation.None,
styles: ["td.value-container span[contenteditable=true], td.value-container input { vertical-align: middle; transition: all 0.5s ease; border: none; background-color: transparent; display: inline-block; width: 100%; } table.primitive-field-container { width: 100%; } td.link-button-container { width: 22px; } td.value-container { width: 100%; padding: 3px 3px 3px 6px !important; } td.value-container:hover { background-color: #ffa !important; } a.no-decoration { text-decoration: none; } [contenteditable=true] { min-height: 18px; word-break: break-word; } [contenteditable=true]:empty:before { content: attr(placeholder); color: darkgray; display: block; /* For Firefox */ } .tooltip-left-align { margin-left: 12px; padding: 0px; } .btn-merge { border: none; background: transparent; width: 100%; text-align: left; white-space: normal; } .orange-left-border { border-left: 9px solid #e67e22; border-radius: 0; } .fa-bolt { color: #e67e22; } "],
template: "<div [id]=\"pathString\" [ngClass]=\"redLeftBorderClass\"> <table class=\"primitive-field-container\" [ngSwitch]=\"schema.componentType\"> <tr [ngClass]=\"errorClass\"> <ng-template #errorsTooltipTemplate> <ul class=\"tooltip-left-align\"> <li *ngFor=\"let error of internalErrors\"> {{error.message}} </li> <li *ngFor=\"let error of externalErrors\"> {{error.message}} </li> </ul> </ng-template> <td *ngIf=\"!replaceJsonPatches[0]; else patchTemplate\" class=\"value-container\" [class.disabled]=\"disabled\" [tooltip]=\"errorsTooltipTemplate\" [isDisabled]=\"!hasErrors()\" placement=\"{{tooltipPosition}}\" container=\"body\"> <div *ngSwitchCase=\"'string'\"> <string-input [pathString]=\"pathString\" [value]=\"value\" (valueChange)=\"onValueChange($event)\" [disabled]=\"disabled\" [tabIndex]=\"tabIndex\" [latexPreviewEnabled]=\"schema.latexPreviewEnabled\" [placeholder]=\"schema.title\" (blur)=\"onBlur()\" (onKeypress)=\"onKeypress($event)\"> </string-input> </div> <div *ngSwitchCase=\"'enum'\"> <searchable-dropdown [pathString]=\"pathString\" [value]=\"value\" [placeholder]=\"schema.title\" [items]=\"schema.enum\" [shortcutMap]=\"schema.enumShorcutMap\" (onSelect)=\"onSearchableDropdownSelect($event)\" [displayValueMap]=\"schema.enumDisplayValueMap\" [tabIndex]=\"tabIndex\" (onBlur)=\"onBlur()\"></searchable-dropdown> </div> <div *ngSwitchCase=\"'autocomplete'\"> <autocomplete-input [pathString]=\"pathString\" [value]=\"value\" [autocompletionConfig]=\"schema.autocompletionConfig\" (onBlur)=\"onBlur()\" (onKeypress)=\"onKeypress($event)\" (onValueChange)=\"onValueChange($event)\" (onCompletionSelect) = \"onCompletionSelect($event)\" [placeholder]=\"schema.title\" [tabIndex]=\"tabIndex\"></autocomplete-input> </div> <div *ngSwitchCase=\"'integer'\"> <input type=\"number\" [(ngModel)]=\"value\" [tabindex]=\"tabIndex\" [attr.data-path]=\"pathString\" (blur)=\"onBlur()\" (keypress)=\"onKeypress($event)\" [placeholder]=\"schema.title\"> </div> <div *ngSwitchCase=\"'boolean'\"> <input type=\"checkbox\" [(ngModel)]=\"value\" (ngModelChange)=\"onBlur()\" [placeholder]=\"schema.title\"> </div> <div *ngSwitchDefault> ## Not recognized type: {{valueType}} </div> </td> <td class=\"link-button-container\"> <a *ngIf=\"schema.linkBuilder\" class=\"no-decoration\" target=\"_blank\" [href]=\"schema.linkBuilder(value)\"> <i class=\"fa fa-link\" aria-hidden=\"true\"></i> </a> <a *ngIf=\"!schema.linkBuilder && schema.format === 'url'\" class=\"no-decoration\" target=\"_blank\" [href]=\"value\"> <i class=\"fa fa-link\" aria-hidden=\"true\"></i> </a> </td> </tr> <tr *ngIf=\"removeJsonPatch\"> <patch-actions [patch]=\"removeJsonPatch\"></patch-actions> </tr> </table> </div> <ng-template #patchTemplate> <button class=\"btn btn-default btn-merge orange-left-border\" type=\"button\" [popover]=\"mergePopover\" [popoverContext]=\"{currentValue: value, patchValue: replaceJsonPatches[0].value}\" popoverTitle=\"Merge\" container=\"body\"> {{value}} <i class=\"fa fa-bolt\"></i> </button> </ng-template> <ng-template let-currentValue=\"currentValue\" let-patchValue=\"patchValue\" #mergePopover> <text-diff [currentText]=\"currentValue.toString()\" [newText]=\"patchValue ? patchValue.toString() : ''\"></text-diff> <patch-actions [patch]=\"replaceJsonPatches[0]\" [addActionEnabled]=\"isPathToAnIndex\"></patch-actions> </ng-template>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
PrimitiveFieldComponent.ctorParameters = function () { return [
{ type: SchemaValidationService, },
{ type: ComponentTypeService, },
{ type: AppGlobalsService, },
{ type: ProblemsService, },
{ type: JsonStoreService, },
{ type: KeysStoreService, },
{ type: PathUtilService, },
{ type: DomUtilService, },
{ type: ChangeDetectorRef, },
]; };
PrimitiveFieldComponent.propDecorators = {
'schema': [{ type: Input },],
'path': [{ type: Input },],
'value': [{ type: Input },],
};
//# sourceMappingURL=primitive-field.component.js.map