twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
302 lines (252 loc) • 10.8 kB
JavaScript
/* eslint-disable no-console */
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Slideshow = undefined;
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 _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _Common = {
"inner-block": "Common__inner-block___2cOrF",
"disable-inner-block": "Common__disable-inner-block___1MLd0",
"text-color": "Common__text-color___1TD3U",
"desc-text-color": "Common__desc-text-color___2fV3l",
"desc-text-block": "Common__desc-text-block___1Z4b-",
"text-link": "Common__text-link___1jaLy",
"topic-box": "Common__topic-box___2Q-kN"
};
var _Common2 = _interopRequireDefault(_Common);
var _screenSize = require('../../../constants/screen-size');
var _screenSize2 = _interopRequireDefault(_screenSize);
var _slideshow = {
"ss-container": "slideshow__ss-container___sAWLo",
"mobile": "slideshow__mobile___2iX2g",
"ss-slides": "slideshow__ss-slides___3eL49",
"ss-more-images": "slideshow__ss-more-images___XdXUn",
"ss-thumbnails": "slideshow__ss-thumbnails___2uEfT"
};
var _slideshow2 = _interopRequireDefault(_slideshow);
var _reactLazyLoad = require('react-lazy-load');
var _reactLazyLoad2 = _interopRequireDefault(_reactLazyLoad);
var _navigation = require('./navigation');
var _navigation2 = _interopRequireDefault(_navigation);
var _slides = require('./slides');
var _slides2 = _interopRequireDefault(_slides);
var _thumbnails = require('./thumbnails');
var _thumbnails2 = _interopRequireDefault(_thumbnails);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _uiSettings = require('../../../constants/ui-settings');
var _uiSettings2 = _interopRequireDefault(_uiSettings);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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; } // eslint-disable-line
var Slideshow = function (_Component) {
_inherits(Slideshow, _Component);
function Slideshow(props, context) {
_classCallCheck(this, Slideshow);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Slideshow).call(this, props, context));
_this.state = {
currentIndex: 0,
slideshowWidth: 0
};
_this.handleResize = _this._handleResize.bind(_this);
_this.onImageLoad = _this._onImageLoad.bind(_this);
_this.onImageError = _this._onImageError.bind(_this);
_this.slideLeft = _this._slideLeft.bind(_this);
_this.slideRight = _this._slideRight.bind(_this);
_this.slideToIndex = _this._slideToIndex.bind(_this);
return _this;
}
_createClass(Slideshow, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
window.setTimeout(function () {
_this2.handleResize(), 300;
});
window.addEventListener('resize', this.handleResize);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._slideshow = null;
window.removeEventListener('resize', this.handleResize);
}
}, {
key: '_handleResize',
value: function _handleResize() {
if (this._slideshow) {
this.setState({ slideshowWidth: this._slideshow.offsetWidth });
}
}
}, {
key: '_onImageError',
value: function _onImageError(event) {
console.log(event.target.src);
}
}, {
key: '_onImageLoad',
value: function _onImageLoad(event) {
console.log(event.target.src);
}
}, {
key: '_composeSrcSet',
value: function _composeSrcSet(imgObj) {
var desktopSrc = _lodash2.default.get(imgObj, ['desktop', 'url']);
var tabletSrc = _lodash2.default.get(imgObj, ['tablet', 'url']);
var mobileSrc = _lodash2.default.get(imgObj, ['mobile', 'url']);
return mobileSrc + ' ' + _screenSize2.default.smallScreenMinWidth + 'w, ' + tabletSrc + ' ' + _screenSize2.default.mediumScreenMinWidth + 'w, ' + desktopSrc + ' ' + _screenSize2.default.largeScreenMinWidth + 'w';
}
}, {
key: '_parseContent',
value: function _parseContent(content) {
var _this3 = this;
var slides = [];
var thumbnails = [];
_lodash2.default.forEach(content, function (imgObj) {
var slide = {};
var thumbnail = {};
var defaultImg = imgObj.url;
var id = _lodash2.default.get(imgObj, 'id');
slide.src = defaultImg || _lodash2.default.get(imgObj, ['desktop', 'url']);
slide.id = id;
slide.description = imgObj.description;
slide.srcSet = _this3._composeSrcSet(imgObj);
thumbnail.src = _lodash2.default.get(imgObj, ['tiny', 'url'], defaultImg);
thumbnail.id = id;
slides.push(slide);
thumbnails.push(thumbnail);
});
return {
slides: slides,
thumbnails: thumbnails
};
}
}, {
key: '_slideLeft',
value: function _slideLeft(event) {
this._slideToIndex(this.state.currentIndex - 1, event);
}
}, {
key: '_slideRight',
value: function _slideRight(event) {
this._slideToIndex(this.state.currentIndex + 1, event);
}
}, {
key: '_slideToIndex',
value: function _slideToIndex(index, event) {
if (event) {
event.preventDefault();
}
var slideCount = this.props.content.length - 1;
var currentIndex = index;
if (index < 0) {
currentIndex = 0;
} else if (index > slideCount) {
currentIndex = slideCount;
}
this.setState({
currentIndex: currentIndex,
previousIndex: this.state.currentIndex
});
}
}, {
key: 'render',
value: function render() {
var _this4 = this;
var _props = this.props;
var content = _props.content;
var device = _props.device;
var currentIndex = this.state.currentIndex;
var _parseContent2 = this._parseContent(content);
var slides = _parseContent2.slides;
var thumbnails = _parseContent2.thumbnails;
var description = _lodash2.default.get(content, [currentIndex, 'description'], '');
var thumbnailOffset = 8;
var thumbnailsPadding = 70;
var thumbnailsWidth = this.state.slideshowWidth - thumbnailsPadding * 2;
return _react2.default.createElement(
'div',
{
className: (0, _classnames2.default)(_slideshow2.default['ss-container'], _defineProperty({}, _slideshow2.default['mobile'], device === 'mobile' ? true : false)),
ref: function ref(i) {
return _this4._slideshow = i;
}
},
_react2.default.createElement(
_reactLazyLoad2.default,
{ offsetTop: _uiSettings2.default.image.loadingOffset.placeholder },
_react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{
className: _slideshow2.default['ss-slides']
},
_react2.default.createElement(_slides2.default, {
isSwipeable: true,
onImageLoad: this.onImageLoad,
onImageError: this.onImageError,
slides: slides,
slideStart: currentIndex,
slideToIndex: this.slideToIndex,
width: this.state.slideshowWidth
})
),
_react2.default.createElement(
'div',
{ className: (0, _classnames2.default)(_slideshow2.default['ss-more-images'], _Common2.default['inner-block']) },
_react2.default.createElement(_navigation2.default, {
onSlideLeft: this.slideLeft,
onSlideRight: this.slideRight,
isLeftNavDisabled: currentIndex === 0 ? true : false,
isRightNavDisabled: currentIndex === _lodash2.default.get(content, 'length', 0) - 1 ? true : false
}),
_react2.default.createElement(
'div',
{ className: _slideshow2.default['ss-thumbnails'], style: {
width: thumbnailsWidth
} },
_react2.default.createElement(_thumbnails2.default, {
currentIndex: currentIndex,
slideToIndex: this.slideToIndex,
thumbnails: thumbnails,
thumbnailOffset: thumbnailOffset,
width: thumbnailsWidth
})
)
),
_react2.default.createElement(
'div',
{ className: (0, _classnames2.default)('text-justify', _Common2.default['desc-text-block']) },
_react2.default.createElement(
'span',
null,
description
)
)
)
)
);
}
}]);
return Slideshow;
}(_react.Component);
Slideshow.propTypes = {
content: _react2.default.PropTypes.array.isRequired,
customStyles: _react2.default.PropTypes.array,
device: _react2.default.PropTypes.string
};
Slideshow.defaultProps = {
content: [],
customStyles: [],
device: ''
};
exports.Slideshow = Slideshow;