twreporter-react-index-page/lib/components/photography-section.js

twreporter index page version 2

'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 _bottomLink = require('./common-utils/bottom-link');

var _bottomLink2 = _interopRequireDefault(_bottomLink);

var _categoryName = require('./common-utils/category-name');

var _categoryName2 = _interopRequireDefault(_categoryName);

var _imgWrapper = require('./common-utils/img-wrapper');

var _imgWrapper2 = _interopRequireDefault(_imgWrapper);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _sectionName = require('./common-utils/section-name');

var _sectionName2 = _interopRequireDefault(_sectionName);

var _reactWaypoint = require('react-waypoint');

var _reactWaypoint2 = _interopRequireDefault(_reactWaypoint);

var _reduxStateFields = require('../constants/redux-state-fields');

var _reduxStateFields2 = _interopRequireDefault(_reduxStateFields);

var _categoryStrings = require('../constants/category-strings');

var _categoryStrings2 = _interopRequireDefault(_categoryStrings);

var _get = require('lodash/get');

var _get2 = _interopRequireDefault(_get);

var _sectionStrings = require('../constants/section-strings');

var _sectionStrings2 = _interopRequireDefault(_sectionStrings);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactRedux = require('react-redux');

var _posts = require('../actions/posts');

var _commonVariables = require('../styles/common-variables');

var _imageProcessor = require('../utils/image-processor');

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; } /* global React */


var _ = {
  get: _get2.default

  // If window is less than oneColumnWidth,
  // there will be only one column. Default is two columns.
};var oneColumnWidth = 700;
var tabletWidth = 928;

var Section = _styledComponents2.default.div.withConfig({
  displayName: 'photography-section__Section',
  componentId: 'wezbbs-0'
})(['position: relative;background-color: ', ';padding-bottom: ', ';padding-top: 100px;@media (max-width: ', 'px) {padding-top: 0px;}'], function (props) {
  return props.isAutoHover ? '#fff' : '#08192d';
}, function (props) {
  return props.isAutoHover ? '40px' : '80px';
}, oneColumnWidth);

var Listing = _styledComponents2.default.ul.withConfig({
  displayName: 'photography-section__Listing',
  componentId: 'wezbbs-1'
})(['padding-left: 0px;max-width: 928px;margin: 0 auto;position: relative;padding-bottom: 60px;@media (max-width: ', 'px) {max-width: 700px;}@media (max-width: ', 'px) {padding-top: 0px;padding-bottom: 40px;max-width: 100%;}'], tabletWidth, oneColumnWidth);

var Item = _styledComponents2.default.li.withConfig({
  displayName: 'photography-section__Item',
  componentId: 'wezbbs-2'
})(['max-width: 464px;display: inline-block;vertical-align: bottom;@media (max-width: ', 'px) {max-width: 349px;}@media (max-width: ', 'px) {max-width: 100%;width: 100%;height: 100%;display: block;}'], tabletWidth, oneColumnWidth);
var Title = _styledComponents2.default.div.withConfig({
  displayName: 'photography-section__Title',
  componentId: 'wezbbs-3'
})(['position: absolute;color: #fff;font-size: ', ';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;line-height: 1.5;text-align: justify;font-weight: ', ';'], _commonVariables.fonts.size.title.base, _commonVariables.fonts.weight.medium);

var Img = _styledComponents2.default.div.withConfig({
  displayName: 'photography-section__Img',
  componentId: 'wezbbs-4'
})(['position: relative;cursor: pointer;width: 464px;height: 310px;@media (max-width: ', 'px) {margin: 0 auto;width: 350px;height: 234px;}@media (max-width: ', 'px) {width: 100%;height: 100%;}'], tabletWidth, oneColumnWidth);

var Overlay = _styledComponents2.default.div.withConfig({
  displayName: 'photography-section__Overlay',
  componentId: 'wezbbs-5'
})(['position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: ', ';transition: .5s ease;background-color: rgba(21, 54, 84, 0.7);@media (min-width: ', 'px) {&:hover {opacity: 1;}}'], function (props) {
  return props.isHover ? 1 : 0;
}, oneColumnWidth);

var More = _styledComponents2.default.div.withConfig({
  displayName: 'photography-section__More',
  componentId: 'wezbbs-6'
})(['text-align: center;']);

var Photography = function (_React$PureComponent) {
  _inherits(Photography, _React$PureComponent);

  function Photography() {
    _classCallCheck(this, Photography);

    return _possibleConstructorReturn(this, (Photography.__proto__ || Object.getPrototypeOf(Photography)).apply(this, arguments));
  }

  _createClass(Photography, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          title = _props.title,
          imgObj = _props.imgObj,
          isHover = _props.isHover;


      return React.createElement(
        Item,
        null,
        React.createElement(
          Img,
          null,
          React.createElement(
            _imgWrapper2.default,
            {
              alt: _.get(imgObj, 'description'),
              src: _.get(imgObj, 'resized_targets.mobile.url'),
              srcSet: (0, _imageProcessor.getImageSrcSet)(imgObj)
            },
            React.createElement(
              Overlay,
              {
                isHover: isHover
              },
              React.createElement(
                Title,
                null,
                React.createElement(
                  _categoryName2.default,
                  null,
                  _categoryStrings2.default.photography
                ),
                title
              )
            )
          )
        )
      );
    }
  }]);

  return Photography;
}(React.PureComponent);

