ng2-json-editor
Version:
Angular2 component for editing large json documents
102 lines • 6.2 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.
*/
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, Output, EventEmitter, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { AbstractSubscriberComponent } from '../abstract-subscriber';
import { ProblemsService, JsonStoreService } from '../shared/services';
var BottomConsoleBadgesComponent = (function (_super) {
__extends(BottomConsoleBadgesComponent, _super);
function BottomConsoleBadgesComponent(problemsService, changeDetectorRef, jsonStoreService) {
var _this = _super.call(this) || this;
_this.problemsService = problemsService;
_this.changeDetectorRef = changeDetectorRef;
_this.jsonStoreService = jsonStoreService;
_this.badgeClick = new EventEmitter();
_this.errorCount = 0;
_this.warningCount = 0;
_this.patchCount = 0;
return _this;
}
BottomConsoleBadgesComponent.prototype.ngOnInit = function () {
var _this = this;
this.problemsService.errorCount$
.takeUntil(this.isDestroyed)
.subscribe(function (count) {
_this.errorCount = count;
// FIXME: use markForCheck() instead
// markForCheck() wasn't working for mysterious reasons for initial update
_this.changeDetectorRef.detectChanges();
});
this.problemsService.warningCount$
.takeUntil(this.isDestroyed)
.subscribe(function (count) {
_this.warningCount = count;
// FIXME: use markForCheck() instead
// markForCheck() wasn't working for mysterious reasons for initial update
_this.changeDetectorRef.detectChanges();
});
this.jsonStoreService.patchesByPath$
.map(function (patchesByPath) {
return Object.keys(patchesByPath)
.map(function (path) { return patchesByPath[path].length; })
.reduce(function (sum, patchCountPerPath) { return sum + patchCountPerPath; }, 0);
})
.takeUntil(this.isDestroyed)
.subscribe(function (patchCount) {
_this.patchCount = patchCount;
_this.changeDetectorRef.markForCheck();
});
};
BottomConsoleBadgesComponent.prototype.onBadgeClick = function (event, badgeName) {
event.preventDefault();
this.badgeClick.emit(badgeName);
};
return BottomConsoleBadgesComponent;
}(AbstractSubscriberComponent));
export { BottomConsoleBadgesComponent };
BottomConsoleBadgesComponent.decorators = [
{ type: Component, args: [{
selector: 'bottom-console-badges',
styles: [".error span { border: 2px solid #d14024; } .error span i { color: #d14024; padding-bottom: 2px; } .warning span { border: 2px solid #fbd503; } .warning span i { color: #fbd503; } .patch span { border: 2px solid #f96509; } .patch span i { color: #f96509; } a { text-decoration: none; cursor: pointer; padding-top: 7px; } a i { transition: all 0.35s ease-in-out; } a i:hover { font-size: 1.10em; } .badges-container { display: flex; flex-direction: column; align-items: center; width: 100%; } .badges-container a { display: flex; width: 30px; margin-top: 5px; } .badges-container a:first-of-type { border-top: 2px solid #283948; margin-top: 10px; } .badges-container a span { display: flex; align-items: center; height: 30px; border-radius: 20%; } @media screen and (max-width: 1440px) { .badges-container { flex-direction: column; } } "],
template: "<div class=\"badges-container\"> <a *ngIf=\"errorCount > 0\" class=\"error\" (click)=\"onBadgeClick($event, 'Errors')\" tooltip=\"{{errorCount}} error(s)\" placement=\"right\"> <span class=\"error fa-stack fa-lg\"> <i class=\"fa fa-times fa-stack-1x fa-inverse\"></i> </span> </a> <a *ngIf=\"warningCount > 0\" class=\"warning\" (click)=\"onBadgeClick($event, 'Warnings')\" tooltip=\"{{warningCount}} warning(s)\" placement=\"right\"> <span class=\"warning fa-stack fa-lg\"> <i class=\"fa fa-exclamation fa-stack-1x fa-inverse\"></i> </span> </a> <a *ngIf=\"patchCount > 0\" class=\"patch\" (click)=\"onBadgeClick($event, 'Patches')\" tooltip=\"{{patchCount}} conflicts(s)\" placement=\"right\"> <span class=\"patch fa-stack fa-lg\"> <i class=\"fa fa-bolt fa-stack-1x fa-inverse\"></i> </span> </a> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
BottomConsoleBadgesComponent.ctorParameters = function () { return [
{ type: ProblemsService, },
{ type: ChangeDetectorRef, },
{ type: JsonStoreService, },
]; };
BottomConsoleBadgesComponent.propDecorators = {
'badgeClick': [{ type: Output },],
};
//# sourceMappingURL=bottom-console-badges.component.js.map