9 lines
7.0 KiB
JavaScript
9 lines
7.0 KiB
JavaScript
/*!
|
|
App Connect Swiper
|
|
Version: 2.0.0
|
|
(c) 2024 Wappler.io
|
|
@build 2024-04-15 17:48:46
|
|
*/
|
|
dmx.Component("swiper",{initialData:{index:0,total:0,isBeginning:!1,isEnd:!1},attributes:{vertical:{type:Boolean,default:!1},speed:{type:Number,default:300},autoHeight:{type:Boolean,default:!1},effect:{type:String,default:"slide"},initialSlide:{type:Number,default:0},spaceBetween:{type:Number,default:0},slidesPerView:{type:Number,default:1},slidesPerGroup:{type:Number,default:1},spaceBetweenSm:{type:Number,default:void 0},slidesPerViewSm:{type:Number,default:void 0},slidesPerGroupSm:{type:Number,default:void 0},spaceBetweenMd:{type:Number,default:void 0},slidesPerViewMd:{type:Number,default:void 0},slidesPerGroupMd:{type:Number,default:void 0},spaceBetweenLg:{type:Number,default:void 0},slidesPerViewLg:{type:Number,default:void 0},slidesPerGroupLg:{type:Number,default:void 0},spaceBetweenXl:{type:Number,default:void 0},slidesPerViewXl:{type:Number,default:void 0},slidesPerGroupXl:{type:Number,default:void 0},centeredSlides:{type:Boolean,default:!1},slidesOffsetBefore:{type:Number,default:0},slidesOffsetAfter:{type:Number,default:0},grabCursor:{type:Boolean,default:!1},freeMode:{type:Boolean,default:!1},freeModeSticky:{type:Boolean,default:!1},loop:{type:Boolean,default:!1},pagination:{type:String,default:void 0},navigation:{type:Boolean,default:!1},scrollbar:{type:Boolean,default:!1},autoplay:{type:Boolean,default:!1},parallax:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!1},mousewheel:{type:Boolean,default:!1},observer:{type:Boolean,default:!1},dynamicBullets:{type:Boolean,default:!1},rewind:{type:Boolean,default:!1},hashNavigation:{type:Boolean,default:!1},watchState:{type:Boolean,default:!1},slides:{type:[Array,Object,Number],default:!1}},methods:{slideNext(e,t){this._swiper.slideNext(e,t)},slidePrev(e,t){this._swiper.slidePrev(e,t)},slideTo(e,t,s){this._swiper.slideTo(e,t,s)},slideToLoop(e,t,s){this._swiper.slideToLoop(e,t,s)},slideReset(e,t){this._swiper.slideReset(e,t)},slideToClosest(e,t){this._swiper.slideToClosest(e,t)},autoplayStart(){this._swiper.autoplay.start()},autoplayStop(){this._swiper.autoplay.stop()},update(){this._update()}},events:{change:Event,rendered:Event},init(e){this._dynamic=e.hasAttribute("dmx-bind:slides"),this._updateData=this._updateData.bind(this)},render(e){this._template=e.innerHTML,this._container=e,this._container.classList.add("swiper"),this._container.innerHTML="",this._wrapper=document.createElement("div"),this._wrapper.className="swiper-wrapper",this._pagination=document.createElement("div"),this._pagination.className="swiper-pagination",this._buttonPrev=document.createElement("div"),this._buttonPrev.className="swiper-button-prev",this._buttonNext=document.createElement("div"),this._buttonNext.className="swiper-button-next",this._scrollbar=document.createElement("div"),this._scrollbar.className="swiper-scrollbar",this._container.appendChild(this._wrapper),this.props.pagination&&this._container.appendChild(this._pagination),this.props.navigation&&(this._container.appendChild(this._buttonPrev),this._container.appendChild(this._buttonNext)),this.props.scrollbar&&this._container.appendChild(this._scrollbar),this._dynamic?this._renderChildren():(this._wrapper.innerHTML=this._template,this.$parse(this._wrapper)),this._update()},performUpdate(e){e.has("slides")&&this._renderChildren(),e.has("pagination")&&(this.props.pagination?this._container.appendChild(this._pagination):this._pagination.remove()),e.has("navigation")&&(this.props.navigation?(this._container.appendChild(this._buttonPrev),this._container.appendChild(this._buttonNext)):(this._buttonPrev.remove(),this._buttonNext.remove())),e.has("scrollbar")&&(this.props.scrollbar?this._container.appendChild(this._scrollbar):this._scrollbar.remove()),this._update()},destroy(){this._swiper&&this._swiper.destroy()},_renderChildren(){this._wrapper.innerHTML="",this.$destroyChildren();const e=dmx.repeatItems(this.props.slides);if(e.length){const t=document.createElement("div");t.innerHTML=this._template;const s=dmx.Component("repeat-item"),i=document.createDocumentFragment();for(let r=0;r<e.length;r++){const a=new s(t.cloneNode(!0),this,e[r]);a.$nodes.forEach((e=>{i.appendChild(e),a.$parse(e)})),this.children.push(a)}this._wrapper.appendChild(i)}},_update(){this._swiper&&this._swiper.destroy();const e={direction:this.props.vertical?"vertical":"horizontal",speed:this.props.speed,autoHeight:this.props.autoHeight,effect:this.props.effect,spaceBetween:this.props.spaceBetween,slidesPerView:this.props.slidesPerView,slidesPerGroup:this.props.slidesPerGroup,centeredSlides:this.props.centeredSlides,slidesOffsetBefore:this.props.slidesOffsetBefore,slidesOffsetAfter:this.props.slidesOffsetAfter,grabCursor:this.props.grabCursor,freeMode:{enabled:this.props.freeMode,sticky:this.props.freeModeSticky},loop:this.props.loop,loopFillGroupWithBlank:this.props.loopFillGroupWithBlank,pagination:{el:this.props.pagination?".swiper-pagination":null,type:this.props.pagination,clickable:!0,dynamicBullets:this.props.dynamicBullets},navigation:{prevEl:this.props.navigation?".swiper-button-prev":null,nextEl:this.props.navigation?".swiper-button-next":null},scrollbar:{el:this.props.scrollbar?".swiper-scrollbar":null,draggable:!0,snapOnRelease:!0},autoplay:this.props.autoplay,parallax:this.props.parallax,keyboard:this.props.keyboard,mousewheel:this.props.mousewheel,breakpointsInverse:!0,breakpoints:{},observer:this.props.observer,observeParents:this.props.observer,rewind:this.props.rewind,hashNavigation:{enabled:this.props.hashNavigation,watchState:this.props.watchState},initialSlide:this.props.initialSlide,eventsPrefix:""};this._spaceBetween=this.props.spaceBetween,this._slidesPerView=this.props.slidesPerView,this._slidesPerGroup=this.props.slidesPerGroup,e.breakpoints[576]=this._getBreakpointProps("Sm"),e.breakpoints[768]=this._getBreakpointProps("Md"),e.breakpoints[992]=this._getBreakpointProps("Lg"),e.breakpoints[1200]=this._getBreakpointProps("Xl"),window.__WAPPLER__&&(e.simulateTouch=!1),this._swiper=new Swiper(this._container,e),this._swiper.on("realIndexChange",this._updateData),this._swiper.on("observerUpdate",this._updateData),this._swiper.on("slideChange",this._updateData),this._swiper.on("slideChange",this.dispatchEvent.bind(this,"change")),this._updateData(),this.dispatchEvent("rendered"),requestAnimationFrame((()=>{this._swiper.updateSize()}))},_getBreakpointProps(e){return null!=this.props["spaceBetween"+e]&&(this._spaceBetween=this.props["spaceBetween"+e]),null!=this.props["slidesPerView"+e]&&(this._slidesPerView=this.props["slidesPerView"+e]),null!=this.props["slidesPerGroup"+e]&&(this._slidesPerGroup=this.props["slidesPerGroup"+e]),{spaceBetween:this._spaceBetween,slidesPerView:this._slidesPerView,slidesPerGroup:this._slidesPerGroup}},_updateData:function(){if(this._swiper&&!this._swiper.destroyed){var e=this._swiper.slides.length;this.set("index",e>0?this._swiper.realIndex%e:0),this.set("total",e),this.set("isBeginning",this._swiper.isBeginning),this.set("isEnd",this._swiper.isEnd)}}});
|
|
//# sourceMappingURL=dmxSwiper.js.map
|