ngx-croppie
Version:
Simple angular wrapper around croppie (WIP)
141 lines (140 loc) • 8.88 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';
var NgxCroppieComponent = /** @class */ (function () {
function NgxCroppieComponent() {
this.outputFormatOptions = { type: 'base64', size: 'viewport' };
this.defaultZoom = 0;
this.result = new EventEmitter();
}
Object.defineProperty(NgxCroppieComponent.prototype, "imageUrl", {
get: /**
* @return {?}
*/
function () {
return this.imgUrl;
},
set: /**
* @param {?} url
* @return {?}
*/
function (url) {
if (this.imgUrl === url) {
return;
}
this.imgUrl = url;
if (this._croppie) {
this.bindToCroppie(this.imageUrl, this.points, this.defaultZoom);
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxCroppieComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._croppie = new Croppie(this.imageEdit.nativeElement, this.croppieOptions);
this.bindToCroppie(this.imageUrl, this.points, this.defaultZoom);
};
/**
* @param {?} url
* @param {?} points
* @param {?} zoom
* @return {?}
*/
NgxCroppieComponent.prototype.bindToCroppie = /**
* @param {?} url
* @param {?} points
* @param {?} zoom
* @return {?}
*/
function (url, points, zoom) {
this._croppie.bind({ url: url, points: points, zoom: zoom });
};
/**
* @return {?}
*/
NgxCroppieComponent.prototype.newResult = /**
* @return {?}
*/
function () {
var _this = this;
this._croppie.result(this.outputFormatOptions).then(function (res) {
_this.result.emit(res);
});
};
/**
* @param {?} degrees
* @return {?}
*/
NgxCroppieComponent.prototype.rotate = /**
* @param {?} degrees
* @return {?}
*/
function (degrees) {
this._croppie.rotate(degrees);
};
/**
* @return {?}
*/
NgxCroppieComponent.prototype.get = /**
* @return {?}
*/
function () {
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 },],
};
return NgxCroppieComponent;
}());
export { NgxCroppieComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWNyb3BwaWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWNyb3BwaWUvIiwic291cmNlcyI6WyJzcmMvYXBwL21vZHVsZXMvbmd4LWNyb3BwaWUvbmd4LWNyb3BwaWUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFdEcsT0FBTyxLQUFLLE9BQU8sTUFBTSxTQUFTLENBQUM7OzttQ0FjWSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLFVBQVUsRUFBRTsyQkFDM0QsQ0FBQztzQkFFckIsSUFBSSxZQUFZLEVBQW1EOztJQUd0RSxzQkFBSSx5Q0FBUTs7OztRQUFaO1lBQ0MsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDO1NBQ25COzs7OztrQkFDcUIsR0FBVztZQUNoQyxJQUFHLElBQUksQ0FBQyxNQUFNLEtBQUssR0FBRyxFQUFFO2dCQUFFLE9BQU87YUFBRTtZQUNuQyxJQUFJLENBQUMsTUFBTSxHQUFHLEdBQUcsQ0FBQztZQUNsQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQzthQUNqRTs7OztPQU5EOzs7O0lBU0Qsc0NBQVE7OztJQUFSO1FBQ0MsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7UUFDL0UsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0tBQ2pFOzs7Ozs7O0lBRU8sMkNBQWE7Ozs7OztjQUFDLEdBQVcsRUFBRSxNQUFnQixFQUFFLElBQVk7UUFDaEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLEtBQUEsRUFBRSxNQUFNLFFBQUEsRUFBRSxJQUFJLE1BQUEsRUFBRSxDQUFDLENBQUM7Ozs7O0lBRzNDLHVDQUFTOzs7SUFBVDtRQUFBLGlCQUlDO1FBSEEsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUMsSUFBSSxDQUFDLFVBQUMsR0FBRztZQUN2RCxLQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUN0QixDQUFDLENBQUM7S0FDSDs7Ozs7SUFFRCxvQ0FBTTs7OztJQUFOLFVBQU8sT0FBMkM7UUFDakQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUM7S0FDOUI7Ozs7SUFFRCxpQ0FBRzs7O0lBQUg7UUFDQyxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUM7S0FDM0I7O2dCQS9DRCxTQUFTLFNBQUM7O29CQUVWLFFBQVEsRUFBRSxhQUFhO29CQUN2QixRQUFRLEVBQUUsaURBQStDO2lCQUN6RDs7Ozs4QkFFQyxTQUFTLFNBQUMsV0FBVzttQ0FDckIsS0FBSzsyQkFDTCxLQUFLO3dDQUNMLEtBQUs7Z0NBQ0wsS0FBSzsyQkFDTCxNQUFNOzZCQU9OLEtBQUs7OzhCQXpCUDs7U0FZYSxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgT3V0cHV0LCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0ICogYXMgQ3JvcHBpZSBmcm9tICdjcm9wcGllJztcbmltcG9ydCB7IENyb3BwaWVPcHRpb25zLCBSZXN1bHRPcHRpb25zLCBDcm9wRGF0YSB9IGZyb20gJ2Nyb3BwaWUnO1xuXG5leHBvcnQgdHlwZSBUeXBlID0gJ2NhbnZhcycgfCAnYmFzZTY0JyB8ICdodG1sJyB8ICdibG9iJyB8ICdyYXdjYW52YXMnO1xuXG5AQ29tcG9uZW50KHtcblx0Ly8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmNvbXBvbmVudC1zZWxlY3RvclxuXHRzZWxlY3RvcjogJ25neC1jcm9wcGllJyxcblx0dGVtcGxhdGU6IGA8ZGl2ICNpbWFnZUVkaXQgKHVwZGF0ZSk9XCJuZXdSZXN1bHQoKVwiPjwvZGl2PmBcbn0pXG5leHBvcnQgY2xhc3MgTmd4Q3JvcHBpZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cdEBWaWV3Q2hpbGQoJ2ltYWdlRWRpdCcpIGltYWdlRWRpdDogRWxlbWVudFJlZjtcblx0QElucHV0KCkgY3JvcHBpZU9wdGlvbnM6IENyb3BwaWVPcHRpb25zO1xuXHRASW5wdXQoKSBwb2ludHM6IG51bWJlcltdO1xuXHRASW5wdXQoKSBvdXRwdXRGb3JtYXRPcHRpb25zOiBSZXN1bHRPcHRpb25zID0geyB0eXBlOiAnYmFzZTY0Jywgc2l6ZTogJ3ZpZXdwb3J0JyB9O1xuXHRASW5wdXQoKSBkZWZhdWx0Wm9vbSA9IDA7XG5cdEBPdXRwdXQoKSByZXN1bHQ6IEV2ZW50RW1pdHRlcjxzdHJpbmcgfCBIVE1MRWxlbWVudCB8IEJsb2IgfCBIVE1MQ2FudmFzRWxlbWVudD5cblx0XHQ9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nIHwgSFRNTEVsZW1lbnQgfCBCbG9iIHwgSFRNTENhbnZhc0VsZW1lbnQ+KCk7XG5cdHByaXZhdGUgX2Nyb3BwaWU6IENyb3BwaWU7XG5cdHByaXZhdGUgaW1nVXJsOiBzdHJpbmc7XG5cdGdldCBpbWFnZVVybCgpOiBzdHJpbmcge1xuXHRcdHJldHVybiB0aGlzLmltZ1VybDtcblx0fVxuXHRASW5wdXQoKSBzZXQgaW1hZ2VVcmwodXJsOiBzdHJpbmcpIHtcblx0XHRpZih0aGlzLmltZ1VybCA9PT0gdXJsKSB7IHJldHVybjsgfVxuXHRcdHRoaXMuaW1nVXJsID0gdXJsO1xuXHRcdGlmICh0aGlzLl9jcm9wcGllKSB7XG5cdFx0XHR0aGlzLmJpbmRUb0Nyb3BwaWUodGhpcy5pbWFnZVVybCwgdGhpcy5wb2ludHMsIHRoaXMuZGVmYXVsdFpvb20pO1xuXHRcdH1cblx0fVxuXG5cdG5nT25Jbml0KCk6IHZvaWQge1xuXHRcdHRoaXMuX2Nyb3BwaWUgPSBuZXcgQ3JvcHBpZSh0aGlzLmltYWdlRWRpdC5uYXRpdmVFbGVtZW50LCB0aGlzLmNyb3BwaWVPcHRpb25zKTtcblx0XHR0aGlzLmJpbmRUb0Nyb3BwaWUodGhpcy5pbWFnZVVybCwgdGhpcy5wb2ludHMsIHRoaXMuZGVmYXVsdFpvb20pO1xuXHR9XG5cblx0cHJpdmF0ZSBiaW5kVG9Dcm9wcGllKHVybDogc3RyaW5nLCBwb2ludHM6IG51bWJlcltdLCB6b29tOiBudW1iZXIpe1xuXHRcdHRoaXMuX2Nyb3BwaWUuYmluZCh7IHVybCwgcG9pbnRzLCB6b29tIH0pO1xuXHR9XG5cblx0bmV3UmVzdWx0KCkge1xuXHRcdHRoaXMuX2Nyb3BwaWUucmVzdWx0KHRoaXMub3V0cHV0Rm9ybWF0T3B0aW9ucykudGhlbigocmVzKSA9PiB7XG5cdFx0XHR0aGlzLnJlc3VsdC5lbWl0KHJlcyk7XG5cdFx0fSk7XG5cdH1cblxuXHRyb3RhdGUoZGVncmVlczogOTAgfCAxODAgfCAyNzAgfCAtOTAgfCAtMTgwIHwgLTI3MCkge1xuXHRcdHRoaXMuX2Nyb3BwaWUucm90YXRlKGRlZ3JlZXMpO1xuXHR9XG5cblx0Z2V0KCk6IENyb3BEYXRhIHtcblx0XHRyZXR1cm4gdGhpcy5fY3JvcHBpZS5nZXQoKTtcblx0fVxuXG59XG4iXX0=