1 line
No EOL
8.2 KiB
JavaScript
1 line
No EOL
8.2 KiB
JavaScript
var VueHorizontal=function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=n(e).default.extend({name:"VueHorizontal",data:function(){return{left:0,width:0,scrollWidth:0,hasPrev:!1,hasNext:!1,debounceId:void 0}},props:{button:{type:Boolean,default:function(){return!0}},buttonBetween:{type:Boolean,default:function(){return!0}},scroll:{type:Boolean,default:function(){return!1}},responsive:{type:Boolean,default:function(){return!1}},displacement:{type:Number,default:function(){return 1}},snap:{type:String,default:function(){return"start"}}},mounted:function(){this.onScrollDebounce()},beforeDestroy:function(){clearTimeout(this.debounceId)},methods:{children:function(){return this.$refs.container.children},findPrevSlot:function(t){for(var e=this.children(),n=0;n<e.length;n++){var i=e[n].getBoundingClientRect();if(i.left<=t&&t<=i.right)return e[n];if(t<=i.left)return e[n]}},findNextSlot:function(t){for(var e=this.children(),n=0;n<e.length;n++){var i=e[n].getBoundingClientRect();if(!(i.right<=t)){if(i.left<=t)return e[n];if(t<=i.left)return e[n]}}},prev:function(){this.$emit("prev");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*-this.displacement-2.5,i=this.findPrevSlot(n);if(i){var o=i.getBoundingClientRect().left-e;this.scrollToLeft(t.scrollLeft+o)}else{var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft-l)}},next:function(){this.$emit("next");var t=this.$refs.container,e=t.getBoundingClientRect().left,n=e+t.clientWidth*this.displacement+2.5,i=this.findNextSlot(n);if(i){var o=i.getBoundingClientRect().left-e;if(o>2.5)return void this.scrollToLeft(t.scrollLeft+o)}var l=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+l)},scrollToIndex:function(t){var e=this.children();if(e[t]){var n=this.$refs.container,i=e[t].getBoundingClientRect().left-n.getBoundingClientRect().left;this.scrollToLeft(n.scrollLeft+i)}},scrollToLeft:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"smooth",n=this.$refs.container;n.scrollTo({left:t,behavior:e})},onScroll:function(){var t=this.$refs.container;t&&(this.$emit("scroll",{left:t.scrollLeft}),clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollDebounce,100))},onScrollDebounce:function(){var t=this;this.refresh((function(e){t.$emit("scroll-debounce",e)}))},refresh:function(t){var e=this;this.$nextTick((function(){var n=e.calculate();e.left=n.left,e.width=n.width,e.scrollWidth=n.scrollWidth,e.hasNext=n.hasNext,e.hasPrev=n.hasPrev,null==t||t(n)}))},calculate:function(){var t=this.$refs.container,e=this.children()[0];return{left:t.scrollLeft,width:t.clientWidth,scrollWidth:t.scrollWidth,hasNext:t.scrollWidth>t.scrollLeft+t.clientWidth+2.5,hasPrev:function(){var n,i;if(0===t.scrollLeft)return!1;var o=t.getBoundingClientRect().left,l=null!==(n=null==e||null===(i=e.getBoundingClientRect())||void 0===i?void 0:i.left)&&void 0!==n?n:0;return Math.abs(o-l)>=2.5}()}}}});function o(t,e,n,i,o,l,r,a,s,c){"boolean"!=typeof r&&(s=a,a=r,r=!1);const d="function"==typeof n?n.options:n;let h;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),l?(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,s(t)),t&&t._registeredComponents&&t._registeredComponents.add(l)},d._ssrRegister=h):e&&(h=r?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),h)if(d.functional){const t=d.render;d.render=function(e,n){return h.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,h):[h]}return n}const l="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function r(t){return(t,e)=>function(t,e){const n=l?e.media||"default":t,i=s[n]||(s[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);let n=e.source;if(e.map&&(n+="\n/*# sourceURL="+e.map.sources[0]+" */",n+="\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(n),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const t=i.ids.size-1,e=document.createTextNode(n),o=i.element.childNodes;o[t]&&i.element.removeChild(o[t]),o.length?i.element.insertBefore(e,o[t]):i.element.appendChild(e)}}}(t,e)}let a;const s={};var c=o({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"vue-horizontal",staticStyle:{position:"relative",display:"flex"}},[t.button&&t.hasPrev?n("div",{staticClass:"v-hl-btn v-hl-btn-prev",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.prev(e)}}},[t._t("btn-prev",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigate to previous button"}},[n("path",{attrs:{d:"m9.8 12 5 5a1 1 0 1 1-1.4 1.4l-5.7-5.7a1 1 0 0 1 0-1.4l5.7-5.7a1 1 0 0 1 1.4 1.4l-5 5z"}})])])],2):t._e(),t._v(" "),t.button&&t.hasNext?n("div",{staticClass:"v-hl-btn v-hl-btn-next",class:{"v-hl-btn-between":t.buttonBetween},attrs:{role:"button"},on:{click:function(e){return e.stopPropagation(),t.next(e)}}},[t._t("btn-next",[n("svg",{staticClass:"v-hl-svg",attrs:{viewBox:"0 0 24 24","aria-label":"horizontal scroll area navigate to next button"}},[n("path",{attrs:{d:"m14.3 12.1-5-5a1 1 0 0 1 1.4-1.4l5.7 5.7a1 1 0 0 1 0 1.4l-5.7 5.7a1 1 0 0 1-1.4-1.4l5-5z"}})])])],2):t._e(),t._v(" "),n("div",{ref:"container",staticClass:"v-hl-container",class:{"v-hl-responsive":t.responsive,"v-hl-scroll":t.scroll,"v-hl-snap-start":"start"===t.snap,"v-hl-snap-center":"center"===t.snap,"v-hl-snap-end":"end"===t.snap},on:{"&scroll":function(e){return t.onScroll(e)}}},[t._t("default")],2)])},staticRenderFns:[]},(function(t){t&&t("data-v-45080727_0",{source:".v-hl-btn[data-v-45080727]{position:absolute;align-self:center;z-index:1;top:0;bottom:0;display:flex;align-items:center;cursor:pointer}.v-hl-btn-prev[data-v-45080727]{left:0}.v-hl-btn-prev.v-hl-btn-between[data-v-45080727]{transform:translateX(-50%)}.v-hl-btn-next[data-v-45080727]{right:0}.v-hl-btn-next.v-hl-btn-between[data-v-45080727]{transform:translateX(50%)}.v-hl-svg[data-v-45080727]{width:40px;height:40px;margin:6px;padding:6px;border-radius:20px;box-sizing:border-box;background:#fff;color:#000;fill:currentColor;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.v-hl-container[data-v-45080727]{display:flex;width:100%;margin:0;padding:0;border:none;box-sizing:content-box;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.v-hl-container>*[data-v-45080727]{flex-shrink:0;box-sizing:border-box;min-height:1px}.v-hl-snap-start>*[data-v-45080727]{scroll-snap-align:start}.v-hl-snap-center>*[data-v-45080727]{scroll-snap-align:center}.v-hl-snap-end>*[data-v-45080727]{scroll-snap-align:end}.v-hl-container[data-v-45080727]:not(.v-hl-scroll){scrollbar-width:none;-ms-overflow-style:none;padding-bottom:30px;margin-bottom:-30px;clip-path:inset(0 0 30px 0)}.v-hl-container[data-v-45080727]:not(.v-hl-scroll)::-webkit-scrollbar{width:0!important;height:0!important}.v-hl-responsive>*[data-v-45080727]{width:100%;margin-right:24px}.v-hl-responsive[data-v-45080727]>:last-child{margin-right:0}@media (min-width:640px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 24px)/ 2)}}@media (min-width:768px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 48px)/ 3)}}@media (min-width:1024px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 72px)/ 4)}}@media (min-width:1280px){.v-hl-responsive>*[data-v-45080727]{width:calc((100% - 96px)/ 5)}}",map:void 0,media:void 0})}),i,"data-v-45080727",!1,void 0,!1,r,void 0,void 0),d=function(t){d.installed||(d.installed=!0,t.component("VueHorizontal",c))},h={install:d},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(h),c.install=d,t.default=c,Object.defineProperty(t,"__esModule",{value:!0}),t}({},Vue); |