jiku-ui/lib/carousel.js

A Component Library for Vue.js.

module.exports=function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=120)}({0:function(t,e,i){"use strict";function n(t,e,i,n,r,o,s,a){var c,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=i,l._compiled=!0),n&&(l.functional=!0),o&&(l._scopeId="data-v-"+o),s?(c=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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},l._ssrRegister=c):r&&(c=a?function(){r.call(this,(l.functional?this.parent:this).$root.$options.shadowRoot)}:r),c)if(l.functional){l._injectStyles=c;var u=l.render;l.render=function(t,e){return c.call(e),u(t,e)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,c):[c]}return{exports:t,options:l}}i.d(e,"a",(function(){return n}))},120:function(t,e,i){"use strict";i.r(e);var n=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:t.carouselClasses,on:{mouseenter:function(e){return e.stopPropagation(),t.handleMouseEnter(e)},mouseleave:function(e){return e.stopPropagation(),t.handleMouseLeave(e)}}},[i("div",{staticClass:"hn-carousel__container",style:{height:t.height}},[t.arrowDisplay?i("transition",{attrs:{name:"carousel-arrow-left"}},[i("button",{directives:[{name:"show",rawName:"v-show",value:("always"===t.arrow||t.hover)&&(t.loop||t.activeIndex>0),expression:"(arrow === 'always' || hover) && (loop || activeIndex > 0)"}],staticClass:"hn-carousel__arrow hn-carousel__arrow--left",attrs:{type:"button"},on:{mouseenter:function(e){return t.handleButtonEnter("left")},mouseleave:t.handleButtonLeave,click:function(e){return e.stopPropagation(),t.throttledArrowClick(t.activeIndex-1)}}},[i("i",{staticClass:"hn-icon-arrow-left"})])]):t._e(),t.arrowDisplay?i("transition",{attrs:{name:"carousel-arrow-right"}},[i("button",{directives:[{name:"show",rawName:"v-show",value:("always"===t.arrow||t.hover)&&(t.loop||t.activeIndex<t.items.length-1),expression:"(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"}],staticClass:"hn-carousel__arrow hn-carousel__arrow--right",attrs:{type:"button"},on:{mouseenter:function(e){return t.handleButtonEnter("right")},mouseleave:t.handleButtonLeave,click:function(e){return e.stopPropagation(),t.throttledArrowClick(t.activeIndex+1)}}},[i("i",{staticClass:"hn-icon-arrow-right"})])]):t._e(),t._t("default")],2),"none"!==t.indicatorPosition?i("ul",{class:t.indicatorsClasses},t._l(t.items,(function(e,n){return i("li",{key:n,class:["hn-carousel__indicator","hn-carousel__indicator--"+t.direction,{"is-active":n===t.activeIndex}],on:{mouseenter:function(e){return t.throttledIndicatorHover(n)},click:function(e){return e.stopPropagation(),t.handleIndicatorClick(n)}}},[i("button",{staticClass:"hn-carousel__button"},[t.hasLabel?i("span",[t._v(t._s(e.label))]):t._e()])])})),0):t._e()])};n._withStripped=!0;var r=i(27),o=i.n(r),s=i(15),a={name:"HnCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String,loop:{type:Boolean,default:!0},direction:{type:String,default:"horizontal",validator:function(t){return-1!==["horizontal","vertical"].indexOf(t)}}},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},computed:{arrowDisplay:function(){return"never"!==this.arrow&&"vertical"!==this.direction},hasLabel:function(){return this.items.some((function(t){return t.label.toString().length>0}))},carouselClasses:function(){var t=["hn-carousel","hn-carousel--"+this.direction];return"card"===this.type&&t.push("hn-carousel--card"),t},indicatorsClasses:function(){var t=["hn-carousel__indicators","hn-carousel__indicators--"+this.direction];return this.hasLabel&&t.push("hn-carousel__indicators--labels"),"outside"!==this.indicatorPosition&&"card"!==this.type||t.push("hn-carousel__indicators--outside"),t}},watch:{items:function(t){t.length>0&&this.setActiveItem(this.initialIndex)},activeIndex:function(t,e){this.resetItemPosition(e),e>-1&&this.$emit("change",t,e)},autoplay:function(t){t?this.startTimer():this.pauseTimer()},loop:function(){this.setActiveItem(this.activeIndex)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(t,e){var i=this.items.length;return e===i-1&&t.inStage&&this.items[0].active||t.inStage&&this.items[e+1]&&this.items[e+1].active?"left":!!(0===e&&t.inStage&&this.items[i-1].active||t.inStage&&this.items[e-1]&&this.items[e-1].active)&&"right"},handleButtonEnter:function(t){var e=this;"vertical"!==this.direction&&this.items.forEach((function(i,n){t===e.itemInStage(i,n)&&(i.hover=!0)}))},handleButtonLeave:function(){"vertical"!==this.direction&&this.items.forEach((function(t){t.hover=!1}))},updateItems:function(){this.items=this.$children.filter((function(t){return"HnCarouselItem"===t.$options.name}))},resetItemPosition:function(t){var e=this;this.items.forEach((function(i,n){i.translateItem(n,e.activeIndex,t)}))},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.loop&&(this.activeIndex=0)},pauseTimer:function(){this.timer&&(clearInterval(this.timer),this.timer=null)},startTimer:function(){this.interval<=0||!this.autoplay||this.timer||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(t){if("string"==typeof t){var e=this.items.filter((function(e){return e.name===t}));e.length>0&&(t=this.items.indexOf(e[0]))}if(t=Number(t),isNaN(t)||t!==Math.floor(t))console.warn("[Heiner Warn][Carousel]index must be an integer.");else{var i=this.items.length,n=this.activeIndex;this.activeIndex=t<0?this.loop?i-1:0:t>=i?this.loop?0:i-1:t,n===this.activeIndex&&this.resetItemPosition(n)}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(t){this.activeIndex=t},handleIndicatorHover:function(t){"hover"===this.trigger&&t!==this.activeIndex&&(this.activeIndex=t)}},created:function(){var t=this;this.throttledArrowClick=o()(300,!0,(function(e){t.setActiveItem(e)})),this.throttledIndicatorHover=o()(300,(function(e){t.handleIndicatorHover(e)}))},mounted:function(){var t=this;this.updateItems(),this.$nextTick((function(){Object(s.addResizeListener)(t.$el,t.resetItemPosition),t.initialIndex<t.items.length&&t.initialIndex>=0&&(t.activeIndex=t.initialIndex),t.startTimer()}))},beforeDestroy:function(){this.$el&&Object(s.removeResizeListener)(this.$el,this.resetItemPosition),this.pauseTimer()}},c=i(0),l=Object(c.a)(a,n,[],!1,null,null,null);l.options.__file="packages/carousel/src/main.vue";var u=l.exports;u.install=function(t){t.component(u.name,u)};e.default=u},15:function(t,e){t.exports=require("jiku-ui/lib/utils/resize-event")},27:function(t,e){t.exports=require("throttle-debounce/throttle")}}).default;