ng2-ace-editor
Version:
Ace editor integration with typescript for Angular.
216 lines • 7.88 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Directive, EventEmitter, Output, ElementRef, Input, NgZone } from "@angular/core";
import "brace";
import "brace/theme/monokai";
var AceEditorDirective = /** @class */ (function () {
function AceEditorDirective(elementRef, zone) {
var _this = this;
this.zone = zone;
this.textChanged = new EventEmitter();
this.textChange = new EventEmitter();
this._options = {};
this._readOnly = false;
this._theme = "monokai";
this._mode = "html";
this._autoUpdateContent = true;
this._durationBeforeCallback = 0;
this._text = "";
var el = elementRef.nativeElement;
this.zone.runOutsideAngular(function () {
_this.editor = ace["edit"](el);
});
this.editor.$blockScrolling = Infinity;
}
AceEditorDirective.prototype.ngOnInit = function () {
this.init();
this.initEvents();
};
AceEditorDirective.prototype.ngOnDestroy = function () {
this.editor.destroy();
};
AceEditorDirective.prototype.init = function () {
this.editor.setOptions(this._options || {});
this.editor.setTheme("ace/theme/" + this._theme);
this.setMode(this._mode);
this.editor.setReadOnly(this._readOnly);
};
AceEditorDirective.prototype.initEvents = function () {
var _this = this;
this.editor.on('change', function () { return _this.updateText(); });
this.editor.on('paste', function () { return _this.updateText(); });
};
AceEditorDirective.prototype.updateText = function () {
var _this = this;
var newVal = this.editor.getValue();
if (newVal === this.oldText) {
return;
}
if (!this._durationBeforeCallback) {
this._text = newVal;
this.zone.run(function () {
_this.textChange.emit(newVal);
_this.textChanged.emit(newVal);
});
}
else {
if (this.timeoutSaving != null) {
clearTimeout(this.timeoutSaving);
}
this.timeoutSaving = setTimeout(function () {
_this._text = newVal;
_this.zone.run(function () {
_this.textChange.emit(newVal);
_this.textChanged.emit(newVal);
});
_this.timeoutSaving = null;
}, this._durationBeforeCallback);
}
this.oldText = newVal;
};
Object.defineProperty(AceEditorDirective.prototype, "options", {
set: function (options) {
this._options = options;
this.editor.setOptions(options || {});
},
enumerable: true,
configurable: true
});
Object.defineProperty(AceEditorDirective.prototype, "readOnly", {
set: function (readOnly) {
this._readOnly = readOnly;
this.editor.setReadOnly(readOnly);
},
enumerable: true,
configurable: true
});
Object.defineProperty(AceEditorDirective.prototype, "theme", {
set: function (theme) {
this._theme = theme;
this.editor.setTheme("ace/theme/" + theme);
},
enumerable: true,
configurable: true
});
Object.defineProperty(AceEditorDirective.prototype, "mode", {
set: function (mode) {
this.setMode(mode);
},
enumerable: true,
configurable: true
});
AceEditorDirective.prototype.setMode = function (mode) {
this._mode = mode;
if (typeof this._mode === 'object') {
this.editor.getSession().setMode(this._mode);
}
else {
this.editor.getSession().setMode("ace/mode/" + this._mode);
}
};
Object.defineProperty(AceEditorDirective.prototype, "text", {
get: function () {
return this._text;
},
set: function (text) {
this.setText(text);
},
enumerable: true,
configurable: true
});
AceEditorDirective.prototype.setText = function (text) {
if (this._text !== text) {
if (text === null || text === undefined) {
text = "";
}
if (this._autoUpdateContent === true) {
this._text = text;
this.editor.setValue(text);
this.editor.clearSelection();
}
}
};
Object.defineProperty(AceEditorDirective.prototype, "autoUpdateContent", {
set: function (status) {
this._autoUpdateContent = status;
},
enumerable: true,
configurable: true
});
Object.defineProperty(AceEditorDirective.prototype, "durationBeforeCallback", {
set: function (num) {
this.setDurationBeforeCallback(num);
},
enumerable: true,
configurable: true
});
AceEditorDirective.prototype.setDurationBeforeCallback = function (num) {
this._durationBeforeCallback = num;
};
Object.defineProperty(AceEditorDirective.prototype, "aceEditor", {
get: function () {
return this.editor;
},
enumerable: true,
configurable: true
});
__decorate([
Output(),
__metadata("design:type", Object)
], AceEditorDirective.prototype, "textChanged", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], AceEditorDirective.prototype, "textChange", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AceEditorDirective.prototype, "options", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AceEditorDirective.prototype, "readOnly", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AceEditorDirective.prototype, "theme", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AceEditorDirective.prototype, "mode", null);
__decorate([
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], AceEditorDirective.prototype, "text", null);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Object])
], AceEditorDirective.prototype, "autoUpdateContent", null);
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], AceEditorDirective.prototype, "durationBeforeCallback", null);
AceEditorDirective = __decorate([
Directive({
selector: '[ace-editor]'
}),
__metadata("design:paramtypes", [ElementRef, NgZone])
], AceEditorDirective);
return AceEditorDirective;
}());
export { AceEditorDirective };
//# sourceMappingURL=directive.js.map