ngx-croppie
Version:
Simple angular wrapper around croppie (WIP)
115 lines (114 loc) • 7.85 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, Input, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
import * as Croppie from 'croppie';
export class NgxCroppieComponent {
constructor() {
this.outputFormatOptions = { type: 'base64', size: 'viewport' };
this.defaultZoom = 0;
this.result = new EventEmitter();
}
/**
* @return {?}
*/
get imageUrl() {
return this.imgUrl;
}
/**
* @param {?} url
* @return {?}
*/
set imageUrl(url) {
if (this.imgUrl === url) {
return;
}
this.imgUrl = url;
if (this._croppie) {
this.bindToCroppie(this.imageUrl, this.points, this.defaultZoom);
}
}
/**
* @return {?}
*/
ngOnInit() {
this._croppie = new Croppie(this.imageEdit.nativeElement, this.croppieOptions);
this.bindToCroppie(this.imageUrl, this.points, this.defaultZoom);
}
/**
* @param {?} url
* @param {?} points
* @param {?} zoom
* @return {?}
*/
bindToCroppie(url, points, zoom) {
this._croppie.bind({ url, points, zoom });
}
/**
* @return {?}
*/
newResult() {
this._croppie.result(this.outputFormatOptions).then((res) => {
this.result.emit(res);
});
}
/**
* @param {?} degrees
* @return {?}
*/
rotate(degrees) {
this._croppie.rotate(degrees);
}
/**
* @return {?}
*/
get() {
return this._croppie.get();
}
}
NgxCroppieComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'ngx-croppie',
template: `<div #imageEdit (update)="newResult()"></div>`
},] },
];
/** @nocollapse */
NgxCroppieComponent.propDecorators = {
"imageEdit": [{ type: ViewChild, args: ['imageEdit',] },],
"croppieOptions": [{ type: Input },],
"points": [{ type: Input },],
"outputFormatOptions": [{ type: Input },],
"defaultZoom": [{ type: Input },],
"result": [{ type: Output },],
"imageUrl": [{ type: Input },],
};
function NgxCroppieComponent_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
NgxCroppieComponent.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
NgxCroppieComponent.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
NgxCroppieComponent.propDecorators;
/** @type {?} */
NgxCroppieComponent.prototype.imageEdit;
/** @type {?} */
NgxCroppieComponent.prototype.croppieOptions;
/** @type {?} */
NgxCroppieComponent.prototype.points;
/** @type {?} */
NgxCroppieComponent.prototype.outputFormatOptions;
/** @type {?} */
NgxCroppieComponent.prototype.defaultZoom;
/** @type {?} */
NgxCroppieComponent.prototype.result;
/** @type {?} */
NgxCroppieComponent.prototype._croppie;
/** @type {?} */
NgxCroppieComponent.prototype.imgUrl;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNyb3BwaWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWNyb3BwaWUvIiwic291cmNlcyI6WyJzcmMvYXBwL21vZHVsZXMvbmd4LWNyb3BwaWUvbmd4LWNyb3BwaWUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFdEcsT0FBTyxLQUFLLE9BQU8sTUFBTSxTQUFTLENBQUM7QUFVbkMsTUFBTTs7bUNBSXlDLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFOzJCQUMzRCxDQUFDO3NCQUVyQixJQUFJLFlBQVksRUFBbUQ7Ozs7O0lBR3RFLElBQUksUUFBUTtRQUNYLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQztLQUNuQjs7Ozs7UUFDWSxRQUFRLENBQUMsR0FBVztRQUNoQyxJQUFHLElBQUksQ0FBQyxNQUFNLEtBQUssR0FBRyxFQUFFO1lBQUUsT0FBTztTQUFFO1FBQ25DLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxDQUFDO1FBQ2xCLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNsQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7U0FDakU7Ozs7O0lBR0YsUUFBUTtRQUNQLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLEVBQUUsSUFBSSxDQUFDLGNBQWMsQ0FBQyxDQUFDO1FBQy9FLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztLQUNqRTs7Ozs7OztJQUVPLGFBQWEsQ0FBQyxHQUFXLEVBQUUsTUFBZ0IsRUFBRSxJQUFZO1FBQ2hFLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEVBQUUsR0FBRyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDOzs7OztJQUczQyxTQUFTO1FBQ1IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDM0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7U0FDdEIsQ0FBQyxDQUFDO0tBQ0g7Ozs7O0lBRUQsTUFBTSxDQUFDLE9BQTJDO1FBQ2pELElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0tBQzlCOzs7O0lBRUQsR0FBRztRQUNGLE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQztLQUMzQjs7O1lBL0NELFNBQVMsU0FBQzs7Z0JBRVYsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRSwrQ0FBK0M7YUFDekQ7Ozs7MEJBRUMsU0FBUyxTQUFDLFdBQVc7K0JBQ3JCLEtBQUs7dUJBQ0wsS0FBSztvQ0FDTCxLQUFLOzRCQUNMLEtBQUs7dUJBQ0wsTUFBTTt5QkFPTixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBFdmVudEVtaXR0ZXIsIE91dHB1dCwgVmlld0NoaWxkLCBFbGVtZW50UmVmIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCAqIGFzIENyb3BwaWUgZnJvbSAnY3JvcHBpZSc7XG5pbXBvcnQgeyBDcm9wcGllT3B0aW9ucywgUmVzdWx0T3B0aW9ucywgQ3JvcERhdGEgfSBmcm9tICdjcm9wcGllJztcblxuZXhwb3J0IHR5cGUgVHlwZSA9ICdjYW52YXMnIHwgJ2Jhc2U2NCcgfCAnaHRtbCcgfCAnYmxvYicgfCAncmF3Y2FudmFzJztcblxuQENvbXBvbmVudCh7XG5cdC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpjb21wb25lbnQtc2VsZWN0b3Jcblx0c2VsZWN0b3I6ICduZ3gtY3JvcHBpZScsXG5cdHRlbXBsYXRlOiBgPGRpdiAjaW1hZ2VFZGl0ICh1cGRhdGUpPVwibmV3UmVzdWx0KClcIj48L2Rpdj5gXG59KVxuZXhwb3J0IGNsYXNzIE5neENyb3BwaWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXHRAVmlld0NoaWxkKCdpbWFnZUVkaXQnKSBpbWFnZUVkaXQ6IEVsZW1lbnRSZWY7XG5cdEBJbnB1dCgpIGNyb3BwaWVPcHRpb25zOiBDcm9wcGllT3B0aW9ucztcblx0QElucHV0KCkgcG9pbnRzOiBudW1iZXJbXTtcblx0QElucHV0KCkgb3V0cHV0Rm9ybWF0T3B0aW9uczogUmVzdWx0T3B0aW9ucyA9IHsgdHlwZTogJ2Jhc2U2NCcsIHNpemU6ICd2aWV3cG9ydCcgfTtcblx0QElucHV0KCkgZGVmYXVsdFpvb20gPSAwO1xuXHRAT3V0cHV0KCkgcmVzdWx0OiBFdmVudEVtaXR0ZXI8c3RyaW5nIHwgSFRNTEVsZW1lbnQgfCBCbG9iIHwgSFRNTENhbnZhc0VsZW1lbnQ+XG5cdFx0PSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZyB8IEhUTUxFbGVtZW50IHwgQmxvYiB8IEhUTUxDYW52YXNFbGVtZW50PigpO1xuXHRwcml2YXRlIF9jcm9wcGllOiBDcm9wcGllO1xuXHRwcml2YXRlIGltZ1VybDogc3RyaW5nO1xuXHRnZXQgaW1hZ2VVcmwoKTogc3RyaW5nIHtcblx0XHRyZXR1cm4gdGhpcy5pbWdVcmw7XG5cdH1cblx0QElucHV0KCkgc2V0IGltYWdlVXJsKHVybDogc3RyaW5nKSB7XG5cdFx0aWYodGhpcy5pbWdVcmwgPT09IHVybCkgeyByZXR1cm47IH1cblx0XHR0aGlzLmltZ1VybCA9IHVybDtcblx0XHRpZiAodGhpcy5fY3JvcHBpZSkge1xuXHRcdFx0dGhpcy5iaW5kVG9Dcm9wcGllKHRoaXMuaW1hZ2VVcmwsIHRoaXMucG9pbnRzLCB0aGlzLmRlZmF1bHRab29tKTtcblx0XHR9XG5cdH1cblxuXHRuZ09uSW5pdCgpOiB2b2lkIHtcblx0XHR0aGlzLl9jcm9wcGllID0gbmV3IENyb3BwaWUodGhpcy5pbWFnZUVkaXQubmF0aXZlRWxlbWVudCwgdGhpcy5jcm9wcGllT3B0aW9ucyk7XG5cdFx0dGhpcy5iaW5kVG9Dcm9wcGllKHRoaXMuaW1hZ2VVcmwsIHRoaXMucG9pbnRzLCB0aGlzLmRlZmF1bHRab29tKTtcblx0fVxuXG5cdHByaXZhdGUgYmluZFRvQ3JvcHBpZSh1cmw6IHN0cmluZywgcG9pbnRzOiBudW1iZXJbXSwgem9vbTogbnVtYmVyKXtcblx0XHR0aGlzLl9jcm9wcGllLmJpbmQoeyB1cmwsIHBvaW50cywgem9vbSB9KTtcblx0fVxuXG5cdG5ld1Jlc3VsdCgpIHtcblx0XHR0aGlzLl9jcm9wcGllLnJlc3VsdCh0aGlzLm91dHB1dEZvcm1hdE9wdGlvbnMpLnRoZW4oKHJlcykgPT4ge1xuXHRcdFx0dGhpcy5yZXN1bHQuZW1pdChyZXMpO1xuXHRcdH0pO1xuXHR9XG5cblx0cm90YXRlKGRlZ3JlZXM6IDkwIHwgMTgwIHwgMjcwIHwgLTkwIHwgLTE4MCB8IC0yNzApIHtcblx0XHR0aGlzLl9jcm9wcGllLnJvdGF0ZShkZWdyZWVzKTtcblx0fVxuXG5cdGdldCgpOiBDcm9wRGF0YSB7XG5cdFx0cmV0dXJuIHRoaXMuX2Nyb3BwaWUuZ2V0KCk7XG5cdH1cblxufVxuIl19