twreporter-react-index-page
Version:
twreporter index page version 2
277 lines (215 loc) • 10.9 kB
JavaScript
'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 _templateObject = _taggedTemplateLiteral(['\n width: 100%;\n display: inline-block;\n text-align: center;\n'], ['\n width: 100%;\n display: inline-block;\n text-align: center;\n']),
_templateObject2 = _taggedTemplateLiteral(['\n margin-top: 30px;\n'], ['\n margin-top: 30px;\n']),
_templateObject3 = _taggedTemplateLiteral(['\n text-align: left;\n margin: 6px 0;\n'], ['\n text-align: left;\n margin: 6px 0;\n']);
var _bottomLink = require('./common-utils/bottom-link');
var _bottomLink2 = _interopRequireDefault(_bottomLink);
var _categoryName = require('./common-utils/category-name');
var _categoryName2 = _interopRequireDefault(_categoryName);
var _get = require('lodash/get');
var _get2 = _interopRequireDefault(_get);
var _imgWrapper = require('./common-utils/img-wrapper');
var _imgWrapper2 = _interopRequireDefault(_imgWrapper);
var _mobileFlexSwipeable = require('./mobile-flex-swipeable');
var _mobileFlexSwipeable2 = _interopRequireDefault(_mobileFlexSwipeable);
var _mobileList = require('./common-utils/mobile-list');
var _mobileList2 = _interopRequireDefault(_mobileList);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _strings = require('../constants/strings');
var _strings2 = _interopRequireDefault(_strings);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _section = require('./common-utils/section');
var _section2 = _interopRequireDefault(_section);
var _sectionName = require('./common-utils/section-name');
var _sectionName2 = _interopRequireDefault(_sectionName);
var _sectionStrings = require('../constants/section-strings');
var _sectionStrings2 = _interopRequireDefault(_sectionStrings);
var _reactRedux = require('react-redux');
var _commonVariables = require('../styles/common-variables');
var _imageProcessor = require('../utils/image-processor');
var _mobileMockupSpecification = require('../constants/mobile-mockup-specification');
var _styleUtils = require('../utils/style-utils');
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; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } /* global React */
var _ = {
get: _get2.default
};
var categoryPrefix = _strings2.default.topic + _strings2.default.fullShapeDot;
var moreText = '更多血淚漁場專題文章';
var mobileWidth = '730px';
var tabletWidth = '914px';
var Container = _section2.default.extend(_templateObject);
var TopicFrame = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__TopicFrame',
componentId: 'nwnpob-0'
})(['width: 447px;margin: 0 auto;@media (max-width: ', ') {width: 100%;}'], mobileWidth);
var Title = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__Title',
componentId: 'nwnpob-1'
})(['width: 374px;font-size: ', ';font-weight: ', ';line-height: 1.55;color: ', ';text-align: center;margin: 6px auto 0 auto;@media (max-width: ', ') {font-size: ', ';width: ', '%;}'], _commonVariables.fonts.size.title.large, _commonVariables.fonts.weight.semiBold, _commonVariables.colors.textGrey, mobileWidth, _commonVariables.fonts.size.title.medium, _mobileMockupSpecification.itemWidthPct);
var Description = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__Description',
componentId: 'nwnpob-2'
})(['margin-top: 6px;width: 447px;font-size: ', ';line-height: 1.43;text-align: justify;color: ', ';@media (max-width: ', ') {width: ', '%;margin: 6px auto 0 auto;}'], _commonVariables.fonts.size.large, _commonVariables.colors.textGrey, mobileWidth, _mobileMockupSpecification.itemWidthPct);
// container for relateds FlexItem
var FlexBox = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__FlexBox',
componentId: 'nwnpob-3'
})(['margin-top: 48px;min-height: 335px;padding: 0 45px;display: flex;justify-content: space-between;@media (max-width: ', ') {display: none;}'], mobileWidth);
// container for each related articles
var FlexItem = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__FlexItem',
componentId: 'nwnpob-4'
})(['min-height: 335px;max-width: 290px;&:nth-child(2) {margin: 0 20px;}@media (max-width: ', ') {max-width: 219px;}@media (max-width: ', ') {max-width: 100%;}'], tabletWidth, mobileWidth);
var MobileList = _mobileList2.default.extend(_templateObject2);
var RelatedsContentFrame = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__RelatedsContentFrame',
componentId: 'nwnpob-5'
})(['width: 100%;height: auto;padding: 0 8px 0 8px;']);
var RelatedCategory = _categoryName2.default.extend(_templateObject3);
var RelatedTitle = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__RelatedTitle',
componentId: 'nwnpob-6'
})(['height: auto;font-size: ', ';font-weight: ', ';color: ', ';@media (max-width: ', ') {width: 100%;}', ';'], _commonVariables.fonts.size.medium, _commonVariables.fonts.weight.semiBold, _commonVariables.colors.textGrey, tabletWidth, (0, _styleUtils.truncate)('relative', 1.5, 2, '#f2f2f2'));
var RelatedDescription = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__RelatedDescription',
componentId: 'nwnpob-7'
})(['margin-top: 6px;height: auto;font-size: ', ';line-height: 20px;color: ', ';', ';@media (max-width: ', ') {width: 100%;}'], _commonVariables.fonts.size.base, _commonVariables.colors.textGrey, (0, _styleUtils.truncate)('relative', 1.43, 3, '#f2f2f2'), tabletWidth);
var MoreFrame = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__MoreFrame',
componentId: 'nwnpob-8'
})(['margin: 60px auto 0 auto;@media (max-width: ', ') {margin: 40px auto 0 auto;}'], mobileWidth);
var ImgFrame = _styledComponents2.default.div.withConfig({
displayName: 'latest-topic__ImgFrame',
componentId: 'nwnpob-9'
})(['height: 186px;']);
var LatestTopic = function (_React$PureComponent) {
_inherits(LatestTopic, _React$PureComponent);
function LatestTopic() {
_classCallCheck(this, LatestTopic);
return _possibleConstructorReturn(this, (LatestTopic.__proto__ || Object.getPrototypeOf(LatestTopic)).apply(this, arguments));
}
_createClass(LatestTopic, [{
key: 'render',
value: function render() {
var data = this.props.data;
var maxSwipableItems = 2;
var relateds = _.get(data, 'relateds', []).slice(0, 3).map(function (post) {
return React.createElement(
FlexItem,
{
key: _.get(post, 'id'),
mobileWidth: mobileWidth
},
React.createElement(
ImgFrame,
null,
React.createElement(_imgWrapper2.default, {
alt: _.get(post, 'hero_image.description'),
src: _.get(post, 'hero_image.resized_targets.mobile.url'),
srcSet: (0, _imageProcessor.getImageSrcSet)(_.get(post, 'hero_image'))
})
),
React.createElement(
RelatedsContentFrame,
null,
React.createElement(
RelatedCategory,
null,
'' + categoryPrefix + _.get(data, 'topic_name', '')
),
React.createElement(
RelatedTitle,
null,
_.get(post, 'title', '')
),
React.createElement(
RelatedDescription,
null,
_.get(post, 'og_description', '')
)
)
);
});
return React.createElement(
Container,
{
mobileWidth: mobileWidth
},
React.createElement(
_sectionName2.default,
{
mobileWidth: mobileWidth
},
React.createElement(
'span',
null,
_sectionStrings2.default.latestTopic
)
),
React.createElement(
TopicFrame,
null,
React.createElement(
_categoryName2.default,
null,
'' + categoryPrefix + _.get(data, 'topic_name', '')
),
React.createElement(
Title,
null,
_.get(data, 'title', '')
),
React.createElement(
Description,
null,
_.get(data, 'og_description', '')
)
),
React.createElement(
FlexBox,
null,
relateds
),
React.createElement(
MobileList,
{
maxWidth: mobileWidth
},
React.createElement(
_mobileFlexSwipeable2.default.SwipableFlexItems,
{
mobileWidth: mobileWidth,
maxSwipableItems: maxSwipableItems
},
relateds
)
),
React.createElement(
MoreFrame,
null,
React.createElement(_bottomLink2.default, {
text: moreText
})
)
);
}
}]);
return LatestTopic;
}(React.PureComponent);
LatestTopic.defaultProps = {
data: {}
};
LatestTopic.propTypes = {
data: _propTypes2.default.object
};
exports.default = (0, _reactRedux.connect)()(LatestTopic);