twreporter-react
Version:
React-Redux site for The Reporter Foundation in Taiwan
824 lines (709 loc) • 25.8 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"), require("react-dom"));
else if(typeof define === 'function' && define.amd)
define(["react", "react-dom"], factory);
else if(typeof exports === 'object')
exports["LazyLoad"] = factory(require("react"), require("react-dom"));
else
root["LazyLoad"] = factory(root["React"], root["ReactDOM"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
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; }; }();
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; }
var React = __webpack_require__(6);
var _require = __webpack_require__(7);
var findDOMNode = _require.findDOMNode;
var Children = React.Children;
var Component = React.Component;
var PropTypes = React.PropTypes;
var _require2 = __webpack_require__(4);
var add = _require2.add;
var remove = _require2.remove;
var debounce = __webpack_require__(1);
var throttle = __webpack_require__(5);
var parentScroll = __webpack_require__(3);
var inViewport = __webpack_require__(2);
var LazyLoad = function (_Component) {
_inherits(LazyLoad, _Component);
function LazyLoad(props) {
_classCallCheck(this, LazyLoad);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(LazyLoad).call(this, props));
_this.lazyLoadHandler = _this.lazyLoadHandler.bind(_this);
if (props.throttle > 0) {
if (props.debounce) {
_this.lazyLoadHandler = debounce(_this.lazyLoadHandler, props.throttle);
} else {
_this.lazyLoadHandler = throttle(_this.lazyLoadHandler, props.throttle);
}
}
_this.state = { visible: false };
return _this;
}
_createClass(LazyLoad, [{
key: 'componentDidMount',
value: function componentDidMount() {
var eventNode = this.getEventNode();
this.lazyLoadHandler();
if (this.lazyLoadHandler.flush) {
this.lazyLoadHandler.flush();
}
add(window, 'resize', this.lazyLoadHandler);
add(eventNode, 'scroll', this.lazyLoadHandler);
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps() {
if (!this.state.visible) {
this.lazyLoadHandler();
}
}
}, {
key: 'shouldComponentUpdate',
value: function shouldComponentUpdate(_nextProps, nextState) {
return nextState.visible;
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.lazyLoadHandler.cancel) {
this.lazyLoadHandler.cancel();
}
this.detachListeners();
}
}, {
key: 'getEventNode',
value: function getEventNode() {
return parentScroll(findDOMNode(this));
}
}, {
key: 'getOffset',
value: function getOffset() {
var _props = this.props;
var offset = _props.offset;
var offsetVertical = _props.offsetVertical;
var offsetHorizontal = _props.offsetHorizontal;
var offsetTop = _props.offsetTop;
var offsetBottom = _props.offsetBottom;
var offsetLeft = _props.offsetLeft;
var offsetRight = _props.offsetRight;
var threshold = _props.threshold;
var _offsetAll = threshold || offset;
var _offsetVertical = offsetVertical || _offsetAll;
var _offsetHorizontal = offsetHorizontal || _offsetAll;
return {
top: offsetTop || _offsetVertical,
bottom: offsetBottom || _offsetVertical,
left: offsetLeft || _offsetHorizontal,
right: offsetRight || _offsetHorizontal
};
}
}, {
key: 'lazyLoadHandler',
value: function lazyLoadHandler() {
var offset = this.getOffset();
var node = findDOMNode(this);
var eventNode = this.getEventNode();
if (inViewport(node, eventNode, offset)) {
var onContentVisible = this.props.onContentVisible;
this.setState({ visible: true });
this.detachListeners();
if (onContentVisible) {
onContentVisible();
}
}
}
}, {
key: 'detachListeners',
value: function detachListeners() {
var eventNode = this.getEventNode();
remove(window, 'resize', this.lazyLoadHandler);
remove(eventNode, 'scroll', this.lazyLoadHandler);
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var children = _props2.children;
var className = _props2.className;
var height = _props2.height;
var width = _props2.width;
var visible = this.state.visible;
var elStyles = { height: height, width: width };
var elClasses = 'LazyLoad' + (visible ? ' is-visible' : '') + (className ? ' ' + className : '');
return React.createElement(
'div',
{ className: elClasses, style: elStyles },
visible && Children.only(children)
);
}
}]);
return LazyLoad;
}(Component);
LazyLoad.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
debounce: PropTypes.bool,
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
offset: PropTypes.number,
offsetBottom: PropTypes.number,
offsetHorizontal: PropTypes.number,
offsetLeft: PropTypes.number,
offsetRight: PropTypes.number,
offsetTop: PropTypes.number,
offsetVertical: PropTypes.number,
threshold: PropTypes.number,
throttle: PropTypes.number,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onContentVisible: PropTypes.func
};
LazyLoad.defaultProps = {
debounce: true,
offset: 0,
offsetBottom: 0,
offsetHorizontal: 0,
offsetLeft: 0,
offsetRight: 0,
offsetTop: 0,
offsetVertical: 0,
throttle: 250
};
module.exports = LazyLoad;
/***/ },
/* 1 */
/***/ function(module, exports) {
/* WEBPACK VAR INJECTION */(function(global) {/**
* lodash 4.0.0 (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
* Available under MIT license <https://lodash.com/license>
*/
/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';
/** Used as references for various `Number` constants. */
var NAN = 0 / 0;
/** `Object#toString` result references. */
var funcTag = '[object Function]',
genTag = '[object GeneratorFunction]';
/** Used to match leading and trailing whitespace. */
var reTrim = /^\s+|\s+$/g;
/** Used to detect bad signed hexadecimal string values. */
var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
/** Used to detect binary string values. */
var reIsBinary = /^0b[01]+$/i;
/** Used to detect octal string values. */
var reIsOctal = /^0o[0-7]+$/i;
/** Built-in method references without a dependency on `global`. */
var freeParseInt = parseInt;
/** Used for built-in method references. */
var objectProto = global.Object.prototype;
/**
* Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
* of values.
*/
var objectToString = objectProto.toString;
/* Built-in method references for those with the same name as other `lodash` methods. */
var nativeMax = Math.max;
/**
* Gets the timestamp of the number of milliseconds that have elapsed since
* the Unix epoch (1 January 1970 00:00:00 UTC).
*
* @static
* @memberOf _
* @type Function
* @category Date
* @returns {number} Returns the timestamp.
* @example
*
* _.defer(function(stamp) {
* console.log(_.now() - stamp);
* }, _.now());
* // => logs the number of milliseconds it took for the deferred function to be invoked
*/
var now = Date.now;
/**
* Creates a debounced function that delays invoking `func` until after `wait`
* milliseconds have elapsed since the last time the debounced function was
* invoked. The debounced function comes with a `cancel` method to cancel
* delayed `func` invocations and a `flush` method to immediately invoke them.
* Provide an options object to indicate whether `func` should be invoked on
* the leading and/or trailing edge of the `wait` timeout. The `func` is invoked
* with the last arguments provided to the debounced function. Subsequent calls
* to the debounced function return the result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is invoked
* on the trailing edge of the timeout only if the the debounced function is
* invoked more than once during the `wait` timeout.
*
* See [David Corbacho's article](http://drupalmotion.com/article/debounce-and-throttle-visual-explanation)
* for details over the differences between `_.debounce` and `_.throttle`.
*
* @static
* @memberOf _
* @category Function
* @param {Function} func The function to debounce.
* @param {number} [wait=0] The number of milliseconds to delay.
* @param {Object} [options] The options object.
* @param {boolean} [options.leading=false] Specify invoking on the leading
* edge of the timeout.
* @param {number} [options.maxWait] The maximum time `func` is allowed to be
* delayed before it's invoked.
* @param {boolean} [options.trailing=true] Specify invoking on the trailing
* edge of the timeout.
* @returns {Function} Returns the new debounced function.
* @example
*
* // avoid costly calculations while the window size is in flux
* jQuery(window).on('resize', _.debounce(calculateLayout, 150));
*
* // invoke `sendMail` when clicked, debouncing subsequent calls
* jQuery(element).on('click', _.debounce(sendMail, 300, {
* 'leading': true,
* 'trailing': false
* }));
*
* // ensure `batchLog` is invoked once after 1 second of debounced calls
* var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
* var source = new EventSource('/stream');
* jQuery(source).on('message', debounced);
*
* // cancel a trailing debounced invocation
* jQuery(window).on('popstate', debounced.cancel);
*/
function debounce(func, wait, options) {
var args,
maxTimeoutId,
result,
stamp,
thisArg,
timeoutId,
trailingCall,
lastCalled = 0,
leading = false,
maxWait = false,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
wait = toNumber(wait) || 0;
if (isObject(options)) {
leading = !!options.leading;
maxWait = 'maxWait' in options && nativeMax(toNumber(options.maxWait) || 0, wait);
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
function cancel() {
if (timeoutId) {
clearTimeout(timeoutId);
}
if (maxTimeoutId) {
clearTimeout(maxTimeoutId);
}
lastCalled = 0;
args = maxTimeoutId = thisArg = timeoutId = trailingCall = undefined;
}
function complete(isCalled, id) {
if (id) {
clearTimeout(id);
}
maxTimeoutId = timeoutId = trailingCall = undefined;
if (isCalled) {
lastCalled = now();
result = func.apply(thisArg, args);
if (!timeoutId && !maxTimeoutId) {
args = thisArg = undefined;
}
}
}
function delayed() {
var remaining = wait - (now() - stamp);
if (remaining <= 0 || remaining > wait) {
complete(trailingCall, maxTimeoutId);
} else {
timeoutId = setTimeout(delayed, remaining);
}
}
function flush() {
if ((timeoutId && trailingCall) || (maxTimeoutId && trailing)) {
result = func.apply(thisArg, args);
}
cancel();
return result;
}
function maxDelayed() {
complete(trailing, timeoutId);
}
function debounced() {
args = arguments;
stamp = now();
thisArg = this;
trailingCall = trailing && (timeoutId || !leading);
if (maxWait === false) {
var leadingCall = leading && !timeoutId;
} else {
if (!maxTimeoutId && !leading) {
lastCalled = stamp;
}
var remaining = maxWait - (stamp - lastCalled),
isCalled = remaining <= 0 || remaining > maxWait;
if (isCalled) {
if (maxTimeoutId) {
maxTimeoutId = clearTimeout(maxTimeoutId);
}
lastCalled = stamp;
result = func.apply(thisArg, args);
}
else if (!maxTimeoutId) {
maxTimeoutId = setTimeout(maxDelayed, remaining);
}
}
if (isCalled && timeoutId) {
timeoutId = clearTimeout(timeoutId);
}
else if (!timeoutId && wait !== maxWait) {
timeoutId = setTimeout(delayed, wait);
}
if (leadingCall) {
isCalled = true;
result = func.apply(thisArg, args);
}
if (isCalled && !timeoutId && !maxTimeoutId) {
args = thisArg = undefined;
}
return result;
}
debounced.cancel = cancel;
debounced.flush = flush;
return debounced;
}
/**
* Checks if `value` is classified as a `Function` object.
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is correctly classified, else `false`.
* @example
*
* _.isFunction(_);
* // => true
*
* _.isFunction(/abc/);
* // => false
*/
function isFunction(value) {
// The use of `Object#toString` avoids issues with the `typeof` operator
// in Safari 8 which returns 'object' for typed array constructors, and
// PhantomJS 1.9 which returns 'function' for `NodeList` instances.
var tag = isObject(value) ? objectToString.call(value) : '';
return tag == funcTag || tag == genTag;
}
/**
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
// Avoid a V8 JIT bug in Chrome 19-20.
// See https://code.google.com/p/v8/issues/detail?id=2291 for more details.
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
/**
* Converts `value` to a number.
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to process.
* @returns {number} Returns the number.
* @example
*
* _.toNumber(3);
* // => 3
*
* _.toNumber(Number.MIN_VALUE);
* // => 5e-324
*
* _.toNumber(Infinity);
* // => Infinity
*
* _.toNumber('3');
* // => 3
*/
function toNumber(value) {
if (isObject(value)) {
var other = isFunction(value.valueOf) ? value.valueOf() : value;
value = isObject(other) ? (other + '') : other;
}
if (typeof value != 'string') {
return value === 0 ? value : +value;
}
value = value.replace(reTrim, '');
var isBinary = reIsBinary.test(value);
return (isBinary || reIsOctal.test(value))
? freeParseInt(value.slice(2), isBinary ? 2 : 8)
: (reIsBadHex.test(value) ? NAN : +value);
}
module.exports = debounce;
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
/***/ },
/* 2 */
/***/ function(module, exports) {
'use strict';
var isHidden = function isHidden(element) {
return element.offsetParent === null;
};
var offset = function offset(element) {
var rect = element.getBoundingClientRect();
return {
top: rect.top + window.pageYOffset,
left: rect.left + window.pageXOffset
};
};
var inViewport = function inViewport(element, container, customOffset) {
if (isHidden(element)) {
return false;
}
var top = undefined,
left = undefined,
bottom = undefined,
right = undefined;
if (typeof container === 'undefined' || container === window) {
top = window.pageYOffset;
left = window.pageXOffset;
bottom = top + window.innerHeight;
right = left + window.innerWidth;
} else {
var containerOffset = offset(container);
top = containerOffset.top;
left = containerOffset.left;
bottom = top + container.offsetHeight;
right = left + container.offsetWidth;
}
var elementOffset = offset(element);
return top < elementOffset.top + customOffset.bottom + element.offsetHeight && bottom > elementOffset.top - customOffset.top && left < elementOffset.left + customOffset.right + element.offsetWidth && right > elementOffset.left - customOffset.left;
};
module.exports = inViewport;
/***/ },
/* 3 */
/***/ function(module, exports) {
'use strict';
var style = function style(element, prop) {
return typeof getComputedStyle !== 'undefined' ? getComputedStyle(element, null).getPropertyValue(prop) : element.style[prop];
};
var overflow = function overflow(element) {
return style(element, 'overflow') + style(element, 'overflow-y') + style(element, 'overflow-x');
};
var scrollParent = function scrollParent(element) {
if (!(element instanceof HTMLElement)) {
return window;
}
var parent = element;
while (parent) {
if (parent === document.body || parent === document.documentElement) {
break;
}
if (!parent.parentNode) {
break;
}
if (/(scroll|auto)/.test(overflow(parent))) {
return parent;
}
parent = parent.parentNode;
}
return window;
};
module.exports = scrollParent;
/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;(function(root,factory){
if (true) {
!(__WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.call(exports, __webpack_require__, exports, module)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports === 'object') {
module.exports = factory();
} else {
root.eventListener = factory();
}
}(this, function () {
function wrap(standard, fallback) {
return function (el, evtName, listener, useCapture) {
if (el[standard]) {
el[standard](evtName, listener, useCapture);
} else if (el[fallback]) {
el[fallback]('on' + evtName, listener);
}
}
}
return {
add: wrap('addEventListener', 'attachEvent'),
remove: wrap('removeEventListener', 'detachEvent')
};
}));
/***/ },
/* 5 */
/***/ function(module, exports, __webpack_require__) {
/**
* lodash 4.0.1 (Custom Build) <https://lodash.com/>
* Build: `lodash modularize exports="npm" -o ./`
* Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
* Available under MIT license <https://lodash.com/license>
*/
var debounce = __webpack_require__(1);
/** Used as the `TypeError` message for "Functions" methods. */
var FUNC_ERROR_TEXT = 'Expected a function';
/**
* Creates a throttled function that only invokes `func` at most once per
* every `wait` milliseconds. The throttled function comes with a `cancel`
* method to cancel delayed `func` invocations and a `flush` method to
* immediately invoke them. Provide an options object to indicate whether
* `func` should be invoked on the leading and/or trailing edge of the `wait`
* timeout. The `func` is invoked with the last arguments provided to the
* throttled function. Subsequent calls to the throttled function return the
* result of the last `func` invocation.
*
* **Note:** If `leading` and `trailing` options are `true`, `func` is invoked
* on the trailing edge of the timeout only if the throttled function is
* invoked more than once during the `wait` timeout.
*
* See [David Corbacho's article](http://drupalmotion.com/article/debounce-and-throttle-visual-explanation)
* for details over the differences between `_.throttle` and `_.debounce`.
*
* @static
* @memberOf _
* @category Function
* @param {Function} func The function to throttle.
* @param {number} [wait=0] The number of milliseconds to throttle invocations to.
* @param {Object} [options] The options object.
* @param {boolean} [options.leading=true] Specify invoking on the leading
* edge of the timeout.
* @param {boolean} [options.trailing=true] Specify invoking on the trailing
* edge of the timeout.
* @returns {Function} Returns the new throttled function.
* @example
*
* // Avoid excessively updating the position while scrolling.
* jQuery(window).on('scroll', _.throttle(updatePosition, 100));
*
* // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
* var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
* jQuery(element).on('click', throttled);
*
* // Cancel the trailing throttled invocation.
* jQuery(window).on('popstate', throttled.cancel);
*/
function throttle(func, wait, options) {
var leading = true,
trailing = true;
if (typeof func != 'function') {
throw new TypeError(FUNC_ERROR_TEXT);
}
if (isObject(options)) {
leading = 'leading' in options ? !!options.leading : leading;
trailing = 'trailing' in options ? !!options.trailing : trailing;
}
return debounce(func, wait, {
'leading': leading,
'maxWait': wait,
'trailing': trailing
});
}
/**
* Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
* (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
*
* @static
* @memberOf _
* @category Lang
* @param {*} value The value to check.
* @returns {boolean} Returns `true` if `value` is an object, else `false`.
* @example
*
* _.isObject({});
* // => true
*
* _.isObject([1, 2, 3]);
* // => true
*
* _.isObject(_.noop);
* // => true
*
* _.isObject(null);
* // => false
*/
function isObject(value) {
var type = typeof value;
return !!value && (type == 'object' || type == 'function');
}
module.exports = throttle;
/***/ },
/* 6 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_6__;
/***/ },
/* 7 */
/***/ function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
/***/ }
/******/ ])
});
;