hooper - npm Package Compare versions

Comparing version 0.1.5 to 0.2.0

dist/hooper.esm.js

 /**
-  * Hopper 0.1.4
+  * Hopper 0.1.5
   * (c) 2019
@@ -204,2 +204,12 @@ * @license MIT
     },
+    // pause autoPlay on mousehover
+    hoverPause: {
+      default: true,
+      type: Boolean
+    },
+    // remove empty space around slides
+    noWhiteSpace: {
+      default: false,
+      type: Boolean
+    },
     // an object to pass all settings
@@ -243,23 +253,15 @@ settings: {
       var direction = rtl ? -1 : 1;
-      var clonesSpace = 0;
-      var centeringSpace = 0;
-      var translate = 0;
+      var slideLength = vertical ? this.slideHeight : this.slideWidth;
+      var containerLength = vertical ? this.containerHeight : this.containerWidth;
+      var dragDelta = vertical ? this.delta.y : this.delta.x;
+      var clonesSpace = infiniteScroll ? slideLength * this.slidesCount : 0;
+      var centeringSpace = centerMode ? (containerLength - slideLength) / 2 : 0; // calculate track translate
 
-      if (centerMode) {
-        centeringSpace = vertical ? (this.containerHeight - this.slideHeight) / 2 : (this.containerWidth - this.slideWidth) / 2;
-      }
+      var translate = dragDelta + direction * (centeringSpace - clonesSpace - this.currentSlide * slideLength);
 
-      if (infiniteScroll) {
-        clonesSpace = vertical ? this.slideHeight * this.slidesCount : this.slideWidth * this.slidesCount * direction;
-      }
-
       if (vertical) {
-        translate = this.delta.y + direction * (centeringSpace - this.currentSlide * this.slideHeight);
-        return "transform: translate(0, ".concat(translate - clonesSpace, "px);");
+        return "transform: translate(0, ".concat(translate, "px);");
       }
 
-      if (!vertical) {
-        translate = this.delta.x + direction * (centeringSpace - this.currentSlide * this.slideWidth);
-        return "transform: translate(".concat(translate - clonesSpace, "px, 0);");
-      }
+      return "transform: translate(".concat(translate, "px, 0);");
     },
@@ -363,3 +365,3 @@ trackTransition: function trackTransition() {
       this.timer = new Timer(function () {
-        if (_this2.isSliding || _this2.isDragging || _this2.isHover || _this2.isFocus) {
+        if (_this2.isSliding || _this2.isDragging || _this2.isHover && _this2.hoverPause || _this2.isFocus) {
           return;
@@ -483,2 +485,3 @@ }
       document.addEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
+      event.preventDefault();
     },
@@ -494,2 +497,3 @@ onDrag: function onDrag(event) {
       this.delta.y = this.endPosition.y - this.startPosition.y;
+      event.preventDefault();
     },
@@ -517,3 +521,3 @@ onDragEnd: function onDragEnd() {
       document.removeEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
-      this.timer;
+      this.restartTimer();
     },
@@ -520,0 +524,0 @@ onTransitionend: function onTransitionend() {

dist/hooper.js

 /**
-  * Hopper 0.1.4
+  * Hopper 0.1.5
   * (c) 2019
@@ -210,2 +210,12 @@ * @license MIT
       },
+      // pause autoPlay on mousehover
+      hoverPause: {
+        default: true,
+        type: Boolean
+      },
+      // remove empty space around slides
+      noWhiteSpace: {
+        default: false,
+        type: Boolean
+      },
       // an object to pass all settings
@@ -249,23 +259,15 @@ settings: {
         var direction = rtl ? -1 : 1;
-        var clonesSpace = 0;
-        var centeringSpace = 0;
-        var translate = 0;
+        var slideLength = vertical ? this.slideHeight : this.slideWidth;
+        var containerLength = vertical ? this.containerHeight : this.containerWidth;
+        var dragDelta = vertical ? this.delta.y : this.delta.x;
+        var clonesSpace = infiniteScroll ? slideLength * this.slidesCount : 0;
+        var centeringSpace = centerMode ? (containerLength - slideLength) / 2 : 0; // calculate track translate
 
-        if (centerMode) {
-          centeringSpace = vertical ? (this.containerHeight - this.slideHeight) / 2 : (this.containerWidth - this.slideWidth) / 2;
-        }
+        var translate = dragDelta + direction * (centeringSpace - clonesSpace - this.currentSlide * slideLength);
 
-        if (infiniteScroll) {
-          clonesSpace = vertical ? this.slideHeight * this.slidesCount : this.slideWidth * this.slidesCount * direction;
-        }
-
         if (vertical) {
-          translate = this.delta.y + direction * (centeringSpace - this.currentSlide * this.slideHeight);
-          return "transform: translate(0, ".concat(translate - clonesSpace, "px);");
+          return "transform: translate(0, ".concat(translate, "px);");
         }
 
-        if (!vertical) {
-          translate = this.delta.x + direction * (centeringSpace - this.currentSlide * this.slideWidth);
-          return "transform: translate(".concat(translate - clonesSpace, "px, 0);");
-        }
+        return "transform: translate(".concat(translate, "px, 0);");
       },
@@ -369,3 +371,3 @@ trackTransition: function trackTransition() {
         this.timer = new Timer(function () {
-          if (_this2.isSliding || _this2.isDragging || _this2.isHover || _this2.isFocus) {
+          if (_this2.isSliding || _this2.isDragging || _this2.isHover && _this2.hoverPause || _this2.isFocus) {
             return;
@@ -489,2 +491,3 @@ }
         document.addEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
+        event.preventDefault();
       },
@@ -500,2 +503,3 @@ onDrag: function onDrag(event) {
         this.delta.y = this.endPosition.y - this.startPosition.y;
+        event.preventDefault();
       },
@@ -523,3 +527,3 @@ onDragEnd: function onDragEnd() {
         document.removeEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
-        this.timer;
+        this.restartTimer();
       },
@@ -526,0 +530,0 @@ onTransitionend: function onTransitionend() {

dist/hooper.min.js

@@ -1,1 +0,1 @@
-var t,i;t=this,i=function(t){"use strict";function s(){return Date.now()}function i(t,i){this.create=function(){return window.setInterval(t,i)},this.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=null)},this.start=function(){this.timer||(this.timer=this.create())},this.restart=function(t){i=t||i,this.stop(),this.start()},this.timer=this.create()}function c(t,i){return t<0?(t+i)%i:t%i}function o(t,i){var e=t.componentOptions;return{class:t.data.class,staticClass:t.data.staticClass,style:t.data.style,attrs:t.data.attrs,props:function(n){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter(function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable}))),i.forEach(function(t){var i,e,s;i=n,s=o[e=t],e in i?Object.defineProperty(i,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):i[e]=s})}return n}({},e.propsData,{isClone:!0,index:i}),on:e.listeners,nativeOn:t.data.nativeOn,directives:t.data.directives,scopesSlots:t.data.scopesSlots,slot:t.data.slot,ref:t.data.ref,key:t.data.key?"".concat(i,"-clone"):void 0}}function r(t,i){var e=t.context&&t.context.$createElement,s=t.componentOptions.children,n=o(t,i);return e(t.componentOptions.Ctor,n,s)}var e=function(t,i,e,s,n,o,r,a,c,l){"boolean"!=typeof r&&(c=a,a=r,r=!1);var h,d="function"==typeof e?e.options:e;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),s&&(d._scopeId=s),o?(h=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__),i&&i.call(this,c(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=h):i&&(h=r?function(){i.call(this,l(this.$root.$options.shadowRoot))}:function(t){i.call(this,a(t))}),h)if(d.functional){var u=d.render;d.render=function(t,i){return h.call(i),u(t,i)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,h):[h]}return e},n=e({render:function(){var i=this,t=i.$createElement,e=i._self._c||t;return e("section",{staticClass:"hooper",class:{"is-vertical":i.config.vertical,"is-rtl":i.config.rtl},attrs:{tabindex:"0"},on:{mouseover:function(t){i.isHover=!0},mouseleave:function(t){i.isHover=!1},focusin:function(t){i.isFocus=!0},focusout:function(t){i.isFocus=!1}}},[e("div",{staticClass:"hooper-list"},[e("ul",{ref:"track",staticClass:"hooper-track",class:{"is-dragging":i.isDragging},style:i.trackTransform+i.trackTransition,on:{transitionend:i.onTransitionend}},[i._t("clone-before"),i._v(" "),i._t("default"),i._v(" "),i._t("clone-after")],2)]),i._v(" "),i._t("hooper-addons"),i._v(" "),e("div",{staticClass:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},[i._v("\n    "+i._s("Item "+(i.currentSlide+1)+" of "+i.slidesCount)+"\n  ")])],2)},staticRenderFns:[]},void 0,{name:"Hooper",provide:function(){return{$hooper:this}},props:{itemsToShow:{default:1,type:Number},itemsToSlide:{default:1,type:Number},initialSlide:{default:0,type:Number},infiniteScroll:{default:!1,type:Boolean},centerMode:{default:!1,type:Boolean},vertical:{default:!1,type:Boolean},rtl:{default:null,type:Boolean},autoPlay:{default:!1,type:Boolean},playSpeed:{default:2e3,type:Number},mouseDrag:{default:!0,type:Boolean},touchDrag:{default:!0,type:Boolean},wheelControl:{default:!0,type:Boolean},keysControl:{default:!0,type:Boolean},shortDrag:{default:!0,type:Boolean},transition:{default:300,type:Number},sync:{default:"",type:String},settings:{default:function(){return{}},type:Object}},data:function(){return{isDragging:!1,isSliding:!1,isTouch:!1,isHover:!1,isFocus:!1,slideWidth:0,slideHeight:0,slidesCount:0,currentSlide:0,timer:null,slides:[],defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,s=t.rtl?-1:1,n=0,o=0,r=0;return t.centerMode&&(o=e?(this.containerHeight-this.slideHeight)/2:(this.containerWidth-this.slideWidth)/2),i&&(n=e?this.slideHeight*this.slidesCount:this.slideWidth*this.slidesCount*s),e?(r=this.delta.y+s*(o-this.currentSlide*this.slideHeight),"transform: translate(0, ".concat(r-n,"px);")):e?void 0:(r=this.delta.x+s*(o-this.currentSlide*this.slideWidth),"transform: translate(".concat(r-n,"px, 0);"))},trackTransition:function(){return this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},methods:{slideTo:function(t){var i=this,e=1<arguments.length&&void 0!==arguments[1]&&arguments[1];if(!this.isSliding&&t!==this.currentSlide){this.$emit("beforeSlide",{currentSlide:this.currentSlide,slideTo:a});var s,n,o,r=this.currentSlide,a=this.config.infiniteScroll?t:(s=t,n=0,o=this.slidesCount-1,Math.max(Math.min(s,o),n));this.syncEl&&!e&&this.syncEl.slideTo(t,!0),this.currentSlide=a,this.isSliding=!0,window.setTimeout(function(){i.isSliding=!1,i.currentSlide=c(a,i.slidesCount)},this.config.transition),this.$emit("slide",{currentSlide:this.currentSlide,slideFrom:r})}},slideNext:function(){this.slideTo(this.currentSlide+this.config.itemsToSlide)},slidePrev:function(){this.slideTo(this.currentSlide-this.config.itemsToSlide)},initEvents:function(){null===this.defaults.rtl&&(this.defaults.rtl="rtl"===getComputedStyle(this.$el).direction),this.config.autoPlay&&this.initAutoPlay(),this.config.mouseDrag&&this.$refs.track.addEventListener("mousedown",this.onDragStart),this.config.touchDrag&&this.$refs.track.addEventListener("touchstart",this.onDragStart,{passive:!0}),this.config.keysControl&&this.$el.addEventListener("keydown",this.onKeypress),this.config.wheelControl&&(this.lastScrollTime=s(),this.$el.addEventListener("wheel",this.onWheel,{passive:!1})),window.addEventListener("resize",this.update)},initSync:function(){if(this.config.sync){if(!this.$parent.$refs[this.config.sync]&&process&&"production"!==process.env.NODE_ENV)return void console.warn('Hooper: expects an element with attribute ref="'.concat(this.config.sync,'", but found none.'));this.syncEl=this.$parent.$refs[this.config.sync],this.syncEl.syncEl=this}},initAutoPlay:function(){var t=this;this.timer=new i(function(){t.isSliding||t.isDragging||t.isHover||t.isFocus||(t.currentSlide!==t.slidesCount-1||t.config.infiniteScroll?t.slideNext():t.slideTo(0))},this.config.playSpeed)},initDefaults:function(){this.breakpoints=this.settings.breakpoints,this.defaults=Object.assign({},this.$props,this.settings),this.config=Object.assign({},this.defaults)},initSlides:function(){var e=this;if(this.slides=this.filteredSlides(),this.slidesCount=this.slides.length,this.slides.forEach(function(t,i){t.componentOptions.propsData.index=i}),this.config.infiniteScroll){var s=[],n=[];this.slides.forEach(function(t,i){s.push(r(t,i-e.slidesCount)),n.push(r(t,i+e.slidesCount))}),this.$slots["clone-before"]=s,this.$slots["clone-after"]=n}},update:function(){this.breakpoints&&this.updateConfig(),this.updateWidth(),this.$emit("updated",{containerWidth:this.containerWidth,containerHeight:this.containerHeight,slideWidth:this.slideWidth,slideHeight:this.slideHeight,settings:this.config})},updateWidth:function(){var t=this.$el.getBoundingClientRect();this.containerWidth=t.width,this.containerHeight=t.height,this.config.vertical?this.slideHeight=this.containerHeight/this.config.itemsToShow:this.slideWidth=this.containerWidth/this.config.itemsToShow},updateConfig:function(){var i,e=this;Object.keys(this.breakpoints).sort(function(t,i){return i-t}).some(function(t){if(i=window.matchMedia("(min-width: ".concat(t,"px)")).matches)return e.config=Object.assign({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=Object.assign(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.initSlides(),this.$nextTick(function(){t.update()})},onDragStart:function(t){this.isTouch="touchstart"===t.type,(this.isTouch||0===t.button)&&(this.startPosition={x:0,y:0},this.endPosition={x:0,y:0},this.isDragging=!0,this.startPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.startPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,document.addEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.addEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd))},onDrag:function(t){this.isSliding||(this.endPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.endPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,this.delta.x=this.endPosition.x-this.startPosition.x,this.delta.y=this.endPosition.y-this.startPosition.y)},onDragEnd:function(){var t=this.config.shortDrag?.5:.15;if(this.isDragging=!1,this.config.vertical){var i=Math.round(Math.abs(this.delta.y/this.slideHeight)+t);this.slideTo(this.currentSlide-Math.sign(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*Math.sign(this.delta.x),s=Math.round(Math.abs(this.delta.x/this.slideWidth)+t);this.slideTo(this.currentSlide-e*s)}this.delta.x=0,this.delta.y=0,document.removeEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.removeEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),this.timer},onTransitionend:function(){this.isSliding=!1,this.$emit("afterSlide",{currentSlide:this.currentSlide})},onKeypress:function(t){var i=t.key;return i.startsWith("Arrow")&&t.preventDefault(),this.config.vertical?("ArrowUp"===i&&this.slidePrev(),void("ArrowDown"===i&&this.slideNext())):this.config.rtl?("ArrowRight"===i&&this.slidePrev(),void("ArrowLeft"===i&&this.slideNext())):("ArrowRight"===i&&this.slideNext(),void("ArrowLeft"===i&&this.slidePrev()))},onWheel:function(t){if(t.preventDefault(),!(s()-this.lastScrollTime<200)){this.lastScrollTime=s();var i=t.wheelDelta||-t.deltaY,e=Math.sign(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},filteredSlides:function(){return this.$slots.default.filter(function(t){return!(!t.componentOptions||!t.componentOptions.Ctor)&&"HooperSlide"===t.componentOptions.Ctor.options.name})}},beforeUpdate:function(){var t=this.config.infiniteScroll&&(!this.$slots["clone-before"]||!this.$slots["clone-after"]),i=this.filteredSlides().length!==this.slidesCount;(t||i)&&this.initSlides()},created:function(){this.initDefaults(),this.initSlides()},mounted:function(){var t=this;this.initEvents(),this.$nextTick(function(){t.initSync(),t.update(),t.slideTo(t.config.initialSlide),t.$emit("loaded")})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.timer&&this.timer.stop()}},void 0,!1,void 0,void 0,void 0),a=e({render:function(){var t=this,i=t.$createElement;return(t._self._c||i)("li",{staticClass:"hooper-slide",class:{"is-clone":t.isClone,"is-active":t.isActive,"is-prev":t.isPrev,"is-next":t.isNext,"is-current":t.isCurrent},style:t.style,attrs:{"aria-hidden":t.isActive}},[t._t("default")],2)},staticRenderFns:[]},void 0,{name:"HooperSlide",inject:["$hooper"],props:{isClone:{type:Boolean,default:!1},index:{type:Number,default:0,required:!0}},computed:{style:function(){var t=this.$hooper||{},i=t.config,e=t.slideHeight,s=t.slideWidth;return i.vertical?"height: ".concat(e,"px"):"width: ".concat(s,"px")},lower:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,s=(t.slidesCount,i.itemsToShow);return i.centerMode?Math.ceil(e-s/2):e},upper:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,s=(t.slidesCount,i.itemsToShow);return i.centerMode?Math.floor(e+s/2):Math.floor(e+s-1)},isActive:function(){return this.index>=this.lower&&this.index<=this.upper},isPrev:function(){return this.index<=this.lower-1},isNext:function(){return this.index>=this.upper+1},isCurrent:function(){return this.index===this.$hooper.currentSlide}}},void 0,!1,void 0,void 0,void 0),l={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},h={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in l}}},render:function(t,i){var e,s=i.props,n=l[s.name],o=[];return o.push(t("title",(e=(e=s.name).replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+e.slice(1))),o.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),o.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(s.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},o)}},d=e({render:function(){var t=this.$createElement,i=this._self._c||t;return i("div",{staticClass:"hooper-progress"},[i("div",{staticClass:"hooper-progress-inner",style:"width: "+this.progress+"%"})])},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperProgress",computed:{currentSlide:function(){return c(this.$hooper.currentSlide,this.$hooper.slidesCount)},progress:function(){return 100*this.currentSlide/(this.$hooper.slidesCount-1)}}},void 0,!1,void 0,void 0,void 0),u=e({render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"hooper-pagination",class:{"is-vertical":e.$hooper.config.vertical}},["indicator"===e.mode?s("ol",{staticClass:"hooper-indicators"},e._l(e.$hooper.slides,function(t,i){return s("li",{key:i},[s("button",{staticClass:"hooper-indicator",class:{"is-active":e.currentSlide===i},on:{click:function(t){return e.$hooper.slideTo(i)}}},[s("span",{staticClass:"hooper-sr-only"},[e._v("item "+e._s(i))])])])}),0):e._e(),e._v(" "),"fraction"===e.mode?[s("span",[e._v(e._s(e.currentSlide+1))]),e._v(" "),s("span",[e._v("/")]),e._v(" "),s("span",[e._v(e._s(e.$hooper.slidesCount))])]:e._e()],2)},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperPagination",props:{mode:{default:"indicator",type:String}},computed:{currentSlide:function(){return c(this.$hooper.currentSlide,this.$hooper.slidesCount)}}},void 0,!1,void 0,void 0,void 0),f=e({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"hooper-navigation",class:{"is-vertical":t.$hooper.config.vertical,"is-rtl":t.$hooper.config.rtl}},[e("button",{staticClass:"hooper-prev",class:{"is-disabled":t.isPrevDisabled},attrs:{type:"button"},on:{click:t.slidePrev}},[t._t("hooper-prev",[e("icons",{attrs:{name:t.isVertical?"arrowUp":t.isRTL?"arrowRight":"arrowLeft"}})])],2),t._v(" "),e("button",{staticClass:"hooper-next",class:{"is-disabled":t.isNextDisabled},attrs:{type:"button"},on:{click:t.slideNext}},[t._t("hooper-next",[e("icons",{attrs:{name:t.isVertical?"arrowDown":t.isRTL?"arrowLeft":"arrowRight"}})])],2)])},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperNavigation",components:{Icons:h},computed:{isPrevDisabled:function(){return!this.$hooper.config.infiniteScroll&&0===this.$hooper.currentSlide},isNextDisabled:function(){return!this.$hooper.config.infiniteScroll&&this.$hooper.currentSlide===this.$hooper.slidesCount-1},isRTL:function(){return this.$hooper.config.rtl},isVertical:function(){return this.$hooper.config.vertical}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}}},void 0,!1,void 0,void 0,void 0);t.Hooper=n,t.Slide=a,t.Progress=d,t.Pagination=u,t.Navigation=f,t.Icons=h,t.addonMixin={inject:["$hooper"]},t.default=n,Object.defineProperty(t,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).Hooper={});
+var t,i;t=this,i=function(t){"use strict";function s(){return Date.now()}function i(t,i){this.create=function(){return window.setInterval(t,i)},this.stop=function(){this.timer&&(window.clearInterval(this.timer),this.timer=null)},this.start=function(){this.timer||(this.timer=this.create())},this.restart=function(t){i=t||i,this.stop(),this.start()},this.timer=this.create()}function c(t,i){return t<0?(t+i)%i:t%i}function o(t,i){var e=t.componentOptions;return{class:t.data.class,staticClass:t.data.staticClass,style:t.data.style,attrs:t.data.attrs,props:function(n){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{},i=Object.keys(o);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(o).filter(function(t){return Object.getOwnPropertyDescriptor(o,t).enumerable}))),i.forEach(function(t){var i,e,s;i=n,s=o[e=t],e in i?Object.defineProperty(i,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):i[e]=s})}return n}({},e.propsData,{isClone:!0,index:i}),on:e.listeners,nativeOn:t.data.nativeOn,directives:t.data.directives,scopesSlots:t.data.scopesSlots,slot:t.data.slot,ref:t.data.ref,key:t.data.key?"".concat(i,"-clone"):void 0}}function r(t,i){var e=t.context&&t.context.$createElement,s=t.componentOptions.children,n=o(t,i);return e(t.componentOptions.Ctor,n,s)}var e=function(t,i,e,s,n,o,r,a,c,l){"boolean"!=typeof r&&(c=a,a=r,r=!1);var h,d="function"==typeof e?e.options:e;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),s&&(d._scopeId=s),o?(h=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__),i&&i.call(this,c(t)),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=h):i&&(h=r?function(){i.call(this,l(this.$root.$options.shadowRoot))}:function(t){i.call(this,a(t))}),h)if(d.functional){var u=d.render;d.render=function(t,i){return h.call(i),u(t,i)}}else{var f=d.beforeCreate;d.beforeCreate=f?[].concat(f,h):[h]}return e},n=e({render:function(){var i=this,t=i.$createElement,e=i._self._c||t;return e("section",{staticClass:"hooper",class:{"is-vertical":i.config.vertical,"is-rtl":i.config.rtl},attrs:{tabindex:"0"},on:{mouseover:function(t){i.isHover=!0},mouseleave:function(t){i.isHover=!1},focusin:function(t){i.isFocus=!0},focusout:function(t){i.isFocus=!1}}},[e("div",{staticClass:"hooper-list"},[e("ul",{ref:"track",staticClass:"hooper-track",class:{"is-dragging":i.isDragging},style:i.trackTransform+i.trackTransition,on:{transitionend:i.onTransitionend}},[i._t("clone-before"),i._v(" "),i._t("default"),i._v(" "),i._t("clone-after")],2)]),i._v(" "),i._t("hooper-addons"),i._v(" "),e("div",{staticClass:"hooper-liveregion hooper-sr-only",attrs:{"aria-live":"polite","aria-atomic":"true"}},[i._v("\n    "+i._s("Item "+(i.currentSlide+1)+" of "+i.slidesCount)+"\n  ")])],2)},staticRenderFns:[]},void 0,{name:"Hooper",provide:function(){return{$hooper:this}},props:{itemsToShow:{default:1,type:Number},itemsToSlide:{default:1,type:Number},initialSlide:{default:0,type:Number},infiniteScroll:{default:!1,type:Boolean},centerMode:{default:!1,type:Boolean},vertical:{default:!1,type:Boolean},rtl:{default:null,type:Boolean},autoPlay:{default:!1,type:Boolean},playSpeed:{default:2e3,type:Number},mouseDrag:{default:!0,type:Boolean},touchDrag:{default:!0,type:Boolean},wheelControl:{default:!0,type:Boolean},keysControl:{default:!0,type:Boolean},shortDrag:{default:!0,type:Boolean},transition:{default:300,type:Number},sync:{default:"",type:String},hoverPause:{default:!0,type:Boolean},noWhiteSpace:{default:!1,type:Boolean},settings:{default:function(){return{}},type:Object}},data:function(){return{isDragging:!1,isSliding:!1,isTouch:!1,isHover:!1,isFocus:!1,slideWidth:0,slideHeight:0,slidesCount:0,currentSlide:0,timer:null,slides:[],defaults:{},breakpoints:{},delta:{x:0,y:0},config:{}}},computed:{trackTransform:function(){var t=this.config,i=t.infiniteScroll,e=t.vertical,s=t.rtl,n=t.centerMode,o=s?-1:1,r=e?this.slideHeight:this.slideWidth,a=e?this.containerHeight:this.containerWidth,c=(e?this.delta.y:this.delta.x)+o*((n?(a-r)/2:0)-(i?r*this.slidesCount:0)-this.currentSlide*r);return e?"transform: translate(0, ".concat(c,"px);"):"transform: translate(".concat(c,"px, 0);")},trackTransition:function(){return this.isSliding?"transition: ".concat(this.config.transition,"ms"):""}},methods:{slideTo:function(t){var i=this,e=1<arguments.length&&void 0!==arguments[1]&&arguments[1];if(!this.isSliding&&t!==this.currentSlide){this.$emit("beforeSlide",{currentSlide:this.currentSlide,slideTo:a});var s,n,o,r=this.currentSlide,a=this.config.infiniteScroll?t:(s=t,n=0,o=this.slidesCount-1,Math.max(Math.min(s,o),n));this.syncEl&&!e&&this.syncEl.slideTo(t,!0),this.currentSlide=a,this.isSliding=!0,window.setTimeout(function(){i.isSliding=!1,i.currentSlide=c(a,i.slidesCount)},this.config.transition),this.$emit("slide",{currentSlide:this.currentSlide,slideFrom:r})}},slideNext:function(){this.slideTo(this.currentSlide+this.config.itemsToSlide)},slidePrev:function(){this.slideTo(this.currentSlide-this.config.itemsToSlide)},initEvents:function(){null===this.defaults.rtl&&(this.defaults.rtl="rtl"===getComputedStyle(this.$el).direction),this.config.autoPlay&&this.initAutoPlay(),this.config.mouseDrag&&this.$refs.track.addEventListener("mousedown",this.onDragStart),this.config.touchDrag&&this.$refs.track.addEventListener("touchstart",this.onDragStart,{passive:!0}),this.config.keysControl&&this.$el.addEventListener("keydown",this.onKeypress),this.config.wheelControl&&(this.lastScrollTime=s(),this.$el.addEventListener("wheel",this.onWheel,{passive:!1})),window.addEventListener("resize",this.update)},initSync:function(){if(this.config.sync){if(!this.$parent.$refs[this.config.sync]&&process&&"production"!==process.env.NODE_ENV)return void console.warn('Hooper: expects an element with attribute ref="'.concat(this.config.sync,'", but found none.'));this.syncEl=this.$parent.$refs[this.config.sync],this.syncEl.syncEl=this}},initAutoPlay:function(){var t=this;this.timer=new i(function(){t.isSliding||t.isDragging||t.isHover&&t.hoverPause||t.isFocus||(t.currentSlide!==t.slidesCount-1||t.config.infiniteScroll?t.slideNext():t.slideTo(0))},this.config.playSpeed)},initDefaults:function(){this.breakpoints=this.settings.breakpoints,this.defaults=Object.assign({},this.$props,this.settings),this.config=Object.assign({},this.defaults)},initSlides:function(){var e=this;if(this.slides=this.filteredSlides(),this.slidesCount=this.slides.length,this.slides.forEach(function(t,i){t.componentOptions.propsData.index=i}),this.config.infiniteScroll){var s=[],n=[];this.slides.forEach(function(t,i){s.push(r(t,i-e.slidesCount)),n.push(r(t,i+e.slidesCount))}),this.$slots["clone-before"]=s,this.$slots["clone-after"]=n}},update:function(){this.breakpoints&&this.updateConfig(),this.updateWidth(),this.$emit("updated",{containerWidth:this.containerWidth,containerHeight:this.containerHeight,slideWidth:this.slideWidth,slideHeight:this.slideHeight,settings:this.config})},updateWidth:function(){var t=this.$el.getBoundingClientRect();this.containerWidth=t.width,this.containerHeight=t.height,this.config.vertical?this.slideHeight=this.containerHeight/this.config.itemsToShow:this.slideWidth=this.containerWidth/this.config.itemsToShow},updateConfig:function(){var i,e=this;Object.keys(this.breakpoints).sort(function(t,i){return i-t}).some(function(t){if(i=window.matchMedia("(min-width: ".concat(t,"px)")).matches)return e.config=Object.assign({},e.config,e.defaults,e.breakpoints[t]),!0}),i||(this.config=Object.assign(this.config,this.defaults))},restartTimer:function(){this.timer&&this.timer.restart()},restart:function(){var t=this;this.initSlides(),this.$nextTick(function(){t.update()})},onDragStart:function(t){this.isTouch="touchstart"===t.type,(this.isTouch||0===t.button)&&(this.startPosition={x:0,y:0},this.endPosition={x:0,y:0},this.isDragging=!0,this.startPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.startPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,document.addEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.addEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),t.preventDefault())},onDrag:function(t){this.isSliding||(this.endPosition.x=this.isTouch?t.touches[0].clientX:t.clientX,this.endPosition.y=this.isTouch?t.touches[0].clientY:t.clientY,this.delta.x=this.endPosition.x-this.startPosition.x,this.delta.y=this.endPosition.y-this.startPosition.y,t.preventDefault())},onDragEnd:function(){var t=this.config.shortDrag?.5:.15;if(this.isDragging=!1,this.config.vertical){var i=Math.round(Math.abs(this.delta.y/this.slideHeight)+t);this.slideTo(this.currentSlide-Math.sign(this.delta.y)*i)}if(!this.config.vertical){var e=(this.config.rtl?-1:1)*Math.sign(this.delta.x),s=Math.round(Math.abs(this.delta.x/this.slideWidth)+t);this.slideTo(this.currentSlide-e*s)}this.delta.x=0,this.delta.y=0,document.removeEventListener(this.isTouch?"touchmove":"mousemove",this.onDrag),document.removeEventListener(this.isTouch?"touchend":"mouseup",this.onDragEnd),this.restartTimer()},onTransitionend:function(){this.isSliding=!1,this.$emit("afterSlide",{currentSlide:this.currentSlide})},onKeypress:function(t){var i=t.key;return i.startsWith("Arrow")&&t.preventDefault(),this.config.vertical?("ArrowUp"===i&&this.slidePrev(),void("ArrowDown"===i&&this.slideNext())):this.config.rtl?("ArrowRight"===i&&this.slidePrev(),void("ArrowLeft"===i&&this.slideNext())):("ArrowRight"===i&&this.slideNext(),void("ArrowLeft"===i&&this.slidePrev()))},onWheel:function(t){if(t.preventDefault(),!(s()-this.lastScrollTime<200)){this.lastScrollTime=s();var i=t.wheelDelta||-t.deltaY,e=Math.sign(i);-1===e&&this.slideNext(),1===e&&this.slidePrev()}},filteredSlides:function(){return this.$slots.default.filter(function(t){return!(!t.componentOptions||!t.componentOptions.Ctor)&&"HooperSlide"===t.componentOptions.Ctor.options.name})}},beforeUpdate:function(){var t=this.config.infiniteScroll&&(!this.$slots["clone-before"]||!this.$slots["clone-after"]),i=this.filteredSlides().length!==this.slidesCount;(t||i)&&this.initSlides()},created:function(){this.initDefaults(),this.initSlides()},mounted:function(){var t=this;this.initEvents(),this.$nextTick(function(){t.initSync(),t.update(),t.slideTo(t.config.initialSlide),t.$emit("loaded")})},beforeDestroy:function(){window.removeEventListener("resize",this.update),this.timer&&this.timer.stop()}},void 0,!1,void 0,void 0,void 0),a=e({render:function(){var t=this,i=t.$createElement;return(t._self._c||i)("li",{staticClass:"hooper-slide",class:{"is-clone":t.isClone,"is-active":t.isActive,"is-prev":t.isPrev,"is-next":t.isNext,"is-current":t.isCurrent},style:t.style,attrs:{"aria-hidden":t.isActive}},[t._t("default")],2)},staticRenderFns:[]},void 0,{name:"HooperSlide",inject:["$hooper"],props:{isClone:{type:Boolean,default:!1},index:{type:Number,default:0,required:!0}},computed:{style:function(){var t=this.$hooper||{},i=t.config,e=t.slideHeight,s=t.slideWidth;return i.vertical?"height: ".concat(e,"px"):"width: ".concat(s,"px")},lower:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,s=(t.slidesCount,i.itemsToShow);return i.centerMode?Math.ceil(e-s/2):e},upper:function(){var t=this.$hooper||{},i=t.config,e=t.currentSlide,s=(t.slidesCount,i.itemsToShow);return i.centerMode?Math.floor(e+s/2):Math.floor(e+s-1)},isActive:function(){return this.index>=this.lower&&this.index<=this.upper},isPrev:function(){return this.index<=this.lower-1},isNext:function(){return this.index>=this.upper+1},isCurrent:function(){return this.index===this.$hooper.currentSlide}}},void 0,!1,void 0,void 0,void 0),l={arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"},h={name:"HooperIcon",functional:!0,inheritAttrs:!0,props:{name:{type:String,required:!0,validator:function(t){return t in l}}},render:function(t,i){var e,s=i.props,n=l[s.name],o=[];return o.push(t("title",(e=(e=s.name).replace(/([A-Z]+)/g," $1")).charAt(0).toUpperCase()+e.slice(1))),o.push(t("path",{attrs:{d:"M0 0h24v24H0z",fill:"none"}})),o.push(t("path",{attrs:{d:n}})),t("svg",{attrs:{class:"icon icon-".concat(s.name),viewBox:"0 0 24 24",width:"24px",height:"24px"}},o)}},d=e({render:function(){var t=this.$createElement,i=this._self._c||t;return i("div",{staticClass:"hooper-progress"},[i("div",{staticClass:"hooper-progress-inner",style:"width: "+this.progress+"%"})])},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperProgress",computed:{currentSlide:function(){return c(this.$hooper.currentSlide,this.$hooper.slidesCount)},progress:function(){return 100*this.currentSlide/(this.$hooper.slidesCount-1)}}},void 0,!1,void 0,void 0,void 0),u=e({render:function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{staticClass:"hooper-pagination",class:{"is-vertical":e.$hooper.config.vertical}},["indicator"===e.mode?s("ol",{staticClass:"hooper-indicators"},e._l(e.$hooper.slides,function(t,i){return s("li",{key:i},[s("button",{staticClass:"hooper-indicator",class:{"is-active":e.currentSlide===i},on:{click:function(t){return e.$hooper.slideTo(i)}}},[s("span",{staticClass:"hooper-sr-only"},[e._v("item "+e._s(i))])])])}),0):e._e(),e._v(" "),"fraction"===e.mode?[s("span",[e._v(e._s(e.currentSlide+1))]),e._v(" "),s("span",[e._v("/")]),e._v(" "),s("span",[e._v(e._s(e.$hooper.slidesCount))])]:e._e()],2)},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperPagination",props:{mode:{default:"indicator",type:String}},computed:{currentSlide:function(){return c(this.$hooper.currentSlide,this.$hooper.slidesCount)}}},void 0,!1,void 0,void 0,void 0),f=e({render:function(){var t=this,i=t.$createElement,e=t._self._c||i;return e("div",{staticClass:"hooper-navigation",class:{"is-vertical":t.$hooper.config.vertical,"is-rtl":t.$hooper.config.rtl}},[e("button",{staticClass:"hooper-prev",class:{"is-disabled":t.isPrevDisabled},attrs:{type:"button"},on:{click:t.slidePrev}},[t._t("hooper-prev",[e("icons",{attrs:{name:t.isVertical?"arrowUp":t.isRTL?"arrowRight":"arrowLeft"}})])],2),t._v(" "),e("button",{staticClass:"hooper-next",class:{"is-disabled":t.isNextDisabled},attrs:{type:"button"},on:{click:t.slideNext}},[t._t("hooper-next",[e("icons",{attrs:{name:t.isVertical?"arrowDown":t.isRTL?"arrowLeft":"arrowRight"}})])],2)])},staticRenderFns:[]},void 0,{inject:["$hooper"],name:"HooperNavigation",components:{Icons:h},computed:{isPrevDisabled:function(){return!this.$hooper.config.infiniteScroll&&0===this.$hooper.currentSlide},isNextDisabled:function(){return!this.$hooper.config.infiniteScroll&&this.$hooper.currentSlide===this.$hooper.slidesCount-1},isRTL:function(){return this.$hooper.config.rtl},isVertical:function(){return this.$hooper.config.vertical}},methods:{slideNext:function(){this.$hooper.slideNext(),this.$hooper.restartTimer()},slidePrev:function(){this.$hooper.slidePrev(),this.$hooper.restartTimer()}}},void 0,!1,void 0,void 0,void 0);t.Hooper=n,t.Slide=a,t.Progress=d,t.Pagination=u,t.Navigation=f,t.Icons=h,t.addonMixin={inject:["$hooper"]},t.default=n,Object.defineProperty(t,"__esModule",{value:!0})},"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t=t||self).Hooper={});

package.json

 {
   "name": "hooper",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A customizable accessible carousel slider optimized for Vue",
@@ -5,0 +5,0 @@ "module": "dist/hooper.esm.js",

README.md

@@ -101,2 +101,4 @@ <p align="center">
 |`sync`           |''   |sync two carousels to slide together.|
+|`hoverPause`     |true |pause autoPlay if the mouse enters the slide.|
+|`trimWhiteSpace` |false|limit carousel to slide only when there will be no completely empty slide-space.|
 |`settings`       |{ }  |an object to pass all settings.|
@@ -103,0 +105,0 @@

No alert changes

Improved metrics

Total package byte prevSize

582901

increased by0.09%

Lines of code

2179

increased by0.46%

Number of lines in readme file

113

increased by1.8%

No dependency changes