85 lines
2.1 KiB
JavaScript
85 lines
2.1 KiB
JavaScript
import classnames from 'classnames'
|
|
import { cloneElement } from '../../_util/vnode'
|
|
|
|
const getDotCount = function (spec) {
|
|
let dots
|
|
|
|
if (spec.infinite) {
|
|
dots = Math.ceil(spec.slideCount / spec.slidesToScroll)
|
|
} else {
|
|
dots =
|
|
Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) +
|
|
1
|
|
}
|
|
|
|
return dots
|
|
}
|
|
|
|
export default {
|
|
functional: true,
|
|
render (createElement, context) {
|
|
const { props, listeners } = context
|
|
const {
|
|
slideCount, slidesToScroll, slidesToShow,
|
|
infinite, currentSlide, appendDots,
|
|
customPaging, clickHandler, dotsClass,
|
|
} = props
|
|
const dotCount = getDotCount({
|
|
slideCount: slideCount,
|
|
slidesToScroll: slidesToScroll,
|
|
slidesToShow: slidesToShow,
|
|
infinite: infinite,
|
|
})
|
|
|
|
// Apply join & split to Array to pre-fill it for IE8
|
|
//
|
|
// Credit: http://stackoverflow.com/a/13735425/1849458
|
|
const { mouseenter, mouseover, mouseleave } = listeners
|
|
const mouseEvents = { mouseenter, mouseover, mouseleave }
|
|
const dots = Array.apply(
|
|
null,
|
|
Array(dotCount + 1)
|
|
.join('0')
|
|
.split('')
|
|
).map((x, i) => {
|
|
const leftBound = i * slidesToScroll
|
|
const rightBound =
|
|
i * slidesToScroll + (slidesToScroll - 1)
|
|
const className = classnames({
|
|
'slick-active':
|
|
currentSlide >= leftBound &&
|
|
currentSlide <= rightBound,
|
|
})
|
|
|
|
const dotOptions = {
|
|
message: 'dots',
|
|
index: i,
|
|
slidesToScroll: slidesToScroll,
|
|
currentSlide: currentSlide,
|
|
}
|
|
function onClick (e) {
|
|
// In Autoplay the focus stays on clicked button even after transition
|
|
// to next slide. That only goes away by click somewhere outside
|
|
if (e) {
|
|
e.preventDefault()
|
|
}
|
|
clickHandler(dotOptions)
|
|
}
|
|
return (
|
|
<li key={i} class={className}>
|
|
{cloneElement(customPaging({ i }), { on: {
|
|
click: onClick,
|
|
}})}
|
|
</li>
|
|
)
|
|
})
|
|
|
|
return cloneElement(appendDots({ dots }), {
|
|
class: dotsClass,
|
|
on: {
|
|
...mouseEvents,
|
|
},
|
|
})
|
|
},
|
|
}
|