@itcenteratunihelsinki/huds-lib 0.8.62 → 0.8.63
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/components/hy-hero-carousel.js +328 -1
- package/components/hy-hero-carousel.js.map +1 -1
- package/dist/cjs/hy-hero-carousel.cjs.entry.js +328 -1
- package/dist/cjs/hy-hero-carousel.cjs.entry.js.map +1 -1
- package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js +5 -2
- package/dist/collection/components/hy-hero-carousel/hy-hero-carousel.js.map +1 -1
- package/dist/esm/hy-hero-carousel.entry.js +328 -1
- package/dist/esm/hy-hero-carousel.entry.js.map +1 -1
- package/dist/huds-lib/hy-hero-carousel.entry.js +1 -1
- package/dist/huds-lib/hy-hero-carousel.entry.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { jsonParserWorker } from "../../global/globalScript";
|
|
3
|
-
import Swiper, { Navigation, Pagination, A11y, EffectFade } from "swiper";
|
|
3
|
+
import Swiper, { Navigation, Pagination, A11y, EffectFade, Virtual } from "swiper";
|
|
4
4
|
import { CtaLinkButtonVariants } from "../../utils/utils";
|
|
5
5
|
export class HyHeroCarousel {
|
|
6
6
|
constructor() {
|
|
@@ -17,7 +17,7 @@ export class HyHeroCarousel {
|
|
|
17
17
|
}
|
|
18
18
|
componentDidLoad() {
|
|
19
19
|
new Swiper(".swiper", {
|
|
20
|
-
modules: [Navigation, Pagination, A11y, EffectFade],
|
|
20
|
+
modules: [Navigation, Pagination, A11y, EffectFade, Virtual],
|
|
21
21
|
enabled: true,
|
|
22
22
|
effect: 'fade',
|
|
23
23
|
fadeEffect: {
|
|
@@ -28,6 +28,9 @@ export class HyHeroCarousel {
|
|
|
28
28
|
spaceBetween: 50,
|
|
29
29
|
virtual: {
|
|
30
30
|
enabled: true,
|
|
31
|
+
cache: true,
|
|
32
|
+
addSlidesAfter: 0,
|
|
33
|
+
addSlidesBefore: 0,
|
|
31
34
|
},
|
|
32
35
|
navigation: {
|
|
33
36
|
nextEl: ".swiper-button-next",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-hero-carousel.js","sourceRoot":"","sources":["../../../src/components/hy-hero-carousel/hy-hero-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nexport interface CarouselItem {\n title: string;\n desc: string;\n theme_text: string;\n image_alt: string;\n image_fallback: string;\n image_sources: ImageSrcSet[] | string;\n uri?: string;\n uri_title: string;\n}\n\nimport {Component, h, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport Swiper, {Navigation, Pagination, A11y, EffectFade} from \"swiper\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero-carousel\",\n styleUrl: \"./hy-hero-carousel.scss\",\n shadow: false,\n})\nexport class HyHeroCarousel {\n @Prop() itemCount: number;\n @Prop() ariaLabelNext: string = \"Next slide\";\n @Prop() ariaLabelPrev: string = \"Previous slide\";\n @Prop() ariaLabelFirstSlide: string = \"This is the first slide\";\n @Prop() ariaLabelLastSlide: string = \"This is the first slide\";\n @Prop() ariaLabelBulletMessage: string = \"Go to slide\";\n\n @Prop() data: CarouselItem[] | string;\n private _data: CarouselItem[];\n\n async componentWillLoad() {\n this._data = await jsonParserWorker(this.data);\n }\n\n componentDidLoad() {\n new Swiper(\".swiper\", {\n modules: [Navigation, Pagination, A11y, EffectFade],\n enabled: true,\n effect: 'fade',\n fadeEffect: {\n crossFade: true\n },\n direction: \"horizontal\",\n loop: false,\n spaceBetween: 50,\n virtual: {\n enabled: true,\n },\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n pagination: {\n el: \".swiper-pagination\",\n bulletClass: \"hero-carousel--pagination__bullet\",\n bulletActiveClass: \"hero-carousel--pagination__bullet--active\",\n clickable: true,\n renderBullet: function (index, className) {\n return `<span aria-label=\"${this.ariaLabelBulletMessage} ${index}\" data-index=\"${index}\" class=\"${className}\"></span>`;\n },\n },\n a11y: {\n enabled: true,\n firstSlideMessage: this.ariaLabelFirstSlide,\n lastSlideMessage: this.ariaLabelLastSlide,\n nextSlideMessage: this.ariaLabelNext,\n prevSlideMessage: this.ariaLabelPrev,\n paginationBulletMessage: `${this.ariaLabelBulletMessage} {{index}}`,\n },\n });\n }\n\n handleSlideChangeFromButtons(index) {\n const swiperEl = document.querySelector(\".swiper\") as any;\n swiperEl.swiper.slideTo(index, 300, false);\n }\n\n render() {\n const carouselContentClasses = [\"hero-carousel--item__content\", this.itemCount > 1 ? \"has-pagination\" : \"\"].join(\n \" \"\n );\n return (\n <div class=\"hero-carousel-container\">\n <div class=\"swiper\">\n <div class=\"swiper-wrapper\">\n {this._data[\"items\"] &&\n this._data[\"items\"].map((i, index) => {\n const currentIndex = index;\n const srcSet = JSON.parse(i.image_sources);\n return (\n <div class=\"swiper-slide\" data-title={i.title} data-desc={i.desc}>\n <div class=\"hero-carousel--item\">\n <div class={carouselContentClasses}>\n <h2 class=\"hero-carousel--item__title\" innerHTML={i.title}></h2>\n <div class=\"hero-carousel--item__desc\">{i.desc}</div>\n {i.uri && (\n <hy-cta-button\n link-content={i.uri_title}\n sc-label={i.uri_title}\n url={i.uri}\n is-external=\"false\"\n variant={CtaLinkButtonVariants.heroBlue}\n />\n )}\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--item__pagination\">\n <ul>\n {this._data[\"items\"].map((i, index) => {\n const paginationButtonClasses = [\n \"hero-carousel--item__pagination__button\",\n index === currentIndex ? \"is-current\" : \"\",\n ].join(\" \");\n return (\n <li class={paginationButtonClasses}>\n <button\n aria-label={`${this.ariaLabelBulletMessage} ${index}`}\n onClick={() => this.handleSlideChangeFromButtons(index)}\n data-index={index}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n >\n {i.theme_text && \n <span class=\"hero-carousel--item__pagination__button__theme\">{i.theme_text}</span>\n }\n <span innerHTML={i.title}></span>\n </button>\n </li>\n );\n })}\n </ul>\n </div>\n ) : null}\n </div>\n <div class=\"hero-carousel--item__image\">\n {srcSet.length > 0 ? (\n <picture>\n {srcSet.map((item: ImageSrcSet) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n </picture>\n ) : (\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n )}\n { currentIndex !== 0 &&\n <div class=\"swiper-lazy-preloader\"></div>\n }\n </div>\n </div>\n </div>\n );\n })}\n </div>\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--controls\">\n <div class=\"swiper-pagination hero-carousel--pagination--mobile\"></div>\n <div class=\"hero-carousel--controls__buttons\">\n <div class=\"swiper-button-prev\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-left\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-left\"></hy-icon>\n </div>\n <div class=\"swiper-button-next\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-right\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-right\"></hy-icon>\n </div>\n </div>\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"hy-hero-carousel.js","sourceRoot":"","sources":["../../../src/components/hy-hero-carousel/hy-hero-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["export interface ImageSrcSet {\n src: any;\n media: string;\n type: string;\n sizes: string | null;\n}\n\nexport interface CarouselItem {\n title: string;\n desc: string;\n theme_text: string;\n image_alt: string;\n image_fallback: string;\n image_sources: ImageSrcSet[] | string;\n uri?: string;\n uri_title: string;\n}\n\nimport {Component, h, Prop} from \"@stencil/core\";\nimport {jsonParserWorker} from \"../../global/globalScript\";\nimport Swiper, {Navigation, Pagination, A11y, EffectFade, Virtual} from \"swiper\";\nimport {CtaLinkButtonVariants} from \"../../utils/utils\";\n\n@Component({\n tag: \"hy-hero-carousel\",\n styleUrl: \"./hy-hero-carousel.scss\",\n shadow: false,\n})\nexport class HyHeroCarousel {\n @Prop() itemCount: number;\n @Prop() ariaLabelNext: string = \"Next slide\";\n @Prop() ariaLabelPrev: string = \"Previous slide\";\n @Prop() ariaLabelFirstSlide: string = \"This is the first slide\";\n @Prop() ariaLabelLastSlide: string = \"This is the first slide\";\n @Prop() ariaLabelBulletMessage: string = \"Go to slide\";\n\n @Prop() data: CarouselItem[] | string;\n private _data: CarouselItem[];\n\n async componentWillLoad() {\n this._data = await jsonParserWorker(this.data);\n }\n\n componentDidLoad() {\n new Swiper(\".swiper\", {\n modules: [Navigation, Pagination, A11y, EffectFade, Virtual],\n enabled: true,\n effect: 'fade',\n fadeEffect: {\n crossFade: true\n },\n direction: \"horizontal\",\n loop: false,\n spaceBetween: 50,\n virtual: {\n enabled: true,\n cache: true,\n addSlidesAfter: 0,\n addSlidesBefore: 0,\n },\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n pagination: {\n el: \".swiper-pagination\",\n bulletClass: \"hero-carousel--pagination__bullet\",\n bulletActiveClass: \"hero-carousel--pagination__bullet--active\",\n clickable: true,\n renderBullet: function (index, className) {\n return `<span aria-label=\"${this.ariaLabelBulletMessage} ${index}\" data-index=\"${index}\" class=\"${className}\"></span>`;\n },\n },\n a11y: {\n enabled: true,\n firstSlideMessage: this.ariaLabelFirstSlide,\n lastSlideMessage: this.ariaLabelLastSlide,\n nextSlideMessage: this.ariaLabelNext,\n prevSlideMessage: this.ariaLabelPrev,\n paginationBulletMessage: `${this.ariaLabelBulletMessage} {{index}}`,\n },\n });\n }\n\n handleSlideChangeFromButtons(index) {\n const swiperEl = document.querySelector(\".swiper\") as any;\n swiperEl.swiper.slideTo(index, 300, false);\n }\n\n\n render() {\n const carouselContentClasses = [\"hero-carousel--item__content\", this.itemCount > 1 ? \"has-pagination\" : \"\"].join(\n \" \"\n );\n return (\n <div class=\"hero-carousel-container\">\n <div class=\"swiper\">\n <div class=\"swiper-wrapper\">\n {this._data[\"items\"] &&\n this._data[\"items\"].map((i, index) => {\n const currentIndex = index;\n const srcSet = JSON.parse(i.image_sources);\n return (\n <div class=\"swiper-slide\" data-title={i.title} data-desc={i.desc}>\n <div class=\"hero-carousel--item\">\n <div class={carouselContentClasses}>\n <h2 class=\"hero-carousel--item__title\" innerHTML={i.title}></h2>\n <div class=\"hero-carousel--item__desc\">{i.desc}</div>\n {i.uri && (\n <hy-cta-button\n link-content={i.uri_title}\n sc-label={i.uri_title}\n url={i.uri}\n is-external=\"false\"\n variant={CtaLinkButtonVariants.heroBlue}\n />\n )}\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--item__pagination\">\n <ul>\n {this._data[\"items\"].map((i, index) => {\n const paginationButtonClasses = [\n \"hero-carousel--item__pagination__button\",\n index === currentIndex ? \"is-current\" : \"\",\n ].join(\" \");\n return (\n <li class={paginationButtonClasses}>\n <button\n aria-label={`${this.ariaLabelBulletMessage} ${index}`}\n onClick={() => this.handleSlideChangeFromButtons(index)}\n data-index={index}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n >\n {i.theme_text && \n <span class=\"hero-carousel--item__pagination__button__theme\">{i.theme_text}</span>\n }\n <span innerHTML={i.title}></span>\n </button>\n </li>\n );\n })}\n </ul>\n </div>\n ) : null}\n </div>\n <div class=\"hero-carousel--item__image\">\n {srcSet.length > 0 ? (\n <picture>\n {srcSet.map((item: ImageSrcSet) => (\n <source\n srcSet={item.src}\n media={item.media}\n type={item.type}\n sizes={item.sizes ? item.sizes : \"\"}\n />\n ))}\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n </picture>\n ) : (\n <img\n aria-hidden=\"true\"\n loading={currentIndex === 0 ? 'eager' : 'lazy'}\n alt={i.image_alt}\n class={`hy-image__image`}\n src={i.image_fallback}\n />\n )}\n { currentIndex !== 0 &&\n <div class=\"swiper-lazy-preloader\"></div>\n }\n </div>\n </div>\n </div>\n );\n })}\n </div>\n {this.itemCount > 1 ? (\n <div class=\"hero-carousel--controls\">\n <div class=\"swiper-pagination hero-carousel--pagination--mobile\"></div>\n <div class=\"hero-carousel--controls__buttons\">\n <div class=\"swiper-button-prev\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-left\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-left\"></hy-icon>\n </div>\n <div class=\"swiper-button-next\">\n <hy-icon class=\"arrow\" icon=\"hy-icon-arrow-right\"></hy-icon>\n <hy-icon class=\"caret\" icon=\"hy-icon-caret-right\"></hy-icon>\n </div>\n </div>\n </div>\n ) : null}\n </div>\n </div>\n );\n }\n}\n"]}
|
|
@@ -3861,6 +3861,330 @@ Object.keys(prototypes).forEach(prototypeGroup => {
|
|
|
3861
3861
|
});
|
|
3862
3862
|
Swiper.use([Resize, Observer]);
|
|
3863
3863
|
|
|
3864
|
+
function Virtual({
|
|
3865
|
+
swiper,
|
|
3866
|
+
extendParams,
|
|
3867
|
+
on,
|
|
3868
|
+
emit
|
|
3869
|
+
}) {
|
|
3870
|
+
extendParams({
|
|
3871
|
+
virtual: {
|
|
3872
|
+
enabled: false,
|
|
3873
|
+
slides: [],
|
|
3874
|
+
cache: true,
|
|
3875
|
+
renderSlide: null,
|
|
3876
|
+
renderExternal: null,
|
|
3877
|
+
renderExternalUpdate: true,
|
|
3878
|
+
addSlidesBefore: 0,
|
|
3879
|
+
addSlidesAfter: 0
|
|
3880
|
+
}
|
|
3881
|
+
});
|
|
3882
|
+
let cssModeTimeout;
|
|
3883
|
+
const document = getDocument();
|
|
3884
|
+
swiper.virtual = {
|
|
3885
|
+
cache: {},
|
|
3886
|
+
from: undefined,
|
|
3887
|
+
to: undefined,
|
|
3888
|
+
slides: [],
|
|
3889
|
+
offset: 0,
|
|
3890
|
+
slidesGrid: []
|
|
3891
|
+
};
|
|
3892
|
+
const tempDOM = document.createElement('div');
|
|
3893
|
+
function renderSlide(slide, index) {
|
|
3894
|
+
const params = swiper.params.virtual;
|
|
3895
|
+
if (params.cache && swiper.virtual.cache[index]) {
|
|
3896
|
+
return swiper.virtual.cache[index];
|
|
3897
|
+
}
|
|
3898
|
+
// eslint-disable-next-line
|
|
3899
|
+
let slideEl;
|
|
3900
|
+
if (params.renderSlide) {
|
|
3901
|
+
slideEl = params.renderSlide.call(swiper, slide, index);
|
|
3902
|
+
if (typeof slideEl === 'string') {
|
|
3903
|
+
tempDOM.innerHTML = slideEl;
|
|
3904
|
+
slideEl = tempDOM.children[0];
|
|
3905
|
+
}
|
|
3906
|
+
} else if (swiper.isElement) {
|
|
3907
|
+
slideEl = createElement('swiper-slide');
|
|
3908
|
+
} else {
|
|
3909
|
+
slideEl = createElement('div', swiper.params.slideClass);
|
|
3910
|
+
}
|
|
3911
|
+
slideEl.setAttribute('data-swiper-slide-index', index);
|
|
3912
|
+
if (!params.renderSlide) {
|
|
3913
|
+
slideEl.innerHTML = slide;
|
|
3914
|
+
}
|
|
3915
|
+
if (params.cache) swiper.virtual.cache[index] = slideEl;
|
|
3916
|
+
return slideEl;
|
|
3917
|
+
}
|
|
3918
|
+
function update(force) {
|
|
3919
|
+
const {
|
|
3920
|
+
slidesPerView,
|
|
3921
|
+
slidesPerGroup,
|
|
3922
|
+
centeredSlides,
|
|
3923
|
+
loop: isLoop
|
|
3924
|
+
} = swiper.params;
|
|
3925
|
+
const {
|
|
3926
|
+
addSlidesBefore,
|
|
3927
|
+
addSlidesAfter
|
|
3928
|
+
} = swiper.params.virtual;
|
|
3929
|
+
const {
|
|
3930
|
+
from: previousFrom,
|
|
3931
|
+
to: previousTo,
|
|
3932
|
+
slides,
|
|
3933
|
+
slidesGrid: previousSlidesGrid,
|
|
3934
|
+
offset: previousOffset
|
|
3935
|
+
} = swiper.virtual;
|
|
3936
|
+
if (!swiper.params.cssMode) {
|
|
3937
|
+
swiper.updateActiveIndex();
|
|
3938
|
+
}
|
|
3939
|
+
const activeIndex = swiper.activeIndex || 0;
|
|
3940
|
+
let offsetProp;
|
|
3941
|
+
if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
|
|
3942
|
+
let slidesAfter;
|
|
3943
|
+
let slidesBefore;
|
|
3944
|
+
if (centeredSlides) {
|
|
3945
|
+
slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
|
|
3946
|
+
slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
|
|
3947
|
+
} else {
|
|
3948
|
+
slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;
|
|
3949
|
+
slidesBefore = (isLoop ? slidesPerView : slidesPerGroup) + addSlidesBefore;
|
|
3950
|
+
}
|
|
3951
|
+
let from = activeIndex - slidesBefore;
|
|
3952
|
+
let to = activeIndex + slidesAfter;
|
|
3953
|
+
if (!isLoop) {
|
|
3954
|
+
from = Math.max(from, 0);
|
|
3955
|
+
to = Math.min(to, slides.length - 1);
|
|
3956
|
+
}
|
|
3957
|
+
let offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
|
|
3958
|
+
if (isLoop && activeIndex >= slidesBefore) {
|
|
3959
|
+
from -= slidesBefore;
|
|
3960
|
+
if (!centeredSlides) offset += swiper.slidesGrid[0];
|
|
3961
|
+
} else if (isLoop && activeIndex < slidesBefore) {
|
|
3962
|
+
from = -slidesBefore;
|
|
3963
|
+
if (centeredSlides) offset += swiper.slidesGrid[0];
|
|
3964
|
+
}
|
|
3965
|
+
Object.assign(swiper.virtual, {
|
|
3966
|
+
from,
|
|
3967
|
+
to,
|
|
3968
|
+
offset,
|
|
3969
|
+
slidesGrid: swiper.slidesGrid,
|
|
3970
|
+
slidesBefore,
|
|
3971
|
+
slidesAfter
|
|
3972
|
+
});
|
|
3973
|
+
function onRendered() {
|
|
3974
|
+
swiper.updateSlides();
|
|
3975
|
+
swiper.updateProgress();
|
|
3976
|
+
swiper.updateSlidesClasses();
|
|
3977
|
+
emit('virtualUpdate');
|
|
3978
|
+
}
|
|
3979
|
+
if (previousFrom === from && previousTo === to && !force) {
|
|
3980
|
+
if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
|
|
3981
|
+
swiper.slides.forEach(slideEl => {
|
|
3982
|
+
slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
|
|
3983
|
+
});
|
|
3984
|
+
}
|
|
3985
|
+
swiper.updateProgress();
|
|
3986
|
+
emit('virtualUpdate');
|
|
3987
|
+
return;
|
|
3988
|
+
}
|
|
3989
|
+
if (swiper.params.virtual.renderExternal) {
|
|
3990
|
+
swiper.params.virtual.renderExternal.call(swiper, {
|
|
3991
|
+
offset,
|
|
3992
|
+
from,
|
|
3993
|
+
to,
|
|
3994
|
+
slides: function getSlides() {
|
|
3995
|
+
const slidesToRender = [];
|
|
3996
|
+
for (let i = from; i <= to; i += 1) {
|
|
3997
|
+
slidesToRender.push(slides[i]);
|
|
3998
|
+
}
|
|
3999
|
+
return slidesToRender;
|
|
4000
|
+
}()
|
|
4001
|
+
});
|
|
4002
|
+
if (swiper.params.virtual.renderExternalUpdate) {
|
|
4003
|
+
onRendered();
|
|
4004
|
+
} else {
|
|
4005
|
+
emit('virtualUpdate');
|
|
4006
|
+
}
|
|
4007
|
+
return;
|
|
4008
|
+
}
|
|
4009
|
+
const prependIndexes = [];
|
|
4010
|
+
const appendIndexes = [];
|
|
4011
|
+
const getSlideIndex = index => {
|
|
4012
|
+
let slideIndex = index;
|
|
4013
|
+
if (index < 0) {
|
|
4014
|
+
slideIndex = slides.length + index;
|
|
4015
|
+
} else if (slideIndex >= slides.length) {
|
|
4016
|
+
// eslint-disable-next-line
|
|
4017
|
+
slideIndex = slideIndex - slides.length;
|
|
4018
|
+
}
|
|
4019
|
+
return slideIndex;
|
|
4020
|
+
};
|
|
4021
|
+
if (force) {
|
|
4022
|
+
swiper.slidesEl.querySelectorAll(`.${swiper.params.slideClass}, swiper-slide`).forEach(slideEl => {
|
|
4023
|
+
slideEl.remove();
|
|
4024
|
+
});
|
|
4025
|
+
} else {
|
|
4026
|
+
for (let i = previousFrom; i <= previousTo; i += 1) {
|
|
4027
|
+
if (i < from || i > to) {
|
|
4028
|
+
const slideIndex = getSlideIndex(i);
|
|
4029
|
+
swiper.slidesEl.querySelectorAll(`.${swiper.params.slideClass}[data-swiper-slide-index="${slideIndex}"], swiper-slide[data-swiper-slide-index="${slideIndex}"]`).forEach(slideEl => {
|
|
4030
|
+
slideEl.remove();
|
|
4031
|
+
});
|
|
4032
|
+
}
|
|
4033
|
+
}
|
|
4034
|
+
}
|
|
4035
|
+
const loopFrom = isLoop ? -slides.length : 0;
|
|
4036
|
+
const loopTo = isLoop ? slides.length * 2 : slides.length;
|
|
4037
|
+
for (let i = loopFrom; i < loopTo; i += 1) {
|
|
4038
|
+
if (i >= from && i <= to) {
|
|
4039
|
+
const slideIndex = getSlideIndex(i);
|
|
4040
|
+
if (typeof previousTo === 'undefined' || force) {
|
|
4041
|
+
appendIndexes.push(slideIndex);
|
|
4042
|
+
} else {
|
|
4043
|
+
if (i > previousTo) appendIndexes.push(slideIndex);
|
|
4044
|
+
if (i < previousFrom) prependIndexes.push(slideIndex);
|
|
4045
|
+
}
|
|
4046
|
+
}
|
|
4047
|
+
}
|
|
4048
|
+
appendIndexes.forEach(index => {
|
|
4049
|
+
swiper.slidesEl.append(renderSlide(slides[index], index));
|
|
4050
|
+
});
|
|
4051
|
+
if (isLoop) {
|
|
4052
|
+
for (let i = prependIndexes.length - 1; i >= 0; i -= 1) {
|
|
4053
|
+
const index = prependIndexes[i];
|
|
4054
|
+
swiper.slidesEl.prepend(renderSlide(slides[index], index));
|
|
4055
|
+
}
|
|
4056
|
+
} else {
|
|
4057
|
+
prependIndexes.sort((a, b) => b - a);
|
|
4058
|
+
prependIndexes.forEach(index => {
|
|
4059
|
+
swiper.slidesEl.prepend(renderSlide(slides[index], index));
|
|
4060
|
+
});
|
|
4061
|
+
}
|
|
4062
|
+
elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(slideEl => {
|
|
4063
|
+
slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
|
|
4064
|
+
});
|
|
4065
|
+
onRendered();
|
|
4066
|
+
}
|
|
4067
|
+
function appendSlide(slides) {
|
|
4068
|
+
if (typeof slides === 'object' && 'length' in slides) {
|
|
4069
|
+
for (let i = 0; i < slides.length; i += 1) {
|
|
4070
|
+
if (slides[i]) swiper.virtual.slides.push(slides[i]);
|
|
4071
|
+
}
|
|
4072
|
+
} else {
|
|
4073
|
+
swiper.virtual.slides.push(slides);
|
|
4074
|
+
}
|
|
4075
|
+
update(true);
|
|
4076
|
+
}
|
|
4077
|
+
function prependSlide(slides) {
|
|
4078
|
+
const activeIndex = swiper.activeIndex;
|
|
4079
|
+
let newActiveIndex = activeIndex + 1;
|
|
4080
|
+
let numberOfNewSlides = 1;
|
|
4081
|
+
if (Array.isArray(slides)) {
|
|
4082
|
+
for (let i = 0; i < slides.length; i += 1) {
|
|
4083
|
+
if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
|
|
4084
|
+
}
|
|
4085
|
+
newActiveIndex = activeIndex + slides.length;
|
|
4086
|
+
numberOfNewSlides = slides.length;
|
|
4087
|
+
} else {
|
|
4088
|
+
swiper.virtual.slides.unshift(slides);
|
|
4089
|
+
}
|
|
4090
|
+
if (swiper.params.virtual.cache) {
|
|
4091
|
+
const cache = swiper.virtual.cache;
|
|
4092
|
+
const newCache = {};
|
|
4093
|
+
Object.keys(cache).forEach(cachedIndex => {
|
|
4094
|
+
const cachedEl = cache[cachedIndex];
|
|
4095
|
+
const cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');
|
|
4096
|
+
if (cachedElIndex) {
|
|
4097
|
+
cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
|
|
4098
|
+
}
|
|
4099
|
+
newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;
|
|
4100
|
+
});
|
|
4101
|
+
swiper.virtual.cache = newCache;
|
|
4102
|
+
}
|
|
4103
|
+
update(true);
|
|
4104
|
+
swiper.slideTo(newActiveIndex, 0);
|
|
4105
|
+
}
|
|
4106
|
+
function removeSlide(slidesIndexes) {
|
|
4107
|
+
if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
|
|
4108
|
+
let activeIndex = swiper.activeIndex;
|
|
4109
|
+
if (Array.isArray(slidesIndexes)) {
|
|
4110
|
+
for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
|
|
4111
|
+
swiper.virtual.slides.splice(slidesIndexes[i], 1);
|
|
4112
|
+
if (swiper.params.virtual.cache) {
|
|
4113
|
+
delete swiper.virtual.cache[slidesIndexes[i]];
|
|
4114
|
+
}
|
|
4115
|
+
if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
|
|
4116
|
+
activeIndex = Math.max(activeIndex, 0);
|
|
4117
|
+
}
|
|
4118
|
+
} else {
|
|
4119
|
+
swiper.virtual.slides.splice(slidesIndexes, 1);
|
|
4120
|
+
if (swiper.params.virtual.cache) {
|
|
4121
|
+
delete swiper.virtual.cache[slidesIndexes];
|
|
4122
|
+
}
|
|
4123
|
+
if (slidesIndexes < activeIndex) activeIndex -= 1;
|
|
4124
|
+
activeIndex = Math.max(activeIndex, 0);
|
|
4125
|
+
}
|
|
4126
|
+
update(true);
|
|
4127
|
+
swiper.slideTo(activeIndex, 0);
|
|
4128
|
+
}
|
|
4129
|
+
function removeAllSlides() {
|
|
4130
|
+
swiper.virtual.slides = [];
|
|
4131
|
+
if (swiper.params.virtual.cache) {
|
|
4132
|
+
swiper.virtual.cache = {};
|
|
4133
|
+
}
|
|
4134
|
+
update(true);
|
|
4135
|
+
swiper.slideTo(0, 0);
|
|
4136
|
+
}
|
|
4137
|
+
on('beforeInit', () => {
|
|
4138
|
+
if (!swiper.params.virtual.enabled) return;
|
|
4139
|
+
let domSlidesAssigned;
|
|
4140
|
+
if (typeof swiper.passedParams.virtual.slides === 'undefined') {
|
|
4141
|
+
const slides = [...swiper.slidesEl.children].filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`));
|
|
4142
|
+
if (slides && slides.length) {
|
|
4143
|
+
swiper.virtual.slides = [...slides];
|
|
4144
|
+
domSlidesAssigned = true;
|
|
4145
|
+
slides.forEach((slideEl, slideIndex) => {
|
|
4146
|
+
slideEl.setAttribute('data-swiper-slide-index', slideIndex);
|
|
4147
|
+
swiper.virtual.cache[slideIndex] = slideEl;
|
|
4148
|
+
slideEl.remove();
|
|
4149
|
+
});
|
|
4150
|
+
}
|
|
4151
|
+
}
|
|
4152
|
+
if (!domSlidesAssigned) {
|
|
4153
|
+
swiper.virtual.slides = swiper.params.virtual.slides;
|
|
4154
|
+
}
|
|
4155
|
+
swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
|
|
4156
|
+
swiper.params.watchSlidesProgress = true;
|
|
4157
|
+
swiper.originalParams.watchSlidesProgress = true;
|
|
4158
|
+
if (!swiper.params.initialSlide) {
|
|
4159
|
+
update();
|
|
4160
|
+
}
|
|
4161
|
+
});
|
|
4162
|
+
on('setTranslate', () => {
|
|
4163
|
+
if (!swiper.params.virtual.enabled) return;
|
|
4164
|
+
if (swiper.params.cssMode && !swiper._immediateVirtual) {
|
|
4165
|
+
clearTimeout(cssModeTimeout);
|
|
4166
|
+
cssModeTimeout = setTimeout(() => {
|
|
4167
|
+
update();
|
|
4168
|
+
}, 100);
|
|
4169
|
+
} else {
|
|
4170
|
+
update();
|
|
4171
|
+
}
|
|
4172
|
+
});
|
|
4173
|
+
on('init update resize', () => {
|
|
4174
|
+
if (!swiper.params.virtual.enabled) return;
|
|
4175
|
+
if (swiper.params.cssMode) {
|
|
4176
|
+
setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
|
|
4177
|
+
}
|
|
4178
|
+
});
|
|
4179
|
+
Object.assign(swiper.virtual, {
|
|
4180
|
+
appendSlide,
|
|
4181
|
+
prependSlide,
|
|
4182
|
+
removeSlide,
|
|
4183
|
+
removeAllSlides,
|
|
4184
|
+
update
|
|
4185
|
+
});
|
|
4186
|
+
}
|
|
4187
|
+
|
|
3864
4188
|
function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
|
|
3865
4189
|
if (swiper.params.createElements) {
|
|
3866
4190
|
Object.keys(checkProps).forEach(key => {
|
|
@@ -5051,7 +5375,7 @@ const HyHeroCarousel = class {
|
|
|
5051
5375
|
}
|
|
5052
5376
|
componentDidLoad() {
|
|
5053
5377
|
new Swiper(".swiper", {
|
|
5054
|
-
modules: [Navigation, Pagination, A11y, EffectFade],
|
|
5378
|
+
modules: [Navigation, Pagination, A11y, EffectFade, Virtual],
|
|
5055
5379
|
enabled: true,
|
|
5056
5380
|
effect: 'fade',
|
|
5057
5381
|
fadeEffect: {
|
|
@@ -5062,6 +5386,9 @@ const HyHeroCarousel = class {
|
|
|
5062
5386
|
spaceBetween: 50,
|
|
5063
5387
|
virtual: {
|
|
5064
5388
|
enabled: true,
|
|
5389
|
+
cache: true,
|
|
5390
|
+
addSlidesAfter: 0,
|
|
5391
|
+
addSlidesBefore: 0,
|
|
5065
5392
|
},
|
|
5066
5393
|
navigation: {
|
|
5067
5394
|
nextEl: ".swiper-button-next",
|