@covet-pics/covet-pics-widget 0.98.2 → 0.98.5

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.
Files changed (36) hide show
  1. package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js +2 -0
  2. package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js +27 -10
  3. package/dist/cjs/covet-pics-gallery-item_3.cjs.entry.js +78 -29
  4. package/dist/cjs/covet-pics-widget.cjs.js +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/collection/components/covet-pics-gallery-item/covet-pics-gallery-item.js +50 -9
  7. package/dist/collection/components/covet-pics-gallery-item-detail/covet-pics-gallery-item-detail.css +1192 -26
  8. package/dist/collection/components/covet-pics-gallery-item-detail/covet-pics-gallery-item-detail.js +142 -37
  9. package/dist/collection/components/covet-pics-gallery-slider/covet-pics-gallery-slider.js +41 -10
  10. package/dist/collection/components/covet-pics-popup/covet-pics-popup.js +2 -0
  11. package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
  12. package/dist/covet-pics-widget/{p-7202099e.entry.js → p-44575b1f.entry.js} +1 -1
  13. package/dist/covet-pics-widget/p-6754a724.system.entry.js +4 -0
  14. package/dist/covet-pics-widget/{p-f7d8333c.system.entry.js → p-a2f561d1.system.entry.js} +3 -3
  15. package/dist/covet-pics-widget/p-ba8bc0b0.entry.js +40 -0
  16. package/dist/covet-pics-widget/p-da0eaa7b.entry.js +4 -0
  17. package/dist/covet-pics-widget/p-f7c1a8c3.system.js +1 -1
  18. package/dist/covet-pics-widget/{p-bce3bd67.system.entry.js → p-f874f771.system.entry.js} +1 -1
  19. package/dist/esm/covet-pics-direct-buy_6.entry.js +2 -0
  20. package/dist/esm/covet-pics-gallery-grid_3.entry.js +27 -10
  21. package/dist/esm/covet-pics-gallery-item_3.entry.js +78 -29
  22. package/dist/esm/covet-pics-widget.js +1 -1
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/esm-es5/covet-pics-direct-buy_6.entry.js +1 -1
  25. package/dist/esm-es5/covet-pics-gallery-grid_3.entry.js +4 -4
  26. package/dist/esm-es5/covet-pics-gallery-item_3.entry.js +1 -1
  27. package/dist/esm-es5/covet-pics-widget.js +1 -1
  28. package/dist/esm-es5/loader.js +1 -1
  29. package/dist/types/components/covet-pics-gallery-item/covet-pics-gallery-item.d.ts +8 -0
  30. package/dist/types/components/covet-pics-gallery-item-detail/covet-pics-gallery-item-detail.d.ts +11 -0
  31. package/dist/types/components/covet-pics-gallery-slider/covet-pics-gallery-slider.d.ts +6 -0
  32. package/dist/types/components.d.ts +20 -0
  33. package/package.json +1 -1
  34. package/dist/covet-pics-widget/p-2cce1ddd.entry.js +0 -4
  35. package/dist/covet-pics-widget/p-45d1dda4.entry.js +0 -40
  36. package/dist/covet-pics-widget/p-e3d713c7.system.entry.js +0 -4
@@ -4628,6 +4628,8 @@ let CovetPicsPopup = class {
4628
4628
  }
