backpack-ui/dist/components/cardShelfVideoSwiper/index.js

Lonely Planet's Components

"use strict";

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

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _defineProperty2 = require("babel-runtime/helpers/defineProperty");

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _slider, _default, _sliderInner, _mediaQueries;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _reactSlick = require("react-slick");

var _reactSlick2 = _interopRequireDefault(_reactSlick);

var _dimensions = require("../../styles/dimensions");

var _dimensions2 = _interopRequireDefault(_dimensions);

var _mq = require("../../styles/mq");

var _mq2 = _interopRequireDefault(_mq);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _grid = require("../../utils/grid");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

var _cardShelf = require("../cardShelf");

var _paginatorButton = require("../paginatorButton");

var _paginatorButton2 = _interopRequireDefault(_paginatorButton);

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

var styles = {
  slider: (_slider = {}, (0, _defineProperty3.default)(_slider, "@media (max-width: " + _mq2.default.max[768] + ")", {
    marginBottom: "-30px",
    marginTop: "-15px",
    paddingBottom: "30px",
    paddingTop: "15px"
  }), (0, _defineProperty3.default)(_slider, "@media (min-width: " + _mq2.default.min[768] + ")", {
    width: "calc(100% + 100px)",
    padding: "30px 50px 80px",
    marginTop: "-30px",
    marginLeft: "-50px",
    marginBottom: "-80px",
    overflow: "hidden",
    position: "relative"
  }), _slider),

  sliderOuter: {
    default: (_default = {}, (0, _defineProperty3.default)(_default, "@media (max-width: " + _mq2.default.max[480] + ")", {
      marginLeft: "-15px",
      marginRight: "-15px",
      width: "calc(100% + 15px + 15px)"
    }), (0, _defineProperty3.default)(_default, "@media (min-width: " + _mq2.default.min[480] + ") and (max-width: " + _mq2.default.max[768] + ")", {
      marginLeft: "-30px",
      marginRight: "-30px",
      width: "calc(100% + 30px + 30px)"
    }), _default),

    threeSlides: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max[768] + ")", {
      height: "252px",
      overflow: "hidden"
    }),

    fourSlides: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max[768] + ")", {
      height: "400px",
      overflow: "hidden"
    })
  },

  sliderInner: (_sliderInner = {}, (0, _defineProperty3.default)(_sliderInner, "@media (max-width: " + _mq2.default.max[480] + ")", {
    paddingLeft: "15px",
    paddingRight: "15px"
  }), (0, _defineProperty3.default)(_sliderInner, "@media (min-width: " + _mq2.default.min[480] + ") and (max-width: " + _mq2.default.max[768] + ")", {
    paddingLeft: "30px",
    paddingRight: "30px"
  }), (0, _defineProperty3.default)(_sliderInner, "@media (max-width: " + _mq2.default.max[768] + ")", {
    overflowX: "auto",
    overflowY: "hidden",
    "-webkit-overflow-scrolling": "touch"
  }), _sliderInner)
};

