2019-01-12 11:33:27 +08:00
|
|
|
import json2mq from 'json2mq';
|
|
|
|
import BaseMixin from '../../_util/BaseMixin';
|
|
|
|
import { cloneElement } from '../../_util/vnode';
|
|
|
|
import InnerSlider from './inner-slider';
|
|
|
|
import defaultProps from './default-props';
|
|
|
|
import { canUseDOM } from './utils/innerSliderUtils';
|
2020-07-20 16:29:46 +08:00
|
|
|
import { getSlot } from '../../_util/props-util';
|
2020-10-12 13:27:16 +08:00
|
|
|
import { defineComponent } from 'vue';
|
2018-07-20 16:13:21 +08:00
|
|
|
|
2020-10-12 13:27:16 +08:00
|
|
|
export default defineComponent({
|
2020-07-20 16:29:46 +08:00
|
|
|
name: 'Slider',
|
2020-11-07 21:19:50 +08:00
|
|
|
mixins: [BaseMixin],
|
|
|
|
inheritAttrs: false,
|
2018-07-20 16:13:21 +08:00
|
|
|
props: {
|
|
|
|
...defaultProps,
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
data() {
|
|
|
|
this._responsiveMediaHandlers = [];
|
2018-07-20 16:13:21 +08:00
|
|
|
return {
|
|
|
|
breakpoint: null,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2018-07-20 16:13:21 +08:00
|
|
|
},
|
|
|
|
// handles responsive breakpoints
|
2019-01-12 11:33:27 +08:00
|
|
|
beforeMount() {
|
2018-07-20 16:13:21 +08:00
|
|
|
if (this.responsive) {
|
2019-01-12 11:33:27 +08:00
|
|
|
const breakpoints = this.responsive.map(breakpt => breakpt.breakpoint);
|
2018-07-20 16:13:21 +08:00
|
|
|
// sort them in increasing order of their numerical value
|
2019-01-12 11:33:27 +08:00
|
|
|
breakpoints.sort((x, y) => x - y);
|
2018-07-20 16:13:21 +08:00
|
|
|
|
|
|
|
breakpoints.forEach((breakpoint, index) => {
|
|
|
|
// media query for each breakpoint
|
2019-01-12 11:33:27 +08:00
|
|
|
let bQuery;
|
2018-07-20 16:13:21 +08:00
|
|
|
if (index === 0) {
|
2019-01-12 11:33:27 +08:00
|
|
|
bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
|
2018-07-20 16:13:21 +08:00
|
|
|
} else {
|
|
|
|
bQuery = json2mq({
|
|
|
|
minWidth: breakpoints[index - 1] + 1,
|
|
|
|
maxWidth: breakpoint,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
// when not using server side rendering
|
|
|
|
canUseDOM() &&
|
|
|
|
this.media(bQuery, () => {
|
2020-03-18 14:52:02 +08:00
|
|
|
this.setState({ breakpoint });
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
|
|
|
});
|
2018-07-20 16:13:21 +08:00
|
|
|
|
|
|
|
// Register media query for full screen. Need to support resize from small to large
|
|
|
|
// convert javascript object to media query string
|
2019-01-12 11:33:27 +08:00
|
|
|
const query = json2mq({ minWidth: breakpoints.slice(-1)[0] });
|
2018-07-20 16:13:21 +08:00
|
|
|
|
|
|
|
canUseDOM() &&
|
|
|
|
this.media(query, () => {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.setState({ breakpoint: null });
|
|
|
|
});
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
},
|
2020-06-11 16:13:09 +08:00
|
|
|
beforeUnmount() {
|
2019-01-12 11:33:27 +08:00
|
|
|
this._responsiveMediaHandlers.forEach(function(obj) {
|
2020-08-30 22:23:36 +08:00
|
|
|
obj.mql.removeListener(obj.listener);
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-07-20 16:13:21 +08:00
|
|
|
},
|
2020-11-07 15:37:17 +08:00
|
|
|
methods: {
|
|
|
|
innerSliderRefHandler(ref) {
|
|
|
|
this.innerSlider = ref;
|
|
|
|
},
|
|
|
|
media(query, handler) {
|
|
|
|
// javascript handler for css media query
|
|
|
|
const mql = window.matchMedia(query);
|
|
|
|
const listener = ({ matches }) => {
|
|
|
|
if (matches) {
|
|
|
|
handler();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
mql.addListener(listener);
|
|
|
|
listener(mql);
|
|
|
|
this._responsiveMediaHandlers.push({ mql, query, listener });
|
|
|
|
},
|
|
|
|
slickPrev() {
|
|
|
|
this.innerSlider.slickPrev();
|
|
|
|
},
|
|
|
|
slickNext() {
|
|
|
|
this.innerSlider.slickNext();
|
|
|
|
},
|
|
|
|
slickGoTo(slide, dontAnimate = false) {
|
|
|
|
this.innerSlider.slickGoTo(slide, dontAnimate);
|
|
|
|
},
|
|
|
|
slickPause() {
|
|
|
|
this.innerSlider.pause('paused');
|
|
|
|
},
|
|
|
|
slickPlay() {
|
|
|
|
this.innerSlider.handleAutoPlay('play');
|
|
|
|
},
|
|
|
|
},
|
2018-07-20 16:13:21 +08:00
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
let settings;
|
|
|
|
let newProps;
|
2018-07-20 16:13:21 +08:00
|
|
|
if (this.breakpoint) {
|
2019-01-12 11:33:27 +08:00
|
|
|
newProps = this.responsive.filter(resp => resp.breakpoint === this.breakpoint);
|
2018-07-20 16:13:21 +08:00
|
|
|
settings =
|
|
|
|
newProps[0].settings === 'unslick'
|
|
|
|
? 'unslick'
|
2019-01-12 11:33:27 +08:00
|
|
|
: { ...this.$props, ...newProps[0].settings };
|
2018-07-20 16:13:21 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
settings = { ...this.$props };
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// force scrolling by one if centerMode is on
|
|
|
|
if (settings.centerMode) {
|
2019-01-12 11:33:27 +08:00
|
|
|
if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
|
2018-07-20 16:13:21 +08:00
|
|
|
console.warn(
|
2019-08-12 20:38:09 +08:00
|
|
|
`slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}`,
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
settings.slidesToScroll = 1;
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
// force showing one slide and scrolling by one if the fade mode is on
|
|
|
|
if (settings.fade) {
|
|
|
|
if (settings.slidesToShow > 1 && process.env.NODE_ENV !== 'production') {
|
|
|
|
console.warn(
|
2019-08-12 20:38:09 +08:00
|
|
|
`slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}`,
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
|
2018-07-20 16:13:21 +08:00
|
|
|
console.warn(
|
2019-08-12 20:38:09 +08:00
|
|
|
`slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}`,
|
2019-01-12 11:33:27 +08:00
|
|
|
);
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
settings.slidesToShow = 1;
|
|
|
|
settings.slidesToScroll = 1;
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// makes sure that children is an array, even when there is only 1 child
|
2020-07-20 16:29:46 +08:00
|
|
|
let children = getSlot(this) || [];
|
2018-07-20 16:13:21 +08:00
|
|
|
|
|
|
|
// Children may contain false or null, so we should filter them
|
|
|
|
// children may also contain string filled with spaces (in certain cases where we use jsx strings)
|
|
|
|
children = children.filter(child => {
|
|
|
|
if (typeof child === 'string') {
|
2019-01-12 11:33:27 +08:00
|
|
|
return !!child.trim();
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
return !!child;
|
|
|
|
});
|
2018-07-20 16:13:21 +08:00
|
|
|
|
|
|
|
// rows and slidesPerRow logic is handled here
|
2019-01-12 11:33:27 +08:00
|
|
|
if (settings.variableWidth && (settings.rows > 1 || settings.slidesPerRow > 1)) {
|
|
|
|
console.warn(`variableWidth is not supported in case of rows > 1 or slidesPerRow > 1`);
|
|
|
|
settings.variableWidth = false;
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
const newChildren = [];
|
|
|
|
let currentWidth = null;
|
|
|
|
for (let i = 0; i < children.length; i += settings.rows * settings.slidesPerRow) {
|
|
|
|
const newSlide = [];
|
|
|
|
for (let j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) {
|
|
|
|
const row = [];
|
2018-07-20 16:13:21 +08:00
|
|
|
for (let k = j; k < j + settings.slidesPerRow; k += 1) {
|
2020-07-20 16:29:46 +08:00
|
|
|
if (settings.variableWidth && children[k].props.style) {
|
|
|
|
currentWidth = children[k].props.style.width;
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
if (k >= children.length) break;
|
2018-07-20 16:13:21 +08:00
|
|
|
row.push(
|
|
|
|
cloneElement(children[k], {
|
|
|
|
key: 100 * i + 10 * j + k,
|
2020-07-20 16:29:46 +08:00
|
|
|
tabindex: -1,
|
2018-07-20 16:13:21 +08:00
|
|
|
style: {
|
|
|
|
width: `${100 / settings.slidesPerRow}%`,
|
|
|
|
display: 'inline-block',
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
}),
|
|
|
|
);
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
newSlide.push(<div key={10 * i + j}>{row}</div>);
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
if (settings.variableWidth) {
|
|
|
|
newChildren.push(
|
|
|
|
<div key={i} style={{ width: currentWidth }}>
|
|
|
|
{newSlide}
|
2019-01-12 11:33:27 +08:00
|
|
|
</div>,
|
|
|
|
);
|
2018-07-20 16:13:21 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
newChildren.push(<div key={i}>{newSlide}</div>);
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (settings === 'unslick') {
|
2019-01-12 11:33:27 +08:00
|
|
|
const className = 'regular slider ' + (this.className || '');
|
|
|
|
return <div class={className}>{newChildren}</div>;
|
2018-07-20 16:13:21 +08:00
|
|
|
} else if (newChildren.length <= settings.slidesToShow) {
|
2019-01-12 11:33:27 +08:00
|
|
|
settings.unslick = true;
|
2018-07-20 16:13:21 +08:00
|
|
|
}
|
|
|
|
const sliderProps = {
|
2020-07-20 16:29:46 +08:00
|
|
|
...this.$attrs,
|
|
|
|
...settings,
|
|
|
|
children: newChildren,
|
|
|
|
ref: this.innerSliderRefHandler,
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|
2020-08-27 18:34:23 +08:00
|
|
|
return <InnerSlider {...sliderProps} vSlots={this.$slots} __propsSymbol__={[]} />;
|
2018-07-20 16:13:21 +08:00
|
|
|
},
|
2020-10-12 13:27:16 +08:00
|
|
|
});
|