vue-horizontal-list-autoscroll/dist/vue-horizontal-list-autoscroll.min.js

A pure vue ssr friendly horizontal list implementation with autoscroll feature.

var VueHorizontalListAutoscroll=function(t){"use strict";function e(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,e){if(!t)return;if("string"==typeof t)return o(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);"Object"===i&&t.constructor&&(i=t.constructor.name);if("Map"===i||"Set"===i)return Array.from(t);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return o(t,e)}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,i=new Array(e);o<e;o++)i[o]=t[o];return i}var i=function(t,e){return t(e={exports:{}},e.exports),e.exports}((function(t,e){t.exports={polyfill:function(){var t=window,e=document;if(!("scrollBehavior"in e.documentElement.style)||!0===t.__forceSmoothScrollPolyfill__){var o,i=t.HTMLElement||t.Element,n={scroll:t.scroll||t.scrollTo,scrollBy:t.scrollBy,elementScroll:i.prototype.scroll||r,scrollIntoView:i.prototype.scrollIntoView},s=t.performance&&t.performance.now?t.performance.now.bind(t.performance):Date.now,l=(o=t.navigator.userAgent,new RegExp(["MSIE ","Trident/","Edge/"].join("|")).test(o)?1:0);t.scroll=t.scrollTo=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?u.call(t,e.body,void 0!==arguments[0].left?~~arguments[0].left:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?~~arguments[0].top:t.scrollY||t.pageYOffset):n.scroll.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:t.scrollX||t.pageXOffset,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:t.scrollY||t.pageYOffset))},t.scrollBy=function(){void 0!==arguments[0]&&(a(arguments[0])?n.scrollBy.call(t,void 0!==arguments[0].left?arguments[0].left:"object"!=typeof arguments[0]?arguments[0]:0,void 0!==arguments[0].top?arguments[0].top:void 0!==arguments[1]?arguments[1]:0):u.call(t,e.body,~~arguments[0].left+(t.scrollX||t.pageXOffset),~~arguments[0].top+(t.scrollY||t.pageYOffset)))},i.prototype.scroll=i.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==a(arguments[0])){var t=arguments[0].left,e=arguments[0].top;u.call(this,this,void 0===t?this.scrollLeft:~~t,void 0===e?this.scrollTop:~~e)}else{if("number"==typeof arguments[0]&&void 0===arguments[1])throw new SyntaxError("Value could not be converted");n.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left:"object"!=typeof arguments[0]?~~arguments[0]:this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top:void 0!==arguments[1]?~~arguments[1]:this.scrollTop)}},i.prototype.scrollBy=function(){void 0!==arguments[0]&&(!0!==a(arguments[0])?this.scroll({left:~~arguments[0].left+this.scrollLeft,top:~~arguments[0].top+this.scrollTop,behavior:arguments[0].behavior}):n.elementScroll.call(this,void 0!==arguments[0].left?~~arguments[0].left+this.scrollLeft:~~arguments[0]+this.scrollLeft,void 0!==arguments[0].top?~~arguments[0].top+this.scrollTop:~~arguments[1]+this.scrollTop))},i.prototype.scrollIntoView=function(){if(!0!==a(arguments[0])){var o=p(this),i=o.getBoundingClientRect(),s=this.getBoundingClientRect();o!==e.body?(u.call(this,o,o.scrollLeft+s.left-i.left,o.scrollTop+s.top-i.top),"fixed"!==t.getComputedStyle(o).position&&t.scrollBy({left:i.left,top:i.top,behavior:"smooth"})):t.scrollBy({left:s.left,top:s.top,behavior:"smooth"})}else n.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function r(t,e){this.scrollLeft=t,this.scrollTop=e}function a(t){if(null===t||"object"!=typeof t||void 0===t.behavior||"auto"===t.behavior||"instant"===t.behavior)return!0;if("object"==typeof t&&"smooth"===t.behavior)return!1;throw new TypeError("behavior member of ScrollOptions "+t.behavior+" is not a valid value for enumeration ScrollBehavior.")}function c(t,e){return"Y"===e?t.clientHeight+l<t.scrollHeight:"X"===e?t.clientWidth+l<t.scrollWidth:void 0}function d(e,o){var i=t.getComputedStyle(e,null)["overflow"+o];return"auto"===i||"scroll"===i}function h(t){var e=c(t,"Y")&&d(t,"Y"),o=c(t,"X")&&d(t,"X");return e||o}function p(t){for(;t!==e.body&&!1===h(t);)t=t.parentNode||t.host;return t}function f(e){var o,i,n,l,r=(s()-e.startTime)/468;l=r=r>1?1:r,o=.5*(1-Math.cos(Math.PI*l)),i=e.startX+(e.x-e.startX)*o,n=e.startY+(e.y-e.startY)*o,e.method.call(e.scrollable,i,n),i===e.x&&n===e.y||t.requestAnimationFrame(f.bind(t,e))}function u(o,i,l){var a,c,d,h,p=s();o===e.body?(a=t,c=t.scrollX||t.pageXOffset,d=t.scrollY||t.pageYOffset,h=n.scroll):(a=o,c=o.scrollLeft,d=o.scrollTop,h=r),f({scrollable:a,method:h,startTime:p,startX:c,startY:d,x:i,y:l})}}}}));i.polyfill;i.polyfill();var n={name:"VueHorizontalListAutoscroll",props:{items:{type:Array,required:!0},options:{type:Object,required:!1}},data:function(){return{position:0,width:{container:0,window:576},autoscrollInterval:null,slideshowInterval:null}},mounted:function(){var t=this;this.$resize=function(){t.width.window=window.innerWidth,t.width.container=t.$refs.container.clientWidth},this.$resize(),window.addEventListener("resize",this.$resize),this._options.slideshow.enabled?this.runSlideshow():this._options.autoscroll.enabled&&this.autoscroll()},beforeDestroy:function(){window.removeEventListener("resize",this.$resize),clearInterval(this.autoscrollInterval),this.slideshowInterval&&clearInterval(this.slideshowInterval)},watch:{"options.slideshow.enabled":function(t){t?(this.stopAutoscroll(),this.runSlideshow()):this.stopSlideshow()}},computed:{_items:function(){return[].concat(e(this.$slots.start?[{type:"start"}]:[]),e(this.items.map((function(t){return{type:"item",item:t}}))),e(this.$slots.end?[{type:"end"}]:[]))},_length:function(){return this._items.length},_options:function(){var t=this.options;return{navigation:{start:t&&t.navigation&&t.navigation.start||992,color:t&&t.navigation&&t.navigation.color||"#000"},autoscroll:{enabled:t&&t.autoscroll&&t.autoscroll.enabled||!1,interval:t&&t.autoscroll&&parseInt(t.autoscroll.interval,10)>=1&&parseInt(t.autoscroll.interval,10)||5e3,repeat:t&&t.autoscroll&&t.autoscroll.repeat||!1},item:{class:t&&t.item&&t.item.class||"",padding:t&&t.item&&t.item.padding||16},list:{class:t&&t.list&&t.list.class||"",windowed:t&&t.list&&t.list.windowed||1200,padding:t&&t.list&&t.list.padding||24},responsive:[].concat(e(t&&t.responsive||[]),[{end:576,size:1},{start:576,end:768,size:2},{start:768,end:992,size:3},{start:992,end:1200,size:4},{start:1200,size:5}]),slideshow:{enabled:t&&t.slideshow&&t.slideshow.enabled||!1,interval:t&&t.slideshow&&t.slideshow.interval||5e3,repeat:t&&t.slideshow&&t.slideshow.repeat||!1}}},_style:function(){var t={container:{},list:{},item:{},tail:{}},e=this._workingWidth,o=this._size;return this.width.window<this._options.list.windowed?(t.container.marginLeft="-".concat(this._options.list.padding,"px"),t.container.marginRight="-".concat(this._options.list.padding,"px"),t.item.width="".concat((e-(o-1)*this._options.item.padding)/o,"px"),t.item.paddingLeft="".concat(this._options.list.padding,"px"),t.item.paddingRight="".concat(this._options.item.padding,"px"),t.item.marginRight="-".concat(this._options.list.padding,"px")):(t.item.paddingLeft="".concat(this._options.item.padding/2,"px"),t.item.paddingRight="".concat(this._options.item.padding/2,"px"),t.container.marginLeft="-".concat(this._options.item.padding/2,"px"),t.container.marginRight="-".concat(this._options.item.padding/2,"px"),t.item.width="".concat((e-(o-1)*this._options.item.padding)/o,"px")),t},_itemWidth:function(){return(this._workingWidth-(this._size-1)*this._options.item.padding)/this._size},_workingWidth:function(){return this.width.window<this._options.list.windowed?this.width.window-2*this._options.list.padding:this.width.container},_size:function(){var t=this._workingWidth;return this._options.responsive.find((function(e){return(!e.start||e.start<=t)&&(!e.end||e.end>=t)})).size},_hasNext:function(){return this._length>this.position+this._size},_hasPrev:function(){return this.position>0}},methods:{go:function(t){var e=this._length-this._size;this.position=t>e?e:t;var o=this._itemWidth*this.position+this.position*this._options.item.padding;this.$refs.list.scrollTo({top:0,left:o,behavior:"smooth"})},prev:function(){this.go(this.position-this._size)},next:function(){this.go(this.position+this._size)},autoscroll:function(){var t=this;this.autoscrollInterval=setInterval((function(){t._hasNext?t.next():t._options.autoscroll.repeat&&(t.position=0,t.go(t.position))}),this._options.autoscroll.interval)},stopAutoscroll:function(){clearInterval(this.slideshowInterval)},runSlideshow:function(){var t=this;this.slideshowInterval=setInterval((function(){t._options.slideshow.repeat&&t.position===t._length-t._size?(t.position=0,t.go(t.position)):(t.position+=1,t.go(t.position))}),this._options.slideshow.interval)},stopSlideshow:function(){clearInterval(this.slideshowInterval)}}};function s(t,e,o,i,n,s,l,r,a,c){"boolean"!=typeof l&&(a=r,r=l,l=!1);const d="function"==typeof o?o.options:o;let h;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),i&&(d._scopeId=i),s?(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__),e&&e.call(this,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},d._ssrRegister=h):e&&(h=l?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),h)if(d.functional){const t=d.render;d.render=function(e,o){return h.call(o),t(e,o)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,h):[h]}return o}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,e)=>function(t,e){const o=l?e.media||"default":t,i=c[o]||(c[o]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);let o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(o),n=i.element.childNodes;n[t]&&i.element.removeChild(n[t]),n.length?i.element.insertBefore(e,n[t]):i.element.appendChild(e)}}}(t,e)}let a;const c={};var d=s({render:function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{ref:"container",staticClass:"vue-horizontal-list"},[t.width.window>t._options.navigation.start?o("div",{staticClass:"vhl-navigation"},[t._hasPrev?o("div",{staticClass:"vhl-btn-left",on:{click:t.prev}},[t._t("nav-prev",[o("svg",{attrs:{fill:t._options.navigation.color,width:"32px",height:"32px",viewBox:"0 0 24 24"}},[o("path",{attrs:{d:"M10.757 12l4.95 4.95a1 1 0 1 1-1.414 1.414l-5.657-5.657a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 0 1 1.414 1.414L10.757 12z"}})])])],2):t._e(),t._v(" "),t._hasNext?o("div",{staticClass:"vhl-btn-right",on:{click:t.next}},[t._t("nav-next",[o("svg",{attrs:{fill:t._options.navigation.color,width:"32px",height:"32px",viewBox:"0 0 24 24"}},[o("path",{attrs:{d:"M13.314 12.071l-4.95-4.95a1 1 0 0 1 1.414-1.414l5.657 5.657a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 0 1-1.414-1.414l4.95-4.95z"}})])])],2):t._e()]):t._e(),t._v(" "),o("div",{staticClass:"vhl-container",style:t._style.container},[o("div",{ref:"list",staticClass:"vhl-list",class:t._options.list.class,style:t._style.list},[t._l(t.items,(function(e,i){return o("div",{key:i,ref:"item",refInFor:!0,staticClass:"vhl-item",class:t._options.item.class,style:t._style.item},[t._t("default",[t._v(t._s(e))],{item:e})],2)})),t._v(" "),o("div",{style:t._style.tail})],2)])])},staticRenderFns:[]},(function(t){t&&t("data-v-811c8004_0",{source:".vue-horizontal-list[data-v-811c8004]{position:relative}.vhl-navigation[data-v-811c8004]{display:flex;align-items:center;position:absolute;width:100%;height:100%;margin-top:-6px}.vhl-btn-left[data-v-811c8004],.vhl-btn-right[data-v-811c8004]{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:24px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);z-index:2}.vhl-btn-left[data-v-811c8004]:hover,.vhl-btn-right[data-v-811c8004]:hover{cursor:pointer}.vhl-btn-left[data-v-811c8004]{margin-left:-24px;margin-right:auto}.vhl-btn-right[data-v-811c8004]{margin-left:auto;margin-right:-24px}.vhl-container[data-v-811c8004]{overflow-y:hidden;height:100%;margin-bottom:-24px}.vhl-list[data-v-811c8004]{display:flex;padding-bottom:24px;margin-bottom:-24px;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}.vhl-item[data-v-811c8004]{box-sizing:content-box;padding-top:24px;padding-bottom:24px}.vhl-list>*[data-v-811c8004]{scroll-snap-align:start;flex-shrink:0}.vhl-item[data-v-811c8004]{z-index:1}",map:void 0,media:void 0})}),n,"data-v-811c8004",!1,void 0,!1,r,void 0,void 0),h=function t(e){t.installed||(t.installed=!0,e.component("VueHorizontalListAutoscroll",d))},p={install:h},f=null;return"undefined"!=typeof window?f=window.Vue:"undefined"!=typeof global&&(f=global.Vue),f&&f.use(p),d.install=h,t.default=d,t}({});