@bsj/angular-image-picker
Version:
Angular image picker
172 lines • 8.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var angular_image_picker_image_component_1 = require("./angular-image-picker-image/angular-image-picker-image.component");
// Used to extend ngForms functions
exports.CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: forms_1.NG_VALUE_ACCESSOR,
useExisting: core_1.forwardRef(function () { return AngularImagePickerComponent; }),
multi: true
};
var AngularImagePickerComponent = (function () {
function AngularImagePickerComponent() {
var _this = this;
this.multiple = false;
this.type = 'raw';
// Used to trigger change event
this.close = new core_1.EventEmitter();
// Placeholders for the callbacks which are later provided by the Control Value Accessor
this.onTouchedCallback = function () { };
// Placeholders for the callbacks which are later provided by the Control Value Accessor
this.onChangeCallback = function (a) { };
this.refreshValue = function () {
var images;
var manipulatedImages = _this.manipulatedImages.toArray();
if (_this.type === 'blob') {
if (_this.multiple) {
images = manipulatedImages.map(function (image) { return image.imageAfterBase64; });
}
else {
images = manipulatedImages[0].imageAfterBase64;
}
}
else {
if (_this.multiple) {
images = manipulatedImages.map(function (image) { return image.fileAfter; });
}
else {
images = manipulatedImages[0].fileAfter;
}
}
_this.value = images;
};
}
Object.defineProperty(AngularImagePickerComponent.prototype, "value", {
// Get accessor
get:
// Get accessor
function () {
return this.images;
},
// Set accessor including call the onchange callback
set:
// Set accessor including call the onchange callback
function (v) {
if (v !== this.images) {
this.images = v;
this.onChangeCallback(v);
}
},
enumerable: true,
configurable: true
});
;
AngularImagePickerComponent.prototype.ngOnInit = function () {
this.resetComponent();
};
// Set touched on blur
// Set touched on blur
AngularImagePickerComponent.prototype.onBlur =
// Set touched on blur
function () {
this.onTouchedCallback();
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
AngularImagePickerComponent.prototype.writeValue =
// From ControlValueAccessor interface
function (value) {
if (value && value !== this.initialModelImages) {
if (this.multiple) {
this.initialModelImages = Array.isArray(value) ? value : [value];
}
else {
this.initialModelImages = value;
}
}
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
AngularImagePickerComponent.prototype.registerOnChange =
// From ControlValueAccessor interface
function (fn) {
this.onChangeCallback = fn;
};
// From ControlValueAccessor interface
// From ControlValueAccessor interface
AngularImagePickerComponent.prototype.registerOnTouched =
// From ControlValueAccessor interface
function (fn) {
this.onTouchedCallback = fn;
};
AngularImagePickerComponent.prototype.onValueChanged = function (event) {
this.value = event.toString();
};
/*
** Class Methods
** Private and public methods used by the component
*/
/*
** Class Methods
** Private and public methods used by the component
*/
AngularImagePickerComponent.prototype.onClose = /*
** Class Methods
** Private and public methods used by the component
*/
function (images) {
this.resetComponent();
this.changeImageMode = false;
this.close.emit(images);
};
// this methos is called by the html when the input file changes
// this methos is called by the html when the input file changes
AngularImagePickerComponent.prototype.updateFilesToLoad =
// this methos is called by the html when the input file changes
function ($event) {
this.files = $event.target.files;
this.refreshManipulationLayerObserver();
};
AngularImagePickerComponent.prototype.resetComponent = function () {
if (this.fileUpload) {
this.fileUpload.nativeElement.value = '';
}
this.files = undefined;
this.value = this.initialModelImages || undefined;
};
AngularImagePickerComponent.prototype.refreshManipulationLayerObserver = function () {
var _this = this;
if (this.manipulatedImages) {
if (this.manipulationLayerObserver) {
this.manipulationLayerObserver.unsubscribe();
}
this.manipulationLayerObserver = this.manipulatedImages.changes.subscribe(function () {
_this.manipulatedImages.toArray().forEach(function (image) {
image.value.subscribe(_this.refreshValue);
});
});
}
};
AngularImagePickerComponent.decorators = [
{ type: core_1.Component, args: [{
providers: [exports.CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
selector: 'tzd-angular-image-picker',
styles: [".image-picker-wrapper{padding:16px 0}.image-picker-wrapper .click{cursor:pointer}.image-picker-wrapper img{max-width:100%;max-height:100%;display:block;margin:auto;margin-bottom:16px}.image-picker-wrapper .multiple-images-container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.image-picker-wrapper .multiple-images-container .multiple-images-image{flex:1 auto;max-width:48%}.image-picker-wrapper .multiple-images-container .multiple-images-image:first-of-type{max-width:100%}.image-picker-wrapper .multiple-images-container .multiple-images-image img{width:100%} "],
template: "<div class=\"image-picker-wrapper\"> <div *ngIf=\"(initialModelImages && !changeImageMode) else pickImages\"> <div [ngSwitch]=\"multiple ? true : false\" class=\"click\" (click)=\"changeImageMode = true\"> <div *ngSwitchCase=\"true\" class=\"multiple-images-container\"> <div class=\"multiple-images-image\" *ngFor=\"let initialModelImage of initialModelImages\"> <img [src]=\"initialModelImage\"> </div> </div> <div *ngSwitchCase=\"false\"> <img [src]=\"initialModelImages\"> </div> </div> </div> <ng-template #pickImages> <div *ngIf=\"files\"> <button type=\"button\" mat-mini-fab color=\"default\" (click)=\"onClose()\"> <mat-icon>close</mat-icon> </button> <div *ngFor=\"let file of files; let i = index;\" class=\"tzd-image-picker-image\"> <tzd-image-picker-image maxWidth=\"1080\" maxHeight=\"1080\" [debug]=\"debug\" [file]=\"file\" ></tzd-image-picker-image> </div> </div> <form role=\"form\" enctype=\"multipart/form-data\"> <input id=\"files\" name=\"files\" type=\"file\" [multiple]=\"multiple\" #fileUpload hidden=\"true\" (change)=\"updateFilesToLoad($event)\"> </form> <div *ngIf=\"!files\" class=\"text-center\"> <button type=\"button\" mat-mini-fab color=\"accent\" (click)=\"fileUpload.click(); $event.stopPropagation();\"> <mat-icon>add</mat-icon> </button> <button type=\"button\" mat-mini-fab color=\"default\" (click)=\"onClose()\"> <mat-icon>close</mat-icon> </button> <div [ngSwitch]=\"multiple ? true : false\"> <p *ngSwitchCase=\"true\">Select one or more images</p> <p *ngSwitchCase=\"false\">Select one image</p> </div> </div> </ng-template> </div> ",
},] },
];
/** @nocollapse */
AngularImagePickerComponent.ctorParameters = function () { return []; };
AngularImagePickerComponent.propDecorators = {
"debug": [{ type: core_1.Input },],
"multiple": [{ type: core_1.Input },],
"type": [{ type: core_1.Input },],
"fileUpload": [{ type: core_1.ViewChild, args: ['fileUpload',] },],
"manipulatedImages": [{ type: core_1.ViewChildren, args: [angular_image_picker_image_component_1.AngularImagePickerImageComponent,] },],
"close": [{ type: core_1.Output },],
};
return AngularImagePickerComponent;
}());
exports.AngularImagePickerComponent = AngularImagePickerComponent;
//# sourceMappingURL=angular-image-picker.component.js.map