ng2-json-editor
Version:
Angular2 component for editing large json documents
109 lines • 5.37 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 } from '@angular/core';
import { DomUtilService, WindowHrefService, PathUtilService, AppGlobalsService } from '../shared/services';
var TreeMenuItemComponent = (function () {
function TreeMenuItemComponent(windowHrefService, domUtilService, pathUtilService, appGlobalsService) {
this.windowHrefService = windowHrefService;
this.domUtilService = domUtilService;
this.pathUtilService = pathUtilService;
this.appGlobalsService = appGlobalsService;
this.isCollapsed = true;
}
TreeMenuItemComponent.prototype.ngOnInit = function () {
this.href = this.windowHrefService.hrefWithoutHash + "#" + this.path;
};
TreeMenuItemComponent.prototype.ngOnChanges = function (changes) {
if (changes['value'] && this.value && this.schema.type === 'object') {
this.keys = this.value.keySeq().toSet();
}
};
TreeMenuItemComponent.prototype.toggle = function (event) {
// fix to trigger :focus css after focusAndSelectFirstInputChildById called.
event.preventDefault();
this.isCollapsed = !this.isCollapsed;
this.domUtilService.focusAndSelectFirstEditableChildById(this.path, true);
};
TreeMenuItemComponent.prototype.collapse = function () {
this.isCollapsed = true;
};
Object.defineProperty(TreeMenuItemComponent.prototype, "isCollapsable", {
get: function () {
var schemaType = this.schema.type;
return this.isNotLeaf && (schemaType === 'object' || schemaType === 'array');
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeMenuItemComponent.prototype, "maxDepth", {
get: function () {
return this.appGlobalsService.config.menuMaxDepth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeMenuItemComponent.prototype, "isNotLeaf", {
get: function () {
return this.maxDepth === undefined || this.depth < this.maxDepth;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TreeMenuItemComponent.prototype, "adminMode$", {
get: function () {
return this.appGlobalsService.adminMode$;
},
enumerable: true,
configurable: true
});
TreeMenuItemComponent.prototype.getChildPath = function (indexOrKey) {
return "" + this.path + this.pathUtilService.separator + indexOrKey;
};
TreeMenuItemComponent.prototype.trackByElement = function (index, element) {
return element;
};
return TreeMenuItemComponent;
}());
export { TreeMenuItemComponent };
TreeMenuItemComponent.decorators = [
{ type: Component, args: [{
selector: 'tree-menu-item',
styles: ["a { color: #e0dfdf; } "],
template: "<div> <a [href]=\"href\" (click)=\"toggle($event)\">{{label}}</a> <a *ngIf=\"isCollapsable\" [hidden]=\"isCollapsed\" (click)=\"collapse()\"> [x]</a> <div *ngIf=\"isNotLeaf\" [ngSwitch]=\"schema.type\" [hidden]=\"isCollapsed\"> <ul> <div *ngSwitchCase=\"'object'\"> <li *ngFor=\"let key of keys | filterHiddenFields:schema:(adminMode$ | async) | addAlwaysShowFields:schema | sortAlphabetically; trackBy:trackByElement\"> <tree-menu-item [label]=\"key\" [value]=\"value.get(key)\" [schema]=\"schema.properties[key]\" [path]=\"getChildPath(key)\" [depth]=\"depth + 1\"></tree-menu-item> </li> </div> <div *ngSwitchCase=\"'array'\"> <li *ngFor=\"let element of value; let i = index; trackBy:trackByElement\"> <tree-menu-item [label]=\"i\" [value]=\"element\" [schema]=\"schema.items\" [path]=\"getChildPath(i)\" [depth]=\"depth + 1\"></tree-menu-item> </li> </div> </ul> </div> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
TreeMenuItemComponent.ctorParameters = function () { return [
{ type: WindowHrefService, },
{ type: DomUtilService, },
{ type: PathUtilService, },
{ type: AppGlobalsService, },
]; };
TreeMenuItemComponent.propDecorators = {
'label': [{ type: Input },],
'value': [{ type: Input },],
'schema': [{ type: Input },],
'path': [{ type: Input },],
'depth': [{ type: Input },],
};
//# sourceMappingURL=tree-menu-item.component.js.map