@wizishop/img-manager 0.2.77 → 0.2.81
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/assets/i18n/en.json +1 -1
- package/bundles/wizishop-img-manager.umd.js +40 -5
- 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/images-view/images-view.component.js +11 -3
- package/esm2015/lib/components/images-view/mosaic-view/img-card/img-card.component.js +10 -2
- package/esm2015/lib/components/images-view/mosaic-view/mosaic-view.component.js +11 -3
- package/esm2015/lib/components/img-tabs/img-tabs.component.js +10 -2
- package/esm2015/lib/wz-img-manager.component.js +5 -2
- package/esm5/lib/components/images-view/images-view.component.js +11 -3
- package/esm5/lib/components/images-view/mosaic-view/img-card/img-card.component.js +10 -2
- package/esm5/lib/components/images-view/mosaic-view/mosaic-view.component.js +11 -3
- package/esm5/lib/components/img-tabs/img-tabs.component.js +10 -2
- package/esm5/lib/wz-img-manager.component.js +5 -2
- package/fesm2015/wizishop-img-manager.js +40 -5
- package/fesm2015/wizishop-img-manager.js.map +1 -1
- package/fesm5/wizishop-img-manager.js +40 -5
- package/fesm5/wizishop-img-manager.js.map +1 -1
- package/lib/components/images-view/images-view.component.d.ts +3 -1
- package/lib/components/images-view/mosaic-view/img-card/img-card.component.d.ts +2 -0
- package/lib/components/images-view/mosaic-view/mosaic-view.component.d.ts +3 -1
- package/lib/components/img-tabs/img-tabs.component.d.ts +2 -0
- package/lib/wz-img-manager.component.d.ts +1 -0
- package/package.json +1 -1
- package/wizishop-img-manager-0.2.81.tgz +0 -0
- package/wizishop-img-manager.metadata.json +1 -1
- package/wz-img-manager.scss +19 -2
- package/wizishop-img-manager-0.2.77.tgz +0 -0
package/assets/i18n/en.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"ImgManager.CanvaBtn.bigSquare":"Big","ImgManager.CanvaBtn.createImg":"Create an image with","ImgManager.CanvaBtn.createImg.title":"Create an image with Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Error: the title of the image from Canva could not be retrieved.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Error: the image from Canva could not be uploaded.","ImgManager.CanvaBtn.info":"Select a format","ImgManager.CanvaBtn.mediumSquare":"Medium","ImgManager.CanvaBtn.publish":"Import","ImgManager.CanvaBtn.recommanded":"Recommended","ImgManager.CanvaBtn.smallSquare":"Small","ImgManager.CanvaBtn.successImport":"Your image has been imported.","ImgManager.CanvaBtn.uploadingImg":"Image loading.","ImgManager.ImgCard.confirmDeleteImg":"Are you sure you want to delete this image?","ImgManager.ImgCard.del":"Delete","ImgManager.ImgCard.download":"Download","ImgManager.ImgCard.edit":"Edit","ImgManager.ImgCard.select":"Select","ImgManager.ImgCard.validImgSmall":"Select","ImgManager.ImgEditor.nameEx":"Ex: Black T-shirt","ImgManager.ImgEditor.restart":"Refresh","ImgManager.ImgEditor.Valid":"Confirm","ImgManager.ImgEditor.ValidtToolTip":"Click here to crop the image","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image to delete: Are you sure?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images to delete: Are you sure?","ImgManager.ImgLib.delMlt":"Delete","ImgManager.ImgLib.errorGetCanvaImg":"Error: the image from Canva could not be retrieved.","ImgManager.ImgLib.imgNameSaved":"Image name saved.","ImgManager.ImgLib.lastImgs":"Your last images","ImgManager.ImgLib.nbImg":"Number of images","ImgManager.ImgLib.savingImgName":"Backup in progress...","ImgManager.ImgList.download":"Download","ImgManager.ImgList.edit":"Edit","ImgManager.ImgList.errorAlreadyUsed":"This image can not be deleted as it is being used.","ImgManager.ImgList.remove":"Delete","ImgManager.ImgList.titleImgName":"Image name","ImgManager.ImgList.titleResolution":"Resolution","ImgManager.ImgSelection.deleteImg":"Delete","ImgManager.ImgSelection.tooltips":"Click to change the order of the images","ImgManager.ImgUpload.dropImg":"Drag and drop your image here","ImgManager.ImgUpload.loading":"Loading...","ImgManager.ImgUpload.or":"or","ImgManager.ImgUpload.selectImg":"Select the images to be imported","ImgManager.PexelLib.errorUploadPhoto":"Error: the image could not be imported","ImgManager.PexelLib.import":"Import","ImgManager.PexelLib.importation":"Import","ImgManager.PexelLib.nbImgFound":"Number if images found","ImgManager.PexelLib.successImport":"Image imported","ImgManager.SearchBar.placeholder":"Name of the image to search","ImgManager.snackBar.action":"View image","ImgManager.Tabs.addImg":"Add an image","ImgManager.Tabs.freeImgLib":"Free image library","ImgManager.Tabs.imgLib":"Your images","ImgManager.UploadList.imgSuccessImport":"Images successfully imported","ImgManager.UploadList.properties.imgSize":"Size of original image","ImgManager.UploadList.properties.imgWeight":"Size of original file","ImgManager.UploadList.seo.cdn":"Addition in the CDN.","ImgManager.UploadList.seo.lazyloading":"Automatic lazyloading.","ImgManager.UploadList.seo.rezise":"Resizing and compression.","ImgManager.UploadList.seo.webp":"Webp generation","ImgManager.webElement.infoBulle":"The image manager allows you to <strong>download</strong> images, <strong> select them </strong> and apply some <strong>effects</strong> (crop, rotations...).<br/><br/>We recommend using <strong>several photos</strong> of the product (3 or 4) in various positions or environments.","ImgManager.webElement.OpenBtn":"Add photos","no":"no","PaginationComponent.on":"{{low}}-{{high}} on {{total}}","PaginationComponent.page":"Go to page","yes":"yes"}
|
|
1
|
+
{"ImgManager.CanvaBtn.bigSquare":"Big","ImgManager.CanvaBtn.createImg":"Create an image with","ImgManager.CanvaBtn.createImg.title":"Create an image with Canva","ImgManager.CanvaBtn.errorRenameCanvaImg":"Error: the title of the image from Canva could not be retrieved.","ImgManager.CanvaBtn.errorUploadCanvaImg":"Error: the image from Canva could not be uploaded.","ImgManager.CanvaBtn.info":"Select a format","ImgManager.CanvaBtn.mediumSquare":"Medium","ImgManager.CanvaBtn.publish":"Import","ImgManager.CanvaBtn.recommanded":"Recommended","ImgManager.CanvaBtn.smallSquare":"Small","ImgManager.CanvaBtn.successImport":"Your image has been imported.","ImgManager.CanvaBtn.uploadingImg":"Image loading.","ImgManager.ImgCard.confirmDeleteImg":"Are you sure you want to delete this image?","ImgManager.ImgCard.del":"Delete","ImgManager.ImgCard.download":"Download","ImgManager.ImgCard.edit":"Edit","ImgManager.ImgCard.select":"Select","ImgManager.ImgCard.validImgSmall":"Select","ImgManager.ImgEditor.config.AntiSchedule":"Anti-clockwise","ImgManager.ImgEditor.config.dezoom":"Zoom less","ImgManager.ImgEditor.config.flipHoriz":"Turn horizontally","ImgManager.ImgEditor.config.flipVert":"Vertical Reversal","ImgManager.ImgEditor.config.free":"Free size","ImgManager.ImgEditor.config.landscape":"Landscape","ImgManager.ImgEditor.config.origin":"Original format","ImgManager.ImgEditor.config.Portrait":"Portrait","ImgManager.ImgEditor.config.schedule":"Clockwise","ImgManager.ImgEditor.config.square":"Square","ImgManager.ImgEditor.config.zoom":"Zoom more","ImgManager.ImgEditor.copytoClipBoard":"Copied!","ImgManager.ImgEditor.crop":"Crop","ImgManager.ImgEditor.display":"Zoom","ImgManager.ImgEditor.msgFailLoad":"Error: please start again.","ImgManager.ImgEditor.msgFailSave":"Error: The image could not be saved.<br/>Please try again.","ImgManager.ImgEditor.nameEx":"Ex: Black T-shirt","ImgManager.ImgEditor.NameInfo":"The name of the image is used to define the alt attribute.","ImgManager.ImgEditor.restart":"Refresh","ImgManager.ImgEditor.rotation":"Rotate","ImgManager.ImgEditor.saveBtn":"Save and close","ImgManager.ImgEditor.Valid":"Confirm","ImgManager.ImgEditor.ValidtToolTip":"Click here to crop the image","ImgManager.ImgLib.cancel":"Cancel","ImgManager.ImgLib.confirm":"Confirm","ImgManager.ImgLib.confirmSupQuestion":"{{nbImage}} image to delete: Are you sure?","ImgManager.ImgLib.confirmSupQuestions":"{{nbImage}} images to delete: Are you sure?","ImgManager.ImgLib.delMlt":"Delete","ImgManager.ImgLib.errorGetAllImg":"Error: Your images could not be recovered.","ImgManager.ImgLib.errorGetCanvaImg":"Error: the image from Canva could not be retrieved.","ImgManager.ImgLib.errorGetTotalImg":"Error: The total number of images has not been recovered.","ImgManager.ImgLib.imgNameSaved":"Image name saved.","ImgManager.ImgLib.lastImgs":"Your last images","ImgManager.ImgLib.nbImg":"Number of images","ImgManager.ImgLib.noImgFound":"No images found.<br/>Display free images.","ImgManager.ImgLib.savingImgName":"Backup in progress...","ImgManager.ImgLib.select":"Select","ImgManager.ImgList.download":"Download","ImgManager.ImgList.edit":"Edit","ImgManager.ImgList.errorAlreadyUsed":"This image can not be deleted as it is being used.","ImgManager.ImgList.errorRemoveImg":"Error: Some images could not be deleted.","ImgManager.ImgList.errorRenameImg":"Error: Some images could not be renamed.","ImgManager.ImgList.remove":"Delete","ImgManager.ImgList.titleImgName":"Image name","ImgManager.ImgList.titleResolution":"Resolution","ImgManager.ImgSelection.deleteImg":"Delete","ImgManager.ImgSelection.tooltips":"Click to change the order of the images","ImgManager.ImgSelection.unselect":"Drag the image here to remove it from the selection","ImgManager.ImgUpload.dropImg":"Drag and drop your image here","ImgManager.ImgUpload.errorNotImg":"Error: Only images can be imported.","ImgManager.ImgUpload.errorUploadingImg":"Error: An image could not be imported.","ImgManager.ImgUpload.loading":"Loading...","ImgManager.ImgUpload.or":"or","ImgManager.ImgUpload.selectImg":"Select the images to be imported","ImgManager.PexelLib.errorRetrievePhotos":"Error: The Pexel images have not been recovered.","ImgManager.PexelLib.errorUploadPhoto":"Error: the image could not be imported","ImgManager.PexelLib.import":"Import","ImgManager.PexelLib.importation":"Import","ImgManager.PexelLib.landscape":"Landscape","ImgManager.PexelLib.nbImgFound":"Number if images found","ImgManager.PexelLib.noResult":"No image found.","ImgManager.PexelLib.original":"Original.","ImgManager.PexelLib.portrait":"Portrait","ImgManager.PexelLib.successImport":"Image imported","ImgManager.PexelLib.untitled":"No title","ImgManager.PexelLib.uploadingImg":"Loading the current image.","ImgManager.SearchBar.placeholder":"Name of the image to search","ImgManager.snackBar.action":"View image","ImgManager.Tabs.addImg":"Add an image","ImgManager.Tabs.Editor":"Image editor","ImgManager.Tabs.freeImgLib":"Free image library","ImgManager.Tabs.imgLib":"Your images","ImgManager.UploadList.imgSuccessImport":"Images successfully imported","ImgManager.UploadList.imgSuccessImportOne":"imported image optimized for SEO","ImgManager.UploadList.properties.imgName":"Image name","ImgManager.UploadList.properties.imgSize":"Size of original image","ImgManager.UploadList.properties.imgURL":"Image URL","ImgManager.UploadList.properties.imgWeight":"Size of original file","ImgManager.UploadList.seo.cdn":"Addition in the CDN.","ImgManager.UploadList.seo.cdnTooltips":"The images you add to your website are sent directly to our CDN (Content Delivery Network). This allows the visuals to be loaded from the servers closest to the user.","ImgManager.UploadList.seo.lazyloading":"Automatic lazyloading.","ImgManager.UploadList.seo.lazyloadingTooltips":"With lazyloading, the content is loaded as the user scrolls down the page. This allows to load only the visible content.","ImgManager.UploadList.seo.rezise":"Resizing and compression.","ImgManager.UploadList.seo.reziseTooltips":"When importing your image on WiziShop, more than 22 formats are created to adapt to different screen sizes. This optimization allows us to send a different size of visual and compressed according to the support of the Internet user.","ImgManager.UploadList.seo.title":"SEO Optimizations","ImgManager.UploadList.seo.webp":"Webp generation","ImgManager.UploadList.seo.webpTooltips":"As soon as you add an image to your site, it will be accessible in the standard format, but it will also be automatically converted to the WebP format for Google. This format allows you to compress, as much as possible, the images present on your store to load them very quickly.","ImgManager.webElement.infoBulle":"The image manager allows you to <strong>download</strong> images, <strong> select them </strong> and apply some <strong>effects</strong> (crop, rotations...).<br/><br/>We recommend using <strong>several photos</strong> of the product (3 or 4) in various positions or environments.","ImgManager.webElement.OpenBtn":"Add photos","ImgManager.webElement.photosTitle":"Photos","no":"no","PaginationComponent.on":"{{low}}-{{high}} on {{total}}","PaginationComponent.page":"Go to page","yes":"yes"}
|
|
@@ -889,6 +889,9 @@
|
|
|
889
889
|
this.bodyPadding = 0;
|
|
890
890
|
}
|
|
891
891
|
};
|
|
892
|
+
WzImgManagerComponent.prototype.changeDisplayTab = function () {
|
|
893
|
+
this.stateDisplayed = 'full';
|
|
894
|
+
};
|
|
892
895
|
WzImgManagerComponent.prototype.ngOnDestroy = function () {
|
|
893
896
|
this.selectImgEvent.unsubscribe();
|
|
894
897
|
this.canvaService.expectedImgSizesChange(null);
|
|
@@ -937,7 +940,7 @@
|
|
|
937
940
|
WzImgManagerComponent = __decorate([
|
|
938
941
|
core.Component({
|
|
939
942
|
selector: 'wz-img-manager',
|
|
940
|
-
template: "<div class=\"wz-img-manager\">\n <!-- Img slection handler -->\n <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n <img-selection></img-selection>\n </div>\n\n <!-- Img manager module -->\n <div\n *ngIf=\"_showImgManagerModule\"\n class=\"wz-img-manager__module\"\n [ngClass]=\"{\n 'wz-img-manager__module--small': stateDisplayed === 'small',\n 'wz-img-manager__module--full': stateDisplayed === 'full',\n 'wz-img-manager__module--window': stateDisplayed === 'window',\n 'wz-img-manager__module--edit': hideTab}\"\n >\n\n <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n </div>\n\n <div\n class=\"wz-img-manager__module__content wz-block\"\n [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n <img-tabs\n [stateDisplayed]=\"stateDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [listDisplayed]=\"listDisplayed\"\n (imgManagerClosed)=\"onImgManagerClosed()\"\n (currentTab)=\"setCurrentTab($event)\">\n </img-tabs>\n </div>\n </div>\n\n</div>\n"
|
|
943
|
+
template: "<div class=\"wz-img-manager\">\n <!-- Img slection handler -->\n <div class=\"wz-img-manager__selectionHandler\" *ngIf=\"showSelection\">\n <img-selection></img-selection>\n </div>\n\n <!-- Img manager module -->\n <div\n *ngIf=\"_showImgManagerModule\"\n class=\"wz-img-manager__module\"\n [ngClass]=\"{\n 'wz-img-manager__module--small': stateDisplayed === 'small',\n 'wz-img-manager__module--full': stateDisplayed === 'full',\n 'wz-img-manager__module--window': stateDisplayed === 'window',\n 'wz-img-manager__module--edit': hideTab}\"\n >\n\n <div class=\"wz-img-manager__module__header\" *ngIf=\"stateDisplayed !== 'window'\">\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'full'\"><span>Expand</span><i class=\"fal fa-compress-alt\"></i></button>\n <button (click)=\"openSmall()\" *ngIf=\"stateDisplayed === 'closed'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"openFull()\" *ngIf=\"stateDisplayed === 'small'\"><span>Expand</span><i class=\"fal fa-expand-alt\"></i></button>\n <button (click)=\"onClose()\" *ngIf=\"stateDisplayed !== 'closed'\"><span>Close</span><i class=\"fal fa-times\"></i></button>\n </div>\n\n <div\n class=\"wz-img-manager__module__content wz-block\"\n [ngClass]=\"{'wz-block--window': stateDisplayed === 'window'}\">\n <img-tabs\n [stateDisplayed]=\"stateDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [listDisplayed]=\"listDisplayed\"\n (imgManagerClosed)=\"onImgManagerClosed()\"\n (switchDisplayWindow)=\"changeDisplayTab()\"\n (currentTab)=\"setCurrentTab($event)\">\n </img-tabs>\n </div>\n </div>\n\n</div>\n"
|
|
941
944
|
}),
|
|
942
945
|
__metadata("design:paramtypes", [ImgSelectionService,
|
|
943
946
|
ImgManagerConfigService,
|
|
@@ -1300,6 +1303,7 @@
|
|
|
1300
1303
|
this.listDisplayed = false;
|
|
1301
1304
|
this.imgManagerClosed = new core.EventEmitter();
|
|
1302
1305
|
this.currentTab = new core.EventEmitter();
|
|
1306
|
+
this.switchDisplayWindow = new core.EventEmitter();
|
|
1303
1307
|
this.tabActive = 'images-view';
|
|
1304
1308
|
this.tabs = ['img-upload', 'images-view', 'pexels-lib', 'img-edition'];
|
|
1305
1309
|
this.editTab = false;
|
|
@@ -1338,6 +1342,9 @@
|
|
|
1338
1342
|
ImgTabsComponent.prototype.onShowImgUploaded = function () {
|
|
1339
1343
|
this.tabActive = this.tabs[1];
|
|
1340
1344
|
};
|
|
1345
|
+
ImgTabsComponent.prototype.switchDisplayWindowImgView = function () {
|
|
1346
|
+
this.switchDisplayWindow.emit(true);
|
|
1347
|
+
};
|
|
1341
1348
|
ImgTabsComponent.prototype.onImgManagerClosed = function () {
|
|
1342
1349
|
this.imgManagerClosed.emit();
|
|
1343
1350
|
};
|
|
@@ -1365,6 +1372,10 @@
|
|
|
1365
1372
|
core.Output(),
|
|
1366
1373
|
__metadata("design:type", Object)
|
|
1367
1374
|
], ImgTabsComponent.prototype, "currentTab", void 0);
|
|
1375
|
+
__decorate([
|
|
1376
|
+
core.Output(),
|
|
1377
|
+
__metadata("design:type", core.EventEmitter)
|
|
1378
|
+
], ImgTabsComponent.prototype, "switchDisplayWindow", void 0);
|
|
1368
1379
|
__decorate([
|
|
1369
1380
|
core.ViewChild('imgUploadedImg'),
|
|
1370
1381
|
__metadata("design:type", UploadListComponent)
|
|
@@ -1372,7 +1383,7 @@
|
|
|
1372
1383
|
ImgTabsComponent = __decorate([
|
|
1373
1384
|
core.Component({
|
|
1374
1385
|
selector: 'img-tabs',
|
|
1375
|
-
template: "<div\n class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n <div class=\"wrapper-tabs\">\n <div\n class=\"tabs\"\n [ngClass]=\"\n {\n 'tabs--notWindow': stateDisplayed !== 'window',\n 'tabs--notDisplayed': stateDisplayed === 'window' && tabActive === tabs[3]\n }\">\n\n <ul>\n <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive === tabs[0]}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ 'ImgManager.Tabs.addImg' | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive === tabs[1]}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ 'ImgManager.Tabs.imgLib' | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive === tabs[2]}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ 'ImgManager.Tabs.freeImgLib' | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive === tabs[3]}\" *ngIf=\"editTab\"><a>{{ 'ImgManager.Tabs.Editor' | translate }}</a></li>\n </ul>\n <div\n class=\"img-tabs__canva\"\n [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n <canva-btn\n (showImgUploaded)=\"onShowImgUploaded()\"\n [stateDisplayed]=\"stateDisplayed\">\n </canva-btn>\n </div>\n </div>\n </div>\n\n <!-- Upload section -->\n <div\n class=\"columns img-tabs__tabsFirst\"\n [ngClass]=\"{\n 'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n 'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n }\"\n *ngIf=\"tabActive === tabs[0]\">\n <div class=\"column img-tabs__tabsFirst__upload\">\n <img-upload\n [stateDisplayed]=\"stateDisplayed\"\n (imgUploaded)=\"onImgUploaded($event)\"\n ></img-upload>\n </div>\n <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n 'img-tabs__tabsFirst__list--upload': imgUpload\n }\">\n <images-view\n *ngIf=\"!imgUpload\"\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"false\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive\"\n [maxLengthCardShow]=\"stateDisplayed === 'small' ? 16 : 8\"\n [fullSize]=\"false\">\n </images-view>\n\n\n <div [hidden]=\"!imgUpload\">\n <upload-list\n #imgUploadedImg\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabActive\"\n [multipleImgMode]=\"multipleImgMode\"\n >\n </upload-list>\n </div>\n </div>\n </div>\n\n <!-- Images section -->\n <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive === tabs[1]\">\n <div class=\"column\">\n\n <images-view\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"listDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive\"\n [fullSize]=\"true\">\n </images-view>\n\n </div>\n </div>\n\n <!-- Pexel img section -->\n <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive === tabs[2]\">\n <div class=\"column\">\n <pexels-lib\n [stateDisplayed]=\"stateDisplayed\"\n (showImgUploaded)=\"onShowImgUploaded()\">\n </pexels-lib>\n </div>\n </div>\n\n <!--Edition section -->\n <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive === tabs[3]\">\n <div class=\"column\">\n <img-editor\n [stateDisplayed]=\"stateDisplayed\"\n [imgToEdit]=\"imgToEdit\"\n (editClosed)=\"onEditClosed($event)\">\n </img-editor>\n </div>\n </div>\n\n</div>\n"
|
|
1386
|
+
template: "<div\n class=\"img-tabs\" [ngClass]=\"{'small': stateDisplayed === 'small'}\">\n <div class=\"wrapper-tabs\">\n <div\n class=\"tabs\"\n [ngClass]=\"\n {\n 'tabs--notWindow': stateDisplayed !== 'window',\n 'tabs--notDisplayed': stateDisplayed === 'window' && tabActive === tabs[3]\n }\">\n\n <ul>\n <li class=\"is-active\" [ngClass]=\"{'is-active': tabActive === tabs[0]}\" (click)=\"toggleTabs(tabs[0])\"><a>{{ 'ImgManager.Tabs.addImg' | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive === tabs[1]}\" (click)=\"toggleTabs(tabs[1])\"><a>{{ 'ImgManager.Tabs.imgLib' | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive === tabs[2]}\" (click)=\"toggleTabs(tabs[2])\"><a>{{ 'ImgManager.Tabs.freeImgLib' | translate }}</a></li>\n <li [ngClass]=\"{'is-active': tabActive === tabs[3]}\" *ngIf=\"editTab\"><a>{{ 'ImgManager.Tabs.Editor' | translate }}</a></li>\n </ul>\n <div\n class=\"img-tabs__canva\"\n [ngClass]=\"{'img-tabs__canva--window': stateDisplayed === 'window'}\">\n <canva-btn\n (showImgUploaded)=\"onShowImgUploaded()\"\n [stateDisplayed]=\"stateDisplayed\">\n </canva-btn>\n </div>\n </div>\n </div>\n\n <!-- Upload section -->\n <div\n class=\"columns img-tabs__tabsFirst\"\n [ngClass]=\"{\n 'img-tabs__tabsFirst--small': stateDisplayed === 'small',\n 'img-tabs__tabsFirst--window': stateDisplayed === 'window'\n }\"\n *ngIf=\"tabActive === tabs[0]\">\n <div class=\"column img-tabs__tabsFirst__upload\">\n <img-upload\n [stateDisplayed]=\"stateDisplayed\"\n (imgUploaded)=\"onImgUploaded($event)\"\n ></img-upload>\n </div>\n <div class=\"column img-tabs__tabsFirst__list\" [ngClass]=\"{\n 'img-tabs__tabsFirst__list--upload': imgUpload\n }\">\n <images-view\n *ngIf=\"!imgUpload\"\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"false\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive\"\n [maxLengthCardShow]=\"stateDisplayed === 'small' ? 16 : 8\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n [fullSize]=\"false\">\n </images-view>\n\n\n <div [hidden]=\"!imgUpload\">\n <upload-list\n #imgUploadedImg\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabActive\"\n [multipleImgMode]=\"multipleImgMode\"\n >\n </upload-list>\n </div>\n </div>\n </div>\n\n <!-- Images section -->\n <div class=\"columns img-tabs__tabsSecond\" *ngIf=\"tabActive === tabs[1]\">\n <div class=\"column\">\n\n <images-view\n [stateDisplayed]=\"stateDisplayed\"\n [listDisplayed]=\"listDisplayed\"\n [multipleImgMode]=\"multipleImgMode\"\n [tabDisplayed]=\"tabActive\"\n (switchDisplayWindow)=\"switchDisplayWindowImgView()\"\n [fullSize]=\"true\">\n </images-view>\n\n </div>\n </div>\n\n <!-- Pexel img section -->\n <div class=\"columns img-tabs__tabsThird\" *ngIf=\"tabActive === tabs[2]\">\n <div class=\"column\">\n <pexels-lib\n [stateDisplayed]=\"stateDisplayed\"\n (showImgUploaded)=\"onShowImgUploaded()\">\n </pexels-lib>\n </div>\n </div>\n\n <!--Edition section -->\n <div class=\"columns img-tabs__tabsEdit\" *ngIf=\"tabActive === tabs[3]\">\n <div class=\"column\">\n <img-editor\n [stateDisplayed]=\"stateDisplayed\"\n [imgToEdit]=\"imgToEdit\"\n (editClosed)=\"onEditClosed($event)\">\n </img-editor>\n </div>\n </div>\n\n</div>\n"
|
|
1376
1387
|
}),
|
|
1377
1388
|
__metadata("design:paramtypes", [ImgEventService,
|
|
1378
1389
|
AlertService])
|
|
@@ -1903,6 +1914,7 @@
|
|
|
1903
1914
|
var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) || this;
|
|
1904
1915
|
_this.focusInput = false;
|
|
1905
1916
|
_this.toggleImgSelected = new core.EventEmitter();
|
|
1917
|
+
_this.switchDisplayWindow = new core.EventEmitter();
|
|
1906
1918
|
_this.isUploadSection = false;
|
|
1907
1919
|
_this.activeConfirmDelete = false;
|
|
1908
1920
|
return _this;
|
|
@@ -1910,6 +1922,9 @@
|
|
|
1910
1922
|
ImgCardComponent.prototype.ngOnInit = function () {
|
|
1911
1923
|
this.isUploadSection = this.tabDisplayed === 'img-upload';
|
|
1912
1924
|
};
|
|
1925
|
+
ImgCardComponent.prototype.displayLargeWindow = function () {
|
|
1926
|
+
this.switchDisplayWindow.emit(true);
|
|
1927
|
+
};
|
|
1913
1928
|
ImgCardComponent.prototype.onToggleImgSelected = function () {
|
|
1914
1929
|
this.toggleImgSelected.next();
|
|
1915
1930
|
};
|
|
@@ -1943,10 +1958,14 @@
|
|
|
1943
1958
|
core.Output(),
|
|
1944
1959
|
__metadata("design:type", core.EventEmitter)
|
|
1945
1960
|
], ImgCardComponent.prototype, "toggleImgSelected", void 0);
|
|
1961
|
+
__decorate([
|
|
1962
|
+
core.Output(),
|
|
1963
|
+
__metadata("design:type", core.EventEmitter)
|
|
1964
|
+
], ImgCardComponent.prototype, "switchDisplayWindow", void 0);
|
|
1946
1965
|
ImgCardComponent = __decorate([
|
|
1947
1966
|
core.Component({
|
|
1948
1967
|
selector: 'img-card',
|
|
1949
|
-
template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n <div class=\"img-card\">\n <div class=\"img-card__container\"\n [ngClass]=\"{\n 'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n 'imgSelected': picture.selected,\n 'deletion': picture.deleted}\">\n <img\n class=\"img-card__container__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [alt]=\"picture.display_name\"\n (click)=\"onToggleImgSelected()\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <div\n class=\"img-card__container__config\"\n *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n >\n <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n <button class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n </button>\n </div>\n <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' : activeConfirmDelete}\">\n <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n <div>\n <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n </div>\n </div>\n <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n <i class=\"far fa-check\"></i>\n <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n </div>\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"img-card__container__overlay\"\n [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n </div>\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n </div>\n <div\n class=\"img-card__nameContainer\"\n [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n <input\n type=\"text\"\n class=\"wzImgMngInput img-card__nameContainer__name\"\n [(ngModel)]=\"picture.display_name\"\n (ngModelChange)=\"onNameChange(picture.id_file)\"\n (focus)=\"previousName=picture.display_name;focusInput = true;\"\n (blur)=\"focusInput = false;\"\n >\n <span>{{picture.display_name}}</span>\n </div>\n\n </div>\n</div>\n",
|
|
1968
|
+
template: "<div class=\"addCssPriority\" [@easeInOut]=\"'in'\" [ngClass]=\"{ 'fullSize': fullSize }\">\n <div class=\"img-card\">\n <div class=\"img-card__container\"\n [ngClass]=\"{\n 'smallDisplay': stateDisplayed === 'small' || isUploadSection,\n 'imgSelected': picture.selected,\n 'deletion': picture.deleted}\">\n <img\n class=\"img-card__container__img\"\n [src]=\"picture.file_name | imgSrc : '400'\"\n [alt]=\"picture.display_name\"\n (click)=\"onToggleImgSelected()\"\n (error)=\"picture.imgNotLoaded=true;onPictureNotLoading($event);\"\n />\n <div\n class=\"img-card__container__config\"\n *ngIf=\"!picture.deleted && stateDisplayed !== 'small'\"\n >\n <button class=\"size\"><i class=\"fal fa-image-polaroid\"></i><span>{{picture.raw_height}}x{{picture.raw_width}}</span></button>\n <button class=\"dl\" (click)=\"onDownloadImg(picture.display_name, picture.file_name)\"><i class=\"fal fa-download\"></i><span>{{ 'ImgManager.ImgCard.download' | translate }}</span></button>\n <button class=\"edit\" (click)=\"onEdit(picture)\"><i class=\"far fa-crop-alt\"></i><span>{{ 'ImgManager.ImgCard.edit' | translate }}</span></button>\n <button class=\"deleted\" (click)=\"activeConfirmDelete = true;\"><i class=\"fal fa-times\"></i><span>{{ 'ImgManager.ImgCard.del' | translate }}</span></button>\n <button class=\"selected\" (click)=\"onToggleImgSelected()\" *ngIf=\"stateDisplayed !== 'window'\">\n <i *ngIf=\"!picture.selected\" class=\"fal fa-square\"></i>\n <i *ngIf=\"picture.selected\" class=\"fas fa-check-square checked\"></i>\n <span>{{ 'ImgManager.ImgCard.select' | translate }}</span>\n </button>\n </div>\n <div\n class=\"img-card__container__config img-card__container__config--small\"\n *ngIf=\"!picture.deleted && stateDisplayed === 'small'\"\n >\n <button class=\"show-edit\" (click)=\"displayLargeWindow()\"><i class=\"fas fa-edit\"></i></button>\n </div>\n <div class=\"img-card__container__delete\" [ngClass]=\"{ 'show' : activeConfirmDelete}\">\n <span>{{ 'ImgManager.ImgCard.confirmDeleteImg' | translate }}</span>\n <div>\n <button (click)=\"activeConfirmDelete = false;\">{{ 'no' | translate }}</button>\n <button (click)=\"onRemoveImg(picture);activeConfirmDelete = false;\">{{ 'yes' | translate }}</button>\n </div>\n </div>\n <div class=\"img-card__container__valid\" *ngIf=\"stateDisplayed === 'small' && tabDisplayed == 'img-upload'\">\n <i class=\"far fa-check\"></i>\n <span>{{ 'ImgManager.ImgCard.validImgSmall' | translate }}</span>\n </div>\n <div\n *ngIf=\"picture.imgNotLoaded\"\n class=\"img-card__container__overlay\"\n [ngClass]=\"{'img-card__container__overlay--smallDisplay': stateDisplayed === 'small' || isUploadSection}\">\n <i (click)=\"onToggleImgSelected()\" class=\"fad fa-folder-times\"></i>\n </div>\n <span btnLoadingAnim class=\"btnLoadingAnnimation\" *ngIf=\"picture.deleted\"></span>\n\n </div>\n <div\n class=\"img-card__nameContainer\"\n [ngClass]=\"{'smallNameDisplay': stateDisplayed === 'small' || isUploadSection, 'focus': focusInput}\">\n <input\n type=\"text\"\n class=\"wzImgMngInput img-card__nameContainer__name\"\n [(ngModel)]=\"picture.display_name\"\n (ngModelChange)=\"onNameChange(picture.id_file)\"\n (focus)=\"previousName=picture.display_name;focusInput = true;\"\n (blur)=\"focusInput = false;\"\n >\n <span>{{picture.display_name}}</span>\n </div>\n\n </div>\n</div>\n",
|
|
1950
1969
|
animations: [
|
|
1951
1970
|
easeInOut
|
|
1952
1971
|
]
|
|
@@ -2793,6 +2812,7 @@
|
|
|
2793
2812
|
this.renamePictureService = renamePictureService;
|
|
2794
2813
|
this.listDisplayed = false; // Display format list or mosaic
|
|
2795
2814
|
this.multipleImgMode = false;
|
|
2815
|
+
this.switchDisplayWindow = new core.EventEmitter();
|
|
2796
2816
|
// Data filters
|
|
2797
2817
|
this.tableFilters = {
|
|
2798
2818
|
sort: undefined,
|
|
@@ -3229,6 +3249,9 @@
|
|
|
3229
3249
|
_this.initVariables(false);
|
|
3230
3250
|
});
|
|
3231
3251
|
};
|
|
3252
|
+
ImagesViewComponent.prototype.switchDisplayWindowMosaic = function () {
|
|
3253
|
+
this.switchDisplayWindow.emit(true);
|
|
3254
|
+
};
|
|
3232
3255
|
ImagesViewComponent.prototype.ngOnDestroy = function () {
|
|
3233
3256
|
this.searchQueryChanged.unsubscribe();
|
|
3234
3257
|
this.imgRemovedEvent.unsubscribe();
|
|
@@ -3267,6 +3290,10 @@
|
|
|
3267
3290
|
core.Input(),
|
|
3268
3291
|
__metadata("design:type", Object)
|
|
3269
3292
|
], ImagesViewComponent.prototype, "multipleImgMode", void 0);
|
|
3293
|
+
__decorate([
|
|
3294
|
+
core.Output(),
|
|
3295
|
+
__metadata("design:type", core.EventEmitter)
|
|
3296
|
+
], ImagesViewComponent.prototype, "switchDisplayWindow", void 0);
|
|
3270
3297
|
__decorate([
|
|
3271
3298
|
core.ViewChild('imgLibContainer'),
|
|
3272
3299
|
__metadata("design:type", core.ElementRef)
|
|
@@ -3274,7 +3301,7 @@
|
|
|
3274
3301
|
ImagesViewComponent = __decorate([
|
|
3275
3302
|
core.Component({
|
|
3276
3303
|
selector: 'images-view',
|
|
3277
|
-
template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- S\u00E9lectionner -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen()\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg()\"\n class=\"button images-view__container__delBtn danger\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <div class=\"control\">\n <div\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"far fa-th\"></i>\n </span>\n </div>\n </div>\n\n <div class=\"control\">\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fas fa-bars\"></i>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n <!-- Images section -->\n<ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n 'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n <div #imgLibContainer class=\"images-view__wrapper\">\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"isLoading\"\n >\n </table-view>\n </div>\n\n </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n *ngIf=\"displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"tableFilters.searchValue\"\n (showImgUploaded)=\"onShowImgUploaded()\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n</div>\n",
|
|
3304
|
+
template: "<div class=\"images-view\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small'}\" [@easeInOut]=\"'in'\">\n <!-- Subheader : Img number and actions btn (sup img list, switch forma display) -->\n <div\n *ngIf=\"(stateDisplayed !== 'small' || tabDisplayed === 'img-upload')\"\n class=\"images-view__container\"\n [ngClass]=\"{'images-view__container--uploadTab': tabDisplayed === 'img-upload', 'images-view__container--window': stateDisplayed === 'window'}\"\n >\n\n <div *ngIf=\"tabDisplayed !== 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.nbImg' | translate }} : {{length}}</p>\n </div>\n <div *ngIf=\"tabDisplayed === 'img-upload'\">\n <p class=\"mainColor\">{{ 'ImgManager.ImgLib.lastImgs' | translate }}</p>\n </div>\n\n <div class=\"field has-addons subHeaderActions\" *ngIf=\"tabDisplayed !== 'img-upload'\">\n\n <!-- For listforma : Display btn del multiple img & Confirm action -->\n <div class=\"images-view__container__boxAction\">\n\n\n <!-- S\u00E9lectionner -->\n <button\n class=\"button success images-view__container__boxAction__import\"\n @insertRemoveAnnim\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup && !delListImgLoader && multipleImgMode\"\n (click)=\"selectImgChosen()\"\n >\n <i class=\"fal fa-check\"></i>\n {{ 'ImgManager.ImgLib.select' | translate }} ({{nbImgToDelSelected}})\n </button>\n\n <!-- Display btn del multiple img -->\n <button\n *ngIf=\"listDisplayed && nbImgToDelSelected && !confirmImgSup\"\n (click)=\"displayConfirmImgSup()\"\n class=\"button images-view__container__boxAction__delBtn danger\"\n @insertRemoveAnnim\n >\n <i class=\"fal fa-times\"></i>{{ 'ImgManager.ImgLib.delMlt' | translate }} ({{nbImgToDelSelected}})\n <span btnLoadingAnim *ngIf=\"delListImgLoader\" class=\"btnLoadingAnnimation\"></span>\n </button>\n\n <!-- Confirm action -->\n <div\n class=\"images-view__container__boxAction__confirmSup\"\n [ngClass]=\"{'images-view__container__boxAction__confirmSup--visible': confirmImgSup}\">\n <p *ngIf=\"nbImgToDelSelected > 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestions' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <p *ngIf=\"nbImgToDelSelected === 1\" class=\"images-view__container__boxAction__confirmSup__text\">{{ 'ImgManager.ImgLib.confirmSupQuestion' | translate:{nbImage: nbImgToDelSelected} }}</p>\n <div>\n <button\n class=\"button images-view__container__boxAction__confirmSup__cancel\"\n (click)=\"cancelSup()\"\n >\n {{ 'ImgManager.ImgLib.cancel' | translate }}\n </button>\n <button\n (click)=\"removeListImg()\"\n class=\"button images-view__container__delBtn danger\"\n >\n {{ 'ImgManager.ImgLib.confirm' | translate }}\n </button>\n </div>\n </div>\n\n </div>\n\n\n <!-- Swith mosaic/list forma -->\n <div class=\"field has-addons images-view__container__buttonBox\">\n <div class=\"control\">\n <div\n class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': !listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(false)\"\n >\n <span class=\"icon is-small\">\n <i class=\"far fa-th\"></i>\n </span>\n </div>\n </div>\n\n <div class=\"control\">\n <div class=\"button is-lighted images-view__container__buttonBox__btn\"\n [ngClass]=\"{'actifDisplayed': listDisplayed}\"\n (click)=\"onSwitchFormatDisplayed(true)\"\n >\n <span class=\"icon is-small\">\n <i class=\"fas fa-bars\"></i>\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\n <!-- Images section -->\n<ng-scrollbar\n #scrollable\n [visibility]=\"'native'\"\n class=\"images-view__scroll\"\n [ngClass]=\"{\n 'images-view__scroll--hide--mosaic': displayPexelsResults && !listDisplayed,\n 'images-view__scroll--hide--mosaic--small': displayPexelsResults && !listDisplayed && stateDisplayed === 'small',\n 'images-view__scroll--hide--table': displayPexelsResults && listDisplayed,\n 'images-view__scroll--full': stateDisplayed === 'full',\n 'images-view__scroll--smallDisplay' : stateDisplayed === 'small' && tabDisplayed !== 'img-upload',\n 'images-view__scroll--smallUploadDisplay' : stateDisplayed === 'small' && tabDisplayed === 'img-upload',\n 'images-view__scroll--window': stateDisplayed === 'window'\n}\"\n>\n <div #imgLibContainer class=\"images-view__wrapper\">\n <div *ngIf=\"!listDisplayed || stateDisplayed === 'small'\" [@easeInOut]=\"'in'\">\n <mosaic-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowMosaic()\"\n [nbFakeImg]=\"nbFakeImg\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [isLoading]=\"isLoading\"\n [fullSize]=\"fullSize\"\n >\n </mosaic-view>\n </div>\n\n <div *ngIf=\"listDisplayed && stateDisplayed !== 'small'\" [@easeInOut]=\"'in'\">\n <table-view\n [picturesList]=\"picturesList\"\n (picturesListChange)=\"onPicturesListChange()\"\n [tableFilters]=\"tableFilters\"\n (filtersChange)=\"onFiltersChange()\"\n [(disable)]=\"disable\"\n (pictureNameChange)=\"onRenamePicture($event)\"\n [displayPexelsResults]=\"displayPexelsResults\"\n [stateDisplayed]=\"stateDisplayed\"\n [isLoading]=\"isLoading\"\n >\n </table-view>\n </div>\n\n </div>\n</ng-scrollbar>\n\n<!-- Pexels Section - When no img found -->\n<div\n *ngIf=\"displayPexelsResults\"\n class=\"images-view--pexels\"\n [@easeInOut]=\"'in'\">\n <pexels-lib\n [searchValue]=\"tableFilters.searchValue\"\n (showImgUploaded)=\"onShowImgUploaded()\"\n [disableSearch]=\"true\"\n >\n </pexels-lib>\n</div>\n",
|
|
3278
3305
|
animations: [
|
|
3279
3306
|
easeInOut,
|
|
3280
3307
|
insertRemove
|
|
@@ -3295,6 +3322,7 @@
|
|
|
3295
3322
|
function MosaicViewComponent(imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) {
|
|
3296
3323
|
var _this = _super.call(this, imgManager, imgSelectionService, http, imgCDNService, imgEventCardService, alertService, translateService, externalService) || this;
|
|
3297
3324
|
_this.nbFakeImg = 0;
|
|
3325
|
+
_this.switchDisplayWindow = new core.EventEmitter();
|
|
3298
3326
|
return _this;
|
|
3299
3327
|
}
|
|
3300
3328
|
MosaicViewComponent.prototype.ngOnInit = function () {
|
|
@@ -3309,6 +3337,9 @@
|
|
|
3309
3337
|
MosaicViewComponent.prototype.onCardRenamePicture = function (pictureRenamed) {
|
|
3310
3338
|
this.pictureNameChange.next(pictureRenamed);
|
|
3311
3339
|
};
|
|
3340
|
+
MosaicViewComponent.prototype.switchDisplayWindowCard = function () {
|
|
3341
|
+
this.switchDisplayWindow.emit(true);
|
|
3342
|
+
};
|
|
3312
3343
|
MosaicViewComponent.ctorParameters = function () { return [
|
|
3313
3344
|
{ type: ImgManagerService },
|
|
3314
3345
|
{ type: ImgSelectionService },
|
|
@@ -3331,10 +3362,14 @@
|
|
|
3331
3362
|
core.Input(),
|
|
3332
3363
|
__metadata("design:type", Number)
|
|
3333
3364
|
], MosaicViewComponent.prototype, "nbFakeImg", void 0);
|
|
3365
|
+
__decorate([
|
|
3366
|
+
core.Output(),
|
|
3367
|
+
__metadata("design:type", core.EventEmitter)
|
|
3368
|
+
], MosaicViewComponent.prototype, "switchDisplayWindow", void 0);
|
|
3334
3369
|
MosaicViewComponent = __decorate([
|
|
3335
3370
|
core.Component({
|
|
3336
3371
|
selector: 'mosaic-view',
|
|
3337
|
-
template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n <!-- Search section -->\n <div\n class=\"mosaic__search\"\n [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n *ngIf=\"tabDisplayed !== 'img-upload'\">\n <wz-input-search\n [(ngModel)]=\"tableFilters.searchValue\"\n (changeDebounced)=\"onSearchChange($event)\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [smallPadding]=\"stateDisplayed === 'small'\"\n ></wz-input-search>\n </div>\n\n <!-- Cards section -->\n <div\n class=\"mosaic__container__cards\"\n [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n [@listAnimation]=\"picturesList.length\"\n *ngIf=\"!isLoading && !displayPexelsResults\"\n >\n <img-card\n *ngFor=\"let picture of picturesList; let index = index;\"\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [disable]=\"disable\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (pictureNameChange)=\"onCardRenamePicture($event)\"\n [fullSize]=\"fullSize\"\n ></img-card>\n <div\n *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n class=\"mosaic__container__cards__fakeImg\"\n [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n </div>\n </div>\n <!-- Loader section -->\n <div class=\"mosaic__container__loader\" *ngIf=\"isLoading\">\n <wz-loader [small]=\"true\"></wz-loader>\n </div>\n\n <!-- Pagination section -->\n <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n <wz-pagination\n [pagination]=\"tableFilters\"\n (pageChange)=\"onFiltersChange()\"\n >\n </wz-pagination>\n </div>\n\n</div>\n",
|
|
3372
|
+
template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n <!-- Search section -->\n <div\n class=\"mosaic__search\"\n [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n *ngIf=\"tabDisplayed !== 'img-upload'\">\n <wz-input-search\n [(ngModel)]=\"tableFilters.searchValue\"\n (changeDebounced)=\"onSearchChange($event)\"\n [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n [smallPadding]=\"stateDisplayed === 'small'\"\n ></wz-input-search>\n </div>\n\n <!-- Cards section -->\n <div\n class=\"mosaic__container__cards\"\n [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n [@listAnimation]=\"picturesList.length\"\n *ngIf=\"!isLoading && !displayPexelsResults\"\n >\n <img-card\n *ngFor=\"let picture of picturesList; let index = index;\"\n [picture]=\"picture\"\n [stateDisplayed]=\"stateDisplayed\"\n [tabDisplayed]=\"tabDisplayed\"\n [disable]=\"disable\"\n (toggleImgSelected)=\"onToggleSelectImg(index)\"\n (pictureNameChange)=\"onCardRenamePicture($event)\"\n (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n [fullSize]=\"fullSize\"\n ></img-card>\n <div\n *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n class=\"mosaic__container__cards__fakeImg\"\n [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n </div>\n </div>\n <!-- Loader section -->\n <div class=\"mosaic__container__loader\" *ngIf=\"isLoading\">\n <wz-loader [small]=\"true\"></wz-loader>\n </div>\n\n <!-- Pagination section -->\n <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n <wz-pagination\n [pagination]=\"tableFilters\"\n (pageChange)=\"onFiltersChange()\"\n >\n </wz-pagination>\n </div>\n\n</div>\n",
|
|
3338
3373
|
animations: [
|
|
3339
3374
|
listAnnimation
|
|
3340
3375
|
]
|