ng2-json-editor
Version:
Angular2 component for editing large json documents
117 lines • 7.26 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, ChangeDetectionStrategy } from '@angular/core';
import { Set } from 'immutable';
import { AbstractSubscriberComponent } from '../abstract-subscriber';
import { DomUtilService, PathUtilService, KeysStoreService, JsonSchemaService } from '../shared/services';
var AddNestedFieldDropdownComponent = (function (_super) {
__extends(AddNestedFieldDropdownComponent, _super);
function AddNestedFieldDropdownComponent(keysStoreService, jsonSchemaService, pathUtilService, domUtilService) {
var _this = _super.call(this) || this;
_this.keysStoreService = keysStoreService;
_this.jsonSchemaService = jsonSchemaService;
_this.pathUtilService = pathUtilService;
_this.domUtilService = domUtilService;
return _this;
}
AddNestedFieldDropdownComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
var pathStringChange = changes['pathString'];
if (pathStringChange) {
this.nestedKeysMap = {};
this.nestedKeysMap[this.pathString] = this.keysStoreService.keysMap[this.pathString];
var nestedPathPrefix_1 = this.pathString + this.pathUtilService.separator;
Object.keys(this.keysStoreService.keysMap)
.filter(function (path) { return path.startsWith(nestedPathPrefix_1); })
.forEach(function (path) {
_this.nestedKeysMap[path] = _this.keysStoreService.keysMap[path];
});
if (this.keysChangeSubscription) {
this.keysChangeSubscription.unsubscribe();
}
this.keysChangeSubscription = this.keysStoreService.onKeysChange
.filter(function (change) { return change.path.startsWith(_this.pathString); })
.takeUntil(this.isDestroyed)
.subscribe(function (change) { _this.nestedKeysMap[change.path] = change.keys; });
}
};
/**
* Return keys that could be added for the given path.
*
* @return schema key - hidden keys - existing keys
*/
AddNestedFieldDropdownComponent.prototype.addableKeysForPath = function (path) {
var keys = this.nestedKeysMap[path];
var schema = this.jsonSchemaService.forPathString(path);
// || schema.items.properties is to handle the keys when the path belongs to table-list.
var schemaProps = schema.properties || schema.items.properties;
var schemaKeys = Set(Object.keys(schemaProps)
.filter(function (key) { return !schemaProps[key].hidden; }));
var addableKeys = schemaKeys.subtract(keys);
return addableKeys.size > 0 ? addableKeys : undefined;
};
AddNestedFieldDropdownComponent.prototype.onFieldSelect = function (path, key) {
var schema = this.jsonSchemaService.forPathString(path);
if (schema.componentType === 'table-list') {
schema = schema.items;
}
var newKeyPath = this.keysStoreService.addKey(path, key, schema);
if (this.keysStoreService.keysMap[newKeyPath]) {
this.nestedKeysMap[newKeyPath] = this.keysStoreService.keysMap[newKeyPath];
}
this.domUtilService.focusAndSelectFirstEditableChildById(newKeyPath);
};
return AddNestedFieldDropdownComponent;
}(AbstractSubscriberComponent));
export { AddNestedFieldDropdownComponent };
AddNestedFieldDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'add-nested-field-dropdown',
styles: [".btn-add-field-dropdown { padding: 0 3px; font-size: 11px; opacity: 0.4; border: 0; background: transparent; font-weight: bold; line-height: 1; text-shadow: 0 1px 0 #fff; color: darkslategray; margin-bottom: 2px; float: left; } .btn-add-field-dropdown:hover { color: blue; opacity: 0.6; } .dropdown-filter-container { padding: 0 3px; } .dropdown-filter-container input { width: 100%; } ",
".dropdown-header.title { font-size: 13.5px; font-weight: bold; padding-left: 10px; } .dropdown-divider { margin: 4px 0; } .dropdown-menu { left: auto; right: 0; } .dropdown-menu li > .dropdown-item { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857; color: #333333; white-space: nowrap; } .dropdown-menu li > .dropdown-item:hover { text-decoration: none; color: #262626; background-color: #f5f5f5; } "],
template: "<div class=\"btn-group add-field-dropdown-container\" dropdown keyboardNav=\"true\" [isDisabled]=\"isDisabled\"> <button type=\"button\" class=\"btn btn-add-field-dropdown\" dropdownToggle> <i class=\"fa fa-plus\"></i> <i class=\"fa fa-caret-down\"></i> </button> <ul class=\"dropdown-menu\" *dropdownMenu> <div *ngFor=\"let path of nestedKeysMap | keys | sortAlphabetically; first as isFirst\"> <div *ngIf=\"addableKeysForPath(path); let addableKeys\"> <li *ngIf=\"!isFirst\" class=\"divider dropdown-divider\"></li> <li *ngIf=\"!isFirst\" class=\"dropdown-header title\">{{path | lastPathElement}}</li> <li *ngFor=\"let key of addableKeys | sortAlphabetically\"> <a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"onFieldSelect(path, key)\">{{key}}</a> </li> </div> </div> </ul> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
AddNestedFieldDropdownComponent.ctorParameters = function () { return [
{ type: KeysStoreService, },
{ type: JsonSchemaService, },
{ type: PathUtilService, },
{ type: DomUtilService, },
]; };
AddNestedFieldDropdownComponent.propDecorators = {
'schema': [{ type: Input },],
'pathString': [{ type: Input },],
'isDisabled': [{ type: Input },],
};
//# sourceMappingURL=add-nested-field-dropdown.component.js.map