diff --git a/dist/index.js b/dist/index.js index 13a2a27..aa3b4b6 100644 --- a/dist/index.js +++ b/dist/index.js @@ -4,30 +4,37 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; /** + * 在页面滚动的时候，监听滚动事件，在快要到达底部指定距离的时候，执行相应函数 + * 如果传入 totalPages, 则会在鼠标滚动时 + * + * + */ + var _react = require('react'); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -var jQuery = require('jquery'); /** - * 在页面滚动的时候，监听滚动事件，在快要到达底部指定距离的时候，执行相应函数 - * 如果传入 totalPages, 则会在鼠标滚动时 - * - * - */ +var jQuery = require('jquery'); var ReactScrollPagination = _react2.default.createClass({ displayName: 'ReactScrollPagination', + propTypes: { fetchFunc: _react.PropTypes.func.isRequired, totalPages: _react.PropTypes.number, + windowElement: _react.PropTypes.string, // The element selector which contains the list container and is responsible for scrolling + documentElement: _react.PropTypes.string, // The element selector which contains the list paginationShowTime: _react.PropTypes.oneOfType([_react.PropTypes.number, // How long shall the pagination div shows _react.PropTypes.string]), + excludeTopMargin: _react.PropTypes.oneOfType([_react.PropTypes.number, // The height value which should be excluded from scrollTop calculation + _react.PropTypes.string]), excludeElement: _react.PropTypes.string, // The element selector which should be excluded from calculation excludeHeight: _react.PropTypes.oneOfType([_react.PropTypes.number, // the height value which should be excluded from calculation _react.PropTypes.string]), @@ -36,16 +43,20 @@ var ReactScrollPagination = _react2.default.createClass({ triggerAt: _react.PropTypes.oneOfType([_react.PropTypes.number, // The distance to trigger the fetchfunc _react.PropTypes.string]) }, + isolate: { onePageHeight: null, timeoutFuncHandler: null, + excludeTopMargin: null, excludeHeight: null, triggerAt: null, showTime: null, defaultShowTime: 2000, defaultTrigger: 30, + defaultExcludeTopMargin: 0, defaultExcludeHeight: 0 }, + pageDivStle: { position: 'fixed', bottom: '15px', @@ -53,6 +64,7 @@ var ReactScrollPagination = _react2.default.createClass({ right: 0, textAlign: 'center' }, + pageContentStyle: { display: 'inline-block', background: 'rgba(6, 6, 6, 0.54)', @@ -68,7 +80,11 @@ var ReactScrollPagination = _react2.default.createClass({ OTransition: 'opacity 0.8s', transition: 'opacity 0.8s' }, + getInitialState: function getInitialState() { + this.windowElement = this.props.windowElement || window; + this.documentElement = this.props.documentElement || document; + return { currentPage: 1, totalPages: null, @@ -88,6 +104,7 @@ var ReactScrollPagination = _react2.default.createClass({ _this.setState({ showPageStatus: false }); }, this.isolate.showTime); }, + getShowTime: function getShowTime() { var showTime = this.isolate.defaultShowTime; if (this.props.paginationShowTime) { @@ -100,6 +117,24 @@ var ReactScrollPagination = _react2.default.createClass({ return showTime; }, + getExcludeTopMargin: function getExcludeTopMargin() { + // 获取需要减去的高度 + var excludeTopMargin = this.isolate.defaultExcludeTopMargin; + + if (this.props.excludeTopMargin) { + var propsExcludeTopMargin = parseInt(this.props.excludeTopMargin); + if (isNaN(propsExcludeTopMargin)) { + console.error('WARNING: Failed to convert the props "excludeTopMargin" with value: "' + this.props.excludeTopMargin + '" to Number, please verify. Will take "' + this.isolate.defaultExcludeTopMargin + '" by default.'); + } else { + excludeTopMargin = propsExcludeTopMargin; + } + } + + this.isolate.excludeTopMargin = excludeTopMargin; + + return excludeTopMargin; + }, + getExcludeHeight: function getExcludeHeight() { // 获取需要减去的高度 var excludeHeight = this.isolate.defaultExcludeHeight; @@ -142,7 +177,7 @@ var ReactScrollPagination = _react2.default.createClass({ }, getOnePageHeight: function getOnePageHeight() { - var documentHeight = jQuery(document).height(); + var documentHeight = jQuery(this.documentElement).height(); /* * 当totalPages第一次有值时，表明List是初次加载，此时计算页面的高度，并将其作为单页的高度 @@ -155,8 +190,8 @@ var ReactScrollPagination = _react2.default.createClass({ handlePagePosition: function handlePagePosition() { this.getOnePageHeight(); - var windowHeight = jQuery(window).height(); - var scrollTop = jQuery(window).scrollTop() + windowHeight - this.isolate.excludeHeight; + var windowHeight = jQuery(this.windowElement).height(); + var scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight - this.isolate.excludeTopMargin; if (this.isolate.onePageHeight !== null) { var currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1; @@ -166,10 +201,10 @@ var ReactScrollPagination = _react2.default.createClass({ }, scrollHandler: function scrollHandler() { - var documentHeight = jQuery(document).height(); + var documentHeight = jQuery(this.documentElement).height(); - var windowHeight = jQuery(window).height(); - var scrollBottom = jQuery(window).scrollTop() + windowHeight; + var windowHeight = jQuery(this.windowElement).height(); + var scrollBottom = jQuery(this.windowElement).scrollTop() + windowHeight; var triggerBottom = scrollBottom + this.isolate.triggerAt; // 当滚动条距离底部距离小于30像素的时候出发请求操作 @@ -182,26 +217,52 @@ var ReactScrollPagination = _react2.default.createClass({ validateAndSetPropValues: function validateAndSetPropValues() { this.isolate.triggerAt = this.getTriggerAt(); + this.isolate.excludeTopMargin = this.getExcludeTopMargin(); this.isolate.excludeHeight = this.getExcludeHeight(); this.isolate.showTime = this.getShowTime(); }, componentWillUnmount: function componentWillUnmount() { - jQuery(window).unbind('scroll', this.scrollHandler); + jQuery(this.windowElement).unbind('scroll', this.scrollHandler); }, componentDidMount: function componentDidMount() { this.validateAndSetPropValues(); - jQuery(window).scroll(this.scrollHandler); + jQuery(this.windowElement).scroll(this.scrollHandler); }, + extend: function (_extend) { + function extend() { + return _extend.apply(this, arguments); + } + + extend.toString = function () { + return _extend.toString(); + }; + + return extend; + }(function () { + for (var i = 1; i < arguments.length; i++) { + for (var key in arguments[i]) { + if (arguments[i].hasOwnProperty(key)) { + if (_typeof(arguments[0][key]) === 'object' && _typeof(arguments[i][key]) === 'object') { + extend(arguments[0][key], arguments[i][key]); + } else { + arguments[0][key] = arguments[i][key]; + } + } + } + } + return arguments[0]; + }), + render: function render() { // if no totalPages presented, will only do the fetchings if (typeof this.props.totalPages === 'undefined') { return null; } - var acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle); + var acutalPageContentDivStyle = this.extend({}, this.props.innerDivStyle || this.pageContentStyle); // always set the opacity for inner div, so they are able to make the transition if (!this.state.showPageStatus) { diff --git a/package.json b/package.json index 2bc3e69..669b871 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "babel-preset-react": "^6.5.0", "eslint": "^2.8.0", "eslint-plugin-flow-vars": "^0.3.0", + "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "jest-cli": "*", "jscs": "^3.0.3", diff --git a/src/index.jsx b/src/index.jsx index bbaab53..097f8ee 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -12,13 +12,20 @@ import React, { PropTypes } from 'react' const jQuery = require('jquery') const ReactScrollPagination = React.createClass({ + propTypes: { fetchFunc: PropTypes.func.isRequired, totalPages: PropTypes.number, + windowElement: PropTypes.string, // The element selector which contains the list container and is responsible for scrolling + documentElement: PropTypes.string, // The element selector which contains the list paginationShowTime: PropTypes.oneOfType([ PropTypes.number, // How long shall the pagination div shows PropTypes.string ]), + excludeTopMargin: PropTypes.oneOfType([ + PropTypes.number, // The height value which should be excluded from scrollTop calculation + PropTypes.string + ]), excludeElement: PropTypes.string, // The element selector which should be excluded from calculation excludeHeight: PropTypes.oneOfType([ PropTypes.number, // the height value which should be excluded from calculation @@ -31,16 +38,20 @@ const ReactScrollPagination = React.createClass({ PropTypes.string ]), }, + isolate: { onePageHeight: null, timeoutFuncHandler: null, + excludeTopMargin: null, excludeHeight: null, triggerAt: null, showTime: null, defaultShowTime: 2000, defaultTrigger: 30, + defaultExcludeTopMargin: 0, defaultExcludeHeight: 0 }, + pageDivStle: { position: 'fixed', bottom: '15px', @@ -48,6 +59,7 @@ const ReactScrollPagination = React.createClass({ right: 0, textAlign: 'center' }, + pageContentStyle: { display: 'inline-block', background: 'rgba(6, 6, 6, 0.54)', @@ -63,7 +75,11 @@ const ReactScrollPagination = React.createClass({ OTransition: 'opacity 0.8s', transition: 'opacity 0.8s' }, + getInitialState: function () { + this.windowElement = this.props.windowElement || window + this.documentElement = this.props.documentElement || document + return { currentPage: 1, totalPages: null, @@ -81,6 +97,7 @@ const ReactScrollPagination = React.createClass({ this.setState({showPageStatus: false}) }, this.isolate.showTime) }, + getShowTime: function () { let showTime = this.isolate.defaultShowTime if (this.props.paginationShowTime) { @@ -94,6 +111,26 @@ const ReactScrollPagination = React.createClass({ return showTime }, + getExcludeTopMargin: function () { + // 获取需要减去的高度 + let excludeTopMargin = this.isolate.defaultExcludeTopMargin + + if (this.props.excludeTopMargin) { + let propsExcludeTopMargin = parseInt(this.props.excludeTopMargin) + if (isNaN(propsExcludeTopMargin)) { + console.error('WARNING: Failed to convert the props "excludeTopMargin" with value: "' + this.props.excludeTopMargin + + '" to Number, please verify. Will take "' + this.isolate.defaultExcludeTopMargin + '" by default.') + } else { + excludeTopMargin = propsExcludeTopMargin + } + + } + + this.isolate.excludeTopMargin = excludeTopMargin + + return excludeTopMargin + }, + getExcludeHeight: function () { // 获取需要减去的高度 let excludeHeight = this.isolate.defaultExcludeHeight @@ -126,7 +163,7 @@ const ReactScrollPagination = React.createClass({ let triggerAt = this.isolate.defaultTrigger if (this.props.triggerAt) { - triggerAt= parseInt(this.props.triggerAt) + triggerAt = parseInt(this.props.triggerAt) if (isNaN(triggerAt)) { triggerAt = this.isolate.defaultTrigger @@ -140,7 +177,7 @@ const ReactScrollPagination = React.createClass({ }, getOnePageHeight: function () { - const documentHeight = jQuery(document).height() + const documentHeight = jQuery(this.documentElement).height() /* * 当totalPages第一次有值时，表明List是初次加载，此时计算页面的高度，并将其作为单页的高度 @@ -153,8 +190,8 @@ const ReactScrollPagination = React.createClass({ handlePagePosition: function () { this.getOnePageHeight() - let windowHeight = jQuery(window).height() - let scrollTop = jQuery(window).scrollTop() + windowHeight - this.isolate.excludeHeight + let windowHeight = jQuery(this.windowElement).height() + let scrollTop = jQuery(this.windowElement).scrollTop() + windowHeight - this.isolate.excludeHeight - this.isolate.excludeTopMargin if (this.isolate.onePageHeight !== null) { let currentPage = Math.ceil(scrollTop / this.isolate.onePageHeight) || 1 @@ -164,10 +201,10 @@ const ReactScrollPagination = React.createClass({ }, scrollHandler: function () { - let documentHeight = jQuery(document).height() + let documentHeight = jQuery(this.documentElement).height() - let windowHeight = jQuery(window).height() - let scrollBottom = jQuery(window).scrollTop() + windowHeight + let windowHeight = jQuery(this.windowElement).height() + let scrollBottom = jQuery(this.windowElement).scrollTop() + windowHeight let triggerBottom = scrollBottom + this.isolate.triggerAt // 当滚动条距离底部距离小于30像素的时候出发请求操作 @@ -180,17 +217,33 @@ const ReactScrollPagination = React.createClass({ validateAndSetPropValues: function () { this.isolate.triggerAt = this.getTriggerAt() + this.isolate.excludeTopMargin = this.getExcludeTopMargin() this.isolate.excludeHeight = this.getExcludeHeight() this.isolate.showTime = this.getShowTime() }, componentWillUnmount: function () { - jQuery(window).unbind('scroll', this.scrollHandler) + jQuery(this.windowElement).unbind('scroll', this.scrollHandler) }, componentDidMount: function () { this.validateAndSetPropValues() - jQuery(window).scroll(this.scrollHandler) + jQuery(this.windowElement).scroll(this.scrollHandler) + }, + + extend: function () { + for(var i = 1; i < arguments.length; i++) { + for(var key in arguments[i]) { + if(arguments[i].hasOwnProperty(key)) { + if (typeof arguments[0][key] === 'object' && typeof arguments[i][key] === 'object') { + extend(arguments[0][key], arguments[i][key]) + } else { + arguments[0][key] = arguments[i][key] + } + } + } + } + return arguments[0] }, render: function () { @@ -199,7 +252,7 @@ const ReactScrollPagination = React.createClass({ return (null) } - let acutalPageContentDivStyle = jQuery.extend({}, this.props.innerDivStyle || this.pageContentStyle) + let acutalPageContentDivStyle = this.extend({}, this.props.innerDivStyle || this.pageContentStyle) // always set the opacity for inner div, so they are able to make the transition if (!this.state.showPageStatus) {