Photography.defaultProps = {
  title: '',
  imgObj: {},
  isHover: false
};

Photography.propTypes = {
  title: _propTypes2.default.string,
  imgObj: _propTypes2.default.object,
  isHover: _propTypes2.default.bool
};

var PhotographySection = function (_React$Component) {
  _inherits(PhotographySection, _React$Component);

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

    var _this2 = _possibleConstructorReturn(this, (PhotographySection.__proto__ || Object.getPrototypeOf(PhotographySection)).call(this, props));

    _this2.state = {
      eleTouchViewportTop: -1,
      // when the width size is less than oneColumnWidth,
      // we assume the device is mobile,
      // so enable auto hovering.
      isAutoHover: false
    };

    _this2.itemsToShow = 4;
    _this2.onLeave = _this2._onElementTouchViewportTop.bind(_this2, -1);
    _this2.onEnters = [];
    _this2.onEnter = _this2._onElementTouchViewportTop.bind(_this2);
    return _this2;
  }

  _createClass(PhotographySection, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      // fetch the posts in advance
      this.props.fetchPhotographyPostsOnIndexPage();
      this._checkViewportWidth();

      var resizeTimeout = void 0;
      function resizeThrottler() {
        var _checkViewportWidth = this._checkViewportWidth.bind(this);
        // ignore resize events as long as an actualResizeHandler execution is in the queue
        if (!resizeTimeout) {
          resizeTimeout = setTimeout(function () {
            resizeTimeout = null;
            _checkViewportWidth();
            // The _checkViewportWidth will execute at a rate of 15fps
          }, 500);
        }
      }

      // add resize event listener
      window.addEventListener('resize', resizeThrottler.bind(this), false);
    }
  }, {
    key: '_checkViewportWidth',
    value: function _checkViewportWidth() {
      var innerW = _.get(window, 'innerWidth', oneColumnWidth);
      this.setState({
        isAutoHover: innerW < oneColumnWidth
      });
    }
  }, {
    key: '_onElementTouchViewportTop',
    value: function _onElementTouchViewportTop(index) {
      if (this.state.isAutoHover) {
        this.setState({
          eleTouchViewportTop: index
        });
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var items = this.props.items;
      var _state = this.state,
          eleTouchViewportTop = _state.eleTouchViewportTop,
          isAutoHover = _state.isAutoHover;


      var postComps = items.slice(0, this.itemsToShow).map(function (item, index) {
        var imgObj = _.get(item, 'hero_image') || _.get(item, 'og_image');
        var isHover = false;
        if (isAutoHover) {
          isHover = eleTouchViewportTop === index;
        }
        return React.createElement(
          _reactWaypoint2.default,
          {
            key: _.get(item, 'id'),
            onEnter: function onEnter() {
              _this3.onEnter(index);
            },
            topOffset: '8%',
            bottomOffset: '90%'
          },
          React.createElement(
            'span',
            null,
            React.createElement(Photography, {
              title: _.get(item, 'title'),
              imgObj: imgObj,
              isHover: isHover
            })
          )
        );
      }, this);

      return React.createElement(
        _reactWaypoint2.default,
        {
          key: 'section_check_point',
          onLeave: this.onLeave
        },
        React.createElement(
          'div',
          null,
          React.createElement(
            Section,
            {
              isAutoHover: isAutoHover
            },
            React.createElement(
              _sectionName2.default,
              {
                mobileWidth: oneColumnWidth + 'px'
              },
              React.createElement(
                'span',
                null,
                _sectionStrings2.default.photography
              )
            ),
            React.createElement(
              Listing,
              null,
              postComps
            ),
            React.createElement(
              More,
              null,
              React.createElement(_bottomLink2.default, { text: '\u66F4\u591A\u5F71\u50CF\u65B0\u805E', isDarkBg: true })
            )
          )
        )
      );
    }
  }]);

  return PhotographySection;
}(React.Component);

PhotographySection.defaultProps = {
  items: [],
  fetchPhotographyPostsOnIndexPage: function fetchPhotographyPostsOnIndexPage() {}
};

PhotographySection.propTypes = {
  items: _propTypes2.default.array,
  fetchPhotographyPostsOnIndexPage: _propTypes2.default.func
};

function mapStateToProps(state) {
  var postSlugs = _.get(state, _reduxStateFields2.default.indexPage + '.' + _reduxStateFields2.default.photographies, []);
  var entities = _.get(state, _reduxStateFields2.default.entities + '.' + _reduxStateFields2.default.posts, {});

  postSlugs = postSlugs.map(function (slug) {
    return entities[slug];
  });

  return {
    items: postSlugs
  };
}

exports.default = (0, _reactRedux.connect)(mapStateToProps, { fetchPhotographyPostsOnIndexPage: _posts.fetchPhotographyPostsOnIndexPage })(PhotographySection);