twreporter-react/lib/components/article/slideshow/slides.js

React-Redux site for The Reporter Foundation in Taiwan

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _slides = {
  "slides": "slides__slides___3-XR2",
  "slide": "slides__slide___2H_Zz"
};

var _slides2 = _interopRequireDefault(_slides);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactSwipeable = require('react-swipeable');

var _reactSwipeable2 = _interopRequireDefault(_reactSwipeable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Slides = function (_Component) {
  _inherits(Slides, _Component);

  function Slides(props) {
    _classCallCheck(this, Slides);

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Slides).call(this, props));

    _this.state = {
      offsetPercentage: 0
    };
    return _this;
  }

  _createClass(Slides, [{
    key: '_handleSwiped',
    value: function _handleSwiped(ev, x, y, isFlick) {
      this.setState({ isFlick: isFlick });
    }
  }, {
    key: '_handleSwipedTo',
    value: function _handleSwipedTo(index) {
      var slideTo = this.props.slideStart;
      if (Math.abs(this.state.offsetPercentage) > 30 || this.state.isFlick) {
        slideTo += index;
      }
      this.setState({
        offsetPercentage: 0
      });
      this.props.slideToIndex(slideTo);
    }
  }, {
    key: '_handleSwiping',
    value: function _handleSwiping(index, _, delta) {
      var offsetPercentage = index * (delta / this.props.width * 100);
      this.setState({ offsetPercentage: offsetPercentage });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props;
      var isSwipeable = _props.isSwipeable;
      var onImageError = _props.onImageError;
      var onImageLoad = _props.onImageLoad;
      var slides = _props.slides;
      var slideStart = _props.slideStart;
      var offsetPercentage = this.state.offsetPercentage;


      var slideComponents = _lodash2.default.map(slides, function (slide) {
        return _react2.default.createElement(
          'li',
          {
            key: slide.id,
            className: _slides2.default['slide']
          },
          _react2.default.createElement('img', {
            src: slide.src,
            alt: slide.alt,
            srcSet: slide.srcSet,
            sizes: slide.sizes,
            onLoad: onImageLoad,
            onError: onImageError
          })
        );
      });

      var translate3d = 'translate3d(' + (-slideStart * 100 + offsetPercentage) + '%, 0, 0)';

      var slidesStyle = {
        WebkitTransform: translate3d,
        MozTransform: translate3d,
        msTransform: translate3d,
        OTransform: translate3d,
        transform: translate3d
      };

      // workaround here
      // Put transition in style rather than in CSS class makes animation smoother
      if (offsetPercentage === 0) {
        _lodash2.default.merge(slidesStyle, {
          transition: 'transform .4s ease-out'
        });
      }

      if (isSwipeable) {
        return _react2.default.createElement(
          _reactSwipeable2.default,
          {
            className: _slides2.default['ss-swipeable'],
            key: 'swipeable',
            delta: 1,
            onSwipingLeft: this._handleSwiping.bind(this, -1),
            onSwipingRight: this._handleSwiping.bind(this, 1),
            onSwiped: this._handleSwiped.bind(this),
            onSwipedLeft: this._handleSwipedTo.bind(this, 1),
            onSwipedRight: this._handleSwipedTo.bind(this, -1)
          },
          _react2.default.createElement(
            'ul',
            { className: _slides2.default['slides'], style: slidesStyle },
            slideComponents
          )
        );
      }
      return _react2.default.createElement(
        'ul',
        { className: _slides2.default['slides'], style: slidesStyle },
        slideComponents
      );
    }
  }]);

  return Slides;
}(_react.Component);

exports.default = Slides;