@covet-pics/covet-pics-widget 0.150.4 → 0.150.6

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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-55dde3b6.js');
 const utils$1 = require('./utils-cd98b07f.js');
 const _commonjsHelpers = require('./_commonjsHelpers-68a3f11d.js');
-const getters = require('./getters-1b9c13f3.js');
+const getters = require('./getters-e94138b2.js');
 const popup = require('./popup-a42068f1.js');
 const a11y = require('./a11y-e0eb85c3.js');
 const slider = require('./slider-a7086987.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],
@@ -4330,17 +4329,17 @@ const CovetPicsGallerySlider = class {
             on: {
                 init: (e) => {
                     this.sliderInit.emit(e);
-                    this.appStore.dispatch(slider.setSliderIndex(e.realIndex)); // TODO union
                     if (typeof e.params.slidesPerView === "number") { // TODO union
                         this.appStore.dispatch(slider.setSliderSlidesPerView(e.params.slidesPerView));
                     }
+                    this.appStore.dispatch(slider.setSliderIndex(e.realIndex)); // TODO union
                 },
                 update: (e) => {
                     this.sliderUpdate.emit(e);
-                    this.appStore.dispatch(slider.setSliderIndex(e.realIndex)); // TODO union
                     if (typeof e.params.slidesPerView === "number") { // TODO union
                         this.appStore.dispatch(slider.setSliderSlidesPerView(e.params.slidesPerView));
                     }
+                    this.appStore.dispatch(slider.setSliderIndex(e.realIndex)); // TODO union
                 },
                 realIndexChange: (e) => {
                     this.sliderIndexChange.emit(e);
@@ -4362,14 +4361,15 @@ 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
         };
         if (this.sliderStyle === "regular") {
             params["centerInsufficientSlides"] = true;
@@ -4378,7 +4378,6 @@ const CovetPicsGallerySlider = class {
             params.modules.push(EffectMaterial);
             params["effect"] = "material";
             params["grabCursor"] = true;
-            params["speed"] = 600;
             params["loopAdditionalSlides"] = 1;
             params["watchSlidesProgress"] = true;
             params["virtualTranslate"] = true;
@@ -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);
@@ -4430,6 +4441,16 @@ const CovetPicsGallerySlider = class {
             return this.upload.openUpload();
         return this.openPopup(this.sharedItemId);
     }
+    getItemVideoLink(item) {
+        let videoLink = "";
+        if (item.data_type === "video") {
+            videoLink = item.video;
+        }
+        if (item.data_type === "carousel" && item.carousel_media.length > 0 && item.carousel_media[0].type === "video") {
+            videoLink = item.carousel_media[0].standard_resolution;
+        }
+        return videoLink;
+    }
     itemImgAltTag(altTag, caption, idx, itemsLength, createdTime) {
         if (altTag && altTag !== null)
             return altTag;
@@ -4444,10 +4465,10 @@ const CovetPicsGallerySlider = class {
         return (index.h("covet-pics-gallery-item-detail", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "item-source": item.source, "image-url": item.imageUrl, "item-index": idx, "item-size": this.itemSize, "aria-label": `click on for upload image in slider, slide ${idx + 1}/${itemsLength},`, appStore: this.appStore }));
     }
     renderStandardItem(item, idx, itemsLength) {
-        return (index.h("covet-pics-gallery-item", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-size": this.itemSize, links: item.links, url: item.url, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-index": idx, appStore: this.appStore }));
+        return (index.h("covet-pics-gallery-item", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "video-url": this.getItemVideoLink(item), "item-id": item.id, "item-source": item.source, "item-size": this.itemSize, links: item.links, url: item.url, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), rating: item.rating !== null ? item.rating : 0, "user-name": item.username, "created-time": item.created_time, "item-type": item.data_type, caption: item.caption, "item-index": idx, appStore: this.appStore }));
     }
     renderDetailItem(item, idx, itemsLength) {
-        return (index.h("covet-pics-gallery-item-detail", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "item-id": item.id, "item-source": item.source, "item-type": item.data_type, "item-size": this.itemSize, "lazy-load": true, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in main slider`, appStore: this.appStore, "item-index": idx }));
+        return (index.h("covet-pics-gallery-item-detail", { class: { "swiper-slide": this.sliderStyle === "regular", "material-content": this.sliderStyle === "material" }, "image-url": utils$1.getCoverImage(item.cover_images.medium_resolution, item.images.medium_resolution), "image-high-resolution-url": utils$1.getCoverImage(item.cover_images.high_resolution, item.images.high_resolution), "image-responsive-sizes": utils$1.getSizesForResponsiveImage(this.appState.settings.slideshow_photos_per_row, this.appState.settings.slideshow_mobile_photos_per_row), "video-url": this.getItemVideoLink(item), "item-id": item.id, "item-source": item.source, "item-type": item.data_type, "item-size": this.itemSize, "lazy-load": true, links: item.links, url: item.url, "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, verified: item.verified, "alt-tag": this.itemImgAltTag(item.alt_tag, item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in main slider`, appStore: this.appStore, "item-index": idx }));
     }
     getCSSVariables() {
         const cssVars = {};
@@ -4466,7 +4487,7 @@ const CovetPicsGallerySlider = class {
             materialClass = `swiper-material extra-height ${this.itemSize}`;
         }
         if (this.items !== undefined) {
-            return (index.h("section", { key: '02f33ba33a2a72e55f81f9a50a2d8c0e9dca55a6', class: `gallery swiper ${materialClass}`, style: this.getCSSVariables() }, index.h("button", { key: '252d7f15d01c0a24e569babbd0e44e1f4df72e21', class: `swiper-button-prev ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: '005cc68af8e255d206aa9c0306a8df284a1d7808', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: 'adafb093e6dac1137c13ed3b1c12b98f7b5e23de', 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"
@@ -4476,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: '5b6ba71e0ec03a57980ac84f401afd4d4c97eb3d', class: "swiper-pagination" }), index.h("button", { key: '1a3b3fbe5c367dffec0c77143ef4e939b3f6c886', class: `swiper-button-next ${this.appState.settings.item_style}`, type: "button" }, index.h("svg", { key: '3d9548df7753bd5ec7b1232d295883f2ac7fec7d', viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { key: '4b21142a9a224ada269e1dd5a873dbf2b85f63da', 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); }