ng2-json-editor
Version:
Angular2 component for editing large json documents
163 lines • 7.34 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.
*/
import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { AppGlobalsService, PathUtilService } from '../shared/services';
var RefFieldComponent = (function () {
function RefFieldComponent(http, changeDetectorRef, appGlobalsService, pathUtilService) {
this.http = http;
this.changeDetectorRef = changeDetectorRef;
this.appGlobalsService = appGlobalsService;
this.pathUtilService = pathUtilService;
this.isPreviewButtonHidden = false;
}
RefFieldComponent.prototype.ngOnChanges = function (changes) {
if (this.refConfig) {
var valueChange = changes['value'];
var schemaChange = changes['schema'];
if (valueChange && this.refConfig && this.refConfig.anchorBuilder && this.ref) {
this.anchorAttributes = this.refConfig.anchorBuilder(this.ref);
}
// instead of ngOnInit because requestOptions has to be set before fetching
if (schemaChange && schemaChange.isFirstChange()) {
this.requestOptions = this.createRequestOptionsWithConfig();
}
if (valueChange && this.isTemplateEnabled) {
if (this.refConfig.lazy) {
this.isPreviewButtonHidden = false;
}
else {
this.fetchRef();
}
}
}
if (changes['path']) {
this.pathString = this.pathUtilService.toPathString(this.path);
this.refPath = this.path.concat('$ref');
}
};
RefFieldComponent.prototype.onPreviewClick = function () {
this.isPreviewButtonHidden = true;
this.fetchRef();
};
Object.defineProperty(RefFieldComponent.prototype, "customTemplate", {
get: function () {
return this.appGlobalsService.templates[this.refConfig.templateName];
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "refConfig", {
get: function () {
return this.schema.refFieldConfig;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "ref", {
get: function () {
return this.value.get('$ref');
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "anchorHref", {
get: function () {
return this.anchorAttributes ? this.anchorAttributes.href : this.ref;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "anchorDisplay", {
get: function () {
return this.anchorAttributes ? this.anchorAttributes.display : this.ref;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "isTemplateEnabled", {
get: function () {
return this.refConfig !== undefined && this.refConfig.templateName !== undefined;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "shouldDisplayTemplate", {
get: function () {
return this.isPreviewButtonHidden || !this.refConfig.lazy;
},
enumerable: true,
configurable: true
});
Object.defineProperty(RefFieldComponent.prototype, "shouldDisplayInputField", {
get: function () {
return this.refConfig !== undefined && this.refConfig.displayInputField;
},
enumerable: true,
configurable: true
});
RefFieldComponent.prototype.fetchRef = function () {
var _this = this;
this.refData = undefined;
this.http
.get(this.ref, this.requestOptions)
.map(function (res) { return res.json(); })
.catch(function (error) {
return Observable.of({ $error: error });
}).subscribe(function (data) {
_this.refData = data;
_this.changeDetectorRef.markForCheck();
});
};
RefFieldComponent.prototype.createRequestOptionsWithConfig = function () {
var headers = new Headers();
if (this.refConfig.headers) {
this.refConfig.headers
.forEach(function (header) { return headers.append(header.name, header.value); });
}
return new RequestOptions({ headers: headers });
};
return RefFieldComponent;
}());
export { RefFieldComponent };
RefFieldComponent.decorators = [
{ type: Component, args: [{
selector: 'ref-field',
styles: ["button.btn-preview-template { background: transparent; border: 0; width: 100%; height: 100%; } .align-center { width: 100%; text-align: center; } .break-word { word-break: break-word; } "],
template: "<div [id]=\"pathString\"> <div *ngIf=\"shouldDisplayInputField\"> <primitive-field [value]=\"ref\" [schema]=\"schema['properties']['$ref']\" [path]=\"refPath\"></primitive-field> </div> <div *ngIf=\"ref\"> <div *ngIf=\"isTemplateEnabled\"> <button class=\"btn-preview-template\" *ngIf=\"!shouldDisplayTemplate\" (click)=\"onPreviewClick($event)\"><i class=\"fa fa-eye\"></i></button> <div *ngIf=\"shouldDisplayTemplate\"> <ng-template *ngIf=\"refData\" [ngTemplateOutlet]=\"customTemplate\" [ngTemplateOutletContext]=\"{response: refData}\"></ng-template> <i *ngIf=\"!refData\" class=\"fa fa-spinner fa-spin align-center\"></i> </div> </div> <div *ngIf=\"!isTemplateEnabled\"> <a target=\"_blank\" class=\"break-word\" [href]=\"anchorHref\">{{anchorDisplay}}</a> </div> </div> </div> ",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
RefFieldComponent.ctorParameters = function () { return [
{ type: Http, },
{ type: ChangeDetectorRef, },
{ type: AppGlobalsService, },
{ type: PathUtilService, },
]; };
RefFieldComponent.propDecorators = {
'schema': [{ type: Input },],
'value': [{ type: Input },],
'path': [{ type: Input },],
};
//# sourceMappingURL=ref-field.component.js.map