@covet-pics/covet-pics-widget 0.98.3 → 0.98.6

package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3863feda.js');
-const utils = require('./utils-50212cd5.js');
+const utils = require('./utils-7761a91a.js');
 const lazy = require('./lazy-6938bff5.js');
 const evEmitter = require('./ev-emitter-92552a48.js');
 const index$1 = require('./index-1dd17838.js');

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3863feda.js');
-const utils$1 = require('./utils-50212cd5.js');
+const utils$1 = require('./utils-7761a91a.js');
 const evEmitter = require('./ev-emitter-92552a48.js');
 const lazy = require('./lazy-6938bff5.js');
 const effectFade = require('./effect-fade-0800f5fc.js');
@@ -3841,6 +3841,7 @@ let CovetPicsGallerySlider = class {
     this.nextPage = index.createEvent(this, "nextPage", 7);
     this.sliderInit = index.createEvent(this, "sliderInit:covetPics", 7);
     this.sliderUpdate = index.createEvent(this, "sliderUpdate:covetPics", 7);
+    this.sliderIndexChange = index.createEvent(this, "sliderIndexChange:covetPics", 7);
     /**
      * Number of CovetGalleryItems to show per row on large screens (>=768px)
      */
@@ -3901,6 +3902,7 @@ let CovetPicsGallerySlider = class {
   nextPageHandler() {
     this.loader.fetchItems().then(json => {
       if (json) {
+        this.fixSliderHeight();
         this.items = [...this.items, ...json.items];
       }
     });
@@ -3962,8 +3964,9 @@ let CovetPicsGallerySlider = class {
     const paginationEl = this.el.querySelector(".gallery .swiper-pagination");
     this.swiper = new lazy.Swiper(galleryEl, {
       on: {
-        init: () => this.sliderInit.emit(),
-        update: () => this.sliderUpdate.emit(),
+        init: (e) => this.sliderInit.emit(e),
+        update: (e) => this.sliderUpdate.emit(e),
+        realIndexChange: (e) => this.sliderIndexChange.emit(e)
       },
       preloadImages: false,
       modules: [Autoplay, lazy.Lazy, lazy.Navigation, lazy.Pagination],
@@ -4000,6 +4003,18 @@ let CovetPicsGallerySlider = class {
       this.swiper.on("reachEnd", () => this.nextPage.emit());
     }
   }
+  fixSliderHeight() {
+    const swiperWrapper = this.el.querySelector(".swiper-wrapper");
+    const getStyle = (el, property) => el !== null
+      ? parseInt(window.getComputedStyle(el)[property].slice(0, -2))
+      : 0;
+    const swiperWrapperHeight = getStyle(swiperWrapper, "height");
+    swiperWrapper.style.height = `${swiperWrapperHeight}px`;
+  }
+  unFixSliderheight() {
+    const swiperWrapper = this.el.querySelector(".swiper-wrapper");
+    swiperWrapper.style.removeProperty("height");
+  }
   emitGalleryReadyEvent() {
     const galleryReadyEvent = utils$1.buildEvent("galleryReady:covetPics", { galleryId: this.loader.galleryId, itemsCount: this.items.length, el: this.el });
     document.dispatchEvent(galleryReadyEvent);
@@ -4037,34 +4052,36 @@ let CovetPicsGallerySlider = class {
     }
   }
   componentDidUpdate() {
+    this.swiper.slideTo(this.swiper.previousIndex, 0, false);
     this.swiper.update();
+    this.unFixSliderheight();
   }
   itemImgAltTag(caption, idx, itemsLength, createdTime) {
     return caption && caption.length > 0
       ? `${caption}, slide ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`
       : `slide ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`;
   }
-  renderStandardUploadItem(item) {
-    return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "animation-duration": item.animationDuration, "hover-background-opacity": item.hoverBackgroundOpacity, "hover-border-color": item.hoverBorderColor, "hover-color-from": item.hoverColorFrom, "hover-color-to": item.hoverColorTo, "image-url": item.imageUrl, "label-caption": item.labelCaption }));
+  renderStandardUploadItem(item, idx) {
+    return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "animation-duration": item.animationDuration, "hover-background-opacity": item.hoverBackgroundOpacity, "hover-border-color": item.hoverBorderColor, "hover-color-from": item.hoverColorFrom, "hover-color-to": item.hoverColorTo, "image-url": item.imageUrl, "label-caption": item.labelCaption, "item-index": idx }));
   }