var scopedStyles = {
  ".slick-list": {
    overflow: "visible",
    position: "relative",
    width: "100%",
    maxWidth: _dimensions2.default.maxWidth + "px"
  },

  ".slick-track": {
    display: "flex",
    width: "100% !important"
  },

  ".slick-slide": {
    transition: "opacity " + _timing2.default.default + " ease",
    float: "none !important",
    height: "auto",
    width: (0, _grid.percentage)("410px", _dimensions2.default.maxWidth + "px") + " !important",
    maxWidth: "410px",
    minWidth: "216px",
    flex: "1 0 auto"
  },

  ".slick-arrow": {
    display: "none !important"
  },

  ".PaginatorButton": {
    position: "absolute",
    top: (0, _grid.percentage)("188px", "362px"),
    zIndex: _zIndex2.default.middle
  },

  ".PaginatorButton:first-of-type": {
    left: "-20px"
  },

  ".PaginatorButton:last-of-type": {
    right: "-20px"
  },

  ".Card--video": {
    height: "100% !important",
    width: "100% !important"
  },

  mediaQueries: (_mediaQueries = {}, (0, _defineProperty3.default)(_mediaQueries, "(max-width: " + _mq2.default.max[768] + ")", {
    ".slick-slide + .slick-slide": {
      marginLeft: "15px"
    },

    ".PaginatorButton": {
      display: "none !important"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[768] + ")", {
    ".slick-slide:not(.slick-active)": {
      opacity: 0,
      pointerEvents: "none"
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[768] + ") and (max-width: " + _mq2.default.max[1410] + ")", {
    ".slick-slide + .slick-slide": {
      marginLeft: (0, _grid.percentage)("30px", _dimensions2.default.maxWidth + "px")
    }
  }), (0, _defineProperty3.default)(_mediaQueries, "(min-width: " + _mq2.default.min[1410] + ")", {
    ".slick-slide + .slick-slide": {
      marginLeft: "30px"
    }
  }), _mediaQueries)
};

var threeSlides = {
  ".slick-slide": {
    width: (0, _grid.percentage)("410px", _dimensions2.default.maxWidth + "px") + " !important",
    maxWidth: "410px"
  },

  ".PaginatorButton": {
    top: (0, _grid.percentage)("188px", "362px")
  }
};

var fourSlides = {
  ".slick-slide": {
    width: (0, _grid.percentage)("300px", _dimensions2.default.maxWidth + "px") + " !important",
    maxWidth: "300px"
  },

  ".PaginatorButton": {
    top: (0, _grid.percentage)("169px", "493px")
  }
};

var CardShelfVideoSwiper = function (_Component) {
  (0, _inherits3.default)(CardShelfVideoSwiper, _Component);
  (0, _createClass3.default)(CardShelfVideoSwiper, null, [{
    key: "getPagination",
    value: function getPagination(direction) {
      return _react2.default.createElement(_paginatorButton2.default, { direction: direction });
    }
  }]);

  function CardShelfVideoSwiper(props) {
    (0, _classCallCheck3.default)(this, CardShelfVideoSwiper);

    var _this = (0, _possibleConstructorReturn3.default)(this, (CardShelfVideoSwiper.__proto__ || (0, _getPrototypeOf2.default)(CardShelfVideoSwiper)).call(this, props));

    _this.state = {
      nextPagination: false,
      prevPagination: false
    };

    _this.slideRefs = [];
    _this.hasEnoughSlides = _this.hasEnoughSlides.bind(_this);
    _this.checkAcitveSlide = _this.checkAcitveSlide.bind(_this);
    _this.renderPagination = _this.renderPagination.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(CardShelfVideoSwiper, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.renderPagination();
    }
  }, {
    key: "checkAcitveSlide",
    value: function checkAcitveSlide(index) {
      return this.slideRefs[index] && this.slideRefs[index].classList.contains("slick-active");
    }
  }, {
    key: "hasEnoughSlides",
    value: function hasEnoughSlides() {
      return this.props.children.length >= this.props.slidesVisible;
    }
  }, {
    key: "renderPagination",
    value: function renderPagination() {
      var children = this.props.children;


      if (this.hasEnoughSlides()) {
        this.setState({
          prevPagination: !this.checkAcitveSlide(0),
          nextPagination: !this.checkAcitveSlide(children.length - 1)
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          children = _props.children,
          heading = _props.heading,
          href = _props.href,
          slidesVisible = _props.slidesVisible,
          sliderOptions = _props.sliderOptions,
          style = _props.style;


      return _react2.default.createElement(
        _cardShelf.CardShelf,
        {
          className: "CardShelf--video",
          style: style
        },
        heading && _react2.default.createElement(_cardShelf.CardShelfHeader, {
          heading: heading,
          href: href
        }),
        _react2.default.createElement(
          "div",
          {
            style: [styles.slider, styles.sliderOuter.default, slidesVisible === 3 && styles.sliderOuter.threeSlides, slidesVisible === 4 && styles.sliderOuter.fourSlides]
          },
          _react2.default.createElement(
            "div",
            { style: [styles.slider, styles.sliderInner] },
            _react2.default.createElement(_radium.Style, {
              scopeSelector: ".CardShelf--video",
              rules: scopedStyles
            }),
            slidesVisible === 3 && _react2.default.createElement(_radium.Style, {
              scopeSelector: ".CardShelf--video",
              rules: threeSlides
            }),
            slidesVisible === 4 && _react2.default.createElement(_radium.Style, {
              scopeSelector: ".CardShelf--video",
              rules: fourSlides
            }),
            _react2.default.createElement(
              _reactSlick2.default,
              (0, _extends3.default)({}, sliderOptions, {
                afterChange: this.renderPagination,
                slidesToShow: slidesVisible,
                nextArrow: this.state.nextPagination && CardShelfVideoSwiper.getPagination("right"),
                prevArrow: this.state.prevPagination && CardShelfVideoSwiper.getPagination("left")
              }),
              _react2.default.Children.map(children, function (child, i) {
                return _react2.default.createElement(
                  "div",
                  {
                    key: i,
                    ref: function ref(node) {
                      return _this2.slideRefs[i] = node;
                    }
                  },
                  child
                );
              })
            )
          )
        )
      );
    }
  }]);
  return CardShelfVideoSwiper;
}(_react.Component);

CardShelfVideoSwiper.propTypes = {
  children: _propTypes2.default.arrayOf(_propTypes2.default.element).isRequired,
  heading: _propTypes2.default.string,
  href: _propTypes2.default.string,
  slidesVisible: _propTypes2.default.oneOf([3, 4]),
  sliderOptions: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.element, _propTypes2.default.object, _propTypes2.default.array])),
  style: _propTypes4.default.style
};

CardShelfVideoSwiper.defaultProps = {
  slidesVisible: 3,
  sliderOptions: {
    dots: false,
    infinite: false,
    slidesToScroll: 1,
    variableWidth: true,
    swipe: false,
    speed: 400,
    responsive: [{
      breakpoint: 0,
      settings: "unslick"
    }, {
      breakpoint: 768,
      settings: {
        dots: false,
        infinite: false,
        slidesToScroll: 1,
        variableWidth: true,
        swipe: false,
        speed: 400
      }
    }]
  }
};

exports.default = (0, _radium2.default)(CardShelfVideoSwiper);