@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.
- package/dist/cjs/covet-pics-direct-buy_6.cjs.entry.js +2 -0
- package/dist/cjs/covet-pics-gallery-grid_3.cjs.entry.js +27 -10
- package/dist/cjs/covet-pics-gallery-item_3.cjs.entry.js +78 -29
- package/dist/cjs/covet-pics-widget.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/covet-pics-gallery-item/covet-pics-gallery-item.js +50 -9
- package/dist/collection/components/covet-pics-gallery-item-detail/covet-pics-gallery-item-detail.css +1192 -26
- package/dist/collection/components/covet-pics-gallery-item-detail/covet-pics-gallery-item-detail.js +142 -37
- package/dist/collection/components/covet-pics-gallery-slider/covet-pics-gallery-slider.js +41 -10
- package/dist/collection/components/covet-pics-popup/covet-pics-popup.js +2 -0
- package/dist/covet-pics-widget/covet-pics-widget.esm.js +1 -1
- package/dist/covet-pics-widget/{p-7202099e.entry.js → p-44575b1f.entry.js} +1 -1
- package/dist/covet-pics-widget/p-6754a724.system.entry.js +4 -0
- package/dist/covet-pics-widget/{p-f7d8333c.system.entry.js → p-a2f561d1.system.entry.js} +3 -3
- package/dist/covet-pics-widget/p-ba8bc0b0.entry.js +40 -0
- package/dist/covet-pics-widget/p-da0eaa7b.entry.js +4 -0
- package/dist/covet-pics-widget/p-f7c1a8c3.system.js +1 -1
- package/dist/covet-pics-widget/{p-bce3bd67.system.entry.js → p-f874f771.system.entry.js} +1 -1
- package/dist/esm/covet-pics-direct-buy_6.entry.js +2 -0
- package/dist/esm/covet-pics-gallery-grid_3.entry.js +27 -10
- package/dist/esm/covet-pics-gallery-item_3.entry.js +78 -29
- package/dist/esm/covet-pics-widget.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/covet-pics-direct-buy_6.entry.js +1 -1
- package/dist/esm-es5/covet-pics-gallery-grid_3.entry.js +4 -4
- package/dist/esm-es5/covet-pics-gallery-item_3.entry.js +1 -1
- package/dist/esm-es5/covet-pics-widget.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/types/components/covet-pics-gallery-item/covet-pics-gallery-item.d.ts +8 -0
- package/dist/types/components/covet-pics-gallery-item-detail/covet-pics-gallery-item-detail.d.ts +11 -0
- package/dist/types/components/covet-pics-gallery-slider/covet-pics-gallery-slider.d.ts +6 -0
- package/dist/types/components.d.ts +20 -0
- package/package.json +1 -1
- package/dist/covet-pics-widget/p-2cce1ddd.entry.js +0 -4
- package/dist/covet-pics-widget/p-45d1dda4.entry.js +0 -40
- 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
|
}
|