@salla.sa/twilight-components
Version:
Salla Web Component
623 lines (619 loc) • 41.7 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { a as KeyBoardArrowRightIcon, K as KeyBoardArrowLeftIcon } from './keyboard_arrow_left.js';
const sallaSliderCss = "@font-face{font-family:\"swiper-icons\";src:url(\"data:application/font-woff;charset=utf-8;base64, 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\") format(\"woff\");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{-ms-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0)}.swiper-pointer-events{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-pointer-events.swiper-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-slide{-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{-ms-flex-align:start;align-items:flex-start;-webkit-transition-property:height, -webkit-transform;transition-property:height, -webkit-transform;transition-property:transform, height;transition-property:transform, height, -webkit-transform}.swiper-backface-hidden .swiper-slide{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{-webkit-perspective:1200px;perspective:1200px}.swiper-3d .swiper-wrapper,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{-webkit-scroll-snap-type:y mandatory;-ms-scroll-snap-type:y mandatory;scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:\"\";-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:9999;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-start:var(--swiper-centered-offset-before);margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{-webkit-margin-before:var(--swiper-centered-offset-before);margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}:root{}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms opacity;transition:300ms opacity;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transform:scale(0.33);transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{-webkit-transform:scale(1);transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{-webkit-transform:scale(0.66);transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{-webkit-transform:scale(0.33);transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;-webkit-box-shadow:none;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0px, -50%, 0);transform:translate3d(0px, -50%, 0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;-webkit-transition:200ms top, 200ms -webkit-transform;transition:200ms top, 200ms -webkit-transform;transition:200ms transform, 200ms top;transition:200ms transform, 200ms top, 200ms -webkit-transform}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms left, 200ms -webkit-transform;transition:200ms left, 200ms -webkit-transform;transition:200ms transform, 200ms left;transition:200ms transform, 200ms left, 200ms -webkit-transform}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{-webkit-transition:200ms right, 200ms -webkit-transform;transition:200ms right, 200ms -webkit-transform;transition:200ms transform, 200ms right;transition:200ms transform, 200ms right, 200ms -webkit-transform}.swiper-pagination-progressbar{background:rgba(0, 0, 0, 0.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{-webkit-transform-origin:right top;transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}:root{--swiper-navigation-size:44px;}.swiper-button-prev,.swiper-button-next{position:absolute;top:50%;width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size) / 2);z-index:10;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none !important}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:\"prev\"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:\"next\"}.swiper-button-lock{display:none}";
const SallaSlider = /*@__PURE__*/ proxyCustomElement(class SallaSlider extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.afterInit = createEvent(this, "afterInit", 7);
this.slideChange = createEvent(this, "slideChange", 7);
this.reachBeginning = createEvent(this, "reachBeginning", 7);
this.reachEnd = createEvent(this, "reachEnd", 7);
this.slideChangeTransitionEnd = createEvent(this, "slideChangeTransitionEnd", 7);
this.slideChangeTransitionStart = createEvent(this, "slideChangeTransitionStart", 7);
this.slideNextTransitionEnd = createEvent(this, "slideNextTransitionEnd", 7);
this.slideNextTransitionStart = createEvent(this, "slideNextTransitionStart", 7);
this.slidePrevTransitionEnd = createEvent(this, "slidePrevTransitionEnd", 7);
this.slidePrevTransitionStart = createEvent(this, "slidePrevTransitionStart", 7);
this.sliderMove = createEvent(this, "sliderMove", 7);
this.touchSliderEnd = createEvent(this, "touchSliderEnd", 7);
this.touchSliderMove = createEvent(this, "touchSliderMove", 7);
this.touchSliderStart = createEvent(this, "touchSliderStart", 7);
this.sliderTransitionEnd = createEvent(this, "sliderTransitionEnd", 7);
this.sliderTransitionStart = createEvent(this, "sliderTransitionStart", 7);
/**
* Show/hide slider block title
*/
this.blockTitle = '';
/**
* Enable call a specific slide by index from thumbnails option in `salla-slider-options` component, works only if `data-img-id` and `data-slid-index` attributes are set on each slide
*/
this.listenToThumbnailsOption = false;
/**
* Show/hide slider block sub title
*/
this.blockSubtitle = '';
/**
* Show/hide display all button beside arrows
*/
this.displayAllUrl = '';
/**
* Show/hide display all button beside arrows
*/
this.arrowsCentered = false;
/**
* Vertical or Horizontal thumbs slider
*/
this.verticalThumbs = false;
/**
* Disable thumbs slider and show it as a grid
*/
this.gridThumbs = false;
/**
* Vertical or Horizontal main slider
*/
this.vertical = false;
/**
* Auto Height slider
*/
this.autoHeight = false;
/**
* Show/hide arrows
*/
this.showControls = true;
/**
* Show/hide arrows
*/
this.controlsOuter = false;
/**
* Show/hide thumbs slider arrows
*/
this.showThumbsControls = true;
/**
* Enable autoplay - working with `type="carousel" only`
*/
this.autoPlay = false;
/**
* slidesPerView
*/
this.slidesPerView = "auto";
/**
* Enable pagination
*/
this.pagination = false;
/**
* Enable center mode - working with `type="carousel" only`
*/
this.centered = false;
/**
* Run slider in loop, Don't use it for slides with custom components inside it, because it may cause re-render issue
*/
this.loop = false;
/**
* Set the type of the slider
* Default: ''
*/
this.type = '';
// States
this.currentIndex = undefined;
this.isEnd = false;
this.isBeginning = true;
this.windowWidth = window.innerWidth;
this.hasThumbSlot = false;
this.pre_defined_config = {
carousel: {
speed: 300,
slidesPerView: 'auto',
spaceBetween: 0,
},
fullwidth: {
speed: 750,
parallax: true,
},
fullscreen: {
speed: 1000,
parallax: true,
direction: "vertical",
followFinger: false,
touchReleaseOnEdges: true,
lazy: true,
mousewheel: {}
},
testimonials: {
draggable: true,
slidesPerView: 1,
breakpoints: { 1024: { slidesPerView: 2 } }
},
blog: {
parallax: true,
speed: 800,
loop: true,
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 30,
breakpoints: {
320: { spaceBetween: 10 },
768: { spaceBetween: 15 },
980: { paceBetween: 30 },
}
},
thumbs: {
slidesPerView: 1,
spaceBetween: 30
}
};
this.direction = this.direction || document.documentElement.dir;
}
// Methods
/**
* Returns the Swiper instance to allow direct manipulation
* @returns The Swiper slider instance
*/
async sliderInstance() {
return this.slider;
}
/**
* Run transition to the slide with index number equal to 'index' parameter for the duration equal to 'speed' parameter.
*
* @param {number} index - Index number of slide.
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slideTo(index, speed, runCallbacks) {
return this.slider.slideTo(index, speed, runCallbacks);
}
/**
* Run transition to the next slide.
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slideNext(speed, runCallbacks) {
var _a;
(_a = this.slider) === null || _a === void 0 ? void 0 : _a.slideNext(speed, runCallbacks);
}
/**
* Run transition to the previous slide.
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slidePrev(speed, runCallbacks) {
var _a;
(_a = this.slider) === null || _a === void 0 ? void 0 : _a.slidePrev(speed, runCallbacks);
}
/**
* Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slideToLoop(index, speed, runCallbacks) {
this.slider.slideToLoop(index, speed, runCallbacks);
}
/**
* Does the same as .slideNext but for the case when used with enabled loop. So this method will slide to next slide with realIndex matching to next index
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slideNextLoop(speed, runCallbacks) {
this.slider.slideNextLoop(speed, runCallbacks);
}
/**
* Does the same as .slidePrev but for the case when used with enabled loop. So this method will slide to previous slide with realIndex matching to previous index
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slidePrevLoop(speed, runCallbacks) {
this.slider.slidePrevLoop(speed, runCallbacks);
}
/**
* Reset slider position to currently active slide for the duration equal to 'speed' parameter.
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slideReset(speed, runCallbacks) {
this.slider.slideReset(speed, runCallbacks);
}
/**
* Reset slider position to closest slide/snap point for the duration equal to 'speed' parameter.
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async slideToClosest(speed, runCallbacks) {
this.slider.slideToClosest(speed, runCallbacks);
}
/**
* You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper This method also includes subcall of the following methods which you can use separately:
* **/
async update() {
this.slider.update();
}
/**
* Force slider to update its height (when autoHeight enabled) for the duration equal to 'speed' parameter
* @param {number} speed - Transition duration (in ms).
* **/
async updateAutoHeight(speed) {
this.slider.updateAutoHeight(speed);
}
/**
* recalculate number of slides and their offsets. Useful after you add/remove slides with JavaScript
* **/
async updateSlides() {
this.slider.updateSlides();
}
/**
* recalculate slider progress
* **/
async updateProgress() {
this.slider.updateProgress();
}
/**
* update active/prev/next classes on slides and bullets
* **/
async updateSlidesClasses() {
this.slider.updateSlidesClasses();
}
/**
* Get slider slides
* **/
async getSlides() {
var _a;
return await ((_a = this.slider) === null || _a === void 0 ? void 0 : _a.slides);
}
/**
* Get slider slides
* **/
async updateSize() {
return await this.slider.updateSize();
}
/**
* Get thumbs slider update
* **/
async sliderInit() {
return await this.slider.init();
}
/**
* Get thumbs slider slides
* **/
async thumbsSliderInstance() {
return await this.thumbsSlider;
}
/**
* Get thumbs slider update
* **/
async thumbsSliderInit() {
return await this.thumbsSlider.init();
}
/**
* Get thumbs slider update
* **/
async thumbsSliderUpdate() {
return await this.thumbsSlider.update();
}
/**
* Get thumbs slider updateSlides
* **/
async thumbsSliderUpdateSlides() {
return await this.thumbsSlider.updateSlides();
}
/**
* Get thumbs slider updateSize
* **/
async getThumbsUpdateSize() {
var _a;
return await ((_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.updateSize());
}
/**
* Does the same as .slideTo but for the case when used with enabled loop. So this method will slide to slides with realIndex matching to passed index
*
* @param {number} speed - Transition duration (in ms).
* @param {boolean} runCallbacks - Set it to false (by default it is true) and transition will not produce transition events.
* **/
async thumbsSlideTo(index, speed, runCallbacks) {
return this.thumbsSlider.slideTo(index, speed, runCallbacks);
}
/**
* Get thumbs slider slides
* **/
async getThumbsSlides() {
var _a;
return await ((_a = this.thumbsSlider) === null || _a === void 0 ? void 0 : _a.slides);
}
componentWillLoad() {
salla.lang.onLoaded(() => {
this.displayAllTitle = salla.lang.get('blocks.home.display_all');
});
this.hasThumbSlot = !!this.host.querySelector('[slot="thumbs"]');
if (this.listenToThumbnailsOption) {
salla.event.on('product-options::change', data => {
var _a;
if (data.option.type == 'thumbnail') {
const slideIndex = (_a = this.sliderWrapper.querySelector(`[data-img-id="${data.detail.option_value}"]`)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-slid-index');
slideIndex ? this.slideTo(parseInt(slideIndex), 300, false) : '';
}
});
}
return new Promise((resolve, reject) => {
// @ts-ignore
if (typeof Swiper !== 'undefined') {
return resolve(true);
}
if (document.getElementById('swiper-script')) {
let interval = setInterval(() => {
// @ts-ignore
if (typeof Swiper !== 'undefined') {
clearInterval(interval);
resolve(true);
}
}, 5);
}
else {
// ? There is an issue with stencil bundling it breaks the swiper import, so we need to import it manually by swiperjs rerendered file
// ! IT'S NOT A GOOD SOLUTION, BUT IT WORKS, WE NEED TO FIND A BETTER SOLUTION
this.swiperScript = document.createElement('script');
this.swiperScript.onload = () => {
resolve(true);
salla.event.emit('swiper::loaded');
};
this.swiperScript.onerror = (error) => {
salla.logger.warn('failed load swiper bundle', error);
reject(true);
};
this.swiperScript.src = 'https://cdn.salla.network/js/swiper@8.js';
this.swiperScript.setAttribute('id', 'swiper-script');
document.body.appendChild(this.swiperScript);
}
});
}
getSwiperConfig() {
let autoplay = this.autoPlay;
if (autoplay && typeof autoplay !== 'object') {
autoplay = { delay: 10000 };
}
let pre_defined_config = {
loop: this.loop,
autoplay,
centeredSlides: this.centered,
slidesPerView: this.slidesPerView,
autoHeight: this.autoHeight,
lazy: true,
on: {
// todo:: find better way for this workaround to show lazyLoad for duplicated slides, because it clones the slide after it's already rendered,
// then it re appended it as is,in this case the image is loaded but class not added.
afterInit: (slider) => {
var _a;
this.afterInit.emit(slider);
(_a = document.lazyLoadInstance) === null || _a === void 0 ? void 0 : _a.update();
this.loop && slider.slides.map(slide => {
if (!slide.classList.contains('swiper-slide-duplicate')) {
return;
}
slide.querySelectorAll('img.lazy:not(.loaded)').forEach(img => img.classList.add('loaded'));
});
},
},
pagination: this.pagination ? {
el: this.host.id ? `#${this.host.id} .swiper-pagination` : '',
clickable: true,
} : false,
navigation: this.showControls ? {
nextEl: this.host.id ? `#${this.host.id} .s-slider-next` : '',
prevEl: this.host.id ? `#${this.host.id} .s-slider-prev` : ''
} : false,
breakpoints: {
768: {
direction: this.vertical ? "vertical" : "horizontal",
},
},
};
let pre_defined_thumbs_config = {
freeMode: false,
watchSlidesProgress: true,
slidesPerView: 4,
spaceBetween: 10,
watchOverflow: true,
watchSlidesVisibility: true,
breakpoints: {
768: {
direction: this.verticalThumbs ? "vertical" : "horizontal",
spaceBetween: 16,
},
},
navigation: this.showThumbsControls ? {
nextEl: this.host.id ? `#${this.host.id} .s-slider-thumbs-next` : '',
prevEl: this.host.id ? `#${this.host.id} .s-slider-thumbs-prev` : ''
} : false,
};
this.pre_defined_config.fullscreen.mousewheel = {
releaseOnEdges: this.host.querySelectorAll('.swiper-slide').length > 1 ? false : true
},
pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (this.pre_defined_config[this.type] || {}));
if (this.type == 'thumbs' && this.thumbsSliderWrapper) {
for (const slide of this.thumbsSliderWrapper.children) {
//todo:: use `s-slider-slide`
slide.classList.add('swiper-slide');
}
if (this.hasThumbSlot && this.thumbsConfig) {
try {
pre_defined_thumbs_config = Object.assign(Object.assign({}, pre_defined_thumbs_config), (typeof this.thumbsConfig === 'string' ? JSON.parse(this.thumbsConfig) : this.thumbsConfig));
}
catch (error) {
salla.logger.warn('Failed to parse thumbs slider config:', error);
}
}
// @ts-ignore
this.thumbsSlider = new Swiper(this.thumbsSliderContainer, pre_defined_thumbs_config);
// @ts-ignore
pre_defined_config.thumbs = {
swiper: this.thumbsSlider,
};
}
pre_defined_config = Object.assign({}, pre_defined_config);
if (this.sliderConfig) {
try {
pre_defined_config = Object.assign(Object.assign({}, pre_defined_config), (typeof this.sliderConfig === 'string' ? JSON.parse(this.sliderConfig) : this.sliderConfig));
}
catch (error) {
salla.logger.warn('Failed to parse slider config:', error);
}
}
return pre_defined_config;
}
getThumbsDirection() {
const { verticalThumbs, windowWidth, direction } = this;
if (verticalThumbs && windowWidth < 768 && direction === 'rtl') {
return 'rtl';
}
if (verticalThumbs && windowWidth > 768 && direction === 'rtl') {
return 'ltr';
}
return direction;
}
initSlider() {
for (const slide of this.sliderWrapper.children) {
slide.classList.add('swiper-slide');
}
// @ts-ignore
this.slider = new Swiper(this.sliderContainer, this.getSwiperConfig());
// Expose slider events
this.slider.on('slideChange', (slider) => {
//todo:: it doesn't change when loop is active, always will be false
this.isBeginning = slider.isBeginning;
this.isEnd = slider.isEnd;
this.slideChange.emit(slider);
});
this.slider.on('reachBeginning', (slider) => this.reachBeginning.emit(slider));
this.slider.on('reachEnd', (slider) => this.reachEnd.emit(slider));
this.slider.on('slideChangeTransitionEnd', (slider) => {
if (this.type == "fullscreen") {
const activeIndex = slider.activeIndex;
slider.params.mousewheel.releaseOnEdges = activeIndex === 0 || (activeIndex === slider.slides.length - 1);
}
this.slideChangeTransitionEnd.emit(slider);
});
this.slider.on('slideChangeTransitionStart', (slider) => this.slideChangeTransitionStart.emit(slider));
this.slider.on('slideNextTransitionEnd', (slider) => this.slideNextTransitionEnd.emit(slider));
this.slider.on('slideNextTransitionStart', (slider) => this.slideNextTransitionStart.emit(slider));
this.slider.on('slidePrevTransitionEnd', (slider) => this.slidePrevTransitionEnd.emit(slider));
this.slider.on('slidePrevTransitionStart', (slider) => this.slidePrevTransitionStart.emit(slider));
this.slider.on('sliderMove', (slider) => this.sliderMove.emit(slider));
this.slider.on('touchEnd', (slider) => this.touchSliderEnd.emit(slider));
this.slider.on('touchMove', (slider) => this.touchSliderMove.emit(slider));
this.slider.on('touchStart', (slider) => this.touchSliderStart.emit(slider));
this.slider.on('transitionEnd', (slider) => this.sliderTransitionEnd.emit(slider));
this.slider.on('transitionStart', (slider) => this.sliderTransitionStart.emit(slider));
}
render() {
let classes = this.type ? this.type + '-slider ' : '';
classes += this.controlsOuter ? ' s-slider-controls-outer ' : '';
classes += this.blockTitle == '' ? ' s-slider-has-notitle s-slider-v-centered ' : '';
classes += this.verticalThumbs ? ' s-slider-vertical ' : ' s-slider-horizontal ';
classes += this.arrowsCentered ? ' s-slider-v-centered ' : '';
classes += this.gridThumbs ? ' s-slider-with-grid-thumbs ' : '';
return (h(Host, { key: 'e3c5b5dc82759698277145f60bd8b4423b0004fe', class: 's-slider-wrapper ' + classes }, this.blockTitle || this.showControls ?
h("div", { class: "s-slider-block__title" }, this.blockTitle ?
h("div", { class: "s-slider-block__title-right" }, h("h2", null, this.blockTitle), this.blockSubtitle ? h("p", { innerHTML: this.blockSubtitle }) : '')
: '', h("div", { class: "s-slider-block__title-left" }, this.displayAllUrl ?
h("a", { href: this.displayAllUrl, class: "s-slider-block__display-all" }, this.displayAllTitle)
: '', this.showControls ?
h("div", { class: "s-slider-block__title-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowRightIcon : KeyBoardArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon })))
: ''))
: '', h("div", { key: '5abf921611209b43651b251e406b9c844f5906c6', class: "swiper s-slider-container", ref: el => this.sliderContainer = el, dir: this.vertical ? "ltr" : this.direction }, h("slot", { key: '3005002ec15db9d71bf96fe8129a851f3e9547ae' }), h("div", { key: '0d6f02fd83396d15517a1a5068c9aa23b2322828', class: "swiper-wrapper s-slider-swiper-wrapper", ref: el => this.sliderWrapper = el }, h("slot", { key: '4461dd880b9231a7fbd67d77d8fbb9829af3b3c8', name: 'items' })), this.pagination ? h("div", { class: "swiper-pagination" }) : ''), this.type == 'thumbs' && this.hasThumbSlot ? h("div", { class: "s-slider-thumbs" }, h("div", { class: "swiper s-slider-thumbs-container", dir: this.getThumbsDirection(), ref: el => this.thumbsSliderContainer = el }, h("div", { class: { "s-slider-swiper-wrapper swiper-wrapper": true, "s-slider-grid-thumbs": this.gridThumbs }, ref: el => this.thumbsSliderWrapper = el }, h("slot", { name: "thumbs" })), this.showThumbsControls ?
h("div", { class: "s-slider-thumbs-nav", dir: "rtl" }, h("button", { "aria-label": "Previous Slide", class: "s-slider-thumbs-prev s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowRightIcon : KeyBoardArrowLeftIcon })), h("button", { "aria-label": "Next Slide", class: "s-slider-thumbs-next s-slider-nav-arrow" }, h("span", { class: "s-slider-button-icon", innerHTML: this.direction == 'rtl' ? KeyBoardArrowLeftIcon : KeyBoardArrowRightIcon })))
: null))
: null));
}
componentDidLoad() {
let itemsSlot = this.sliderWrapper.querySelector('div[slot="items"]');
!!itemsSlot ? itemsSlot.replaceWith(...itemsSlot.children) : null;
if (this.type == 'thumbs' && this.hasThumbSlot) {
let thumbsSlot = this.thumbsSliderWrapper.querySelector('div[slot="thumbs"]');
!!thumbsSlot ? thumbsSlot.replaceWith(...thumbsSlot.children) : null;
}
// if swiper is not loaded, lets relay on event
// @ts-ignore
if (typeof Swiper === 'undefined') {
salla.event.once('swiper::loaded', () => this.initSlider());
}
else { // if swiper is loaded lets init our slider
this.initSlider();
}
}
get host() { return this; }
static get style() { return sallaSliderCss; }
}, [4, "salla-slider", {
"blockTitle": [513, "block-title"],
"listenToThumbnailsOption": [516, "listen-to-thumbnails-option"],
"blockSubtitle": [513, "block-subtitle"],
"displayAllUrl": [513, "display-all-url"],
"arrowsCentered": [516, "arrows-centered"],
"verticalThumbs": [516, "vertical-thumbs"],
"gridThumbs": [516, "grid-thumbs"],
"vertical": [516],
"autoHeight": [516, "auto-height"],
"showControls": [516, "show-controls"],
"controlsOuter": [516, "controls-outer"],
"showThumbsControls": [4, "show-thumbs-controls"],
"autoPlay": [4, "auto-play"],
"slidesPerView": [1, "slides-per-view"],
"pagination": [4],
"centered": [4],
"loop": [4],
"direction": [1537],
"type": [1],
"sliderConfig": [520, "slider-config"],
"thumbsConfig": [520, "thumbs-config"],
"currentIndex": [32],
"isEnd": [32],
"isBeginning": [32],
"swiperScript": [32],
"displayAllTitle": [32],
"windowWidth": [32],
"sliderInstance": [64],
"slideTo": [64],
"slideNext": [64],
"slidePrev": [64],
"slideToLoop": [64],
"slideNextLoop": [64],
"slidePrevLoop": [64],
"slideReset": [64],
"slideToClosest": [64],
"update": [64],
"updateAutoHeight": [64],
"updateSlides": [64],
"updateProgress": [64],
"updateSlidesClasses": [64],
"getSlides": [64],
"updateSize": [64],
"sliderInit": [64],
"thumbsSliderInstance": [64],
"thumbsSliderInit": [64],
"thumbsSliderUpdate": [64],
"thumbsSliderUpdateSlides": [64],
"getThumbsUpdateSize": [64],
"thumbsSlideTo": [64],
"getThumbsSlides": [64]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-slider"];
components.forEach(tagName => { switch (tagName) {
case "salla-slider":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaSlider);
}
break;
} });
}
export { SallaSlider as S, defineCustomElement as d };
//# sourceMappingURL=salla-slider2.js.map
//# sourceMappingURL=salla-slider2.js.map