@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 { __decorate, __metadata, __param } 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';
|
|
@@ -374,9 +374,110 @@ UserSettingsService = __decorate([
|
|
|
374
374
|
__metadata("design:paramtypes", [])
|
|
375
375
|
], UserSettingsService);
|
|
376
376
|
|
|
377
|
+
let AlertService = class AlertService {
|
|
378
|
+
constructor(nwbAlertService, translateService) {
|
|
379
|
+
this.nwbAlertService = nwbAlertService;
|
|
380
|
+
this.translateService = translateService;
|
|
381
|
+
this.actionMsg = 'ImgManager.alert.action';
|
|
382
|
+
this.alertConfig = {
|
|
383
|
+
message: '',
|
|
384
|
+
duration: 5000
|
|
385
|
+
};
|
|
386
|
+
}
|
|
387
|
+
openAlert(msgKey) {
|
|
388
|
+
this.closePreviousAlert();
|
|
389
|
+
this.translateService.get(msgKey).subscribe(trans => {
|
|
390
|
+
this.alertConfig.message = trans;
|
|
391
|
+
this.setAlertColor(msgKey);
|
|
392
|
+
this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
|
|
393
|
+
this.alertRefComponent.afterClosed().subscribe();
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
openAlertWithBackendRespons(msgKey, msgBackend) {
|
|
397
|
+
this.translateService.get(msgKey).subscribe(trans => {
|
|
398
|
+
this.alertConfig.message = trans;
|
|
399
|
+
this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
|
|
400
|
+
this.closePreviousAlert();
|
|
401
|
+
this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
|
|
402
|
+
this.alertRefComponent.afterClosed().subscribe();
|
|
403
|
+
});
|
|
404
|
+
}
|
|
405
|
+
closePreviousAlert() {
|
|
406
|
+
if (this.alertRefComponent) {
|
|
407
|
+
this.alertRefComponent.dismiss();
|
|
408
|
+
}
|
|
409
|
+
}
|
|
410
|
+
setAlertColor(msgKey) {
|
|
411
|
+
const isErrorMsg = /error/i.test(msgKey);
|
|
412
|
+
this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
|
|
413
|
+
}
|
|
414
|
+
};
|
|
415
|
+
AlertService.ctorParameters = () => [
|
|
416
|
+
{ type: NwbAlertService },
|
|
417
|
+
{ type: TranslateService }
|
|
418
|
+
];
|
|
419
|
+
AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
|
|
420
|
+
AlertService = __decorate([
|
|
421
|
+
Injectable({
|
|
422
|
+
providedIn: 'root'
|
|
423
|
+
}),
|
|
424
|
+
__metadata("design:paramtypes", [NwbAlertService,
|
|
425
|
+
TranslateService])
|
|
426
|
+
], AlertService);
|
|
427
|
+
|
|
428
|
+
let ImgEventService = class ImgEventService {
|
|
429
|
+
constructor() {
|
|
430
|
+
this.imgToEditEvent = new Subject();
|
|
431
|
+
this.imgRemoved = new Subject();
|
|
432
|
+
this.imgAdded = new Subject();
|
|
433
|
+
this.listDisplayedChange = new Subject();
|
|
434
|
+
}
|
|
435
|
+
emitImgRemoved(id_file) {
|
|
436
|
+
this.imgRemoved.next(id_file);
|
|
437
|
+
}
|
|
438
|
+
getImgRemovedEventListner() {
|
|
439
|
+
return this.imgRemoved.asObservable();
|
|
440
|
+
}
|
|
441
|
+
emitImgToEdit(imgToEdit) {
|
|
442
|
+
this.imgToEditEvent.next(imgToEdit);
|
|
443
|
+
}
|
|
444
|
+
getImgToEditEventListner() {
|
|
445
|
+
return this.imgToEditEvent.asObservable();
|
|
446
|
+
}
|
|
447
|
+
emitImgAdded(id_file) {
|
|
448
|
+
this.imgAdded.next(id_file);
|
|
449
|
+
}
|
|
450
|
+
getImgAddedEventListner() {
|
|
451
|
+
return this.imgAdded.asObservable();
|
|
452
|
+
}
|
|
453
|
+
emitlistDisplayedChange(value) {
|
|
454
|
+
this.listDisplayedChange.next(value);
|
|
455
|
+
}
|
|
456
|
+
getlistDisplayedChange() {
|
|
457
|
+
return this.listDisplayedChange.asObservable();
|
|
458
|
+
}
|
|
459
|
+
};
|
|
460
|
+
ImgEventService.ɵprov = ɵɵdefineInjectable({ factory: function ImgEventService_Factory() { return new ImgEventService(); }, token: ImgEventService, providedIn: "root" });
|
|
461
|
+
ImgEventService = __decorate([
|
|
462
|
+
Injectable({
|
|
463
|
+
providedIn: 'root'
|
|
464
|
+
}),
|
|
465
|
+
__metadata("design:paramtypes", [])
|
|
466
|
+
], ImgEventService);
|
|
467
|
+
|
|
377
468
|
let CanvaService = class CanvaService {
|
|
378
|
-
constructor(externalConfigService) {
|
|
469
|
+
constructor(externalConfigService, imgManager, wzImgEventService, alertService, translateService) {
|
|
379
470
|
this.externalConfigService = externalConfigService;
|
|
471
|
+
this.imgManager = imgManager;
|
|
472
|
+
this.wzImgEventService = wzImgEventService;
|
|
473
|
+
this.alertService = alertService;
|
|
474
|
+
this.translateService = translateService;
|
|
475
|
+
this.imgLoading = false;
|
|
476
|
+
this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
|
|
477
|
+
this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
|
|
478
|
+
this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
|
|
479
|
+
this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
|
|
480
|
+
this.forceToOpenCanva = false;
|
|
380
481
|
this.bindExpectedImgSizeEvent = new BehaviorSubject(null);
|
|
381
482
|
this.bindExpectedSizeDone = this.bindExpectedImgSizeEvent.asObservable();
|
|
382
483
|
}
|
|
@@ -392,6 +493,9 @@ let CanvaService = class CanvaService {
|
|
|
392
493
|
}
|
|
393
494
|
expectedImgSizesChange(mediaDTO) {
|
|
394
495
|
this.bindExpectedImgSizeEvent.next(mediaDTO);
|
|
496
|
+
if (this.forceToOpenCanva) {
|
|
497
|
+
this.openCanva(parseInt(mediaDTO.image_width), parseInt(mediaDTO.image_height));
|
|
498
|
+
}
|
|
395
499
|
}
|
|
396
500
|
getCanvaApi() {
|
|
397
501
|
if (!this.canvaApiURL || !this.canvaApiKey) {
|
|
@@ -443,57 +547,78 @@ let CanvaService = class CanvaService {
|
|
|
443
547
|
};
|
|
444
548
|
document.getElementsByTagName('head')[0].appendChild(node);
|
|
445
549
|
}
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
__metadata("design:paramtypes", [ImgManagerConfigService])
|
|
456
|
-
], CanvaService);
|
|
457
|
-
|
|
458
|
-
let ImgEventService = class ImgEventService {
|
|
459
|
-
constructor() {
|
|
460
|
-
this.imgToEditEvent = new Subject();
|
|
461
|
-
this.imgRemoved = new Subject();
|
|
462
|
-
this.imgAdded = new Subject();
|
|
463
|
-
this.listDisplayedChange = new Subject();
|
|
464
|
-
}
|
|
465
|
-
emitImgRemoved(id_file) {
|
|
466
|
-
this.imgRemoved.next(id_file);
|
|
467
|
-
}
|
|
468
|
-
getImgRemovedEventListner() {
|
|
469
|
-
return this.imgRemoved.asObservable();
|
|
470
|
-
}
|
|
471
|
-
emitImgToEdit(imgToEdit) {
|
|
472
|
-
this.imgToEditEvent.next(imgToEdit);
|
|
473
|
-
}
|
|
474
|
-
getImgToEditEventListner() {
|
|
475
|
-
return this.imgToEditEvent.asObservable();
|
|
550
|
+
openCanva(width, height) {
|
|
551
|
+
if (this.imgLoading) {
|
|
552
|
+
return;
|
|
553
|
+
}
|
|
554
|
+
this.getCanvaApi().pipe(take(1)).subscribe((api) => {
|
|
555
|
+
this.canvaApi = api;
|
|
556
|
+
this.addOverflowBody();
|
|
557
|
+
this.createDesign(width, height);
|
|
558
|
+
});
|
|
476
559
|
}
|
|
477
|
-
|
|
478
|
-
|
|
560
|
+
addOverflowBody() {
|
|
561
|
+
document.body.classList.add('ovh-canva');
|
|
479
562
|
}
|
|
480
|
-
|
|
481
|
-
|
|
563
|
+
removeOverflowBody() {
|
|
564
|
+
document.body.classList.remove('ovh-canva');
|
|
482
565
|
}
|
|
483
|
-
|
|
484
|
-
|
|
566
|
+
createDesign(width, height) {
|
|
567
|
+
const createDesign = {
|
|
568
|
+
type: 'EtsyShopIcon',
|
|
569
|
+
dimensions: {
|
|
570
|
+
units: 'px',
|
|
571
|
+
width: width ? width : undefined,
|
|
572
|
+
height: height ? height : undefined,
|
|
573
|
+
},
|
|
574
|
+
publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
|
|
575
|
+
};
|
|
576
|
+
this.canvaApi.createDesign({
|
|
577
|
+
design: createDesign,
|
|
578
|
+
onDesignPublish: ({ exportUrl, designTitle }) => this.designPublished(exportUrl, designTitle),
|
|
579
|
+
onDesignClose: () => {
|
|
580
|
+
this.removeOverflowBody();
|
|
581
|
+
}
|
|
582
|
+
});
|
|
485
583
|
}
|
|
486
|
-
|
|
487
|
-
|
|
584
|
+
designPublished(exportUrl, designTitle) {
|
|
585
|
+
this.alertService.openAlert(this.uploadingImg);
|
|
586
|
+
this.imgLoading = true;
|
|
587
|
+
this.imgManager.uploadFileByUrl(exportUrl, designTitle).pipe(take(1)).subscribe((img) => {
|
|
588
|
+
this.imgLoading = false;
|
|
589
|
+
this.removeOverflowBody();
|
|
590
|
+
this.wzImgEventService.emitImgAdded(img.id_file);
|
|
591
|
+
this.alertService.openAlert(this.successUploadPhoto);
|
|
592
|
+
}, error => {
|
|
593
|
+
this.imgLoading = false;
|
|
594
|
+
this.removeOverflowBody();
|
|
595
|
+
if (error.error.code === 406 && error.error.message) {
|
|
596
|
+
this.alertService.openAlertWithBackendRespons(this.errorUploadCanvaImg, error.error.message);
|
|
597
|
+
}
|
|
598
|
+
else {
|
|
599
|
+
this.alertService.openAlert(this.errorUploadCanvaImg);
|
|
600
|
+
}
|
|
601
|
+
});
|
|
488
602
|
}
|
|
489
603
|
};
|
|
490
|
-
|
|
491
|
-
|
|
604
|
+
CanvaService.ctorParameters = () => [
|
|
605
|
+
{ type: ImgManagerConfigService },
|
|
606
|
+
{ type: ImgManagerService },
|
|
607
|
+
{ type: ImgEventService },
|
|
608
|
+
{ type: AlertService },
|
|
609
|
+
{ type: TranslateService }
|
|
610
|
+
];
|
|
611
|
+
CanvaService.ɵprov = ɵɵdefineInjectable({ factory: function CanvaService_Factory() { return new CanvaService(ɵɵinject(ImgManagerConfigService), ɵɵinject(ImgManagerService), ɵɵinject(ImgEventService), ɵɵinject(AlertService), ɵɵinject(TranslateService)); }, token: CanvaService, providedIn: "root" });
|
|
612
|
+
CanvaService = __decorate([
|
|
492
613
|
Injectable({
|
|
493
614
|
providedIn: 'root'
|
|
494
615
|
}),
|
|
495
|
-
__metadata("design:paramtypes", [
|
|
496
|
-
|
|
616
|
+
__metadata("design:paramtypes", [ImgManagerConfigService,
|
|
617
|
+
ImgManagerService,
|
|
618
|
+
ImgEventService,
|
|
619
|
+
AlertService,
|
|
620
|
+
TranslateService])
|
|
621
|
+
], CanvaService);
|
|
497
622
|
|
|
498
623
|
let DomService = class DomService {
|
|
499
624
|
constructor() {
|
|
@@ -542,6 +667,15 @@ let WzImgManagerComponent = class WzImgManagerComponent {
|
|
|
542
667
|
this.listDisplayed = false;
|
|
543
668
|
this.hideTab = false;
|
|
544
669
|
}
|
|
670
|
+
// If forceToOpenCanva is true : Canva will open with the canvaService.expectedImgSizesChange
|
|
671
|
+
// If forceToOpenCanva is a WiziBlockMediaDto, Canva open immediatly
|
|
672
|
+
set forceToOpenCanva(forceToOpenCanva) {
|
|
673
|
+
this.canvaService.forceToOpenCanva = !!forceToOpenCanva;
|
|
674
|
+
if (typeof forceToOpenCanva === 'boolean') {
|
|
675
|
+
return;
|
|
676
|
+
}
|
|
677
|
+
this.canvaService.expectedImgSizesChange(forceToOpenCanva);
|
|
678
|
+
}
|
|
545
679
|
set multipleImgMode(activate) {
|
|
546
680
|
this._multipleImgMode = activate;
|
|
547
681
|
this.imgSelectionService.setMultipleImgMode(this._multipleImgMode);
|
|
@@ -680,6 +814,11 @@ __decorate([
|
|
|
680
814
|
Input(),
|
|
681
815
|
__metadata("design:type", ImgManagerConfigDto)
|
|
682
816
|
], WzImgManagerComponent.prototype, "externalConfig", void 0);
|
|
817
|
+
__decorate([
|
|
818
|
+
Input(),
|
|
819
|
+
__metadata("design:type", Object),
|
|
820
|
+
__metadata("design:paramtypes", [Object])
|
|
821
|
+
], WzImgManagerComponent.prototype, "forceToOpenCanva", null);
|
|
683
822
|
__decorate([
|
|
684
823
|
Output(),
|
|
685
824
|
__metadata("design:type", Object)
|
|
@@ -724,57 +863,6 @@ const easeInOut = // the fade-in/fade-out animation.
|
|
|
724
863
|
]),
|
|
725
864
|
]);
|
|
726
865
|
|
|
727
|
-
let AlertService = class AlertService {
|
|
728
|
-
constructor(nwbAlertService, translateService) {
|
|
729
|
-
this.nwbAlertService = nwbAlertService;
|
|
730
|
-
this.translateService = translateService;
|
|
731
|
-
this.actionMsg = 'ImgManager.alert.action';
|
|
732
|
-
this.alertConfig = {
|
|
733
|
-
message: '',
|
|
734
|
-
duration: 5000
|
|
735
|
-
};
|
|
736
|
-
}
|
|
737
|
-
openAlert(msgKey) {
|
|
738
|
-
this.closePreviousAlert();
|
|
739
|
-
this.translateService.get(msgKey).subscribe(trans => {
|
|
740
|
-
this.alertConfig.message = trans;
|
|
741
|
-
this.setAlertColor(msgKey);
|
|
742
|
-
this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
|
|
743
|
-
this.alertRefComponent.afterClosed().subscribe();
|
|
744
|
-
});
|
|
745
|
-
}
|
|
746
|
-
openAlertWithBackendRespons(msgKey, msgBackend) {
|
|
747
|
-
this.translateService.get(msgKey).subscribe(trans => {
|
|
748
|
-
this.alertConfig.message = trans;
|
|
749
|
-
this.alertConfig.message += '<br/>' + JSON.parse(msgBackend).message;
|
|
750
|
-
this.closePreviousAlert();
|
|
751
|
-
this.alertRefComponent = this.nwbAlertService.open(this.alertConfig);
|
|
752
|
-
this.alertRefComponent.afterClosed().subscribe();
|
|
753
|
-
});
|
|
754
|
-
}
|
|
755
|
-
closePreviousAlert() {
|
|
756
|
-
if (this.alertRefComponent) {
|
|
757
|
-
this.alertRefComponent.dismiss();
|
|
758
|
-
}
|
|
759
|
-
}
|
|
760
|
-
setAlertColor(msgKey) {
|
|
761
|
-
const isErrorMsg = /error/i.test(msgKey);
|
|
762
|
-
this.alertConfig.color = isErrorMsg ? 'is-danger' : 'is-success';
|
|
763
|
-
}
|
|
764
|
-
};
|
|
765
|
-
AlertService.ctorParameters = () => [
|
|
766
|
-
{ type: NwbAlertService },
|
|
767
|
-
{ type: TranslateService }
|
|
768
|
-
];
|
|
769
|
-
AlertService.ɵprov = ɵɵdefineInjectable({ factory: function AlertService_Factory() { return new AlertService(ɵɵinject(NwbAlertService), ɵɵinject(TranslateService)); }, token: AlertService, providedIn: "root" });
|
|
770
|
-
AlertService = __decorate([
|
|
771
|
-
Injectable({
|
|
772
|
-
providedIn: 'root'
|
|
773
|
-
}),
|
|
774
|
-
__metadata("design:paramtypes", [NwbAlertService,
|
|
775
|
-
TranslateService])
|
|
776
|
-
], AlertService);
|
|
777
|
-
|
|
778
866
|
let ImgUploadComponent = class ImgUploadComponent {
|
|
779
867
|
constructor(imgManager, alertService, externalConfigService) {
|
|
780
868
|
this.imgManager = imgManager;
|
|
@@ -1824,13 +1912,8 @@ ImgEditorComponent = __decorate([
|
|
|
1824
1912
|
], ImgEditorComponent);
|
|
1825
1913
|
|
|
1826
1914
|
let CanvaBtnComponent = class CanvaBtnComponent {
|
|
1827
|
-
constructor(canvaService
|
|
1915
|
+
constructor(canvaService) {
|
|
1828
1916
|
this.canvaService = canvaService;
|
|
1829
|
-
this.imgManager = imgManager;
|
|
1830
|
-
this.wzImgEventService = wzImgEventService;
|
|
1831
|
-
this.translateService = translateService;
|
|
1832
|
-
this.alertService = alertService;
|
|
1833
|
-
this.renderer = renderer;
|
|
1834
1917
|
this.showImgUploaded = new EventEmitter();
|
|
1835
1918
|
this.imgLoading = false;
|
|
1836
1919
|
this.availableFormat = {
|
|
@@ -1849,10 +1932,6 @@ let CanvaBtnComponent = class CanvaBtnComponent {
|
|
|
1849
1932
|
};
|
|
1850
1933
|
this.openDropDownMenu = false;
|
|
1851
1934
|
this.subs = [];
|
|
1852
|
-
this.uploadingImg = 'ImgManager.CanvaBtn.uploadingImg';
|
|
1853
|
-
this.successUploadPhoto = 'ImgManager.CanvaBtn.successImport';
|
|
1854
|
-
this.errorUploadCanvaImg = 'ImgManager.CanvaBtn.errorUploadCanvaImg';
|
|
1855
|
-
this.errorRenameCanvaImg = 'ImgManager.CanvaBtn.errorRenameCanvaImg';
|
|
1856
1935
|
}
|
|
1857
1936
|
ngOnInit() {
|
|
1858
1937
|
this.canvaLogoRouteAssets = this.canvaService.getCanvaLogo();
|
|
@@ -1873,71 +1952,14 @@ let CanvaBtnComponent = class CanvaBtnComponent {
|
|
|
1873
1952
|
this.subs.push(subExpectedImgSizesChange);
|
|
1874
1953
|
}
|
|
1875
1954
|
onOpenCanva(width, height) {
|
|
1876
|
-
|
|
1877
|
-
return;
|
|
1878
|
-
}
|
|
1879
|
-
const subCanvaApi = this.canvaService.getCanvaApi().subscribe((api) => {
|
|
1880
|
-
this.canvaApi = api;
|
|
1881
|
-
this.addOverflowBody();
|
|
1882
|
-
this.createDesign(width, height);
|
|
1883
|
-
});
|
|
1884
|
-
this.subs.push(subCanvaApi);
|
|
1885
|
-
}
|
|
1886
|
-
createDesign(width, height) {
|
|
1887
|
-
const createDesign = {
|
|
1888
|
-
type: 'EtsyShopIcon',
|
|
1889
|
-
dimensions: {
|
|
1890
|
-
units: 'px',
|
|
1891
|
-
width: width ? width : undefined,
|
|
1892
|
-
height: height ? height : undefined,
|
|
1893
|
-
},
|
|
1894
|
-
publishLabel: this.translateService.instant('ImgManager.CanvaBtn.publish'),
|
|
1895
|
-
};
|
|
1896
|
-
this.canvaApi.createDesign({
|
|
1897
|
-
design: createDesign,
|
|
1898
|
-
onDesignPublish: ({ exportUrl, designTitle }) => this.designPublished(exportUrl, designTitle),
|
|
1899
|
-
onDesignClose: () => {
|
|
1900
|
-
this.removeOverflowBody();
|
|
1901
|
-
}
|
|
1902
|
-
});
|
|
1903
|
-
}
|
|
1904
|
-
designPublished(exportUrl, designTitle) {
|
|
1905
|
-
this.alertService.openAlert(this.uploadingImg);
|
|
1906
|
-
this.imgLoading = true;
|
|
1907
|
-
const subUploadImg = this.imgManager.uploadFileByUrl(exportUrl, designTitle).subscribe((img) => {
|
|
1908
|
-
this.imgLoading = false;
|
|
1909
|
-
this.removeOverflowBody();
|
|
1910
|
-
this.wzImgEventService.emitImgAdded(img.id_file);
|
|
1911
|
-
this.alertService.openAlert(this.successUploadPhoto);
|
|
1912
|
-
}, error => {
|
|
1913
|
-
this.imgLoading = false;
|
|
1914
|
-
this.removeOverflowBody();
|
|
1915
|
-
if (error.error.code === 406 && error.error.message) {
|
|
1916
|
-
this.alertService.openAlertWithBackendRespons(this.errorUploadCanvaImg, error.error.message);
|
|
1917
|
-
}
|
|
1918
|
-
else {
|
|
1919
|
-
this.alertService.openAlert(this.errorUploadCanvaImg);
|
|
1920
|
-
}
|
|
1921
|
-
});
|
|
1922
|
-
this.subs.push(subUploadImg);
|
|
1923
|
-
}
|
|
1924
|
-
addOverflowBody() {
|
|
1925
|
-
this.renderer.addClass(document.body, 'ovh-canva');
|
|
1926
|
-
}
|
|
1927
|
-
removeOverflowBody() {
|
|
1928
|
-
this.renderer.removeClass(document.body, 'ovh-canva');
|
|
1955
|
+
this.canvaService.openCanva(width, height);
|
|
1929
1956
|
}
|
|
1930
1957
|
ngOnDestroy() {
|
|
1931
1958
|
this.subs.forEach(sub => sub.unsubscribe());
|
|
1932
1959
|
}
|
|
1933
1960
|
};
|
|
1934
1961
|
CanvaBtnComponent.ctorParameters = () => [
|
|
1935
|
-
{ type: CanvaService }
|
|
1936
|
-
{ type: ImgManagerService },
|
|
1937
|
-
{ type: ImgEventService },
|
|
1938
|
-
{ type: TranslateService },
|
|
1939
|
-
{ type: AlertService },
|
|
1940
|
-
{ type: Renderer2 }
|
|
1962
|
+
{ type: CanvaService }
|
|
1941
1963
|
];
|
|
1942
1964
|
__decorate([
|
|
1943
1965
|
Input(),
|
|
@@ -1952,12 +1974,7 @@ CanvaBtnComponent = __decorate([
|
|
|
1952
1974
|
selector: 'canva-btn',
|
|
1953
1975
|
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"
|
|
1954
1976
|
}),
|
|
1955
|
-
__metadata("design:paramtypes", [CanvaService
|
|
1956
|
-
ImgManagerService,
|
|
1957
|
-
ImgEventService,
|
|
1958
|
-
TranslateService,
|
|
1959
|
-
AlertService,
|
|
1960
|
-
Renderer2])
|
|
1977
|
+
__metadata("design:paramtypes", [CanvaService])
|
|
1961
1978
|
], CanvaBtnComponent);
|
|
1962
1979
|
|
|
1963
1980
|
let ImgSelectionComponent = class ImgSelectionComponent {
|
|
@@ -4474,5 +4491,5 @@ class ImgCDNConfigDTO {
|
|
|
4474
4491
|
* Generated bundle index. Do not edit.
|
|
4475
4492
|
*/
|
|
4476
4493
|
|
|
4477
|
-
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,
|
|
4494
|
+
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 };
|
|
4478
4495
|
//# sourceMappingURL=wizishop-img-manager.js.map
|