elfen-component-swiper
Version:
elfen component swiper
301 lines (300 loc) • 16.9 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var classnames = require("classnames");
var styled_components_1 = require("styled-components");
;
;
var Container = (_a = ["\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n"], _a.raw = ["\n position: relative;\n overflow: hidden;\n height: 100%;\n width: 100%;\n"], styled_components_1.default.div(_a));
var Wrapper = (_b = [""], _b.raw = [""], styled_components_1.default.div(_b));
var Indicators = (_c = ["\n position: absolute;\n text-align: center;\n transition: all .3s ease;\n z-index: 10;\n // bottom: 10px;\n // width: 100%;\n\n &.horizontal {\n // bottom: 10px;\n padding-left: 24px;\n padding-right: 24px;\n text-align: ", ";\n bottom: 0;\n width: 100%;\n height: auto;\n }\n\n &.vertical {\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding-top: 24px;\n padding-bottom: 24px;\n // top: 50%;\n // transform: translate3d(0, -50%, 0);\n top: 0;\n right: 10px;\n height: 100%;\n width: auto;\n }\n"], _c.raw = ["\n position: absolute;\n text-align: center;\n transition: all .3s ease;\n z-index: 10;\n // bottom: 10px;\n // width: 100%;\n\n &.horizontal {\n // bottom: 10px;\n padding-left: 24px;\n padding-right: 24px;\n text-align: ", ";\n bottom: 0;\n width: 100%;\n height: auto;\n }\n\n &.vertical {\n display: flex;\n flex-direction: column;\n justify-content: ", ";\n padding-top: 24px;\n padding-bottom: 24px;\n // top: 50%;\n // transform: translate3d(0, -50%, 0);\n top: 0;\n right: 10px;\n height: 100%;\n width: auto;\n }\n"], styled_components_1.default.div(_c, function (props) { return props['data-position']; }, function (props) { return props['data-position'] === 'top' ? 'flex-start' : props['data-position'] === 'bottom' ? 'flex-end' : 'center'; }));
var Bullet = (_d = ["\n border-radius: 50%;\n background-color: ", ";\n width: ", ";\n height: ", ";\n display: inline-block;\n margin: ", ";\n\n &.active {\n background-color: ", ";\n }\n"], _d.raw = ["\n border-radius: 50%;\n background-color: ", ";\n width: ", ";\n height: ", ";\n display: inline-block;\n margin: ", ";\n\n &.active {\n background-color: ", ";\n }\n"], styled_components_1.default.div(_d, function (props) { return props['data-overlay-color']; }, function (props) { return typeof props['data-size'] === 'string' ? props['data-size'] : props['data-size'] + "px"; }, function (props) { return typeof props['data-size'] === 'string' ? props['data-size'] : props['data-size'] + "px"; }, function (props) { return props['data-direction'] === 'horizontal' ? '0 3px' : '3px 0'; }, function (props) { return props['data-active-color']; }));
var Swiper = (function (_super) {
__extends(Swiper, _super);
function Swiper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.container = null;
_this.it = null;
_this.state = {
containerWidth: 0,
containerHeight: 0,
wrapperWidth: 0,
wrapperHeight: 0,
currentIndex: _this.props.defaultIndex,
touching: false,
og: 0,
ogTranslate: 0,
touchId: undefined,
animating: false,
translate: 0,
threshold: _this.props.threshold,
};
_this.updateTab = function (nextIndex, width) { return _this.setState({
currentIndex: nextIndex,
translate: -width * nextIndex,
animating: true,
}); };
_this.handleTouchStart = function (e) {
_this.setState({ pause: false });
var _a = _this.props, direction = _a.direction, children = _a.children;
if (_this.state.touching || React.Children.count(children) <= 1)
return;
var target = e.targetTouches ? e.targetTouches[0] : e;
var og = 0;
if (direction === 'horizontal') {
og = target.pageX - _this.state.translate;
}
else {
og = target.pageY - _this.state.translate;
}
_this.setState({
touching: true,
ogTranslate: _this.state.translate,
touchId: target.identifier,
og: og,
animating: false,
});
};
_this.handleTouchMove = function (e) {
var children = _this.props.children;
var _a = _this.state, touching = _a.touching, touchId = _a.touchId;
if (!touching || React.Children.count(children) <= 1)
return;
var target = e.targetTouches ? e.targetTouches[0] : e;
if (target.identifier !== touchId)
return;
// prevent move background
e.preventDefault();
// prevent move popup to parent which may be a swiper
e.stopPropagation();
var diff = _this.state.translate;
if (_this.props.direction === 'horizontal') {
var pageX = target.pageX;
diff = pageX - _this.state.og;
}
else {
var pageY = target.pageY;
diff = pageY - _this.state.og;
}
_this.setState({
translate: diff,
});
};
_this.handleTouchEnd = function (e) {
var _a = _this.state, touching = _a.touching, wrapperWidth = _a.wrapperWidth, wrapperHeight = _a.wrapperHeight, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight;
var _b = _this.props, children = _b.children, direction = _b.direction, loop = _b.loop;
var threshold = _this.state.threshold;
var length = React.Children.count(children);
if (!touching || length <= 1)
return;
var max = direction === 'horizontal' ? wrapperWidth - containerWidth : wrapperHeight - containerHeight;
var translate = _this.state.translate;
var currentIndex = _this.state.currentIndex;
var ogIndex = currentIndex;
if (translate > 0) {
// start
if (!loop) {
// not to last
translate = 0;
}
else {
// to last
translate = -max;
currentIndex = length - 1;
}
}
else if (translate < -max) {
// end
if (!loop) {
translate = -max;
}
else {
// to first
translate = 0;
currentIndex = 0;
}
}
else {
// default
var diff = Math.abs(translate - _this.state.ogTranslate);
var isNext = (translate - _this.state.ogTranslate) < 0 ? true : false;
if (diff >= threshold) {
if (isNext) {
// next slide
translate = _this.state.ogTranslate - (direction === 'horizontal' ? containerWidth : containerHeight);
currentIndex += 1;
}
else {
// prev slide
translate = _this.state.ogTranslate + (direction === 'horizontal' ? containerWidth : containerHeight);
currentIndex -= 1;
}
}
else {
// revert
translate = _this.state.ogTranslate;
}
}
_this.setState({
touching: false,
og: 0,
touchId: undefined,
ogTranslate: 0,
animating: true,
translate: translate,
currentIndex: currentIndex,
}, function () {
setTimeout(function () {
_this.setState({ animating: false });
if (_this.props.autoplay) {
_this.handleAutoplay(_this.props.direction === 'horizontal' ? _this.state.containerWidth : _this.state.containerHeight);
}
}, _this.props.speed);
});
if (_this.props.onChange)
_this.props.onChange(ogIndex, currentIndex);
};
_this.handleAutoplay = function (width) {
if (_this.it)
return;
var length = React.Children.count(_this.props.children);
_this.it = setInterval(function () {
if (_this.state.touching) {
clearInterval(_this.it);
_this.it = null;
}
var nextIndex = (_this.state.currentIndex + 1 + length) % length;
_this.setState({
currentIndex: nextIndex,
translate: -width * nextIndex,
animating: true,
});
}, 3000);
};
return _this;
}
Swiper.prototype.componentDidMount = function () {
var $container = this.container;
this.computeDefaultAttributes(this.props.children);
if (this.props.autoplay) {
this.handleAutoplay(this.props.direction === 'horizontal' ? $container.offsetWidth : $container.offsetHeight);
}
};
Swiper.prototype.componentWillReceiveProps = function (nextProps) {
if (!nextProps.autoplay && this.it) {
clearInterval(this.it);
this.it = null;
}
else if (nextProps.autoplay && !this.it) {
this.handleAutoplay(this.props.direction === 'horizontal' ? this.state.containerWidth : this.state.containerHeight);
}
if (nextProps.index !== this.props.index) {
this.updateTab(nextProps.index, this.props.direction === 'horizontal' ? this.state.containerWidth : this.state.containerHeight);
}
if (React.Children.count(this.props.children) !== React.Children.count(nextProps.children)) {
this.computeDefaultAttributes(nextProps.children);
}
};
Swiper.prototype.componentWillUnmount = function () {
if (this.it) {
clearInterval(this.it);
this.it = null;
}
};
Swiper.prototype.computeDefaultAttributes = function (children) {
var $container = this.container;
var _a = this.props, direction = _a.direction, defaultIndex = _a.defaultIndex;
var length = React.Children.count(children); // @TODO
this.setState({
currentIndex: 0,
wrapperWidth: direction === 'horizontal' ? $container.offsetWidth * length : $container.offsetWidth,
wrapperHeight: direction === 'vertical' ? $container.offsetHeight * length : $container.offsetHeight,
containerWidth: $container.offsetWidth,
containerHeight: $container.offsetHeight,
threshold: this.state.threshold > 0 ? this.state.threshold : ((direction === 'horizontal' ? $container.offsetWidth : $container.offsetHeight) * 0.3),
translate: defaultIndex <= length ? direction === 'horizontal' ? $container.offsetWidth * (-defaultIndex) : $container.offsetHeight * (-defaultIndex) : 0,
});
};
Swiper.prototype.renderPagination = function () {
var _this = this;
return React.Children.map(this.props.children, function (child, i) {
var cls = classnames('swiper__pagination-bullet', {
active: i === _this.state.currentIndex,
});
var _a = _this.props, indicatorsSize = _a.indicatorsSize, indicatorsOverlayColor = _a.indicatorsOverlayColor, indicatorsActiveColor = _a.indicatorsActiveColor;
return (React.createElement(Bullet, { key: i, className: cls, "data-direction": _this.props.direction, "data-size": indicatorsSize, "data-overlay-color": indicatorsOverlayColor, "data-active-color": indicatorsActiveColor }));
});
};
Swiper.prototype.render = function () {
var _this = this;
var _a = this.props, height = _a.height, width = _a.width, defaultIndex = _a.defaultIndex, direction = _a.direction, speed = _a.speed, indicators = _a.indicators, indicatorsStyle = _a.indicatorsStyle, indicatorsClassName = _a.indicatorsClassName, indicatorsPosition = _a.indicatorsPosition, wrapperStyle = _a.wrapperStyle, wrapperClassName = _a.wrapperClassName, style = _a.style, className = _a.className, children = _a.children, others = __rest(_a, ["height", "width", "defaultIndex", "direction", "speed", "indicators", "indicatorsStyle", "indicatorsClassName", "indicatorsPosition", "wrapperStyle", "wrapperClassName", "style", "className", "children"]);
var cls = classnames(className, {
swiper__horizontal: direction === 'horizontal',
swipper__vertical: direction === 'vertical',
});
var containerStyle = Object.assign({
height: height, width: width,
}, style);
var wrapperStyles = __assign({}, this.props.wrapperStyle, { width: this.state.wrapperWidth || '100%', height: this.state.wrapperHeight || '100%', transition: this.state.animating ? "transform ." + speed / 100 + "s" : 'none', transform: "translate(" + (direction === 'horizontal' ? this.state.translate : 0) + "px, " + (direction === 'vertical' ? this.state.translate : 0) + "px)" });
var indicatorsCount = !indicators ? 0 : React.Children.count(this.props.children);
return (React.createElement(Container, { innerRef: function (ref) { return (_this.container = ref); }, style: containerStyle, className: cls, onTouchStart: this.handleTouchStart, onMouseDown: this.handleTouchStart, onTouchMove: this.handleTouchMove, onMouseMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, onMouseUp: this.handleTouchEnd },
React.createElement(Wrapper, { style: wrapperStyles, className: classnames('swiper_wrapper', wrapperClassName) }, React.Children.map(children, function (child, i) {
return React.cloneElement(child, {
key: i,
className: classnames('swiper__item', child.props.className || ''),
style: Object.assign({}, child.props.style, {
display: direction === 'horizontal' ? 'inline-block' : 'block',
verticalAlign: direction === 'horizontal' ? 'top' : 'bottom',
width: _this.state.containerWidth || '100%',
height: _this.state.containerHeight || '100%',
}),
});
})),
indicators && indicatorsCount > 1 ? (React.createElement(Indicators, { className: classnames('swiper__pagination', direction, indicatorsClassName), style: indicatorsStyle, "data-position": indicatorsPosition }, this.renderPagination())) : null));
};
Swiper.defaultProps = {
height: '100%',
width: '100%',
defaultIndex: 0,
direction: 'horizontal',
threshold: 0,
speed: 300,
autoplay: false,
loop: true,
indicators: true,
indicatorsSize: 8,
indicatorsOverlayColor: '#eee',
indicatorsActiveColor: '#1AAD19',
indicatorsPosition: 'center',
};
return Swiper;
}(React.PureComponent));
exports.default = Swiper;
var _a, _b, _c, _d;