Skip to content

Commit

Permalink
Merge pull request twobin#1 from ZsZJ/master
Browse files Browse the repository at this point in the history 
feat(Lazyload): add horizontal viewport observer.
  • Loading branch information
@ianwensink
ianwensink authored Apr 8, 2019
2 parents 8b0b074 + 5a29bb3 commit 412e60b
Showing 1 changed file with 65 additions and 6 deletions.
71 changes: 65 additions & 6 deletions lib/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,41 +79,66 @@ var checkOverflowVisible = function checkOverflowVisible(component, parent) {
var parentTop = void 0;
var parentHeight = void 0;

var parentWidth = void 0;
var parentLeft = void 0;

try {
var _parent$getBoundingCl = parent.getBoundingClientRect();

parentTop = _parent$getBoundingCl.top;
parentHeight = _parent$getBoundingCl.height;

parentWidth = _parent$getBoundingCl.width;
parentLeft = _parent$getBoundingCl.left;

} catch (e) {
parentTop = defaultBoundingClientRect.top;
parentHeight = defaultBoundingClientRect.height;

parentWidth = defaultBoundingClientRect.width;
parentLeft = defaultBoundingClientRect.left;
}

var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
var windowInnerWidth = window.innerWidth || document.documentElement.clientWidth;

// calculate top and height of the intersection of the element's scrollParent and viewport
var intersectionTop = Math.max(parentTop, 0); // intersection's top relative to viewport
var intersectionHeight = Math.min(windowInnerHeight, parentTop + parentHeight) - intersectionTop; // height

var intersectionLeft = Math.max(parentLeft, 0)
var intersectionWidth = Math.min(windowInnerWidth, parentLeft + parentWidth) - intersectionLeft;

// check whether the element is visible in the intersection
var top = void 0;
var height = void 0;

var left = void 0;
var width = void 0;

try {
var _node$getBoundingClie = node.getBoundingClientRect();

top = _node$getBoundingClie.top;
height = _node$getBoundingClie.height;

width = _node$getBoundingClie.width;
left = _node$getBoundingClie.left;

} catch (e) {
top = defaultBoundingClientRect.top;
height = defaultBoundingClientRect.height;

width = defaultBoundingClientRect.width;
left = defaultBoundingClientRect.left;
}

var offsetTop = top - intersectionTop; // element's top relative to intersection
var offsetLeft = left - intersectionLeft;

var offsets = Array.isArray(component.props.offset) ? component.props.offset : [component.props.offset, component.props.offset]; // Be compatible with previous API

return offsetTop - offsets[0] <= intersectionHeight && offsetTop + height + offsets[1] >= 0;
return (offsetTop - offsets[0] <= intersectionHeight && offsetTop + height + offsets[1] >= 0) && (offsetLeft - offsets[0] <= intersectionWidth && offsetLeft + width + offsets[1] >= 0);
};

/**
Expand All @@ -130,21 +155,32 @@ var checkNormalVisible = function checkNormalVisible(component) {
var top = void 0;
var elementHeight = void 0;

var left = void 0;
var elementWidth = void 0;

try {
var _node$getBoundingClie2 = node.getBoundingClientRect();

top = _node$getBoundingClie2.top;
elementHeight = _node$getBoundingClie2.height;

left = _node$getBoundingClie2.left;
elementWidth = _node$getBoundingClie2.width;

} catch (e) {
top = defaultBoundingClientRect.top;
elementHeight = defaultBoundingClientRect.height;

left = defaultBoundingClientRect.left;
elementWidth = defaultBoundingClientRect.width;
}

var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
var windowInnerWidth = window.innerWidth || document.documentElement.clientWidth;

var offsets = Array.isArray(component.props.offset) ? component.props.offset : [component.props.offset, component.props.offset]; // Be compatible with previous API

return top - offsets[0] <= windowInnerHeight && top + elementHeight + offsets[1] >= 0;
return (top - offsets[0] <= windowInnerHeight && top + elementHeight + offsets[1] >= 0) && (left - offsets[0] <= windowInnerWidth && left + elementWidth + offsets[1] >= 0);
};

/**
Expand All @@ -158,7 +194,7 @@ var checkVisible = function checkVisible(component) {
if (!node) {
return;
}

var parent = (0, _scrollParent2.default)(node);
var isOverflow = component.props.overflow && parent !== node.ownerDocument && parent !== document && parent !== document.documentElement;
var visible = isOverflow ? checkOverflowVisible(component, parent) : checkNormalVisible(component);
Expand Down Expand Up @@ -219,9 +255,32 @@ var LazyLoad = function (_Component) {
_createClass(LazyLoad, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
if (_react2.default.Children.count(this.props.children) > 1) {
console.warn('[react-lazyload] Only one child is allowed to be passed to `LazyLoad`.');
}

if (this.props.wheel) {
// eslint-disable-line
console.warn('[react-lazyload] Props `wheel` is not supported anymore, try set `overflow` for lazy loading in overflow containers.');
}

// Warn the user if placeholder and height is not specified and the rendered height is 0
if (!this.props.placeholder && this.props.height === undefined && _reactDom2.default.findDOMNode(this).offsetHeight === 0) {
console.warn('[react-lazyload] Please add `height` props to <LazyLoad> for better performance.');
}
}

// It's unlikely to change delay type on the fly, this is mainly
// designed for tests
var needResetFinalLazyLoadHandler = this.props.debounce !== undefined && delayType === 'throttle' || delayType === 'debounce' && this.props.debounce === undefined;
var needResetFinalLazyLoadHandler = false;
if (this.props.debounce !== undefined && delayType === 'throttle') {
console.warn('[react-lazyload] Previous delay function is `throttle`, now switching to `debounce`, try setting them unanimously');
needResetFinalLazyLoadHandler = true;
} else if (delayType === 'debounce' && this.props.debounce === undefined) {
console.warn('[react-lazyload] Previous delay function is `debounce`, now switching to `throttle`, try setting them unanimously');
needResetFinalLazyLoadHandler = true;
}

if (needResetFinalLazyLoadHandler) {
(0, _event.off)(window, 'scroll', finalLazyLoadHandler, passiveEvent);
Expand Down Expand Up @@ -294,7 +353,7 @@ var LazyLoad = function (_Component) {
listeners.splice(index, 1);
}

if (listeners.length === 0 && typeof window !== 'undefined') {
if (listeners.length === 0) {
(0, _event.off)(window, 'resize', finalLazyLoadHandler, passiveEvent);
(0, _event.off)(window, 'scroll', finalLazyLoadHandler, passiveEvent);
}
Expand Down

0 comments on commit 412e60b

Please sign in to comment.