vue-horizontal-list
Version:
A pure vue ssr friendly horizontal list implementation.
1 lines • 14.2 kB
JavaScript
var VueHorizontalList=function(t){"use strict";var i=function(t,i){return t(i={exports:{}},i.exports),i.exports}((function(t,i){t.exports={polyfill:function(){var t=window,i=document;if(!("scrollBehavior"in i.documentElement.style)||!0===t.__forceSmoothScrollPolyfill__){var o,e=t.HTMLElement||t.Element,n={scroll:t.scroll||t.scrollTo,scrollBy:t.scrollBy,elementScroll:e.prototype.scroll||r,scrollIntoView:e.prototype.scrollIntoView},l=t.performance&&t.performance.now?t.performance.now.bind(t.performance):Date.now,s=(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])?f.call(t,i.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):f.call(t,i.body,~~arguments[0].left+(t.scrollX||t.pageXOffset),~~arguments[0].top+(t.scrollY||t.pageYOffset)))},e.prototype.scroll=e.prototype.scrollTo=function(){if(void 0!==arguments[0])if(!0!==a(arguments[0])){var t=arguments[0].left,i=arguments[0].top;f.call(this,this,void 0===t?this.scrollLeft:~~t,void 0===i?this.scrollTop:~~i)}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)}},e.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))},e.prototype.scrollIntoView=function(){if(!0!==a(arguments[0])){var o=h(this),e=o.getBoundingClientRect(),l=this.getBoundingClientRect();o!==i.body?(f.call(this,o,o.scrollLeft+l.left-e.left,o.scrollTop+l.top-e.top),"fixed"!==t.getComputedStyle(o).position&&t.scrollBy({left:e.left,top:e.top,behavior:"smooth"})):t.scrollBy({left:l.left,top:l.top,behavior:"smooth"})}else n.scrollIntoView.call(this,void 0===arguments[0]||arguments[0])}}function r(t,i){this.scrollLeft=t,this.scrollTop=i}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 d(t,i){return"Y"===i?t.clientHeight+s<t.scrollHeight:"X"===i?t.clientWidth+s<t.scrollWidth:void 0}function c(i,o){var e=t.getComputedStyle(i,null)["overflow"+o];return"auto"===e||"scroll"===e}function p(t){var i=d(t,"Y")&&c(t,"Y"),o=d(t,"X")&&c(t,"X");return i||o}function h(t){for(;t!==i.body&&!1===p(t);)t=t.parentNode||t.host;return t}function u(i){var o,e,n,s,r=(l()-i.startTime)/468;s=r=r>1?1:r,o=.5*(1-Math.cos(Math.PI*s)),e=i.startX+(i.x-i.startX)*o,n=i.startY+(i.y-i.startY)*o,i.method.call(i.scrollable,e,n),e===i.x&&n===i.y||t.requestAnimationFrame(u.bind(t,i))}function f(o,e,s){var a,d,c,p,h=l();o===i.body?(a=t,d=t.scrollX||t.pageXOffset,c=t.scrollY||t.pageYOffset,p=n.scroll):(a=o,d=o.scrollLeft,c=o.scrollTop,p=r),u({scrollable:a,method:p,startTime:h,startX:d,startY:c,x:e,y:s})}}}}));i.polyfill;function o(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||function(t,i){if(!t)return;if("string"==typeof t)return e(t,i);var o=Object.prototype.toString.call(t).slice(8,-1);"Object"===o&&t.constructor&&(o=t.constructor.name);if("Map"===o||"Set"===o)return Array.from(t);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return e(t,i)}(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 e(t,i){(null==i||i>t.length)&&(i=t.length);for(var o=0,e=new Array(i);o<i;o++)e[o]=t[o];return e}var n={name:"VueHorizontalList",props:{items:{type:Array,required:!0},options:{type:Object,required:!1}},data:function(){return{position:0,width:{container:0,window:576},scrollTimer:null,autoPlayInterval:null}},mounted:function(){var t=this;this.$resize=function(){t.width.window=window.innerWidth,t.width.container=t.$refs.container.clientWidth},i.polyfill(),this.$resize(),window.addEventListener("resize",this.$resize),this._options.position.start&&this.$nextTick((function(){t.go(t._options.position.start)})),this._options.autoplay.play&&this.runAutoPlay()},beforeDestroy:function(){window.removeEventListener("resize",this.$resize),this.autoPlayInterval&&clearInterval(this.autoPlayInterval)},computed:{_items:function(){return[].concat(o(this.$slots.start?[{type:"start"}]:[]),o(this.items.map((function(t){return{type:"item",item:t}}))),o(this.$slots.end?[{type:"end"}]:[]))},_length:function(){return this._items.length},_options:function(){var t,i,e,n,l,s,r,a,d,c,p,h,u,f,v,m,g,b,y,_,w,x,z,T=this.options;return{navigation:{start:null!==(t=null==T||null===(i=T.navigation)||void 0===i?void 0:i.start)&&void 0!==t?t:992,color:null!==(e=null==T||null===(n=T.navigation)||void 0===n?void 0:n.color)&&void 0!==e?e:"#000"},item:{class:null!==(l=null==T||null===(s=T.item)||void 0===s?void 0:s.class)&&void 0!==l?l:"",padding:null!==(r=null==T||null===(a=T.item)||void 0===a?void 0:a.padding)&&void 0!==r?r:16},list:{class:null!==(d=null==T||null===(c=T.list)||void 0===c?void 0:c.class)&&void 0!==d?d:"",windowed:null!==(p=null==T||null===(h=T.list)||void 0===h?void 0:h.windowed)&&void 0!==p?p:1200,padding:null!==(u=null==T||null===(f=T.list)||void 0===f?void 0:f.padding)&&void 0!==u?u:24},responsive:[].concat(o(null!==(v=null==T?void 0:T.responsive)&&void 0!==v?v:[]),[{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}]),position:{start:null!==(m=null==T||null===(g=T.position)||void 0===g?void 0:g.start)&&void 0!==m?m:0},autoplay:{play:null!==(b=null==T||null===(y=T.autoplay)||void 0===y?void 0:y.play)&&void 0!==b&&b,speed:null!==(_=null==T||null===(w=T.autoplay)||void 0===w?void 0:w.speed)&&void 0!==_?_:2e3,repeat:null!==(x=null==T||null===(z=T.autoplay)||void 0===z?void 0:z.repeat)&&void 0!==x&&x}}},_style:function(){var t={container:{},list:{},item:{},tail:{}},i=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((i-(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((i-(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(i){return(!i.start||i.start<=t)&&(!i.end||i.end>=t)})).size},_hasNext:function(){return this._length>this.position+this._size},_hasPrev:function(){return this.position>0}},methods:{go:function(t){var i=this._length-this._size;this.position=t>i?i:t;var o=this._itemWidth*this.position+this.position*this._options.item.padding;this.$refs.list.scrollTo({top:0,left:o,behavior:"smooth"})},runAutoPlay:function(){this.autoPlayInterval=setInterval(function(){this._options.autoplay.repeat&&this.position===this._length-this._size?(this.position=0,this.go(this.position)):(this.position+=1,this.go(this.position))}.bind(this),this._options.autoplay.speed)},stopAutoPlay:function(){clearInterval(this.autoPlayInterval)},prev:function(){this.go(this.position-this._size)},next:function(){this.go(this.position+this._size)},scrollHandler:function(){clearTimeout(this.scrollTimer),this.scrollTimer=setTimeout(function(){var t=this,i=this.$refs.list.getBoundingClientRect().left,e=this._items.map((function(o,e){var n=t.$refs.item[e].getBoundingClientRect().left;return Math.abs(n-i)}));this.position=e.indexOf(Math.min.apply(Math,o(e)))}.bind(this),50)}},watch:{"options.autoplay.play":function(t,i){t?this.runAutoPlay():this.stopAutoPlay()}}};function l(t,i,o,e,n,l,s,r,a,d){"boolean"!=typeof s&&(a=r,r=s,s=!1);const c="function"==typeof o?o.options:o;let p;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,n&&(c.functional=!0)),e&&(c._scopeId=e),l?(p=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,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},c._ssrRegister=p):i&&(p=s?function(t){i.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){i.call(this,r(t))}),p)if(c.functional){const t=c.render;c.render=function(i,o){return p.call(o),t(i,o)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,p):[p]}return o}const s="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,i)=>function(t,i){const o=s?i.media||"default":t,e=d[o]||(d[o]={ids:new Set,styles:[]});if(!e.ids.has(t)){e.ids.add(t);let o=i.source;if(i.map&&(o+="\n/*# sourceURL="+i.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),e.element||(e.element=document.createElement("style"),e.element.type="text/css",i.media&&e.element.setAttribute("media",i.media),void 0===a&&(a=document.head||document.getElementsByTagName("head")[0]),a.appendChild(e.element)),"styleSheet"in e.element)e.styles.push(o),e.element.styleSheet.cssText=e.styles.filter(Boolean).join("\n");else{const t=e.ids.size-1,i=document.createTextNode(o),n=e.element.childNodes;n[t]&&e.element.removeChild(n[t]),n.length?e.element.insertBefore(i,n[t]):e.element.appendChild(i)}}}(t,i)}let a;const d={};var c=l({render:function(){var t=this,i=t.$createElement,o=t._self._c||i;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,on:{scroll:t.scrollHandler}},[t._l(t._items,(function(i){return o("div",{ref:"item",refInFor:!0,staticClass:"vhl-item",class:t._options.item.class,style:t._style.item},["start"===i.type?t._t("start"):"end"===i.type?t._t("end"):"item"===i.type?t._t("default",[t._v(t._s(i))],{item:i.item}):t._e()],2)})),t._v(" "),o("div",{style:t._style.tail})],2)])])},staticRenderFns:[]},(function(t){t&&t("data-v-8b923bbc_0",{source:".vue-horizontal-list[data-v-8b923bbc]{position:relative}.vhl-navigation[data-v-8b923bbc]{display:flex;align-items:center;position:absolute;width:100%;height:100%;margin-top:-6px}.vhl-btn-left[data-v-8b923bbc],.vhl-btn-right[data-v-8b923bbc]{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-8b923bbc]:hover,.vhl-btn-right[data-v-8b923bbc]:hover{cursor:pointer}.vhl-btn-left[data-v-8b923bbc]{margin-left:-24px;margin-right:auto}.vhl-btn-right[data-v-8b923bbc]{margin-left:auto;margin-right:-24px}.vhl-container[data-v-8b923bbc]{overflow-y:hidden;height:100%;margin-bottom:-24px}.vhl-list[data-v-8b923bbc]{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-8b923bbc]{box-sizing:content-box;padding-top:24px;padding-bottom:24px;z-index:1;min-height:1px}.vhl-list>*[data-v-8b923bbc]{scroll-snap-align:start;flex-shrink:0}",map:void 0,media:void 0})}),n,"data-v-8b923bbc",!1,void 0,!1,r,void 0,void 0),p=function(t){p.installed||(p.installed=!0,t.component("VueHorizontalList",c))},h={install:p},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(h),c.install=p,t.default=c,t}({});