|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401 |
- 'use strict';
-
- exports.__esModule = true;
-
- var _trackHelper = require('./trackHelper');
-
- var _helpers = require('./helpers');
-
- var _helpers2 = _interopRequireDefault(_helpers);
-
- var _objectAssign = require('object-assign');
-
- var _objectAssign2 = _interopRequireDefault(_objectAssign);
-
- var _reactDom = require('react-dom');
-
- var _reactDom2 = _interopRequireDefault(_reactDom);
-
- var _trackUtils = require('../utils/trackUtils');
-
- var _innerSliderUtils = require('../utils/innerSliderUtils');
-
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
- var EventHandlers = {
- // Event handler for previous and next
- // gets called if slide is changed via arrows or dots but not swiping/dragging
- changeSlide: function changeSlide(options) {
- var indexOffset, previousInt, slideOffset, unevenOffset, targetSlide;
- var _props = this.props,
- slidesToScroll = _props.slidesToScroll,
- slidesToShow = _props.slidesToShow,
- centerMode = _props.centerMode,
- rtl = _props.rtl;
- var _state = this.state,
- slideCount = _state.slideCount,
- currentSlide = _state.currentSlide;
-
- unevenOffset = slideCount % slidesToScroll !== 0;
- indexOffset = unevenOffset ? 0 : (slideCount - currentSlide) % slidesToScroll;
-
- if (options.message === 'previous') {
- slideOffset = indexOffset === 0 ? slidesToScroll : slidesToShow - indexOffset;
- targetSlide = currentSlide - slideOffset;
- if (this.props.lazyLoad && !this.props.infinite) {
- previousInt = currentSlide - slideOffset;
- targetSlide = previousInt === -1 ? slideCount - 1 : previousInt;
- }
- } else if (options.message === 'next') {
- slideOffset = indexOffset === 0 ? slidesToScroll : indexOffset;
- targetSlide = currentSlide + slideOffset;
- if (this.props.lazyLoad && !this.props.infinite) {
- targetSlide = (currentSlide + slidesToScroll) % slideCount + indexOffset;
- }
- } else if (options.message === 'dots') {
- // Click on dots
- targetSlide = options.index * options.slidesToScroll;
- if (targetSlide === options.currentSlide) {
- return;
- }
- } else if (options.message === 'children') {
- // Click on the slides
- targetSlide = options.index;
- if (targetSlide === options.currentSlide) {
- return;
- }
- if (this.props.infinite) {
- var direction = (0, _trackUtils.siblingDirection)({ currentSlide: currentSlide, targetSlide: targetSlide, slidesToShow: slidesToShow, centerMode: centerMode, slideCount: slideCount, rtl: rtl });
- if (targetSlide > options.currentSlide && direction === 'left') {
- targetSlide = targetSlide - slideCount;
- } else if (targetSlide < options.currentSlide && direction === 'right') {
- targetSlide = targetSlide + slideCount;
- }
- }
- } else if (options.message === 'index') {
- targetSlide = Number(options.index);
- if (targetSlide === options.currentSlide) {
- return;
- }
- }
- this.slideHandler(targetSlide);
- },
-
- // Accessiblity handler for previous and next
- keyHandler: function keyHandler(e) {
- //Dont slide if the cursor is inside the form fields and arrow keys are pressed
- if (!e.target.tagName.match('TEXTAREA|INPUT|SELECT')) {
- if (e.keyCode === 37 && this.props.accessibility === true) {
- this.changeSlide({
- message: this.props.rtl === true ? 'next' : 'previous'
- });
- } else if (e.keyCode === 39 && this.props.accessibility === true) {
- this.changeSlide({
- message: this.props.rtl === true ? 'previous' : 'next'
- });
- }
- }
- },
- // Focus on selecting a slide (click handler on track)
- selectHandler: function selectHandler(options) {
- this.changeSlide(options);
- },
- // invoked when swiping/dragging starts (just once)
- swipeStart: function swipeStart(e) {
- if (e.target.tagName === 'IMG') {
- e.preventDefault();
- }
- var touches, posX, posY;
-
- // the condition after or looked redundant
- if (this.props.swipe === false) {
- // || ('ontouchend' in document && this.props.swipe === false)) {
- return;
- } else if (this.props.draggable === false && e.type.indexOf('mouse') !== -1) {
- return;
- }
- posX = e.touches !== undefined ? e.touches[0].pageX : e.clientX;
- posY = e.touches !== undefined ? e.touches[0].pageY : e.clientY;
- this.setState({
- dragging: true,
- touchObject: {
- startX: posX,
- startY: posY,
- curX: posX,
- curY: posY
- }
- });
- },
- // continuous invokation while swiping/dragging is going on
- swipeMove: function swipeMove(e) {
- if (!this.state.dragging) {
- e.preventDefault();
- return;
- }
- if (this.state.scrolling) {
- return;
- }
- if (this.state.animating) {
- e.preventDefault();
- return;
- }
- if (this.props.vertical && this.props.swipeToSlide && this.props.verticalSwiping) {
- e.preventDefault();
- }
- var swipeLeft;
- var curLeft, positionOffset;
- var touchObject = this.state.touchObject;
-
- curLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
- slideIndex: this.state.currentSlide,
- trackRef: this.track
- }, this.props, this.state));
- touchObject.curX = e.touches ? e.touches[0].pageX : e.clientX;
- touchObject.curY = e.touches ? e.touches[0].pageY : e.clientY;
- touchObject.swipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curX - touchObject.startX, 2)));
- var verticalSwipeLength = Math.round(Math.sqrt(Math.pow(touchObject.curY - touchObject.startY, 2)));
-
- if (!this.props.verticalSwiping && !this.state.swiping && verticalSwipeLength > 10) {
- this.setState({
- scrolling: true
- });
- return;
- }
-
- if (this.props.verticalSwiping) {
- touchObject.swipeLength = verticalSwipeLength;
- }
-
- positionOffset = (this.props.rtl === false ? 1 : -1) * (touchObject.curX > touchObject.startX ? 1 : -1);
-
- if (this.props.verticalSwiping) {
- positionOffset = touchObject.curY > touchObject.startY ? 1 : -1;
- }
-
- var currentSlide = this.state.currentSlide;
- var dotCount = Math.ceil(this.state.slideCount / this.props.slidesToScroll); // this might not be correct, using getDotCount may be more accurate
- var swipeDirection = (0, _innerSliderUtils.getSwipeDirection)(this.state.touchObject, this.props.verticalSwiping);
- var touchSwipeLength = touchObject.swipeLength;
-
- if (this.props.infinite === false) {
- if (currentSlide === 0 && swipeDirection === 'right' || currentSlide + 1 >= dotCount && swipeDirection === 'left') {
- touchSwipeLength = touchObject.swipeLength * this.props.edgeFriction;
-
- if (this.state.edgeDragged === false && this.props.edgeEvent) {
- this.props.edgeEvent(swipeDirection);
- this.setState({ edgeDragged: true });
- }
- }
- }
- if (this.state.swiped === false && this.props.swipeEvent) {
- this.props.swipeEvent(swipeDirection);
- this.setState({ swiped: true });
- }
-
- if (!this.props.vertical) {
- if (!this.props.rtl) {
- swipeLeft = curLeft + touchSwipeLength * positionOffset;
- } else {
- swipeLeft = curLeft - touchSwipeLength * positionOffset;
- }
- } else {
- swipeLeft = curLeft + touchSwipeLength * (this.state.listHeight / this.state.listWidth) * positionOffset;
- }
-
- if (this.props.verticalSwiping) {
- swipeLeft = curLeft + touchSwipeLength * positionOffset;
- }
-
- this.setState({
- touchObject: touchObject,
- swipeLeft: swipeLeft,
- trackStyle: (0, _trackHelper.getTrackCSS)((0, _objectAssign2.default)({ left: swipeLeft }, this.props, this.state))
- });
-
- if (Math.abs(touchObject.curX - touchObject.startX) < Math.abs(touchObject.curY - touchObject.startY) * 0.8) {
- return;
- }
- if (touchObject.swipeLength > 10) {
- this.setState({
- swiping: true
- });
- e.preventDefault();
- }
- },
- getNavigableIndexes: function getNavigableIndexes() {
- var max = void 0;
- var breakPoint = 0;
- var counter = 0;
- var indexes = [];
-
- if (!this.props.infinite) {
- max = this.state.slideCount;
- } else {
- breakPoint = this.props.slidesToShow * -1;
- counter = this.props.slidesToShow * -1;
- max = this.state.slideCount * 2;
- }
-
- while (breakPoint < max) {
- indexes.push(breakPoint);
- breakPoint = counter + this.props.slidesToScroll;
-
- counter += this.props.slidesToScroll <= this.props.slidesToShow ? this.props.slidesToScroll : this.props.slidesToShow;
- }
-
- return indexes;
- },
- checkNavigable: function checkNavigable(index) {
- var navigables = this.getNavigableIndexes();
- var prevNavigable = 0;
-
- if (index > navigables[navigables.length - 1]) {
- index = navigables[navigables.length - 1];
- } else {
- for (var n in navigables) {
- if (index < navigables[n]) {
- index = prevNavigable;
- break;
- }
-
- prevNavigable = navigables[n];
- }
- }
-
- return index;
- },
- getSlideCount: function getSlideCount() {
- var _this = this;
-
- var centerOffset = this.props.centerMode ? this.state.slideWidth * Math.floor(this.props.slidesToShow / 2) : 0;
-
- if (this.props.swipeToSlide) {
- var swipedSlide = void 0;
-
- var slickList = _reactDom2.default.findDOMNode(this.list);
-
- var slides = slickList.querySelectorAll('.slick-slide');
-
- Array.from(slides).every(function (slide) {
- if (!_this.props.vertical) {
- if (slide.offsetLeft - centerOffset + (0, _innerSliderUtils.getWidth)(slide) / 2 > _this.state.swipeLeft * -1) {
- swipedSlide = slide;
- return false;
- }
- } else {
- if (slide.offsetTop + (0, _innerSliderUtils.getHeight)(slide) / 2 > _this.state.swipeLeft * -1) {
- swipedSlide = slide;
- return false;
- }
- }
-
- return true;
- });
-
- if (!swipedSlide) {
- return 0;
- }
- var currentIndex = this.props.rtl === true ? this.state.slideCount - this.state.currentSlide : this.state.currentSlide;
- var slidesTraversed = Math.abs(swipedSlide.dataset.index - currentIndex) || 1;
-
- return slidesTraversed;
- } else {
- return this.props.slidesToScroll;
- }
- },
-
- swipeEnd: function swipeEnd(e) {
- if (!this.state.dragging) {
- if (this.props.swipe) {
- e.preventDefault();
- }
- return;
- }
- var touchObject = this.state.touchObject;
- var minSwipe = this.state.listWidth / this.props.touchThreshold;
- var swipeDirection = (0, _innerSliderUtils.getSwipeDirection)(touchObject, this.props.verticalSwiping);
-
- if (this.props.verticalSwiping) {
- minSwipe = this.state.listHeight / this.props.touchThreshold;
- }
-
- var wasScrolling = this.state.scrolling;
- // reset the state of touch related state variables.
- this.setState({
- dragging: false,
- edgeDragged: false,
- scrolling: false,
- swiping: false,
- swiped: false,
- swipeLeft: null,
- touchObject: {}
- });
- if (wasScrolling) {
- return;
- }
-
- // Fix for #13
- if (!touchObject.swipeLength) {
- return;
- }
- if (touchObject.swipeLength > minSwipe) {
- e.preventDefault();
-
- if (this.props.onSwipe) {
- this.props.onSwipe(swipeDirection);
- }
-
- var slideCount = void 0,
- newSlide = void 0;
-
- switch (swipeDirection) {
-
- case 'left':
- case 'up':
- newSlide = this.state.currentSlide + this.getSlideCount();
- slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
- this.setState({ currentDirection: 0 });
- break;
-
- case 'right':
- case 'down':
- newSlide = this.state.currentSlide - this.getSlideCount();
- slideCount = this.props.swipeToSlide ? this.checkNavigable(newSlide) : newSlide;
- this.setState({ currentDirection: 1 });
- break;
-
- default:
- slideCount = this.state.currentSlide;
-
- }
- this.slideHandler(slideCount);
- } else {
- // Adjust the track back to it's original position.
- var currentLeft = (0, _trackHelper.getTrackLeft)((0, _objectAssign2.default)({
- slideIndex: this.state.currentSlide,
- trackRef: this.track
- }, this.props, this.state));
-
- this.setState({
- trackStyle: (0, _trackHelper.getTrackAnimateCSS)((0, _objectAssign2.default)({ left: currentLeft }, this.props, this.state))
- });
- }
- },
- onInnerSliderEnter: function onInnerSliderEnter(e) {
- if (this.props.autoplay && this.props.pauseOnHover) {
- this.pause();
- }
- },
- onInnerSliderOver: function onInnerSliderOver(e) {
- if (this.props.autoplay && this.props.pauseOnHover) {
- this.pause();
- }
- },
- onInnerSliderLeave: function onInnerSliderLeave(e) {
- if (this.props.autoplay && this.props.pauseOnHover) {
- this.autoPlay();
- }
- }
- };
-
- exports.default = EventHandlers;
|