ngx-ace-icy
Version:
angular9+版本以上ace语法编辑器
550 lines (544 loc) • 15.1 kB
JavaScript
import { EventEmitter, Component, forwardRef, ElementRef, NgZone, Output, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* @fileoverview added by tsickle
* Generated from: ngx-ace.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxAceComponent = /** @class */ (function () {
function NgxAceComponent(elementRef, zone) {
var _this = this;
this.elementRef = elementRef;
this.zone = zone;
this.textChanged = new EventEmitter();
this.textChange = new EventEmitter();
this.placeholder = '请输入内容';
this.style = {};
// tslint:disable-next-line:variable-name
this._options = {};
// tslint:disable-next-line:variable-name
this._readOnly = false;
// tslint:disable-next-line:variable-name
this._theme = 'monokai';
// tslint:disable-next-line:variable-name
this._mode = 'sql';
// tslint:disable-next-line:variable-name
this._autoUpdateContent = true;
// tslint:disable-next-line:variable-name
this._durationBeforeCallback = 0;
// tslint:disable-next-line:variable-name
this._text = '';
// tslint:disable-next-line:variable-name
// private _onChange = (_: any) => {
// }
this.onChange = (/**
* @return {?}
*/
function () { return null; });
// tslint:disable-next-line:variable-name
// private _onTouched = () => {
// }
this.onTouched = (/**
* @return {?}
*/
function () { return null; });
/** @type {?} */
var el = elementRef.nativeElement;
this.zone.runOutsideAngular((/**
* @return {?}
*/
function () {
// tslint:disable-next-line:no-string-literal
_this._editor = ace['edit'](el);
}));
this._editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
minLines: 1,
maxLines: Infinity,
});
this._editor.$blockScrolling = Infinity;
this._editor.setShowPrintMargin(false);
}
/**
* @return {?}
*/
NgxAceComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.init();
this.initEvents();
};
/**
* @return {?}
*/
NgxAceComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this._editor.destroy();
};
/**
* @return {?}
*/
NgxAceComponent.prototype.init = /**
* @return {?}
*/
function () {
this.setOptions(this._options || {});
this.setTheme(this._theme);
this.setMode(this._mode);
this.setReadOnly(this._readOnly);
};
/**
* @return {?}
*/
NgxAceComponent.prototype.initEvents = /**
* @return {?}
*/
function () {
var _this = this;
this._editor.on('change', (/**
* @return {?}
*/
function () { return _this.updateText(); }));
this._editor.on('paste', (/**
* @return {?}
*/
function () { return _this.updateText(); }));
};
/**
* @return {?}
*/
NgxAceComponent.prototype.updateText = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var newVal = this._editor.getValue();
if (newVal === this.oldText) {
return;
}
if (!this._durationBeforeCallback) {
this._text = newVal;
this.zone.run((/**
* @return {?}
*/
function () {
_this.textChange.emit(newVal);
_this.textChanged.emit(newVal);
_this.onChange(newVal);
}));
}
else {
if (this.timeoutSaving) {
clearTimeout(this.timeoutSaving);
}
this.timeoutSaving = setTimeout((/**
* @return {?}
*/
function () {
_this._text = newVal;
_this.zone.run((/**
* @return {?}
*/
function () {
_this.textChange.emit(newVal);
_this.textChanged.emit(newVal);
}));
_this.timeoutSaving = null;
}), this._durationBeforeCallback);
}
this.oldText = newVal;
this.emptyMessage();
};
Object.defineProperty(NgxAceComponent.prototype, "options", {
set: /**
* @param {?} options
* @return {?}
*/
function (options) {
this.setOptions(options);
},
enumerable: true,
configurable: true
});
/**
* @param {?} options
* @return {?}
*/
NgxAceComponent.prototype.setOptions = /**
* @param {?} options
* @return {?}
*/
function (options) {
this._options = options;
this._editor.setOptions(options || {});
};
Object.defineProperty(NgxAceComponent.prototype, "readOnly", {
set: /**
* @param {?} readOnly
* @return {?}
*/
function (readOnly) {
this.setReadOnly(readOnly);
},
enumerable: true,
configurable: true
});
/**
* @param {?} readOnly
* @return {?}
*/
NgxAceComponent.prototype.setReadOnly = /**
* @param {?} readOnly
* @return {?}
*/
function (readOnly) {
this._readOnly = readOnly;
this._editor.setReadOnly(readOnly);
};
Object.defineProperty(NgxAceComponent.prototype, "theme", {
set: /**
* @param {?} theme
* @return {?}
*/
function (theme) {
this.setTheme(theme);
},
enumerable: true,
configurable: true
});
/**
* @param {?} theme
* @return {?}
*/
NgxAceComponent.prototype.setTheme = /**
* @param {?} theme
* @return {?}
*/
function (theme) {
this._theme = theme;
this._editor.setTheme("ace/theme/" + theme);
};
Object.defineProperty(NgxAceComponent.prototype, "mode", {
set: /**
* @param {?} mode
* @return {?}
*/
function (mode) {
this.setMode(mode);
},
enumerable: true,
configurable: true
});
/**
* @param {?} mode
* @return {?}
*/
NgxAceComponent.prototype.setMode = /**
* @param {?} mode
* @return {?}
*/
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(NgxAceComponent.prototype, "value", {
get: /**
* @return {?}
*/
function () {
return this.text;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setText(value);
},
enumerable: true,
configurable: true
});
/**
* @param {?} value
* @return {?}
*/
NgxAceComponent.prototype.writeValue = /**
* @param {?} value
* @return {?}
*/
function (value) {
this.setText(value);
};
/**
* @param {?} fn
* @return {?}
*/
NgxAceComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
NgxAceComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
Object.defineProperty(NgxAceComponent.prototype, "text", {
get: /**
* @return {?}
*/
function () {
return this._text;
},
set: /**
* @param {?} text
* @return {?}
*/
function (text) {
this.setText(text);
},
enumerable: true,
configurable: true
});
/**
* @param {?} text
* @return {?}
*/
NgxAceComponent.prototype.setText = /**
* @param {?} text
* @return {?}
*/
function (text) {
if (text === null || text === undefined) {
text = '';
}
if (this._text !== text && this._autoUpdateContent === true) {
this._text = text;
this._editor.setValue(text);
this.onChange(text);
this._editor.clearSelection();
}
this.emptyMessage();
};
Object.defineProperty(NgxAceComponent.prototype, "autoUpdateContent", {
set: /**
* @param {?} status
* @return {?}
*/
function (status) {
this.setAutoUpdateContent(status);
},
enumerable: true,
configurable: true
});
/**
* @param {?} status
* @return {?}
*/
NgxAceComponent.prototype.setAutoUpdateContent = /**
* @param {?} status
* @return {?}
*/
function (status) {
this._autoUpdateContent = status;
};
Object.defineProperty(NgxAceComponent.prototype, "durationBeforeCallback", {
set: /**
* @param {?} num
* @return {?}
*/
function (num) {
this.setDurationBeforeCallback(num);
},
enumerable: true,
configurable: true
});
/**
* @param {?} num
* @return {?}
*/
NgxAceComponent.prototype.setDurationBeforeCallback = /**
* @param {?} num
* @return {?}
*/
function (num) {
this._durationBeforeCallback = num;
};
/** 为空时增加placeholder提示信息 */
/**
* 为空时增加placeholder提示信息
* @private
* @return {?}
*/
NgxAceComponent.prototype.emptyMessage = /**
* 为空时增加placeholder提示信息
* @private
* @return {?}
*/
function () {
/** @type {?} */
var shouldShow = !this._text.length;
/** @type {?} */
var node = this._editor.renderer.emptyMessageNode;
if (!shouldShow && node) {
this._editor.renderer.scroller.removeChild(this._editor.renderer.emptyMessageNode);
this._editor.renderer.emptyMessageNode = null;
}
else if (shouldShow && !node) {
node = this._editor.renderer.emptyMessageNode = document.createElement('div');
node.textContent = this.placeholder;
node.className = 'ace_emptyMessage';
node.style.padding = '0 9px';
node.style.position = 'absolute';
node.style.zIndex = 9;
node.style.opacity = 0.5;
this._editor.renderer.scroller.appendChild(node);
}
};
/**
* @return {?}
*/
NgxAceComponent.prototype.getEditor = /**
* @return {?}
*/
function () {
return this._editor;
};
NgxAceComponent.decorators = [
{ type: Component, args: [{
selector: 'c-ngx-ace',
template: '',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return NgxAceComponent; })),
multi: true
}],
styles: [':host { display:block;box-sizing: content-box;}']
}] }
];
/** @nocollapse */
NgxAceComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgZone }
]; };
NgxAceComponent.propDecorators = {
textChanged: [{ type: Output }],
textChange: [{ type: Output }],
placeholder: [{ type: Input }],
style: [{ type: Input }],
options: [{ type: Input }],
readOnly: [{ type: Input }],
theme: [{ type: Input }],
mode: [{ type: Input }],
value: [{ type: Input }],
text: [{ type: Input }],
autoUpdateContent: [{ type: Input }],
durationBeforeCallback: [{ type: Input }]
};
return NgxAceComponent;
}());
if (false) {
/** @type {?} */
NgxAceComponent.prototype.textChanged;
/** @type {?} */
NgxAceComponent.prototype.textChange;
/** @type {?} */
NgxAceComponent.prototype.placeholder;
/** @type {?} */
NgxAceComponent.prototype.style;
/** @type {?} */
NgxAceComponent.prototype._options;
/** @type {?} */
NgxAceComponent.prototype._readOnly;
/** @type {?} */
NgxAceComponent.prototype._theme;
/** @type {?} */
NgxAceComponent.prototype._mode;
/** @type {?} */
NgxAceComponent.prototype._autoUpdateContent;
/** @type {?} */
NgxAceComponent.prototype._editor;
/** @type {?} */
NgxAceComponent.prototype._durationBeforeCallback;
/** @type {?} */
NgxAceComponent.prototype._text;
/** @type {?} */
NgxAceComponent.prototype.oldText;
/** @type {?} */
NgxAceComponent.prototype.timeoutSaving;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NgxAceComponent.prototype.zone;
}
/**
* @fileoverview added by tsickle
* Generated from: ngx-ace.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxAceModule = /** @class */ (function () {
function NgxAceModule() {
}
NgxAceModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgxAceComponent
],
imports: [],
exports: [
NgxAceComponent
]
},] }
];
return NgxAceModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-ace-icy.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxAceComponent, NgxAceModule };
//# sourceMappingURL=ngx-ace-icy.js.map