4629
4629
  renderSidebar() {
4630
4630
  const starsArray = [1, 2, 3, 4, 5];
4631
+ if (!this.item.caption && !this.item.rating && this.item.links.length === 0)
4632
+ return null;
4631
4633
  return (index.h("section", { class: "popup-body" }, this.arrowsMobilePosition === "middle" &&
4632
4634
  this.renderMobileArrows(), index.h("div", { class: "popup-body-content" }, this.arrowsDesktopType === "arrows-type-5" && this.arrowsDesktopPosition === "top" &&
4633
4635
  index.h("div", { class: `desktop-arrows arrows-size-${this.arrowsDesktopSizeType} arrows-color-theme-${this.arrowsDesktopColorTheme}` }, this.renderArrows(this.arrowsDesktopType)), index.h("div", { class: "popup-body-content-scroll" }, this.showLinksTitle && (this.item.links.length > 0) &&
@@ -3841,6 +3841,7 @@ let CovetPicsGallerySlider = class {
3841
3841
  this.nextPage = index.createEvent(this, "nextPage", 7);
3842
3842
  this.sliderInit = index.createEvent(this, "sliderInit:covetPics", 7);
3843
3843
  this.sliderUpdate = index.createEvent(this, "sliderUpdate:covetPics", 7);
3844
+ this.sliderIndexChange = index.createEvent(this, "sliderIndexChange:covetPics", 7);
3844
3845
  /**
3845
3846
  * Number of CovetGalleryItems to show per row on large screens (>=768px)
3846
3847
  */
@@ -3901,6 +3902,7 @@ let CovetPicsGallerySlider = class {
3901
3902
  nextPageHandler() {
3902
3903
  this.loader.fetchItems().then(json => {
3903
3904
  if (json) {
3905
+ this.fixSliderHeight();
3904
3906
  this.items = [...this.items, ...json.items];
3905
3907
  }
3906
3908
  });
@@ -3962,8 +3964,9 @@ let CovetPicsGallerySlider = class {
3962
3964
  const paginationEl = this.el.querySelector(".gallery .swiper-pagination");
3963
3965
  this.swiper = new lazy.Swiper(galleryEl, {
3964
3966
  on: {
3965
- init: () => this.sliderInit.emit(),
3966
- update: () => this.sliderUpdate.emit(),
3967
+ init: (e) => this.sliderInit.emit(e),
3968
+ update: (e) => this.sliderUpdate.emit(e),
3969
+ realIndexChange: (e) => this.sliderIndexChange.emit(e)
3967
3970
  },
3968
3971
  preloadImages: false,
3969
3972
  modules: [Autoplay, lazy.Lazy, lazy.Navigation, lazy.Pagination],
@@ -4000,6 +4003,18 @@ let CovetPicsGallerySlider = class {
4000
4003
  this.swiper.on("reachEnd", () => this.nextPage.emit());
4001
4004
  }
4002
4005
  }
4006
+ fixSliderHeight() {
4007
+ const swiperWrapper = this.el.querySelector(".swiper-wrapper");
4008
+ const getStyle = (el, property) => el !== null
4009
+ ? parseInt(window.getComputedStyle(el)[property].slice(0, -2))
4010
+ : 0;
4011
+ const swiperWrapperHeight = getStyle(swiperWrapper, "height");
4012
+ swiperWrapper.style.height = `${swiperWrapperHeight}px`;
4013
+ }
4014
+ unFixSliderheight() {
4015
+ const swiperWrapper = this.el.querySelector(".swiper-wrapper");
4016
+ swiperWrapper.style.removeProperty("height");
4017
+ }
4003
4018
  emitGalleryReadyEvent() {
4004
4019
  const galleryReadyEvent = utils$1.buildEvent("galleryReady:covetPics", { galleryId: this.loader.galleryId, itemsCount: this.items.length, el: this.el });
4005
4020
  document.dispatchEvent(galleryReadyEvent);
@@ -4037,34 +4052,36 @@ let CovetPicsGallerySlider = class {
4037
4052
  }
4038
4053
  }
4039
4054
  componentDidUpdate() {
4055
+ this.swiper.slideTo(this.swiper.previousIndex, 0, false);
4040
4056
  this.swiper.update();
4057
+ this.unFixSliderheight();
4041
4058
  }
4042
4059
  itemImgAltTag(caption, idx, itemsLength, createdTime) {
4043
4060
  return caption && caption.length > 0
4044
4061
  ? `${caption}, slide ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`
4045
4062
  : `slide ${idx + 1}/${itemsLength}, post created ${utils$1.getDateFromTimestamp(createdTime)}`;
4046
4063
  }
4047
- renderStandardUploadItem(item) {
4048
- 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 }));
4064
+ renderStandardUploadItem(item, idx) {
4065
+ 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 }));
4049
4066
  }
4050
- renderDetailUploadItem(item) {
4051
- 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 }));
4067
+ renderDetailUploadItem(item, idx) {
4068
+ 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 }));
4052
4069
  }
4053
4070
  renderStandardItem(item, idx, itemsLength) {
4054
- 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` }));
4071
+ 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 }));
4055
4072
  }
4056
4073
  renderDetailItem(item, idx, itemsLength) {
4057
4074
  const itemWidth = window.innerWidth > 767
4058
4075
  ? (100 - (this.desktopItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow
4059
4076
  : (100 - (this.mobileItemPadding * (this.desktopPhotosPerRow - 1))) / this.desktopPhotosPerRow;
4060
- 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` }));
4077
+ 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 }));
4061
4078
  }
4062
4079
  render() {
4063
4080
  if (this.items !== undefined) {
4064
4081
  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"
4065
- ? this.renderStandardUploadItem(item)
4082
+ ? this.renderStandardUploadItem(item, idx)
4066
4083
  : this.renderStandardItem(item, idx, this.items.length)), this.itemStyle !== "standard" && this.items.map((item, idx) => item.source === "upload_widget"
4067
- ? this.renderDetailUploadItem(item)
4084
+ ? this.renderDetailUploadItem(item, idx)
4068
4085
  : 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) " })))));
4069
4086
  }
4070
4087
  }