From 243b23e378a344746d9f6f0502e170ef9504cf78 Mon Sep 17 00:00:00 2001 From: Bartosz Dominiak Date: Mon, 8 Feb 2021 14:26:10 +0100 Subject: [PATCH] bump --- CHANGELOG.md | 11 +++++++++++ dist/vue-snap.esm.js | 2 +- dist/vue-snap.js | 2 +- dist/vue-snap.umd.js | 2 +- examples/vue@2/nuxt/package.json | 2 +- examples/vue@2/vue-cli/package.json | 2 +- package.json | 2 +- 7 files changed, 17 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f67256..a937d14 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [0.7.0] - 2021-08-02 +### Removed +- maxPages and its calculation (#55) + +### Updated +- Replace changeSlide with simpler goToSlide, for consistent behavior with exposed go-to-page API + removal of dependent method that is not in use anymore (#55) +- Split getting current page index from setting it, supporting passing the index from outside, for example goToSlide method, so in some cases the index will change, even if there was no scroll event. (#55) + +### Fixed +- Fix support for calculating a proper current slide index, when there is nothing left to scroll (#55) + ## [0.6.7] - 2021-08-02 ### Added - Go to slide API (#54) diff --git a/dist/vue-snap.esm.js b/dist/vue-snap.esm.js index d472209..a06ec29 100644 --- a/dist/vue-snap.esm.js +++ b/dist/vue-snap.esm.js @@ -1 +1 @@ -import{elementScrollByPolyfill as e}from"seamless-scroll-polyfill/dist/esm/Element.scrollBy";import t from"lodash/debounce";var s=function(e,t,s){return Math.abs(e-t)<=s},i="undefined"==typeof window,r=!i;i||"scrollBehavior"in document.documentElement.style||e();function n(e,t,s,i,r,n,o,a,d,l){"boolean"!=typeof o&&(d=a,a=o,o=!1);const c="function"==typeof s?s.options:s;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),i&&(c._scopeId=i),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),h)if(c.functional){const e=c.render;c.render=function(t,s){return h.call(s),e(t,s)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return s}const o={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,maxPages:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),mounted(){this.calcOnInit(),r&&(this.onResizeFn=t(this.calcOnInit,410),this.onScrollFn=t(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1),this.$on("go-to-page",e=>this.goToSlide(e)))},beforeDestroy(){r&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds(),this.calcMaxPages())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds())},calcBounds(){const e=s(this.currentPos,0,5),t=s(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},calcCurrentPage(){const e=this.slidesWidth.findIndex(e=>s(e.offsetLeft,this.currentPos,5));if(e<0)return;const t=this.currentPage,i=e||0;this.currentPage=i,this.$emit("page",{current:i,previous:t})},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},calcMaxPages(){const e=this.wrapperScrollWidth-this.wrapperVisibleWidth;this.maxPages=this.slidesWidth.findIndex(({offsetLeft:t})=>t>e)-1},calcNextWidth(e){const t=e>0?this.currentPage:this.currentPage+e,s=this.slidesWidth[t].width||0;if(s)return s*e},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){const t=-1===e&&this.boundLeft,s=1===e&&this.boundRight;if(t||s)return;const i=this.calcNextWidth(e);i&&this.$refs.vsWrapper.scrollBy({left:i,behavior:"smooth"})},goToSlide(e){this.slidesWidth[e]&&this.$refs.vsWrapper.scrollTo({left:this.slidesWidth[e].offsetLeft,behavior:"smooth"})}}};var a=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"vs-carousel"},[s(e.tag,{ref:"vsWrapper",tag:"component",staticClass:"vs-carousel__wrapper"},[e._t("default")],2),e._v(" "),e.hideArrows?e._e():e._t("arrows",[s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundLeft,expression:"hideArrowsOnBound ? !boundLeft : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",attrs:{type:"button","aria-label":e.i18n.slideLeft,disabled:e.boundLeft},on:{click:function(t){return e.changeSlide(-1)}}},[e._v("\n ←\n ")]),e._v(" "),s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundRight,expression:"hideArrowsOnBound ? !boundRight : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",attrs:{type:"button","aria-label":e.i18n.slideRight,disabled:e.boundRight},on:{click:function(t){return e.changeSlide(1)}}},[e._v("\n →\n ")])],{changeSlide:e.changeSlide,boundLeft:e.boundLeft,boundRight:e.boundRight})],2)};a._withStripped=!0;const d=n({render:a,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);const l={props:{tag:{type:String,default:"li"}}};var c=function(){var e=this,t=e.$createElement;return(e._self._c||t)(e.tag,{ref:"vsSlide",tag:"component",staticClass:"vs-carousel__slide",attrs:{tabindex:"0"}},[e._t("default")],2)};c._withStripped=!0;const h=n({render:c,staticRenderFns:[]},undefined,l,undefined,false,undefined,!1,void 0,void 0,void 0);var u={install:function(e){e.component("Carousel",d),e.component("Slide",h)}};export default u;export{d as Carousel,h as Slide}; +import{elementScrollByPolyfill as e}from"seamless-scroll-polyfill/dist/esm/Element.scrollBy";import t from"lodash/debounce";var s=function(e,t,s){return Math.abs(e-t)<=s},i="undefined"==typeof window,r=!i;i||"scrollBehavior"in document.documentElement.style||e();function n(e,t,s,i,r,n,o,a,d,l){"boolean"!=typeof o&&(d=a,a=o,o=!1);const c="function"==typeof s?s.options:s;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),i&&(c._scopeId=i),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),h)if(c.functional){const e=c.render;c.render=function(t,s){return h.call(s),e(t,s)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return s}const o={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),mounted(){this.calcOnInit(),r&&(this.onResizeFn=t(this.calcOnInit,410),this.onScrollFn=t(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1),this.$on("go-to-page",e=>this.goToSlide(e)))},beforeDestroy(){r&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.setCurrentPage(),this.calcBounds())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.setCurrentPage(),this.calcBounds())},calcBounds(){const e=s(this.currentPos,0,5),t=s(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},getCurrentPage(){return s(this.currentPos+this.wrapperVisibleWidth,this.wrapperScrollWidth,5)?this.slidesWidth.length-1:this.slidesWidth.findIndex(e=>s(e.offsetLeft,this.currentPos,5))},setCurrentPage(e){const t=void 0!==e?e:this.getCurrentPage();if(t<0)return;const s=this.currentPage,i=t>0?t:0;this.currentPage=i,this.$emit("page",{current:i,previous:s})},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){this.goToSlide(this.currentPage+e)},goToSlide(e){this.slidesWidth[e]&&(this.$refs.vsWrapper.scrollTo({left:this.slidesWidth[e].offsetLeft,behavior:"smooth"}),this.setCurrentPage(e))}}};var a=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"vs-carousel"},[s(e.tag,{ref:"vsWrapper",tag:"component",staticClass:"vs-carousel__wrapper"},[e._t("default")],2),e._v(" "),e.hideArrows?e._e():e._t("arrows",[s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundLeft,expression:"hideArrowsOnBound ? !boundLeft : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",attrs:{type:"button","aria-label":e.i18n.slideLeft,disabled:e.boundLeft},on:{click:function(t){return e.changeSlide(-1)}}},[e._v("\n ←\n ")]),e._v(" "),s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundRight,expression:"hideArrowsOnBound ? !boundRight : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",attrs:{type:"button","aria-label":e.i18n.slideRight,disabled:e.boundRight},on:{click:function(t){return e.changeSlide(1)}}},[e._v("\n →\n ")])],{changeSlide:e.changeSlide,boundLeft:e.boundLeft,boundRight:e.boundRight})],2)};a._withStripped=!0;const d=n({render:a,staticRenderFns:[]},undefined,o,undefined,false,undefined,!1,void 0,void 0,void 0);const l={props:{tag:{type:String,default:"li"}}};var c=function(){var e=this,t=e.$createElement;return(e._self._c||t)(e.tag,{ref:"vsSlide",tag:"component",staticClass:"vs-carousel__slide",attrs:{tabindex:"0"}},[e._t("default")],2)};c._withStripped=!0;const h=n({render:c,staticRenderFns:[]},undefined,l,undefined,false,undefined,!1,void 0,void 0,void 0);var u={install:function(e){e.component("Carousel",d),e.component("Slide",h)}};export default u;export{d as Carousel,h as Slide}; diff --git a/dist/vue-snap.js b/dist/vue-snap.js index e1b82f7..8419e45 100644 --- a/dist/vue-snap.js +++ b/dist/vue-snap.js @@ -1 +1 @@ -var VueSnap=function(t){"use strict";const e=t=>.5*(1-Math.cos(Math.PI*t)),n={_elementScroll:void 0,get elementScroll(){return this._elementScroll||(this._elementScroll=HTMLElement.prototype.scroll||HTMLElement.prototype.scrollTo||function(t,e){this.scrollLeft=t,this.scrollTop=e})},_elementScrollIntoView:void 0,get elementScrollIntoView(){return this._elementScrollIntoView||(this._elementScrollIntoView=HTMLElement.prototype.scrollIntoView)},_windowScroll:void 0,get windowScroll(){return this._windowScroll||(this._windowScroll=window.scroll||window.scrollTo)}},r=()=>{var t,e,n;return null!==(n=null===(e=null===(t=window.performance)||void 0===t?void 0:t.now)||void 0===e?void 0:e.call(t))&&void 0!==n?n:Date.now()},i=t=>{const n=(r()-t.timeStamp)/(t.duration||500);if(n>1)return t.method(t.targetX,t.targetY),void t.callback();const o=(t.timingFunc||e)(n),s=t.startX+(t.targetX-t.startX)*o,l=t.startY+(t.targetY-t.startY)*o;t.method(s,l),t.rafId=requestAnimationFrame(()=>{i(t)})},o=t=>isFinite(t)?Number(t):0,s=t=>{const e=typeof t;return null!==t&&("object"===e||"function"===e)},l=(t,e)=>{const s=o(e.left||0)+t.scrollLeft,l=o(e.top||0)+t.scrollTop;return((t,e)=>{var s,l;const a=n.elementScroll.bind(t);if(void 0===e.left&&void 0===e.top)return;const c=t.scrollLeft,d=t.scrollTop,u=o(null!==(s=e.left)&&void 0!==s?s:c),h=o(null!==(l=e.top)&&void 0!==l?l:d);if("smooth"!==e.behavior)return a(u,h);const f=()=>{window.removeEventListener("wheel",v),window.removeEventListener("touchmove",v)},p={timeStamp:r(),duration:e.duration,startX:c,startY:d,targetX:u,targetY:h,rafId:0,method:a,timingFunc:e.timingFunc,callback:f},v=()=>{cancelAnimationFrame(p.rafId),f()};window.addEventListener("wheel",v,{passive:!0,once:!0}),window.addEventListener("touchmove",v,{passive:!0,once:!0}),i(p)})(t,{...e,left:s,top:l})},a=t=>{var e;"scrollBehavior"in document.documentElement.style||(e=e=>e.scrollBy=function(){if(1===arguments.length){const e=arguments[0];if(!s(e))throw new TypeError("Failed to execute 'scrollBy' on 'Element': parameter 1 ('options') is not an object.");return l(this,{...e,...t})}const e=Number(arguments[0]),n=Number(arguments[1]);return l(this,{left:e,top:n})},[HTMLElement.prototype,SVGElement.prototype,Element.prototype].forEach(t=>e(t)))};var c=function(t,e,n){return Math.abs(t-e)<=n},d="undefined"==typeof window,u=!d;d||"scrollBehavior"in document.documentElement.style||a();var h=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)},f="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},p="object"==typeof f&&f&&f.Object===Object&&f,v="object"==typeof self&&self&&self.Object===Object&&self,m=p||v||Function("return this")(),b=function(){return m.Date.now()},w=m.Symbol,g=Object.prototype,S=g.hasOwnProperty,_=g.toString,y=w?w.toStringTag:void 0;var W=function(t){var e=S.call(t,y),n=t[y];try{t[y]=void 0;var r=!0}catch(t){}var i=_.call(t);return r&&(e?t[y]=n:delete t[y]),i},L=Object.prototype.toString;var O=function(t){return L.call(t)},T=w?w.toStringTag:void 0;var E=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":T&&T in Object(t)?W(t):O(t)};var $=function(t){return null!=t&&"object"==typeof t};var R=function(t){return"symbol"==typeof t||$(t)&&"[object Symbol]"==E(t)},P=/^\s+|\s+$/g,C=/^[-+]0x[0-9a-f]+$/i,F=/^0b[01]+$/i,x=/^0o[0-7]+$/i,j=parseInt;var I=function(t){if("number"==typeof t)return t;if(R(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(P,"");var n=F.test(t);return n||x.test(t)?j(t.slice(2),n?2:8):C.test(t)?NaN:+t},B=Math.max,M=Math.min;var N=function(t,e,n){var r,i,o,s,l,a,c=0,d=!1,u=!1,f=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function p(e){var n=r,o=i;return r=i=void 0,c=e,s=t.apply(o,n)}function v(t){return c=t,l=setTimeout(w,e),d?p(t):s}function m(t){var n=t-a;return void 0===a||n>=e||n<0||u&&t-c>=o}function w(){var t=b();if(m(t))return g(t);l=setTimeout(w,function(t){var n=e-(t-a);return u?M(n,o-(t-c)):n}(t))}function g(t){return l=void 0,f&&r?p(t):(r=i=void 0,s)}function S(){var t=b(),n=m(t);if(r=arguments,i=this,a=t,n){if(void 0===l)return v(a);if(u)return clearTimeout(l),l=setTimeout(w,e),p(a)}return void 0===l&&(l=setTimeout(w,e)),s}return e=I(e)||0,h(n)&&(d=!!n.leading,o=(u="maxWait"in n)?B(I(n.maxWait)||0,e):o,f="trailing"in n?!!n.trailing:f),S.cancel=function(){void 0!==l&&clearTimeout(l),c=0,r=a=i=l=void 0},S.flush=function(){return void 0===l?s:g(b())},S};function V(t,e,n,r,i,o,s,l,a,c){"boolean"!=typeof s&&(a=l,l=s,s=!1);const d="function"==typeof n?n.options:n;let u;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),r&&(d._scopeId=r),o?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=u):e&&(u=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,l(t))}),u)if(d.functional){const t=d.render;d.render=function(e,n){return u.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,u):[u]}return n}const A={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:t=>["slideLeft","slideRight"].every(e=>e in t)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,maxPages:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),mounted(){this.calcOnInit(),u&&(this.onResizeFn=N(this.calcOnInit,410),this.onScrollFn=N(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1),this.$on("go-to-page",t=>this.goToSlide(t)))},beforeDestroy(){u&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds(),this.calcMaxPages())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds())},calcBounds(){const t=c(this.currentPos,0,5),e=c(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);t?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,e?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const t=[...this.$refs.vsWrapper.children];this.slidesWidth=t.map(t=>({offsetLeft:t.offsetLeft,width:t.offsetWidth}))},calcCurrentPage(){const t=this.slidesWidth.findIndex(t=>c(t.offsetLeft,this.currentPos,5));if(t<0)return;const e=this.currentPage,n=t||0;this.currentPage=n,this.$emit("page",{current:n,previous:e})},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},calcMaxPages(){const t=this.wrapperScrollWidth-this.wrapperVisibleWidth;this.maxPages=this.slidesWidth.findIndex(({offsetLeft:e})=>e>t)-1},calcNextWidth(t){const e=t>0?this.currentPage:this.currentPage+t,n=this.slidesWidth[e].width||0;if(n)return n*t},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(t){const e=-1===t&&this.boundLeft,n=1===t&&this.boundRight;if(e||n)return;const r=this.calcNextWidth(t);r&&this.$refs.vsWrapper.scrollBy({left:r,behavior:"smooth"})},goToSlide(t){this.slidesWidth[t]&&this.$refs.vsWrapper.scrollTo({left:this.slidesWidth[t].offsetLeft,behavior:"smooth"})}}};var X=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vs-carousel"},[n(t.tag,{ref:"vsWrapper",tag:"component",staticClass:"vs-carousel__wrapper"},[t._t("default")],2),t._v(" "),t.hideArrows?t._e():t._t("arrows",[n("button",{directives:[{name:"show",rawName:"v-show",value:!t.hideArrowsOnBound||!t.boundLeft,expression:"hideArrowsOnBound ? !boundLeft : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",attrs:{type:"button","aria-label":t.i18n.slideLeft,disabled:t.boundLeft},on:{click:function(e){return t.changeSlide(-1)}}},[t._v("\n ←\n ")]),t._v(" "),n("button",{directives:[{name:"show",rawName:"v-show",value:!t.hideArrowsOnBound||!t.boundRight,expression:"hideArrowsOnBound ? !boundRight : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",attrs:{type:"button","aria-label":t.i18n.slideRight,disabled:t.boundRight},on:{click:function(e){return t.changeSlide(1)}}},[t._v("\n →\n ")])],{changeSlide:t.changeSlide,boundLeft:t.boundLeft,boundRight:t.boundRight})],2)};X._withStripped=!0;const z=V({render:X,staticRenderFns:[]},undefined,A,undefined,false,undefined,!1,void 0,void 0,void 0);const Y={props:{tag:{type:String,default:"li"}}};var k=function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.tag,{ref:"vsSlide",tag:"component",staticClass:"vs-carousel__slide",attrs:{tabindex:"0"}},[t._t("default")],2)};k._withStripped=!0;const D=V({render:k,staticRenderFns:[]},undefined,Y,undefined,false,undefined,!1,void 0,void 0,void 0);var H={install:function(t){t.component("Carousel",z),t.component("Slide",D)}};return t.Carousel=z,t.Slide=D,t.default=H,Object.defineProperty(t,"__esModule",{value:!0}),t}({}); +var VueSnap=function(t){"use strict";const e=t=>.5*(1-Math.cos(Math.PI*t)),n={_elementScroll:void 0,get elementScroll(){return this._elementScroll||(this._elementScroll=HTMLElement.prototype.scroll||HTMLElement.prototype.scrollTo||function(t,e){this.scrollLeft=t,this.scrollTop=e})},_elementScrollIntoView:void 0,get elementScrollIntoView(){return this._elementScrollIntoView||(this._elementScrollIntoView=HTMLElement.prototype.scrollIntoView)},_windowScroll:void 0,get windowScroll(){return this._windowScroll||(this._windowScroll=window.scroll||window.scrollTo)}},r=()=>{var t,e,n;return null!==(n=null===(e=null===(t=window.performance)||void 0===t?void 0:t.now)||void 0===e?void 0:e.call(t))&&void 0!==n?n:Date.now()},i=t=>{const n=(r()-t.timeStamp)/(t.duration||500);if(n>1)return t.method(t.targetX,t.targetY),void t.callback();const o=(t.timingFunc||e)(n),s=t.startX+(t.targetX-t.startX)*o,l=t.startY+(t.targetY-t.startY)*o;t.method(s,l),t.rafId=requestAnimationFrame(()=>{i(t)})},o=t=>isFinite(t)?Number(t):0,s=t=>{const e=typeof t;return null!==t&&("object"===e||"function"===e)},l=(t,e)=>{const s=o(e.left||0)+t.scrollLeft,l=o(e.top||0)+t.scrollTop;return((t,e)=>{var s,l;const a=n.elementScroll.bind(t);if(void 0===e.left&&void 0===e.top)return;const c=t.scrollLeft,d=t.scrollTop,u=o(null!==(s=e.left)&&void 0!==s?s:c),h=o(null!==(l=e.top)&&void 0!==l?l:d);if("smooth"!==e.behavior)return a(u,h);const f=()=>{window.removeEventListener("wheel",v),window.removeEventListener("touchmove",v)},p={timeStamp:r(),duration:e.duration,startX:c,startY:d,targetX:u,targetY:h,rafId:0,method:a,timingFunc:e.timingFunc,callback:f},v=()=>{cancelAnimationFrame(p.rafId),f()};window.addEventListener("wheel",v,{passive:!0,once:!0}),window.addEventListener("touchmove",v,{passive:!0,once:!0}),i(p)})(t,{...e,left:s,top:l})},a=t=>{var e;"scrollBehavior"in document.documentElement.style||(e=e=>e.scrollBy=function(){if(1===arguments.length){const e=arguments[0];if(!s(e))throw new TypeError("Failed to execute 'scrollBy' on 'Element': parameter 1 ('options') is not an object.");return l(this,{...e,...t})}const e=Number(arguments[0]),n=Number(arguments[1]);return l(this,{left:e,top:n})},[HTMLElement.prototype,SVGElement.prototype,Element.prototype].forEach(t=>e(t)))};var c=function(t,e,n){return Math.abs(t-e)<=n},d="undefined"==typeof window,u=!d;d||"scrollBehavior"in document.documentElement.style||a();var h=function(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)},f="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},p="object"==typeof f&&f&&f.Object===Object&&f,v="object"==typeof self&&self&&self.Object===Object&&self,m=p||v||Function("return this")(),b=function(){return m.Date.now()},w=m.Symbol,g=Object.prototype,S=g.hasOwnProperty,_=g.toString,y=w?w.toStringTag:void 0;var W=function(t){var e=S.call(t,y),n=t[y];try{t[y]=void 0;var r=!0}catch(t){}var i=_.call(t);return r&&(e?t[y]=n:delete t[y]),i},L=Object.prototype.toString;var T=function(t){return L.call(t)},O=w?w.toStringTag:void 0;var E=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":O&&O in Object(t)?W(t):T(t)};var $=function(t){return null!=t&&"object"==typeof t};var C=function(t){return"symbol"==typeof t||$(t)&&"[object Symbol]"==E(t)},R=/^\s+|\s+$/g,P=/^[-+]0x[0-9a-f]+$/i,F=/^0b[01]+$/i,j=/^0o[0-7]+$/i,I=parseInt;var B=function(t){if("number"==typeof t)return t;if(C(t))return NaN;if(h(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=h(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(R,"");var n=F.test(t);return n||j.test(t)?I(t.slice(2),n?2:8):P.test(t)?NaN:+t},M=Math.max,V=Math.min;var x=function(t,e,n){var r,i,o,s,l,a,c=0,d=!1,u=!1,f=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function p(e){var n=r,o=i;return r=i=void 0,c=e,s=t.apply(o,n)}function v(t){return c=t,l=setTimeout(w,e),d?p(t):s}function m(t){var n=t-a;return void 0===a||n>=e||n<0||u&&t-c>=o}function w(){var t=b();if(m(t))return g(t);l=setTimeout(w,function(t){var n=e-(t-a);return u?V(n,o-(t-c)):n}(t))}function g(t){return l=void 0,f&&r?p(t):(r=i=void 0,s)}function S(){var t=b(),n=m(t);if(r=arguments,i=this,a=t,n){if(void 0===l)return v(a);if(u)return clearTimeout(l),l=setTimeout(w,e),p(a)}return void 0===l&&(l=setTimeout(w,e)),s}return e=B(e)||0,h(n)&&(d=!!n.leading,o=(u="maxWait"in n)?M(B(n.maxWait)||0,e):o,f="trailing"in n?!!n.trailing:f),S.cancel=function(){void 0!==l&&clearTimeout(l),c=0,r=a=i=l=void 0},S.flush=function(){return void 0===l?s:g(b())},S};function N(t,e,n,r,i,o,s,l,a,c){"boolean"!=typeof s&&(a=l,l=s,s=!1);const d="function"==typeof n?n.options:n;let u;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),r&&(d._scopeId=r),o?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=u):e&&(u=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,l(t))}),u)if(d.functional){const t=d.render;d.render=function(e,n){return u.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,u):[u]}return n}const A={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:t=>["slideLeft","slideRight"].every(e=>e in t)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),mounted(){this.calcOnInit(),u&&(this.onResizeFn=x(this.calcOnInit,410),this.onScrollFn=x(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1),this.$on("go-to-page",t=>this.goToSlide(t)))},beforeDestroy(){u&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.setCurrentPage(),this.calcBounds())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.setCurrentPage(),this.calcBounds())},calcBounds(){const t=c(this.currentPos,0,5),e=c(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);t?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,e?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const t=[...this.$refs.vsWrapper.children];this.slidesWidth=t.map(t=>({offsetLeft:t.offsetLeft,width:t.offsetWidth}))},getCurrentPage(){return c(this.currentPos+this.wrapperVisibleWidth,this.wrapperScrollWidth,5)?this.slidesWidth.length-1:this.slidesWidth.findIndex(t=>c(t.offsetLeft,this.currentPos,5))},setCurrentPage(t){const e=void 0!==t?t:this.getCurrentPage();if(e<0)return;const n=this.currentPage,r=e>0?e:0;this.currentPage=r,this.$emit("page",{current:r,previous:n})},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(t){this.goToSlide(this.currentPage+t)},goToSlide(t){this.slidesWidth[t]&&(this.$refs.vsWrapper.scrollTo({left:this.slidesWidth[t].offsetLeft,behavior:"smooth"}),this.setCurrentPage(t))}}};var X=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vs-carousel"},[n(t.tag,{ref:"vsWrapper",tag:"component",staticClass:"vs-carousel__wrapper"},[t._t("default")],2),t._v(" "),t.hideArrows?t._e():t._t("arrows",[n("button",{directives:[{name:"show",rawName:"v-show",value:!t.hideArrowsOnBound||!t.boundLeft,expression:"hideArrowsOnBound ? !boundLeft : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",attrs:{type:"button","aria-label":t.i18n.slideLeft,disabled:t.boundLeft},on:{click:function(e){return t.changeSlide(-1)}}},[t._v("\n ←\n ")]),t._v(" "),n("button",{directives:[{name:"show",rawName:"v-show",value:!t.hideArrowsOnBound||!t.boundRight,expression:"hideArrowsOnBound ? !boundRight : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",attrs:{type:"button","aria-label":t.i18n.slideRight,disabled:t.boundRight},on:{click:function(e){return t.changeSlide(1)}}},[t._v("\n →\n ")])],{changeSlide:t.changeSlide,boundLeft:t.boundLeft,boundRight:t.boundRight})],2)};X._withStripped=!0;const z=N({render:X,staticRenderFns:[]},undefined,A,undefined,false,undefined,!1,void 0,void 0,void 0);const Y={props:{tag:{type:String,default:"li"}}};var k=function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.tag,{ref:"vsSlide",tag:"component",staticClass:"vs-carousel__slide",attrs:{tabindex:"0"}},[t._t("default")],2)};k._withStripped=!0;const D=N({render:k,staticRenderFns:[]},undefined,Y,undefined,false,undefined,!1,void 0,void 0,void 0);var H={install:function(t){t.component("Carousel",z),t.component("Slide",D)}};return t.Carousel=z,t.Slide=D,t.default=H,Object.defineProperty(t,"__esModule",{value:!0}),t}({}); diff --git a/dist/vue-snap.umd.js b/dist/vue-snap.umd.js index 0aaefc6..b02c12d 100644 --- a/dist/vue-snap.umd.js +++ b/dist/vue-snap.umd.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("seamless-scroll-polyfill/dist/esm/Element.scrollBy"),require("lodash/debounce")):"function"==typeof define&&define.amd?define(["exports","seamless-scroll-polyfill/dist/esm/Element.scrollBy","lodash/debounce"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueSnap={},e.Element_scrollBy,e._.debounce)}(this,(function(e,t,s){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(s),r=function(e,t,s){return Math.abs(e-t)<=s},o="undefined"==typeof window,l=!o;o||"scrollBehavior"in document.documentElement.style||t.elementScrollByPolyfill();function a(e,t,s,i,n,r,o,l,a,d){"boolean"!=typeof o&&(a=l,l=o,o=!1);const c="function"==typeof s?s.options:s;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,n&&(c.functional=!0)),i&&(c._scopeId=i),r?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,a(e)),e&&e._registeredComponents&&e._registeredComponents.add(r)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),h)if(c.functional){const e=c.render;c.render=function(t,s){return h.call(s),e(t,s)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return s}const d={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,maxPages:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),mounted(){this.calcOnInit(),l&&(this.onResizeFn=n.default(this.calcOnInit,410),this.onScrollFn=n.default(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1),this.$on("go-to-page",e=>this.goToSlide(e)))},beforeDestroy(){l&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds(),this.calcMaxPages())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.calcCurrentPage(),this.calcBounds())},calcBounds(){const e=r(this.currentPos,0,5),t=r(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},calcCurrentPage(){const e=this.slidesWidth.findIndex(e=>r(e.offsetLeft,this.currentPos,5));if(e<0)return;const t=this.currentPage,s=e||0;this.currentPage=s,this.$emit("page",{current:s,previous:t})},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},calcMaxPages(){const e=this.wrapperScrollWidth-this.wrapperVisibleWidth;this.maxPages=this.slidesWidth.findIndex(({offsetLeft:t})=>t>e)-1},calcNextWidth(e){const t=e>0?this.currentPage:this.currentPage+e,s=this.slidesWidth[t].width||0;if(s)return s*e},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){const t=-1===e&&this.boundLeft,s=1===e&&this.boundRight;if(t||s)return;const i=this.calcNextWidth(e);i&&this.$refs.vsWrapper.scrollBy({left:i,behavior:"smooth"})},goToSlide(e){this.slidesWidth[e]&&this.$refs.vsWrapper.scrollTo({left:this.slidesWidth[e].offsetLeft,behavior:"smooth"})}}};var c=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"vs-carousel"},[s(e.tag,{ref:"vsWrapper",tag:"component",staticClass:"vs-carousel__wrapper"},[e._t("default")],2),e._v(" "),e.hideArrows?e._e():e._t("arrows",[s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundLeft,expression:"hideArrowsOnBound ? !boundLeft : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",attrs:{type:"button","aria-label":e.i18n.slideLeft,disabled:e.boundLeft},on:{click:function(t){return e.changeSlide(-1)}}},[e._v("\n ←\n ")]),e._v(" "),s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundRight,expression:"hideArrowsOnBound ? !boundRight : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",attrs:{type:"button","aria-label":e.i18n.slideRight,disabled:e.boundRight},on:{click:function(t){return e.changeSlide(1)}}},[e._v("\n →\n ")])],{changeSlide:e.changeSlide,boundLeft:e.boundLeft,boundRight:e.boundRight})],2)};c._withStripped=!0;const h=a({render:c,staticRenderFns:[]},undefined,d,undefined,false,undefined,!1,void 0,void 0,void 0);const u={props:{tag:{type:String,default:"li"}}};var f=function(){var e=this,t=e.$createElement;return(e._self._c||t)(e.tag,{ref:"vsSlide",tag:"component",staticClass:"vs-carousel__slide",attrs:{tabindex:"0"}},[e._t("default")],2)};f._withStripped=!0;const p=a({render:f,staticRenderFns:[]},undefined,u,undefined,false,undefined,!1,void 0,void 0,void 0);var v={install:function(e){e.component("Carousel",h),e.component("Slide",p)}};e.Carousel=h,e.Slide=p,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})})); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("seamless-scroll-polyfill/dist/esm/Element.scrollBy"),require("lodash/debounce")):"function"==typeof define&&define.amd?define(["exports","seamless-scroll-polyfill/dist/esm/Element.scrollBy","lodash/debounce"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueSnap={},e.Element_scrollBy,e._.debounce)}(this,(function(e,t,s){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(s),n=function(e,t,s){return Math.abs(e-t)<=s},o="undefined"==typeof window,l=!o;o||"scrollBehavior"in document.documentElement.style||t.elementScrollByPolyfill();function d(e,t,s,i,r,n,o,l,d,a){"boolean"!=typeof o&&(d=l,l=o,o=!1);const c="function"==typeof s?s.options:s;let h;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,r&&(c.functional=!0)),i&&(c._scopeId=i),n?(h=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(n)},c._ssrRegister=h):t&&(h=o?function(e){t.call(this,a(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),h)if(c.functional){const e=c.render;c.render=function(t,s){return h.call(s),e(t,s)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,h):[h]}return s}const a={props:{hideArrows:{type:Boolean,default:!1},hideArrowsOnBound:{type:Boolean,default:!1},tag:{type:String,default:"ul"},i18n:{type:Object,default:()=>({slideLeft:"Slide left",slideRight:"Slide right"}),validator:e=>["slideLeft","slideRight"].every(t=>t in e)}},data:()=>({boundLeft:!0,boundRight:!1,slidesWidth:[],wrapperScrollWidth:0,wrapperVisibleWidth:0,currentPage:0,currentPos:0,step:1,observer:null,onResizeFn:null,onScrollFn:null}),mounted(){this.calcOnInit(),l&&(this.onResizeFn=r.default(this.calcOnInit,410),this.onScrollFn=r.default(this.calcOnScroll,100),this.attachMutationObserver(),this.$refs.vsWrapper.addEventListener("scroll",this.onScrollFn),window.addEventListener("resize",this.onResizeFn,!1),this.$on("go-to-page",e=>this.goToSlide(e)))},beforeDestroy(){l&&(this.observer.disconnect(),this.$refs.vsWrapper.removeEventListener("scroll",this.onScrollFn),window.removeEventListener("resize",this.onResizeFn,!1))},methods:{calcOnInit(){this.$refs.vsWrapper&&(this.calcWrapperWidth(),this.calcSlidesWidth(),this.calcCurrentPosition(),this.setCurrentPage(),this.calcBounds())},calcOnScroll(){this.$refs.vsWrapper&&(this.calcCurrentPosition(),this.setCurrentPage(),this.calcBounds())},calcBounds(){const e=n(this.currentPos,0,5),t=n(this.wrapperScrollWidth-this.wrapperVisibleWidth,this.currentPos,5);e?(this.$emit("bound-left",!0),this.boundLeft=!0):this.boundLeft=!1,t?(this.$emit("bound-right",!0),this.boundRight=!0):this.boundRight=!1},calcWrapperWidth(){this.wrapperScrollWidth=this.$refs.vsWrapper.scrollWidth,this.wrapperVisibleWidth=this.$refs.vsWrapper.offsetWidth},calcSlidesWidth(){const e=[...this.$refs.vsWrapper.children];this.slidesWidth=e.map(e=>({offsetLeft:e.offsetLeft,width:e.offsetWidth}))},getCurrentPage(){return n(this.currentPos+this.wrapperVisibleWidth,this.wrapperScrollWidth,5)?this.slidesWidth.length-1:this.slidesWidth.findIndex(e=>n(e.offsetLeft,this.currentPos,5))},setCurrentPage(e){const t=void 0!==e?e:this.getCurrentPage();if(t<0)return;const s=this.currentPage,i=t>0?t:0;this.currentPage=i,this.$emit("page",{current:i,previous:s})},calcCurrentPosition(){this.currentPos=this.$refs.vsWrapper.scrollLeft||0},attachMutationObserver(){this.observer=new MutationObserver(()=>{this.calcOnInit()}),this.observer.observe(this.$refs.vsWrapper,{attributes:!0,childList:!0,characterData:!0,subtree:!0})},changeSlide(e){this.goToSlide(this.currentPage+e)},goToSlide(e){this.slidesWidth[e]&&(this.$refs.vsWrapper.scrollTo({left:this.slidesWidth[e].offsetLeft,behavior:"smooth"}),this.setCurrentPage(e))}}};var c=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"vs-carousel"},[s(e.tag,{ref:"vsWrapper",tag:"component",staticClass:"vs-carousel__wrapper"},[e._t("default")],2),e._v(" "),e.hideArrows?e._e():e._t("arrows",[s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundLeft,expression:"hideArrowsOnBound ? !boundLeft : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--left\n ",attrs:{type:"button","aria-label":e.i18n.slideLeft,disabled:e.boundLeft},on:{click:function(t){return e.changeSlide(-1)}}},[e._v("\n ←\n ")]),e._v(" "),s("button",{directives:[{name:"show",rawName:"v-show",value:!e.hideArrowsOnBound||!e.boundRight,expression:"hideArrowsOnBound ? !boundRight : true"}],staticClass:"\n vs-carousel__arrows\n vs-carousel__arrows--right\n ",attrs:{type:"button","aria-label":e.i18n.slideRight,disabled:e.boundRight},on:{click:function(t){return e.changeSlide(1)}}},[e._v("\n →\n ")])],{changeSlide:e.changeSlide,boundLeft:e.boundLeft,boundRight:e.boundRight})],2)};c._withStripped=!0;const h=d({render:c,staticRenderFns:[]},undefined,a,undefined,false,undefined,!1,void 0,void 0,void 0);const u={props:{tag:{type:String,default:"li"}}};var f=function(){var e=this,t=e.$createElement;return(e._self._c||t)(e.tag,{ref:"vsSlide",tag:"component",staticClass:"vs-carousel__slide",attrs:{tabindex:"0"}},[e._t("default")],2)};f._withStripped=!0;const p=d({render:f,staticRenderFns:[]},undefined,u,undefined,false,undefined,!1,void 0,void 0,void 0);var v={install:function(e){e.component("Carousel",h),e.component("Slide",p)}};e.Carousel=h,e.Slide=p,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})})); diff --git a/examples/vue@2/nuxt/package.json b/examples/vue@2/nuxt/package.json index d1ad64a..8becce4 100644 --- a/examples/vue@2/nuxt/package.json +++ b/examples/vue@2/nuxt/package.json @@ -8,6 +8,6 @@ }, "dependencies": { "nuxt": "^2.14.7", - "vue-snap": "^0.6.7" + "vue-snap": "^0.7.0" } } diff --git a/examples/vue@2/vue-cli/package.json b/examples/vue@2/vue-cli/package.json index fa8dae1..e937209 100644 --- a/examples/vue@2/vue-cli/package.json +++ b/examples/vue@2/vue-cli/package.json @@ -10,7 +10,7 @@ "dependencies": { "core-js": "^3.8.0", "vue": "^2.6.12", - "vue-snap": "^0.6.7" + "vue-snap": "^0.7.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.9", diff --git a/package.json b/package.json index 00d62e9..f9b5ba3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-snap", - "version": "0.6.7", + "version": "0.7.0", "description": "Lightweight Carousel based on CSS Scroll Snap", "main": "dist/vue-snap.umd.js", "module": "dist/vue-snap.esm.js",