@wizishop/img-manager 0.2.99 → 0.2.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/wizishop-img-manager.umd.js +208 -187
- package/bundles/wizishop-img-manager.umd.js.map +1 -1
- package/bundles/wizishop-img-manager.umd.min.js +2 -2
- package/bundles/wizishop-img-manager.umd.min.js.map +1 -1
- package/esm2015/lib/components/canva-btn/canva-btn.component.js +6 -81
- package/esm2015/lib/services/canva.service.js +88 -5
- package/esm2015/lib/wz-img-manager.component.js +15 -1
- package/esm2015/wizishop-img-manager.js +4 -4
- package/esm5/lib/components/canva-btn/canva-btn.component.js +6 -87
- package/esm5/lib/services/canva.service.js +94 -5
- package/esm5/lib/wz-img-manager.component.js +19 -1
- package/esm5/wizishop-img-manager.js +4 -4
- package/fesm2015/wizishop-img-manager.js +191 -174
- package/fesm2015/wizishop-img-manager.js.map +1 -1
- package/fesm5/wizishop-img-manager.js +206 -185
- package/fesm5/wizishop-img-manager.js.map +1 -1
- package/lib/components/canva-btn/canva-btn.component.d.ts +2 -19
- package/lib/services/canva.service.d.ts +20 -1
- package/lib/wz-img-manager.component.d.ts +2 -0
- package/package.json +1 -1
- package/wizishop-img-manager-0.2.100.tgz +0 -0
- package/wizishop-img-manager.d.ts +3 -3
- package/wizishop-img-manager.metadata.json +1 -1
- package/wz-img-manager.scss +2559 -2559
- package/wizishop-img-manager-0.2.99.tgz +0 -0
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { __values, __decorate, __metadata, __extends, __assign, __read, __param, __spread } from 'tslib';
|
|
2
|
-
import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, HostListener, Component, ViewChild, ElementRef, HostBinding, Directive,
|
|
3
|
-
import { ReplaySubject, Observable,
|
|
2
|
+
import { ɵɵdefineInjectable, Injectable, ɵɵinject, EventEmitter, Input, Output, HostListener, Component, ViewChild, ElementRef, HostBinding, Directive, ViewEncapsulation, Pipe, ApplicationRef, Renderer2, Inject, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
|
|
3
|
+
import { ReplaySubject, Observable, Subject, BehaviorSubject, forkJoin } from 'rxjs';
|
|
4
4
|
import { HttpParams, HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
|
|
5
|
-
import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
|
|
6
5
|
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
7
6
|
import { NwbAlertService, NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
|
|
8
|
-
import { debounceTime, map,
|
|
7
|
+
import { take, debounceTime, map, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
|
|
8
|
+
import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
|
|
9
9
|
import { Router } from '@angular/router';
|
|
10
10
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
11
11
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
@@ -402,9 +402,114 @@ var UserSettingsService = /** @class */ (function () {
|
|
|
402
402
|
return UserSettingsService;
|
|
403
403
|
}());
|
|
404
404
|
|
|
405
|
+
var AlertService = /** @class */ (function () {
|
|
406
|
+
function AlertService(nwbAlertService, translateService) {
|
|
407
|
+
this.nwbAlertService = nwbAlertService;
|
|
408
|
+
this.translateService = translateService;
|
|
409
|
+
this.actionMsg = 'ImgManager.alert.action';
|
|
410
|
+
this.alertConfig = {
|
|
411
|
+
message: '',
|
|
412
|
+
duration: 5000
|
|
413
|
+
};
|
|
414
|
+
}
|
|
415
|
+
AlertService.prototype.openAlert = function (msgKey) {
|
|
416
|
+
var _this = this;
|
|
417
|
+
this.closePreviousAlert();
|
|
418
|
+
this.translateService.get(msgKey).subscribe(function (trans) {
|
|
419
|
+
_this.alertConfig.message = trans;
|
|
420
|
+
_this.setAlertColor(msgKey);
|
|
421
|
+
_this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
|
|
422
|
+
_this.alertRefComponent.afterClosed().subscribe();
|
|
423
|
+
});
|
|
424
|
+
};
|
|
425
|
+
AlertService.prototype.openAlertWithBackendRespons = function (msgKey, msgBackend) {
|
|
426
|
+
var _this = this;
|
|
427
|
+
this.translateService.get(msgKey).subscribe(function (trans) {
|
|
428
|
+
_this.alertConfig.message = trans;
|
|
429
|
+
_this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
|
|
430
|
+
_this.closePreviousAlert();
|
|
431
|
+
_this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
|
|
432
|
+
_this.alertRefComponent.afterClosed().subscribe();
|
|
433
|
+
});
|
|
434
|
+
};
|
|
435
|
+
AlertService.prototype.closePreviousAlert = function () {
|
|
436
|
+
if (this.alertRefComponent) {
|
|
437
|
+
this.alertRefComponent.dismiss();
|
|
438
|
+
}
|
|
439
|
+
};
|
|
440
|
+
AlertService.prototype.setAlertColor = function (msgKey) {
|
|
441
|
+
var isErrorMsg = /error/i.test(msgKey);
|
|
442
|
+
this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
|
|
443
|
+
};
|
|
444
|
+
AlertService.ctorParameters = function () { return [
|
|
445
|
+
{ type: NwbAlertService },
|
|
446
|
+
{ type: TranslateService }
|
|
447
|
+
]; };
|
|
448
|
+
AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
|
|
449
|
+
AlertService = __decorate([
|
|
450
|
+
Injectable({
|
|
451
|
+
providedIn: 'root'
|
|
452
|
+
}),
|
|
453
|
+
__metadata("design:paramtypes", [NwbAlertService,
|
|
454
|
+
TranslateService])
|
|
455
|
+
], AlertService);
|
|
456
|
+
return AlertService;
|
|
457
|
+
}());
|
|
458
|
+
|
|
459
|
+
var ImgEventService = /** @class */ (function () {
|
|
460
|
+
function ImgEventService() {
|
|
461
|
+
this.imgToEditEvent = new Subject();
|
|
462
|
+
this.imgRemoved = new Subject();
|
|
463
|
+
this.imgAdded = new Subject();
|
|
464
|
+
this.listDisplayedChange = new Subject();
|
|
465
|
+
}
|
|
466
|
+
ImgEventService.prototype.emitImgRemoved = function (id_file) {
|
|
467
|
+
this.imgRemoved.next(id_file);
|
|
468
|
+
};
|
|
469
|
+
ImgEventService.prototype.getImgRemovedEventListner = function () {
|
|
470
|
+
return this.imgRemoved.asObservable();
|
|
471
|
+
};
|
|
472
|
+
ImgEventService.prototype.emitImgToEdit = function (imgToEdit) {
|
|
473
|
+
this.imgToEditEvent.next(imgToEdit);
|
|
474
|
+
};
|
|
475
|
+
ImgEventService.prototype.getImgToEditEventListner = function () {
|
|
476
|
+
return this.imgToEditEvent.asObservable();
|
|
477
|
+
};
|
|
478
|
+
ImgEventService.prototype.emitImgAdded = function (id_file) {
|
|
479
|
+
this.imgAdded.next(id_file);
|
|
480
|
+
};
|
|
481
|
+
ImgEventService.prototype.getImgAddedEventListner = function () {
|
|
482
|
+
return this.imgAdded.asObservable();
|
|
483
|
+
};
|
|
484
|
+
ImgEventService.prototype.emitlistDisplayedChange = function (value) {
|
|
485
|
+
this.listDisplayedChange.next(value);
|
|
486
|
+
};
|
|
487
|
+
ImgEventService.prototype.getlistDisplayedChange = function () {
|
|
488
|
+
return this.listDisplayedChange.asObservable();
|
|
489
|
+
};
|
|
490
|
+
ImgEventService.ɵprov = ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
|
|
491
|
+
ImgEventService = __decorate([
|
|
492
|
+
Injectable({
|
|
493
|
+
providedIn: 'root'
|
|
494
|
+
}),
|
|
495
|
+
__metadata("design:paramtypes", [])
|
|
496
|
+
], ImgEventService);
|
|
497
|
+
return ImgEventService;
|
|
498
|
+
}());
|
|
499
|
+
|
|
405
500
|
var CanvaService = /** @class */ (function () {
|
|
406
|
-
function CanvaService(externalConfigService) {
|
|
501
|
+
function CanvaService(externalConfigService, imgManager, wzImgEventService, alertService, translateService) {
|
|
407
502
|
this.externalConfigService = externalConfigService;
|
|
503
|
+
this.imgManager = imgManager;
|
|
504
|
+
this.wzImgEventService = wzImgEventService;
|
|
505
|
+
this.alertService = alertService;
|
|
506
|
+
this.translateService = translateService;
|
|
507
|
+
this.imgLoading = false;
|
|
508
|
+
this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
|
|
509
|
+
this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
|
|
510
|
+
this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
|
|
511
|
+
this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
|
|
512
|
+
this.forceToOpenCanva = false;
|
|
408
513
|
this.bindExpectedImgSizeEvent = new BehaviorSubject(null);
|
|
409
514
|
this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
|
|
410
515
|
}
|
|
@@ -420,6 +525,9 @@ var CanvaService = /** @class */ (function () {
|
|
|
420
525
|
};
|
|
421
526
|
CanvaService.prototype.expectedImgSizesChange = function (mediaDTO) {
|
|
422
527
|
this.bindExpectedImgSizeEvent.next(mediaDTO);
|
|
528
|
+
if (this.forceToOpenCanva) {
|
|
529
|
+
this.openCanva(parseInt(mediaDTO.image_width), parseInt(mediaDTO.image_height));
|
|
530
|
+
}
|
|
423
531
|
};
|
|
424
532
|
CanvaService.prototype.getCanvaApi = function () {
|
|
425
533
|
var _this = this;
|
|
@@ -474,58 +582,84 @@ var CanvaService = /** @class */ (function () {
|
|
|
474
582
|
};
|
|
475
583
|
document.getElementsByTagName('head')[0].appendChild(node);
|
|
476
584
|
};
|
|
477
|
-
CanvaService.
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
return CanvaService;
|
|
488
|
-
}());
|
|
489
|
-
|
|
490
|
-
var ImgEventService = /** @class */ (function () {
|
|
491
|
-
function ImgEventService() {
|
|
492
|
-
this.imgToEditEvent = new Subject();
|
|
493
|
-
this.imgRemoved = new Subject();
|
|
494
|
-
this.imgAdded = new Subject();
|
|
495
|
-
this.listDisplayedChange = new Subject();
|
|
496
|
-
}
|
|
497
|
-
ImgEventService.prototype.emitImgRemoved = function (id_file) {
|
|
498
|
-
this.imgRemoved.next(id_file);
|
|
499
|
-
};
|
|
500
|
-
ImgEventService.prototype.getImgRemovedEventListner = function () {
|
|
501
|
-
return this.imgRemoved.asObservable();
|
|
502
|
-
};
|
|
503
|
-
ImgEventService.prototype.emitImgToEdit = function (imgToEdit) {
|
|
504
|
-
this.imgToEditEvent.next(imgToEdit);
|
|
505
|
-
};
|
|
506
|
-
ImgEventService.prototype.getImgToEditEventListner = function () {
|
|
507
|
-
return this.imgToEditEvent.asObservable();
|
|
585
|
+
CanvaService.prototype.openCanva = function (width, height) {
|
|
586
|
+
var _this = this;
|
|
587
|
+
if (this.imgLoading) {
|
|
588
|
+
return;
|
|
589
|
+
}
|
|
590
|
+
this.getCanvaApi().pipe(take(1)).subscribe(function (api) {
|
|
591
|
+
_this.canvaApi = api;
|
|
592
|
+
_this.addOverflowBody();
|
|
593
|
+
_this.createDesign(width, height);
|
|
594
|
+
});
|
|
508
595
|
};
|
|
509
|
-
|
|
510
|
-
|
|
596
|
+
CanvaService.prototype.addOverflowBody = function () {
|
|
597
|
+
document.body.classList.add('ovh-canva');
|
|
511
598
|
};
|
|
512
|
-
|
|
513
|
-
|
|
599
|
+
CanvaService.prototype.removeOverflowBody = function () {
|
|
600
|
+
document.body.classList.remove('ovh-canva');
|
|
514
601
|
};
|
|
515
|
-
|
|
516
|
-
this
|
|
602
|
+
CanvaService.prototype.createDesign = function (width, height) {
|
|
603
|
+
var _this = this;
|
|
604
|
+
var createDesign = {
|
|
605
|
+
type: 'EtsyShopIcon',
|
|
606
|
+
dimensions: {
|
|
607
|
+
units: 'px',
|
|
608
|
+
width: width ? width : undefined,
|
|
609
|
+
height: height ? height : undefined,
|
|
610
|
+
},
|
|
611
|
+
publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
|
|
612
|
+
};
|
|
613
|
+
this.canvaApi.createDesign({
|
|
614
|
+
design: createDesign,
|
|
615
|
+
onDesignPublish: function (_a) {
|
|
616
|
+
var exportUrl = _a.exportUrl, designTitle = _a.designTitle;
|
|
617
|
+
return _this.designPublished(exportUrl, designTitle);
|
|
618
|
+
},
|
|
619
|
+
onDesignClose: function () {
|
|
620
|
+
_this.removeOverflowBody();
|
|
621
|
+
}
|
|
622
|
+
});
|
|
517
623
|
};
|
|
518
|
-
|
|
519
|
-
|
|
624
|
+
CanvaService.prototype.designPublished = function (exportUrl, designTitle) {
|
|
625
|
+
var _this = this;
|
|
626
|
+
this.alertService.openAlert(this.uploadingImg);
|
|
627
|
+
this.imgLoading = true;
|
|
628
|
+
this.imgManager.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe(function (img) {
|
|
629
|
+
_this.imgLoading = false;
|
|
630
|
+
_this.removeOverflowBody();
|
|
631
|
+
_this.wzImgEventService.emitImgAdded(img.id_file);
|
|
632
|
+
_this.alertService.openAlert(_this.successUploadPhoto);
|
|
633
|
+
}, function (error) {
|
|
634
|
+
_this.imgLoading = false;
|
|
635
|
+
_this.removeOverflowBody();
|
|
636
|
+
if (error.error.code === 406 && error.error.message) {
|
|
637
|
+
_this.alertService.openAlertWithBackendRespons(_this.errorUploadCanvaImg, error.error.message);
|
|
638
|
+
}
|
|
639
|
+
else {
|
|
640
|
+
_this.alertService.openAlert(_this.errorUploadCanvaImg);
|
|
641
|
+
}
|
|
642
|
+
});
|
|
520
643
|
};
|
|
521
|
-
|
|
522
|
-
|
|
644
|
+
CanvaService.ctorParameters = function () { return [
|
|
645
|
+
{ type: ImgManagerConfigService },
|
|
646
|
+
{ type: ImgManagerService },
|
|
647
|
+
{ type: ImgEventService },
|
|
648
|
+
{ type: AlertService },
|
|
649
|
+
{ type: TranslateService }
|
|
650
|
+
]; };
|
|
651
|
+
CanvaService.ɵprov = ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(ɵɵinject(ImgManagerConfigService), ɵɵinject(ImgManagerService), ɵɵinject(ImgEventService), ɵɵinject(AlertService), ɵɵinject(TranslateService)); }, token: CanvaService, providedIn: "root" });
|
|
652
|
+
CanvaService = __decorate([
|
|
523
653
|
Injectable({
|
|
524
654
|
providedIn: 'root'
|
|
525
655
|
}),
|
|
526
|
-
__metadata("design:paramtypes", [
|
|
527
|
-
|
|
528
|
-
|
|
656
|
+
__metadata("design:paramtypes", [ImgManagerConfigService,
|
|
657
|
+
ImgManagerService,
|
|
658
|
+
ImgEventService,
|
|
659
|
+
AlertService,
|
|
660
|
+
TranslateService])
|
|
661
|
+
], CanvaService);
|
|
662
|
+
return CanvaService;
|
|
529
663
|
}());
|
|
530
664
|
|
|
531
665
|
var DomService = /** @class */ (function () {
|
|
@@ -578,6 +712,19 @@ var WzImgManagerComponent = /** @class */ (function () {
|
|
|
578
712
|
this.listDisplayed = false;
|
|
579
713
|
this.hideTab = false;
|
|
580
714
|
}
|
|
715
|
+
Object.defineProperty(WzImgManagerComponent.prototype, "forceToOpenCanva", {
|
|
716
|
+
// If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
|
|
717
|
+
// If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
|
|
718
|
+
set: function (forceToOpenCanva) {
|
|
719
|
+
this.canvaService.forceToOpenCanva = !!forceToOpenCanva;
|
|
720
|
+
if (typeof forceToOpenCanva === 'boolean') {
|
|
721
|
+
return;
|
|
722
|
+
}
|
|
723
|
+
this.canvaService.expectedImgSizesChange(forceToOpenCanva);
|
|
724
|
+
},
|
|
725
|
+
enumerable: true,
|
|
726
|
+
configurable: true
|
|
727
|
+
});
|
|
581
728
|
Object.defineProperty(WzImgManagerComponent.prototype, "multipleImgMode", {
|
|
582
729
|
get: function () {
|
|
583
730
|
return this._multipleImgMode;
|
|
@@ -726,6 +873,11 @@ var WzImgManagerComponent = /** @class */ (function () {
|
|
|
726
873
|
Input(),
|
|
727
874
|
__metadata("design:type", ImgManagerConfigDto)
|
|
728
875
|
], WzImgManagerComponent.prototype, "externalConfig", void 0);
|
|
876
|
+
__decorate([
|
|
877
|
+
Input(),
|
|
878
|
+
__metadata("design:type", Object),
|
|
879
|
+
__metadata("design:paramtypes", [Object])
|
|
880
|
+
], WzImgManagerComponent.prototype, "forceToOpenCanva", null);
|
|
729
881
|
__decorate([
|
|
730
882
|
Output(),
|
|
731
883
|
__metadata("design:type", Object)
|
|
@@ -772,60 +924,6 @@ var easeInOut = // the fade-in/fade-out animation.
|
|
|
772
924
|
]),
|
|
773
925
|
]);
|
|
774
926
|
|
|
775
|
-
var AlertService = /** @class */ (function () {
|
|
776
|
-
function AlertService(nwbAlertService, translateService) {
|
|
777
|
-
this.nwbAlertService = nwbAlertService;
|
|
778
|
-
this.translateService = translateService;
|
|
779
|
-
this.actionMsg = 'ImgManager.alert.action';
|
|
780
|
-
this.alertConfig = {
|
|
781
|
-
message: '',
|
|
782
|
-
duration: 5000
|
|
783
|
-
};
|
|
784
|
-
}
|
|
785
|
-
AlertService.prototype.openAlert = function (msgKey) {
|
|
786
|
-
var _this = this;
|
|
787
|
-
this.closePreviousAlert();
|
|
788
|
-
this.translateService.get(msgKey).subscribe(function (trans) {
|
|
789
|
-
_this.alertConfig.message = trans;
|
|
790
|
-
_this.setAlertColor(msgKey);
|
|
791
|
-
_this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
|
|
792
|
-
_this.alertRefComponent.afterClosed().subscribe();
|
|
793
|
-
});
|
|
794
|
-
};
|
|
795
|
-
AlertService.prototype.openAlertWithBackendRespons = function (msgKey, msgBackend) {
|
|
796
|
-
var _this = this;
|
|
797
|
-
this.translateService.get(msgKey).subscribe(function (trans) {
|
|
798
|
-
_this.alertConfig.message = trans;
|
|
799
|
-
_this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
|
|
800
|
-
_this.closePreviousAlert();
|
|
801
|
-
_this.alertRefComponent = _this.nwbAlertService.open(_this.alertConfig);
|
|
802
|
-
_this.alertRefComponent.afterClosed().subscribe();
|
|
803
|
-
});
|
|
804
|
-
};
|
|
805
|
-
AlertService.prototype.closePreviousAlert = function () {
|
|
806
|
-
if (this.alertRefComponent) {
|
|
807
|
-
this.alertRefComponent.dismiss();
|
|
808
|
-
}
|
|
809
|
-
};
|
|
810
|
-
AlertService.prototype.setAlertColor = function (msgKey) {
|
|
811
|
-
var isErrorMsg = /error/i.test(msgKey);
|
|
812
|
-
this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
|
|
813
|
-
};
|
|
814
|
-
AlertService.ctorParameters = function () { return [
|
|
815
|
-
{ type: NwbAlertService },
|
|
816
|
-
{ type: TranslateService }
|
|
817
|
-
]; };
|
|
818
|
-
AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
|
|
819
|
-
AlertService = __decorate([
|
|
820
|
-
Injectable({
|
|
821
|
-
providedIn: 'root'
|
|
822
|
-
}),
|
|
823
|
-
__metadata("design:paramtypes", [NwbAlertService,
|
|
824
|
-
TranslateService])
|
|
825
|
-
], AlertService);
|
|
826
|
-
return AlertService;
|
|
827
|
-
}());
|
|
828
|
-
|
|
829
927
|
var ImgUploadComponent = /** @class */ (function () {
|
|
830
928
|
function ImgUploadComponent(imgManager, alertService, externalConfigService) {
|
|
831
929
|
this.imgManager = imgManager;
|
|
@@ -1940,13 +2038,8 @@ var ImgEditorComponent = /** @class */ (function () {
|
|
|
1940
2038
|
}());
|
|
1941
2039
|
|
|
1942
2040
|
var CanvaBtnComponent = /** @class */ (function () {
|
|
1943
|
-
function CanvaBtnComponent(canvaService
|
|
2041
|
+
function CanvaBtnComponent(canvaService) {
|
|
1944
2042
|
this.canvaService = canvaService;
|
|
1945
|
-
this.imgManager = imgManager;
|
|
1946
|
-
this.wzImgEventService = wzImgEventService;
|
|
1947
|
-
this.translateService = translateService;
|
|
1948
|
-
this.alertService = alertService;
|
|
1949
|
-
this.renderer = renderer;
|
|
1950
2043
|
this.showImgUploaded = new EventEmitter();
|
|
1951
2044
|
this.imgLoading = false;
|
|
1952
2045
|
this.availableFormat = {
|
|
@@ -1965,10 +2058,6 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
1965
2058
|
};
|
|
1966
2059
|
this.openDropDownMenu = false;
|
|
1967
2060
|
this.subs = [];
|
|
1968
|
-
this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
|
|
1969
|
-
this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
|
|
1970
|
-
this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
|
|
1971
|
-
this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
|
|
1972
2061
|
}
|
|
1973
2062
|
CanvaBtnComponent.prototype.ngOnInit = function () {
|
|
1974
2063
|
this.canvaLogoRouteAssets = this.canvaService.getCanvaLogo();
|
|
@@ -1990,76 +2079,13 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
1990
2079
|
this.subs.push(subExpectedImgSizesChange);
|
|
1991
2080
|
};
|
|
1992
2081
|
CanvaBtnComponent.prototype.onOpenCanva = function (width, height) {
|
|
1993
|
-
|
|
1994
|
-
if (this.imgLoading) {
|
|
1995
|
-
return;
|
|
1996
|
-
}
|
|
1997
|
-
var subCanvaApi = this.canvaService.getCanvaApi().subscribe(function (api) {
|
|
1998
|
-
_this.canvaApi = api;
|
|
1999
|
-
_this.addOverflowBody();
|
|
2000
|
-
_this.createDesign(width, height);
|
|
2001
|
-
});
|
|
2002
|
-
this.subs.push(subCanvaApi);
|
|
2003
|
-
};
|
|
2004
|
-
CanvaBtnComponent.prototype.createDesign = function (width, height) {
|
|
2005
|
-
var _this = this;
|
|
2006
|
-
var createDesign = {
|
|
2007
|
-
type: 'EtsyShopIcon',
|
|
2008
|
-
dimensions: {
|
|
2009
|
-
units: 'px',
|
|
2010
|
-
width: width ? width : undefined,
|
|
2011
|
-
height: height ? height : undefined,
|
|
2012
|
-
},
|
|
2013
|
-
publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
|
|
2014
|
-
};
|
|
2015
|
-
this.canvaApi.createDesign({
|
|
2016
|
-
design: createDesign,
|
|
2017
|
-
onDesignPublish: function (_a) {
|
|
2018
|
-
var exportUrl = _a.exportUrl, designTitle = _a.designTitle;
|
|
2019
|
-
return _this.designPublished(exportUrl, designTitle);
|
|
2020
|
-
},
|
|
2021
|
-
onDesignClose: function () {
|
|
2022
|
-
_this.removeOverflowBody();
|
|
2023
|
-
}
|
|
2024
|
-
});
|
|
2025
|
-
};
|
|
2026
|
-
CanvaBtnComponent.prototype.designPublished = function (exportUrl, designTitle) {
|
|
2027
|
-
var _this = this;
|
|
2028
|
-
this.alertService.openAlert(this.uploadingImg);
|
|
2029
|
-
this.imgLoading = true;
|
|
2030
|
-
var subUploadImg = this.imgManager.uploadFileByUrl(exportUrl, designTitle).subscribe(function (img) {
|
|
2031
|
-
_this.imgLoading = false;
|
|
2032
|
-
_this.removeOverflowBody();
|
|
2033
|
-
_this.wzImgEventService.emitImgAdded(img.id_file);
|
|
2034
|
-
_this.alertService.openAlert(_this.successUploadPhoto);
|
|
2035
|
-
}, function (error) {
|
|
2036
|
-
_this.imgLoading = false;
|
|
2037
|
-
_this.removeOverflowBody();
|
|
2038
|
-
if (error.error.code === 406 && error.error.message) {
|
|
2039
|
-
_this.alertService.openAlertWithBackendRespons(_this.errorUploadCanvaImg, error.error.message);
|
|
2040
|
-
}
|
|
2041
|
-
else {
|
|
2042
|
-
_this.alertService.openAlert(_this.errorUploadCanvaImg);
|
|
2043
|
-
}
|
|
2044
|
-
});
|
|
2045
|
-
this.subs.push(subUploadImg);
|
|
2046
|
-
};
|
|
2047
|
-
CanvaBtnComponent.prototype.addOverflowBody = function () {
|
|
2048
|
-
this.renderer.addClass(document.body, 'ovh-canva');
|
|
2049
|
-
};
|
|
2050
|
-
CanvaBtnComponent.prototype.removeOverflowBody = function () {
|
|
2051
|
-
this.renderer.removeClass(document.body, 'ovh-canva');
|
|
2082
|
+
this.canvaService.openCanva(width, height);
|
|
2052
2083
|
};
|
|
2053
2084
|
CanvaBtnComponent.prototype.ngOnDestroy = function () {
|
|
2054
2085
|
this.subs.forEach(function (sub) { return sub.unsubscribe(); });
|
|
2055
2086
|
};
|
|
2056
2087
|
CanvaBtnComponent.ctorParameters = function () { return [
|
|
2057
|
-
{ type: CanvaService }
|
|
2058
|
-
{ type: ImgManagerService },
|
|
2059
|
-
{ type: ImgEventService },
|
|
2060
|
-
{ type: TranslateService },
|
|
2061
|
-
{ type: AlertService },
|
|
2062
|
-
{ type: Renderer2 }
|
|
2088
|
+
{ type: CanvaService }
|
|
2063
2089
|
]; };
|
|
2064
2090
|
__decorate([
|
|
2065
2091
|
Input(),
|
|
@@ -2074,12 +2100,7 @@ var CanvaBtnComponent = /** @class */ (function () {
|
|
|
2074
2100
|
selector: 'canva-btn',
|
|
2075
2101
|
template: "<div class=\"canva dropdown is-right is-hoverable\"\n wzAutoHide (clickOutside)=\"openDropDownMenu = false;\"\n [ngClass]=\"{'is-up': stateDisplayed === 'small', 'noTooltip': stateDisplayed !== 'small'}\"\n >\n <div class=\"dropdown-trigger\">\n <div\n class=\"button canva-btn\"\n aria-controls=\"dropdown-menuCanva\"\n (click)=\"openDropDownMenu = true;\"\n >\n <span>{{'ImgManager.CanvaBtn.createImg' | translate}}</span>\n <img [src]=\"canvaLogoRouteAssets\" class=\"canva-btn__logo\">\n\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"imgLoading\"></span>\n </div>\n </div>\n <div\n class=\"dropdown-menu dropDownShadow\"\n [ngClass]=\"{'displayDropDownMenu': openDropDownMenu }\"\n id=\"dropdown-menuCanva\"\n role=\"menu\">\n <ng-scrollbar\n #scrollable\n [visibility]=\"'hover'\"\n class=\"smallScroll\"\n >\n <div class=\"dropdown-content\">\n <div class=\"dropdownTitle\">\n <p>{{'ImgManager.CanvaBtn.createImg.title' | translate}}</p>\n </div>\n\n <div class=\"infoItem\">\n <p>{{'ImgManager.CanvaBtn.info' | translate}}</p>\n </div>\n\n <ng-container >\n <div\n *ngIf=\"expectedWidth && expectedHeight\"\n class=\"dropdown-item-wrapper\"\n >\n <div class=\"dropdown-item expectedSizes\" (click)=\"onOpenCanva(expectedWidth, expectedHeight)\">\n <p>{{'ImgManager.CanvaBtn.recommanded' | translate}}</p><p>{{expectedWidth}}*{{expectedHeight}}</p>\n </div>\n </div>\n </ng-container>\n\n <div\n *ngFor=\"let format of availableFormat| keyvalue\"\n class=\"dropdown-item-wrapper\">\n <div\n (click)=\"onOpenCanva(format.value.width, format.value.height)\"\n class=\"dropdown-item\">\n <p>{{format.key | translate}}</p><p>{{format.value.width}}*{{format.value.height}}</p>\n </div>\n </div>\n </div>\n </ng-scrollbar>\n </div>\n</div>\n"
|
|
2076
2102
|
}),
|
|
2077
|
-
__metadata("design:paramtypes", [CanvaService
|
|
2078
|
-
ImgManagerService,
|
|
2079
|
-
ImgEventService,
|
|
2080
|
-
TranslateService,
|
|
2081
|
-
AlertService,
|
|
2082
|
-
Renderer2])
|
|
2103
|
+
__metadata("design:paramtypes", [CanvaService])
|
|
2083
2104
|
], CanvaBtnComponent);
|
|
2084
2105
|
return CanvaBtnComponent;
|
|
2085
2106
|
}());
|
|
@@ -4744,5 +4765,5 @@ var ImgCDNConfigDTO = /** @class */ (function () {
|
|
|
4744
4765
|
* Generated bundle index. Do not edit.
|
|
4745
4766
|
*/
|
|
4746
4767
|
|
|
4747
|
-
export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd,
|
|
4768
|
+
export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, SelectComponent as ɵbh, DragDropDirective as ɵbi, LoadingDirective as ɵbj, AutoHideDirective as ɵbk, CopyClipboardDirective as ɵbl, TableColumn as ɵbm, CheckBoxRow as ɵbn, TableColumnHeader as ɵbo, TableRow as ɵbp, AbstractDebounceDirective as ɵbq, DebounceKeyupDirective as ɵbr, ZindexToggleDirective as ɵbs, PagniationArrayTotalPages as ɵbt, PagniationIsLastPage as ɵbu, PagniationText as ɵbv, ImageSrcPipe as ɵbw, NumberToArray as ɵbx, LargeNumberOfPagePipe as ɵby, SelectFiltersPipe as ɵbz, UserSettingsService as ɵc, ImgEventService as ɵd, AlertService as ɵe, DomService as ɵf, ImgTabsComponent as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
|
|
4748
4769
|
//# sourceMappingURL=wizishop-img-manager.js.map
|