@covet-pics/covet-pics-widget 0.150.5 → 0.151.0

package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js

@@ -4312,8 +4312,7 @@ const CovetPicsGallerySlider = class {
         const galleryEl = this.el.querySelector(".gallery");
         const nextEl = this.el.querySelector(".gallery .swiper-button-next");
         const prevEl = this.el.querySelector(".gallery .swiper-button-prev");
-        const mobileItemPaddingPX = (this.appState.settings.item_mobile_padding / 100) * galleryEl.offsetWidth;
-        const desktopItemPaddingPX = (this.appState.settings.item_padding / 100) * galleryEl.offsetWidth;
+        const { mobileItemPaddingPX, desktopItemPaddingPX, desktopPhotosPerRow, mobilePhotosPerRow } = this.getCalcSettings(galleryEl.offsetWidth);
         const paginationEl = this.el.querySelector(".gallery .swiper-pagination");
         const params = {
             modules: [Autoplay, a11y.Navigation, a11y.Pagination, a11y.A11y],
@@ -4362,13 +4361,13 @@ const CovetPicsGallerySlider = class {
             breakpoints: {
                 // when window width is >= 800
                 800: {
-                    slidesPerView: this.appState.settings.slideshow_photos_per_row,
+                    slidesPerView: desktopPhotosPerRow,
                     spaceBetween: desktopItemPaddingPX,
                     pagination: false
                 }
             },
             autoplay: this.getAutoplay(),
-            slidesPerView: this.appState.settings.slideshow_mobile_photos_per_row,
+            slidesPerView: mobilePhotosPerRow,
             spaceBetween: mobileItemPaddingPX,
             speed: 600
         };
@@ -4403,6 +4402,18 @@ const CovetPicsGallerySlider = class {
         const swiperWrapper = this.el.querySelector(".swiper-wrapper");
         swiperWrapper.style.removeProperty("height");
     }
+    getCalcSettings(galleryWidth) {
+        const { slideshow_photos_per_row, slideshow_mobile_photos_per_row, item_padding, item_mobile_padding, slideshow_crop_mode } = this.appState.settings;
+        const mobileItemPaddingPX = (item_mobile_padding / 100) * galleryWidth;
+        const desktopItemPaddingPX = (item_padding / 100) * galleryWidth;
+        let desktopPhotosPerRow = slideshow_photos_per_row;
+        let mobilePhotosPerRow = slideshow_mobile_photos_per_row;
+        if (slideshow_crop_mode && this.sliderStyle === "regular") {
+            desktopPhotosPerRow = slideshow_photos_per_row - 1 + ((galleryWidth / slideshow_photos_per_row) - desktopItemPaddingPX * slideshow_photos_per_row) / (galleryWidth / slideshow_photos_per_row);
+            mobilePhotosPerRow = slideshow_mobile_photos_per_row - 1 + ((galleryWidth / slideshow_mobile_photos_per_row) - mobileItemPaddingPX * slideshow_mobile_photos_per_row) / (galleryWidth / slideshow_mobile_photos_per_row);
+        }
+        return { mobileItemPaddingPX, desktopItemPaddingPX, desktopPhotosPerRow, mobilePhotosPerRow };
+    }
     emitGalleryReadyEvent() {
         const galleryReadyEvent = utils$1.buildEvent("galleryReady:covetPics", { galleryId: this.appState.widgetId.galleryId, itemsCount: this.items.length, el: this.el });
         document.dispatchEvent(galleryReadyEvent);
@@ -4476,7 +4487,7 @@ const CovetPicsGallerySlider = class {
             materialClass = `swiper-material extra-height ${this.itemSize}`;
         }
         if (this.items !== undefined) {
-            return (index.h("section", { key: '4d0fb5f3874f109c1a41021b2ed20e926951ffbf', class: `gallery swiper ${materialClass}`, style: this.getCSSVariables() }, index.h("button", { key: 'a61892a42f5043260f1fffc01cef1041ec778e13', class: `swiper-button-prev ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: 'e8e79d165c987cfe2b5ecfa8c6b978bc0559d6d1', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '87d100529945290137f7fe3781f8a371a8ddc911', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), this.sliderStyle === "regular" &&
+            return (index.h("section", { key: '2d214bde4011649bf332d9bbc1c3b367fe2ff838', class: `gallery swiper ${materialClass}`, style: this.getCSSVariables() }, index.h("button", { key: '3880097afdbaefd8b7917a6fd6ad6729ea297d5e', class: `swiper-button-prev ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: '405323dbb3a31e092d9154a40eb7d9b2be36b6d3', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '55eb7b138c7369cff3b153111b20df431bd1588e', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " }))), this.sliderStyle === "regular" &&
                 index.h("div", { class: "swiper-wrapper" }, this.appState.settings.item_style === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
                     ? this.renderStandardUploadItem(item, idx, this.items.length)
                     : this.renderStandardItem(item, idx, this.items.length)), this.appState.settings.item_style !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
@@ -4486,7 +4497,7 @@ const CovetPicsGallerySlider = class {
                     ? this.renderStandardUploadItem(item, idx, this.items.length)
                     : this.renderStandardItem(item, idx, this.items.length)))), this.appState.settings.item_style !== "standard" && this.items.map((item, idx) => index.h("div", { class: "swiper-slide" }, index.h("div", { class: `material-wrapper ${this.appState.settings.item_style}` }, item.source === "upload_widget"
                     ? this.renderDetailUploadItem(item, idx, this.items.length)
-                    : this.renderDetailItem(item, idx, this.items.length))))), index.h("div", { key: 'bf71f70d0cc53340b00d3589549fba08ef90e8a5', class: "swiper-pagination" }), index.h("button", { key: '5f6dccf7a1294dec5ad38a6bdd87059a2c625173', class: `swiper-button-next ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: 'e847aebcf81762ddf87e17728ace8a25ded93ab9', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '602576492a55e6f01a8b2ba064ba8cdb628c7a18', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
+                    : this.renderDetailItem(item, idx, this.items.length))))), index.h("div", { key: '0895c63d5b5e9515cc8c521719c8126add57d624', class: "swiper-pagination" }), index.h("button", { key: 'eaa7e43aa05ca8512e27986f6d766ef934db5c1a', class: `swiper-button-next ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: '1bdf194f96a0846fcedf9fa17e3e9317fa69a9c8', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '662c65e79ac2e53e5c606102cdab660db99d1d28', d: "M35.5992906,51.1028539 L41.7768136,57.2847304 L41.7768136,61.570226 L30,49.785113 L41.7768136,38 L41.7768136,42.2854956 L35.9938338,48.0725509 L69.1769366,48.0725509 L69.1769366,51.1028539 L35.5992906,51.1028539 Z", class: "arrow", transform: "translate(100, 100) rotate(180) " })))));
         }
     }
     get el() { return index.getElement(this); }