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

React-Redux site for The Reporter Foundation in Taiwan

/*eslint-disable no-console*/
'use strict';

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

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _thumbnails = {
  "thumbnails": "thumbnails__thumbnails___3J-sh",
  "flex-center": "thumbnails__flex-center___1k3Pu",
  "thumbnail": "thumbnails__thumbnail___3Ihp-",
  "grey-out": "thumbnails__grey-out___2GHch"
};

var _thumbnails2 = _interopRequireDefault(_thumbnails);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var defaultThumbnailWidth = 56;

var Thumbnail = function Thumbnail(props) {
  var alt = props.alt;
  var customClassName = props.customClassName;
  var greyOut = props.greyOut;
  var onThumbError = props.onThumbError;
  var onThumbLoad = props.onThumbLoad;
  var src = props.src;
  var slideToIndex = props.slideToIndex;
  var thumbnailWidth = props.thumbnailWidth;


  var _onEvent = function _onEvent(event) {
    console.log(event.target.src);
  };

  var onError = typeof onThumbError === 'function' ? onThumbError : _onEvent;
  var onLoad = typeof onThumbLoad === 'function' ? onThumbLoad : _onEvent;

  return _react2.default.createElement(
    'li',
    {
      className: (0, _classnames2.default)(customClassName, _thumbnails2.default['thumbnail'], greyOut ? _thumbnails2.default['grey-out'] : ''),
      onClick: slideToIndex,
      onTouchStart: slideToIndex
    },
    _react2.default.createElement('img', {
      alt: alt,
      src: src,
      onError: onError,
      onLoad: onLoad,
      style: {
        width: thumbnailWidth,
        height: thumbnailWidth
      }
    })
  );
};

var Thumbnails = function Thumbnails(props) {
  var customClassName = props.customClassName;
  var currentIndex = props.currentIndex;
  var thumbnails = props.thumbnails;
  var thumbnailOffset = props.thumbnailOffset;
  var thumbnailWidth = props.thumbnailWidth;
  var onThumbError = props.onThumbError;
  var onThumbLoad = props.onThumbLoad;
  var slideToIndex = props.slideToIndex;
  var width = props.width;

  thumbnailWidth = thumbnailWidth || defaultThumbnailWidth;

  var _slideToIndex = function _slideToIndex(index, event) {
    slideToIndex(index, event);
  };

  var thumbnailComponents = _lodash2.default.map(thumbnails, function (thumbnail, index) {
    return _react2.default.createElement(Thumbnail, {
      alt: thumbnail.alt,
      customClassName: thumbnail.customClassName,
      greyOut: currentIndex === index ? false : true,
      key: thumbnail.id,
      onThumbLoad: onThumbLoad,
      onThumbError: onThumbError,
      slideToIndex: _slideToIndex.bind(null, index),
      src: thumbnail.src,
      thumbnailWidth: thumbnailWidth
    });
  });

  var length = _lodash2.default.get(thumbnails, 'length', 0);

  // calculate how many thumbnails can show in the thumbnails conatiner
  var maximum = Math.floor((width - thumbnailOffset * (length - 1)) / thumbnailWidth);

  var translateX = void 0;
  if (maximum > currentIndex) {
    translateX = 'translateX(0px)';
  } else {
    // current thumbnail is not shown in the thumbnails container
    translateX = 'translateX(' + (-(currentIndex + 1 - maximum) * thumbnailWidth - thumbnailOffset * 2) + 'px)';
  }
  var style = {
    WebkitTransform: translateX,
    MozTransform: translateX,
    msTransform: translateX,
    OTransform: translateX,
    transform: translateX
  };
  return _react2.default.createElement(
    'ul',
    { className: (0, _classnames2.default)(_thumbnails2.default['thumbnails'], maximum > length ? _thumbnails2.default['flex-center'] : '', customClassName), style: style },
    thumbnailComponents
  );
};

exports.default = Thumbnails;