-  renderDetailUploadItem(item) {
-    return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "image-url": item.imageUrl, "item-style": item.itemStyle, "label-caption": item.labelCaption }));
+  renderDetailUploadItem(item, idx) {
+    return (index.h("covet-pics-gallery-item", { class: "swiper-slide slide", "item-source": item.source, "image-url": item.imageUrl, "item-style": item.itemStyle, "label-caption": item.labelCaption, "item-index": idx }));
   }
   renderStandardItem(item, idx, itemsLength) {
-    return (index.h("covet-pics-gallery-item", { class: "swiper-slide", "animation-duration": this.loader.data.settings.item_animation_duration, "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.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "hover-animation-style": this.loader.data.settings.item_animation_type, "hover-background-opacity": this.loader.data.settings.item_hover_background_opacity, "hover-border-color": this.loader.data.settings.item_hover_border_color, "hover-color-from": this.loader.data.settings.item_hover_color_from, "hover-color-to": this.loader.data.settings.item_hover_color_to, "hover-disabled": this.loader.data.settings.item_hover_disabled, "hover-preview": this.loader.previewHoverMode, "label-caption": this.loader.data.settings.item_without_product_label_text, "label-caption-with-links": this.loader.data.settings.item_label_text, "label-color": this.loader.data.settings.item_label_color, "label-font-size": this.loader.data.settings.item_label_font_size, "label-font-style": this.loader.data.settings.item_label_font_style, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, "show-hover-icon": this.loader.data.settings.item_hover_icon, url: item.url, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider` }));
+    return (index.h("covet-pics-gallery-item", { class: "swiper-slide", "animation-duration": this.loader.data.settings.item_animation_duration, "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.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "hover-animation-style": this.loader.data.settings.item_animation_type, "hover-background-opacity": this.loader.data.settings.item_hover_background_opacity, "hover-border-color": this.loader.data.settings.item_hover_border_color, "hover-color-from": this.loader.data.settings.item_hover_color_from, "hover-color-to": this.loader.data.settings.item_hover_color_to, "hover-disabled": this.loader.data.settings.item_hover_disabled, "hover-preview": this.loader.previewHoverMode, "label-caption": this.loader.data.settings.item_without_product_label_text, "label-caption-with-links": this.loader.data.settings.item_label_text, "label-color": this.loader.data.settings.item_label_color, "label-font-size": this.loader.data.settings.item_label_font_size, "label-font-style": this.loader.data.settings.item_label_font_style, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, "show-hover-icon": this.loader.data.settings.item_hover_icon, url: item.url, "alt-tag": this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider`, "item-index": idx }));
   }
   renderDetailItem(item, idx, itemsLength) {
     const itemWidth = window.innerWidth > 767
       ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
       : (100 - (this.mobileItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow;
-    return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "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.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, layout: "slider", "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, altTag: this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider` }));
+    return (index.h("covet-pics-gallery-item-detail", { class: "swiper-slide", "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.desktopPhotosPerRow, this.mobilePhotosPerRow), "item-id": item.id, "item-source": item.source, "item-style": this.itemStyle, "item-type": item.data_type, "item-width": itemWidth, "lazy-load": true, links: item.links, "popup-disabled": this.loader.data.settings.popup_disable_modal, "popup-redirect-mode": this.loader.data.settings.item_open_link, url: item.url, "background-color": this.loader.data.settings.background_color, "primary-color": this.loader.data.settings.primary_color, "star-color": this.loader.data.settings.star_color, layout: "slider", "user-name": item.username, caption: item.caption, "created-time": item.created_time, rating: item.rating !== null ? item.rating : 0, altTag: this.itemImgAltTag(item.caption, idx, itemsLength, item.created_time), "aria-label": `slide ${idx + 1} of ${itemsLength} in covet-widget slider`, "item-index": idx }));
   }
   render() {
     if (this.items !== undefined) {
       return (index.h("section", { id: "covet-pics-slider", class: "gallery swiper", role: "region", "aria-label": "main slider" }, index.h("div", { class: "swiper-wrapper" }, this.itemStyle === "standard" && this.items.map((item, idx) => item.source === "upload_widget"
-        ? this.renderStandardUploadItem(item)
+        ? this.renderStandardUploadItem(item, idx)
         : this.renderStandardItem(item, idx, this.items.length)), this.itemStyle !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
-        ? this.renderDetailUploadItem(item)
+        ? this.renderDetailUploadItem(item, idx)
         : this.renderDetailItem(item, idx, this.items.length))), index.h("div", { class: "swiper-pagination" }), index.h("button", { class: `swiper-button-prev ${this.itemStyle}`, tabindex: this.isSliderDisabled ? -1 : 0, "aria-label": "slider contol prev", "aria-controls": "covet-pics-slider", type: "button" }, index.h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { 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) " }))), index.h("button", { class: `swiper-button-next ${this.itemStyle}`, tabindex: this.isSliderDisabled ? -1 : 0, "aria-label": "slider contol next", "aria-controls": "covet-pics-slider", type: "button" }, index.h("svg", { viewBox: "0 0 100 100", "aria-hidden": "true" }, index.h("path", { 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) " })))));
     }
   }