ng2-json-editor
Version:
Angular2 component for editing large json documents
88 lines • 4.7 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 { DomSanitizer } from '@angular/platform-browser';
import { FindReplaceAllService, JsonStoreService, ModalService } from '../shared/services';
var FindReplaceComponent = (function () {
function FindReplaceComponent(changeDetectionRef, domSanitizer, findReplaceAllService, jsonStoreService, modalService) {
this.changeDetectionRef = changeDetectionRef;
this.domSanitizer = domSanitizer;
this.findReplaceAllService = findReplaceAllService;
this.jsonStoreService = jsonStoreService;
this.modalService = modalService;
}
FindReplaceComponent.prototype.onKeypress = function (key) {
if (key === 'Enter') {
this.findAndReplace();
}
};
FindReplaceComponent.prototype.findAndReplace = function () {
var _this = this;
if (!(this.find && this.replace)) {
return;
}
var value = this.jsonStoreService.getIn(this.path);
var result = this.findReplaceAllService
.findReplaceInImmutable(value, this.schema, this.find, this.replace, this.exactPhrase);
this.replaced = result.replaced;
var stringyfiedDiffHtml = JSON.stringify(result.diffHtml, undefined, 2);
this.modalService.displayModal({
title: 'After Replace',
bodyHtml: this.domSanitizer.bypassSecurityTrustHtml("<pre class=\"max-height-70-vh\"><code>" + stringyfiedDiffHtml + "</code></pre>"),
type: 'confirm',
onConfirm: function () {
_this.modalService.closeCurrentModal();
_this.jsonStoreService.setIn(_this.path, _this.replaced);
_this.cleanParameters();
}
});
};
FindReplaceComponent.prototype.cleanParameters = function () {
this.find = '';
this.replace = '';
this.exactPhrase = false;
this.changeDetectionRef.markForCheck();
};
return FindReplaceComponent;
}());
export { FindReplaceComponent };
FindReplaceComponent.decorators = [
{ type: Component, args: [{
selector: 'find-replace',
styles: [".find-replace-container { margin: 4px 3px 3px 2px; } .find-replace-container input { font-size: 13px; } .top-container-item { margin-bottom: 3px; } .bottom-container-item { margin-top: 5px; } .bottom-container-item i { font-size: 20px; float: right; padding-right: 2px; } label { font-size: 12px; font-weight: 400; color: #7e7e7e; } .horizontal-padding, .find-replace-container div { padding-right: 20px; padding-left: 20px; } "],
template: "<div class=\"find-replace-container\"> <div class=\"top-container-item\"> <input placeholder=\"Find\" [(ngModel)]=\"find\" (keypress)=\"onKeypress($event.key)\" /> </div> <div> <input placeholder=\"Replace\" [(ngModel)]=\"replace\" (keypress)=\"onKeypress($event.key)\" /> </div> <div class=\"bottom-container-item\"> <label> Exact phrase <input type=\"checkbox\" [(ngModel)]=\"exactPhrase\" (keypress)=\"onKeypress($event.key)\"/> </label> <i class=\"fa fa-arrow-circle-right\" (click)=\"findAndReplace()\"></i> </div> </div>",
changeDetection: ChangeDetectionStrategy.OnPush
},] },
];
/** @nocollapse */
FindReplaceComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef, },
{ type: DomSanitizer, },
{ type: FindReplaceAllService, },
{ type: JsonStoreService, },
{ type: ModalService, },
]; };
FindReplaceComponent.propDecorators = {
'path': [{ type: Input },],
'schema': [{ type: Input },],
};
//# sourceMappingURL=find-replace.component.js.map