From 108901f377237da3cc50bae755bbac4e5c1c0206 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?So=CC=88nke=20Kluth?= Date: Fri, 16 Sep 2016 08:24:28 +0200 Subject: [PATCH] optimize build --- .gitignore | 2 ++ dist/react-sticky-state.js | 45 ++++++++++++++++-------------- dist/react-sticky-state.min.js | 2 +- examples/index.html | 4 ++- package.json | 18 +++++++----- src/.tern-port | 2 +- src/react-sticky-state.js | 50 +++++++++++++++++----------------- sticky.css | 17 ------------ test/index.js | 3 ++ 9 files changed, 70 insertions(+), 73 deletions(-) delete mode 100644 sticky.css create mode 100644 test/index.js diff --git a/.gitignore b/.gitignore index 9c67134..2fb493b 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ npm-debug.log # Project folders to ignore node_modules TODO +.tern-port +*.js.map diff --git a/dist/react-sticky-state.js b/dist/react-sticky-state.js index fa1346b..63f7b26 100644 --- a/dist/react-sticky-state.js +++ b/dist/react-sticky-state.js @@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); -exports.Sticky = undefined; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; @@ -105,6 +104,7 @@ var initialState = { height: null, width: null }, + scrollClass: null, initialStyle: null, style: { top: null, @@ -313,7 +313,7 @@ var ReactStickyState = function (_Component) { if (values.sticky !== this.state.sticky || values.absolute !== this.state.absolute) { this._updatingState = true; if (bounds) { - values = (0, _objectAssign2.default)(values, this.getBounds()); + values = (0, _objectAssign2.default)(values, this.getBounds(), { scrollClass: this.getScrollClass() }); } this.setState(values, function () { _this3._updatingState = false; @@ -409,7 +409,7 @@ var ReactStickyState = function (_Component) { this.scroll.on('scroll:up', this.onScrollDirection); this.scroll.on('scroll:down', this.onScrollDirection); if (!this.props.scrollClass.persist) { - this.scroll.on('scroll:stop', this.render.bind(this)); + this.scroll.on('scroll:stop', this.onScrollDirection); } } } @@ -449,21 +449,26 @@ var ReactStickyState = function (_Component) { } } }, { - key: 'getScrollClassObj', - value: function getScrollClassObj(obj) { - obj = obj || {}; - var direction = this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight ? 0 : this.scroll.directionY; - obj[this.props.scrollClass.up] = direction < 0; - obj[this.props.scrollClass.down] = direction > 0; - return obj; + key: 'getScrollClass', + value: function getScrollClass() { + if (this.props.scrollClass.up || this.props.scrollClass.down) { + + var direction = this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight ? 0 : this.scroll.directionY; + var scrollClass = direction < 0 ? this.props.scrollClass.up : this.props.scrollClass.down; + scrollClass = direction === 0 ? null : scrollClass; + return scrollClass; + } + return null; } }, { key: 'onScrollDirection', value: function onScrollDirection(e) { - console.log(e, this.scroll.directionY); - if (this.state.sticky || e.type === _scrollEvents2.default.EVENT_SCROLL_STOP) { - this.refs.el.className = (0, _classnames2.default)(this.refs.el.className, this.getScrollClassObj()); + if (this.state.sticky || e && e.type === _scrollEvents2.default.EVENT_SCROLL_STOP) { + this.setState({ + scrollClass: this.getScrollClass() + }); + // this.refs.el.className = classNames(this.refs.el.className, this.getScrollClassObj()); } } }, { @@ -539,7 +544,6 @@ var ReactStickyState = function (_Component) { var _props = this.props; var stickyWrapperClass = _props.stickyWrapperClass; var stickyClass = _props.stickyClass; - var scrollClass = _props.scrollClass; var fixedClass = _props.fixedClass; var stateClass = _props.stateClass; var disabledClass = _props.disabledClass; @@ -548,11 +552,11 @@ var ReactStickyState = function (_Component) { var debug = _props.debug; var tagName = _props.tagName; - var props = _objectWithoutProperties(_props, ['stickyWrapperClass', 'stickyClass', 'scrollClass', 'fixedClass', 'stateClass', 'disabledClass', 'absoluteClass', 'disabled', 'debug', 'tagName']); + var props = _objectWithoutProperties(_props, ['stickyWrapperClass', 'stickyClass', 'fixedClass', 'stateClass', 'disabledClass', 'absoluteClass', 'disabled', 'debug', 'tagName']); var style; var refName = 'el'; - var className = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, stickyClass, !this.state.disabled), _defineProperty(_classNames, disabledClass, this.state.disabled), _classNames), _defineProperty({}, fixedClass, !Can.sticky), _defineProperty({}, stateClass, this.state.sticky && !this.state.disabled), _defineProperty({}, scrollClass.up, this.state.sticky && this.scroll.directionY > 0), _defineProperty({}, scrollClass.down, this.state.sticky && this.scroll.directionY > 0), _defineProperty({}, absoluteClass, this.state.absolute)); + var className = (0, _classnames2.default)((_classNames = {}, _defineProperty(_classNames, stickyClass, !this.state.disabled), _defineProperty(_classNames, disabledClass, this.state.disabled), _classNames), _defineProperty({}, fixedClass, !Can.sticky), _defineProperty({}, stateClass, this.state.sticky && !this.state.disabled), _defineProperty({}, absoluteClass, this.state.absolute), this.state.scrollClass); if (!Can.sticky) { if (this.state.absolute) { @@ -578,9 +582,7 @@ var ReactStickyState = function (_Component) { key: this._key, style: style, className: className }, props), - ' ', - this.props.children, - ' ' + this.props.children ); } @@ -645,7 +647,6 @@ ReactStickyState.defaultProps = { } }; exports.default = ReactStickyState; -exports.Sticky = ReactStickyState; var _canSticky = null; @@ -688,4 +689,6 @@ var Can = function () { }]); return Can; -}(); \ No newline at end of file +}(); + +module.exports = exports['default']; \ No newline at end of file diff --git a/dist/react-sticky-state.min.js b/dist/react-sticky-state.min.js index 705b7c5..a28d6ff 100644 --- a/dist/react-sticky-state.min.js +++ b/dist/react-sticky-state.min.js @@ -1 +1 @@ -"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Sticky=undefined;var _extends=Object.assign||function(target){for(var i=1;i=0)continue;if(!Object.prototype.hasOwnProperty.call(obj,i))continue;target[i]=obj[i]}return target}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 log=function log(){};var getAbsolutBoundingRect=function getAbsolutBoundingRect(el,fixedHeight){var rect=el.getBoundingClientRect();var top=rect.top+_scrollEvents2.default.windowScrollY;var height=fixedHeight||rect.height;return{top:top,bottom:top+height,height:height,width:rect.width,left:rect.left,right:rect.right}};var addBounds=function addBounds(rect1,rect2){var rect=(0,_objectAssign2.default)({},rect1);rect.top-=rect2.top;rect.left-=rect2.left;rect.right=rect.left+rect1.width;rect.bottom=rect.top+rect1.height;return rect};var getPositionStyle=function getPositionStyle(el){var result={};var style=window.getComputedStyle(el,null);for(var key in initialState.style){var value=parseInt(style.getPropertyValue(key));value=isNaN(value)?null:value;result[key]=value}return result};var getPreviousElementSibling=function getPreviousElementSibling(el){var prev=el.previousElementSibling;if(prev&&prev.tagName.toLocaleLowerCase()==="script"){prev=getPreviousElementSibling(prev)}return prev};var initialState={sticky:false,absolute:false,fixedOffset:"",offsetHeight:0,bounds:{top:null,left:null,right:null,bottom:null,height:null,width:null},restrict:{top:null,left:null,right:null,bottom:null,height:null,width:null},initialStyle:null,style:{top:null,bottom:null,left:null,right:null,"margin-top":0,"margin-bottom":0,"margin-left":0,"margin-right":0},disabled:false};var ReactStickyState=function(_Component){_inherits(ReactStickyState,_Component);function ReactStickyState(props,context){_classCallCheck(this,ReactStickyState);var _this=_possibleConstructorReturn(this,Object.getPrototypeOf(ReactStickyState).call(this,props,context));_this._updatingBounds=false;_this._shouldComponentUpdate=false;_this._updatingState=false;_this._key="sticky_"+Math.round(Math.random()*1e3);if(props.debug===true){log=console.log.bind(console)}_this.state=initialState;return _this}_createClass(ReactStickyState,[{key:"getBoundingClientRect",value:function getBoundingClientRect(){return this.refs.el.getBoundingClientRect()}},{key:"getBounds",value:function getBounds(noCache){var clientRect=this.getBoundingClientRect();var offsetHeight=_scrollEvents2.default.documentHeight;noCache=noCache===true;if(noCache!==true&&this.state.bounds.height!==null){if(this.state.offsetHeight===offsetHeight&&clientRect.height===this.state.bounds.height){return{offsetHeight:offsetHeight,style:this.state.style,bounds:this.state.bounds,restrict:this.state.restrict}}}var initialStyle=this.state.initialStyle;if(!initialStyle){initialStyle=getPositionStyle(this.refs.el)}var style=initialStyle;var child=this.refs.wrapper||this.refs.el;var rect;var restrict;var offsetY=0;var offsetX=0;if(!Can.sticky){rect=getAbsolutBoundingRect(child,clientRect.height);if(this.hasOwnScrollTarget){var parentRect=getAbsolutBoundingRect(this.scrollTarget);offsetY=this.scroll.y;rect=addBounds(rect,parentRect);restrict=parentRect;restrict.top=0;restrict.height=this.scroll.scrollHeight||restrict.height;restrict.bottom=restrict.height}}else{var elem=getPreviousElementSibling(child);offsetY=0;if(elem){offsetY=parseInt(window.getComputedStyle(elem)["margin-bottom"]);offsetY=offsetY||0;rect=getAbsolutBoundingRect(elem);if(this.hasOwnScrollTarget){rect=addBounds(rect,getAbsolutBoundingRect(this.scrollTarget));offsetY+=this.scroll.y}rect.top=rect.bottom+offsetY}else{elem=child.parentNode;offsetY=parseInt(window.getComputedStyle(elem)["padding-top"]);offsetY=offsetY||0;rect=getAbsolutBoundingRect(elem);if(this.hasOwnScrollTarget){rect=addBounds(rect,getAbsolutBoundingRect(this.scrollTarget));offsetY+=this.scroll.y}rect.top=rect.top+offsetY}if(this.hasOwnScrollTarget){restrict=getAbsolutBoundingRect(this.scrollTarget);restrict.top=0;restrict.height=this.scroll.scrollHeight||restrict.height;restrict.bottom=restrict.height}rect.height=child.clientHeight;rect.width=child.clientWidth;rect.bottom=rect.top+rect.height}restrict=restrict||getAbsolutBoundingRect(child.parentNode);return{offsetHeight:offsetHeight,style:style,bounds:rect,initialStyle:initialStyle,restrict:restrict}}},{key:"updateBounds",value:function updateBounds(){var noCache=arguments.length<=0||arguments[0]===undefined?true:arguments[0];var _this2=this;var shouldComponentUpdate=arguments.length<=1||arguments[1]===undefined?true:arguments[1];var cb=arguments[2];this._shouldComponentUpdate=shouldComponentUpdate;this.setState(this.getBounds(noCache),function(){_this2._shouldComponentUpdate=true;if(cb){cb()}})}},{key:"getStickyState",value:function getStickyState(){if(this.state.disabled){return{sticky:false,absolute:false}}var scrollY=this.scroll.y;var scrollX=this.scroll.x;var top=this.state.style.top;var bottom=this.state.style.bottom;var left=this.state.style.left;var right=this.state.style.right;var sticky=this.state.sticky;var absolute=this.state.absolute;if(top!==null){var offsetBottom=this.state.restrict.bottom-this.state.bounds.height-top;top=this.state.bounds.top-top;if(this.state.sticky===false&&(scrollY>=top&&scrollY<=offsetBottom||top<=0&&scrollY0&&scrollYoffsetBottom)){sticky=false;absolute=scrollY>offsetBottom}}else if(bottom!==null){scrollY+=window.innerHeight;var offsetTop=this.state.restrict.top+this.state.bounds.height-bottom;bottom=this.state.bounds.bottom+bottom;if(this.state.sticky===false&&scrollY<=bottom&&scrollY>=offsetTop){sticky=true;absolute=false}else if(this.state.sticky&&(scrollY>bottom||scrollY=this.scroll.scrollHeight?0:this.scroll.directionY;obj[this.props.scrollClass.up]=direction<0;obj[this.props.scrollClass.down]=direction>0;return obj}},{key:"onScrollDirection",value:function onScrollDirection(e){console.log(e,this.scroll.directionY);if(this.state.sticky||e.type===_scrollEvents2.default.EVENT_SCROLL_STOP){this.refs.el.className=(0,_classnames2.default)(this.refs.el.className,this.getScrollClassObj())}}},{key:"onScroll",value:function onScroll(e){this.updateStickyState();if(this.hasOwnScrollTarget&&!Can.sticky){this.updateFixedOffset();if(this.state.sticky&&!this.hasWindowScrollListener){this.hasWindowScrollListener=true;_scrollEvents2.default.getInstance(window).on("scroll:progress",this.updateFixedOffset)}else if(!this.state.sticky&&this.hasWindowScrollListener){this.hasWindowScrollListener=false;_scrollEvents2.default.getInstance(window).off("scroll:progress",this.updateFixedOffset)}}}},{key:"onResize",value:function onResize(e){this.update()}},{key:"shouldComponentUpdate",value:function shouldComponentUpdate(newProps,newState){return this._shouldComponentUpdate}},{key:"componentWillReceiveProps",value:function componentWillReceiveProps(props){if(props.disabled!==this.state.disabled){this.setState({disabled:props.disabled})}}},{key:"componentDidMount",value:function componentDidMount(){var _this5=this;setTimeout(function(){return _this5.initialize()},1)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this._shouldComponentUpdate=false;this.removeSrollHandler();this.removeResizeHandler();if(this.scroll&&this.scroll.dispatcher&&!this.scroll.dispatcher.hasListeners()){this.scroll.destroy()}this.scroll=null;this.scrollTarget=null}},{key:"render",value:function render(){var _classNames;var element=_react2.default.Children.only(this.props.children);var _props=this.props;var stickyWrapperClass=_props.stickyWrapperClass;var stickyClass=_props.stickyClass;var scrollClass=_props.scrollClass;var fixedClass=_props.fixedClass;var stateClass=_props.stateClass;var disabledClass=_props.disabledClass;var absoluteClass=_props.absoluteClass;var disabled=_props.disabled;var debug=_props.debug;var tagName=_props.tagName;var props=_objectWithoutProperties(_props,["stickyWrapperClass","stickyClass","scrollClass","fixedClass","stateClass","disabledClass","absoluteClass","disabled","debug","tagName"]);var style;var refName="el";var className=(0,_classnames2.default)((_classNames={},_defineProperty(_classNames,stickyClass,!this.state.disabled),_defineProperty(_classNames,disabledClass,this.state.disabled),_classNames),_defineProperty({},fixedClass,!Can.sticky),_defineProperty({},stateClass,this.state.sticky&&!this.state.disabled),_defineProperty({},scrollClass.up,this.state.sticky&&this.scroll.directionY>0),_defineProperty({},scrollClass.down,this.state.sticky&&this.scroll.directionY>0),_defineProperty({},absoluteClass,this.state.absolute));if(!Can.sticky){if(this.state.absolute){style={marginTop:this.state.style.top!==null?this.state.restrict.height-(this.state.bounds.height+this.state.style.top)+(this.state.restrict.top-this.state.bounds.top)+"px":"",marginBottom:this.state.style.bottom!==null?this.state.restrict.height-(this.state.bounds.height+this.state.style.bottom)+(this.state.restrict.bottom-this.state.bounds.bottom)+"px":""}}else if(this.hasOwnScrollTarget&&this.state.fixedOffset!==""){style={marginTop:this.state.fixedOffset}}}if(element){element=_react2.default.cloneElement(element,{ref:refName,key:this._key,style:style,className:(0,_classnames2.default)(element.props.className,className)})}else{var Comp=this.props.tagName;element=_react2.default.createElement(Comp,_extends({ref:refName,key:this._key,style:style,className:className},props)," ",this.props.children," ")}if(Can.sticky){return element}var height=this.state.disabled||this.state.bounds.height===null||!this.state.sticky&&!this.state.absolute?"auto":this.state.bounds.height+"px";var marginTop=height==="auto"?"":this.state.style["margin-top"]?this.state.style["margin-top"]+"px":"";var marginBottom=height==="auto"?"":this.state.style["margin-bottom"]?this.state.style["margin-bottom"]+"px":"";style={height:height,marginTop:marginTop,marginBottom:marginBottom};if(this.state.absolute){style.position="relative"}return _react2.default.createElement("div",{ref:"wrapper",className:stickyWrapperClass,style:style}," ",element," ")}}]);return ReactStickyState}(_react.Component);ReactStickyState.propTypes={stickyWrapperClass:_react.PropTypes.string,stickyClass:_react.PropTypes.string,fixedClass:_react.PropTypes.string,stateClass:_react.PropTypes.string,disabledClass:_react.PropTypes.string,absoluteClass:_react.PropTypes.string,disabled:_react.PropTypes.bool,debug:_react.PropTypes.bool,tagName:_react.PropTypes.string,scrollClass:_react.PropTypes.object};ReactStickyState.defaultProps={stickyWrapperClass:"sticky-wrap",stickyClass:"sticky",fixedClass:"sticky-fixed",stateClass:"is-sticky",disabledClass:"sticky-disabled",absoluteClass:"is-absolute",debug:false,disabled:false,tagName:"div",scrollClass:{down:null,up:null,none:null,persist:false}};exports.default=ReactStickyState;exports.Sticky=ReactStickyState;var _canSticky=null;var Can=function(){function Can(){_classCallCheck(this,Can)}_createClass(Can,null,[{key:"sticky",get:function get(){if(_canSticky!==null){return _canSticky}if(typeof window!=="undefined"){if(window.Modernizr&&window.Modernizr.hasOwnProperty("csspositionsticky")){return _globals.canSticky=window.Modernizr.csspositionsticky}var documentFragment=document.documentElement;var testEl=document.createElement("div");documentFragment.appendChild(testEl);var prefixedSticky=["sticky","-webkit-sticky"];_canSticky=false;for(var i=0;i-1&&(i=i.splice(s,1),i.length||delete this._eventMap[t])}return this},t.prototype.removeAllListener=function(t){var e=this.getListener(t);return e&&(this._eventMap[t].length=0,delete this._eventMap[t]),this},t.prototype.hasListener=function(t){return null!==this.getListener(t)},t.prototype.hasListeners=function(){return null!==this._eventMap&&void 0!==this._eventMap&&!n(this._eventMap)},t.prototype.dispatch=function(t,e){var i=this.getListener(t);if(i){e=e||{},e.type=t,e.target=e.target||this._target,e.currentTarget=e.currentTarget||this._currentTarget;for(var s=-1;++s1||this.x>1)?(this.updateScrollPosition(),void this.trigger(e.EVENT_SCROLL_PROGRESS)):void(this._scrolling||(this._scrolling=!0,this._lastDirectionY=e.NONE,this._lastDirectionX=e.NONE,this.trigger(e.EVENT_SCROLL_START),y.animationFrame?this.nextFrameID=window.requestAnimationFrame(this.onNextFrame):this.onNextFrame()))}},{key:"onNextFrame",value:function(){var t=this;this._speedY=this._scrollY-this.scrollY,this._speedX=this._scrollX-this.scrollX;var i=+this.speedY+ +this.speedX;return this._scrolling&&0===i&&this._currentStopFrames++>this._stopFrames?void this.onScrollStop():(this.updateScrollPosition(),this._lastDirectionY!==this.directionY&&this.trigger("scroll:"+e.directionToString(this.directionY)),this._lastDirectionX!==this.directionX&&this.trigger("scroll:"+e.directionToString(this.directionX)),this._lastDirectionY=this.directionY,this._lastDirectionX=this.directionX,this.trigger(e.EVENT_SCROLL_PROGRESS),void(y.animationFrame?this.nextFrameID=window.requestAnimationFrame(this.onNextFrame):this._nextTimeout=setTimeout(function(){t.onNextFrame()},1e3/60)))}},{key:"onScrollStop",value:function(){this._scrolling=!1,this.updateScrollPosition(),this.trigger(e.EVENT_SCROLL_STOP),this._canScrollY&&(this.y<=0?this.trigger(e.EVENT_SCROLL_MIN):this.y+this.clientHeight>=this.scrollHeight&&this.trigger(e.EVENT_SCROLL_MAX)),this._canScrollX&&(this.x<=0?this.trigger(e.EVENT_SCROLL_MIN):this.x+this.clientWidth>=this.scrollWidth&&this.trigger(e.EVENT_SCROLL_MAX)),this._currentStopFrames=0,this._cancelNextFrame()}},{key:"_cancelNextFrame",value:function(){y.animationFrame?(window.cancelAnimationFrame(this.nextFrameID),this.nextFrameID=-1):clearTimeout(this._nextTimeout)}},{key:"destroyed",get:function(){return this._destroyed}},{key:"scrollPosition",get:function(){return this.getScrollPosition()}},{key:"directionY",get:function(){return!this._canScrollY||0===this.speedY&&!this._scrolling?this._directionY=e.NONE:this.speedY>0?this._directionY=e.UP:this.speedY<0&&(this._directionY=e.DOWN),this._directionY}},{key:"directionX",get:function(){return!this._canScrollX||0===this.speedX&&!this._scrolling?this._directionX=e.NONE:this.speedX>0?this._directionX=e.LEFT:this.speedX<0&&(this._directionX=e.RIGHT),this._directionX}},{key:"attributes",get:function(){return{y:this.y,x:this.x,speedY:this.speedY,speedX:this.speedX,directionY:this.directionY,directionX:this.directionX}}},{key:"scrollTarget",get:function(){return this._scrollTarget}},{key:"delta",get:function(){return this.directionY}},{key:"scrolling",get:function(){return this._scrolling}},{key:"speedY",get:function(){return this._speedY}},{key:"speedX",get:function(){return this._speedX}},{key:"scrollY",get:function(){return this.scrollPosition.y}},{key:"y",get:function(){return this.scrollY}},{key:"scrollX",get:function(){return this.scrollPosition.x}},{key:"x",get:function(){return this.scrollX}},{key:"clientHeight",get:function(){return this._scrollTarget===window?window.innerHeight:this._scrollTarget.clientHeight}},{key:"clientWidth",get:function(){return this._scrollTarget===window?window.innerWidth:this._scrollTarget.clientWidth}},{key:"scrollHeight",get:function(){return this._scrollTarget===window?e.documentHeight:this._scrollTarget.scrollHeight}},{key:"scrollWidth",get:function(){return this._scrollTarget===window?e.documentWidth:this._scrollTarget.scrollWidth}}]),e}(d["default"]);g.hasScrollTarget=g.hasInstance,g.UP=-1,g.DOWN=1,g.NONE=0,g.RIGHT=2,g.LEFT=-2,g.EVENT_SCROLL_PROGRESS="scroll:progress",g.EVENT_SCROLL_START="scroll:start",g.EVENT_SCROLL_STOP="scroll:stop",g.EVENT_SCROLL_DOWN="scroll:down",g.EVENT_SCROLL_UP="scroll:up",g.EVENT_SCROLL_MIN="scroll:min",g.EVENT_SCROLL_MAX="scroll:max",g.EVENT_SCROLL_RESIZE="scroll:resize",i["default"]=g;var y=function(){function t(){n(this,t)}return a(t,null,[{key:"animationFrame",get:function(){return!!(window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame)}}]),t}();e.exports=i["default"]},{"./scroll-parent":6,delegatejs:2,eventdispatcher:3}],6:[function(t,e){"use strict";var i=/(auto|scroll)/,s=function(t){if(!(t instanceof HTMLElement))return window;for(;t.parentNode;){if(t.parentNode===document.body)return window;var e=window.getComputedStyle(t.parentNode,null);if(i.test(e.getPropertyValue("overflow")+e.getPropertyValue("overflow-y")+e.getPropertyValue("overflow-x")))return t.parentNode;t=t.parentNode}return window};e.exports=s},{}],7:[function(t,e,i){(function(s){"use strict";function n(t){return t&&t.__esModule?t:{"default":t}}function r(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function o(t,e){var i={};for(var s in t)e.indexOf(s)>=0||Object.prototype.hasOwnProperty.call(t,s)&&(i[s]=t[s]);return i}function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function c(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(i,"__esModule",{value:!0});var h=Object.assign||function(t){for(var e=1;e=e&&r>=t||0>=e&&e>t)?(s=!0,n=!1):this.state.sticky&&(e>0&&e>t||t>r)&&(s=!1,n=t>r)}else if(null!==i){t+=window.innerHeight;var o=this.state.restrict.top+this.state.bounds.height-i;i=this.state.bounds.bottom+i,this.state.sticky===!1&&i>=t&&t>=o?(s=!0,n=!1):this.state.sticky&&(t>i||o>t)&&(s=!1,n=o>=t)}return{sticky:s,absolute:n}}},{key:"updateStickyState",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?!0:arguments[0],i=arguments[1];if(!this._updatingState){var s=this.getStickyState();return s.sticky!==this.state.sticky||s.absolute!==this.state.absolute?(this._updatingState=!0,e&&(s=v["default"](s,this.getBounds(),{scrollClass:this.getScrollClass()})),this.setState(s,function(){t._updatingState=!1,"function"==typeof i&&i()}),!0):("function"==typeof i&&i(),!1)}}},{key:"updateFixedOffset",value:function(){this.hasOwnScrollTarget&&!L.sticky&&(this.state.sticky?(this.setState({fixedOffset:this.scrollTarget.getBoundingClientRect().top+"px"}),this.hasWindowScrollListener||(this.hasWindowScrollListener=!0,m["default"].getInstance(window).on("scroll:progress",this.updateFixedOffset))):(this.setState({fixedOffset:""}),this.hasWindowScrollListener&&(this.hasWindowScrollListener=!1,m["default"].getInstance(window).off("scroll:progress",this.updateFixedOffset))))}},{key:"update",value:function(){var t=this,e=arguments.length<=0||void 0===arguments[0]?!1:arguments[0];this._updatingBounds||(_("update():: force:"+e),this._updatingBounds=!0,this.updateBounds(!0,!0,function(){t.scroll.updateScrollPosition(),t.updateBounds(e,!0,function(){t.scroll.updateScrollPosition();var i=t.updateStickyState(!1,function(){e&&!i&&t.forceUpdate()});t._updatingBounds=!1})}))}},{key:"initialize",value:function(){var t=this.refs.wrapper||this.refs.el;this.scrollTarget=m["default"].getScrollParent(t),this.hasOwnScrollTarget=this.scrollTarget!==window,this.hasOwnScrollTarget&&(this.updateFixedOffset=this.updateFixedOffset.bind(this)),this.addSrollHandler(),this.addResizeHandler(),this.update()}},{key:"addSrollHandler",value:function(){this.scroll||(this.scroll=m["default"].getInstance(this.scrollTarget),this.onScroll=this.onScroll.bind(this),this.onScrollDirection=this.onScrollDirection.bind(this),this.scroll.on("scroll:start",this.onScroll),this.scroll.on("scroll:progress",this.onScroll),this.scroll.on("scroll:stop",this.onScroll),(this.props.scrollClass.up||this.props.scrollClass.down)&&(this.scroll.on("scroll:up",this.onScrollDirection),this.scroll.on("scroll:down",this.onScrollDirection),this.props.scrollClass.persist||this.scroll.on("scroll:stop",this.onScrollDirection)))}},{key:"removeSrollHandler",value:function(){this.scroll&&(this.scroll.off("scroll:start",this.onScroll),this.scroll.off("scroll:progress",this.onScroll),this.scroll.off("scroll:stop",this.onScroll),this.scroll.off("scroll:up",this.onScrollDirection),this.scroll.off("scroll:down",this.onScrollDirection),this.scroll.off("scroll:stop",this.onScrollDirection),this.scroll.destroy(),this.scroll=null)}},{key:"addResizeHandler",value:function(){this.resizeHandler||(this.resizeHandler=this.onResize.bind(this),window.addEventListener("sticky:update",this.resizeHandler,!1),window.addEventListener("resize",this.resizeHandler,!1),window.addEventListener("orientationchange",this.resizeHandler,!1))}},{key:"removeResizeHandler",value:function(){this.resizeHandler&&(window.removeEventListener("sticky:update",this.resizeHandler),window.removeEventListener("resize",this.resizeHandler),window.removeEventListener("orientationchange",this.resizeHandler),this.resizeHandler=null)}},{key:"getScrollClass",value:function(){if(this.props.scrollClass.up||this.props.scrollClass.down){var t=this.scroll.y<=0||this.scroll.y+this.scroll.clientHeight>=this.scroll.scrollHeight?0:this.scroll.directionY,e=0>t?this.props.scrollClass.up:this.props.scrollClass.down;return e=0===t?null:e}return null}},{key:"onScrollDirection",value:function(t){(this.state.sticky||t&&t.type===m["default"].EVENT_SCROLL_STOP)&&this.setState({scrollClass:this.getScrollClass()})}},{key:"onScroll",value:function(){this.updateStickyState(),this.hasOwnScrollTarget&&!L.sticky&&(this.updateFixedOffset(),this.state.sticky&&!this.hasWindowScrollListener?(this.hasWindowScrollListener=!0,m["default"].getInstance(window).on("scroll:progress",this.updateFixedOffset)):!this.state.sticky&&this.hasWindowScrollListener&&(this.hasWindowScrollListener=!1,m["default"].getInstance(window).off("scroll:progress",this.updateFixedOffset)))}},{key:"onResize",value:function(){this.update()}},{key:"shouldComponentUpdate",value:function(){return this._shouldComponentUpdate}},{key:"componentWillReceiveProps",value:function(t){t.disabled!==this.state.disabled&&this.setState({disabled:t.disabled})}},{key:"componentDidMount",value:function(){var t=this;setTimeout(function(){return t.initialize()},1)}},{key:"componentWillUnmount",value:function(){this._shouldComponentUpdate=!1,this.removeSrollHandler(),this.removeResizeHandler(),this.scroll&&this.scroll.dispatcher&&!this.scroll.dispatcher.hasListeners()&&this.scroll.destroy(),this.scroll=null,this.scrollTarget=null}},{key:"render",value:function(){var t,e,i=f["default"].Children.only(this.props.children),s=this.props,n=s.stickyWrapperClass,l=s.stickyClass,a=s.fixedClass,c=s.stateClass,u=s.disabledClass,d=s.absoluteClass,p=(s.disabled,s.debug,s.tagName,o(s,["stickyWrapperClass","stickyClass","fixedClass","stateClass","disabledClass","absoluteClass","disabled","debug","tagName"])),y="el",m=g["default"]((t={},r(t,l,!this.state.disabled),r(t,u,this.state.disabled),t),r({},a,!L.sticky),r({},c,this.state.sticky&&!this.state.disabled),r({},d,this.state.absolute),this.state.scrollClass);if(L.sticky||(this.state.absolute?e={marginTop:null!==this.state.style.top?this.state.restrict.height-(this.state.bounds.height+this.state.style.top)+(this.state.restrict.top-this.state.bounds.top)+"px":"",marginBottom:null!==this.state.style.bottom?this.state.restrict.height-(this.state.bounds.height+this.state.style.bottom)+(this.state.restrict.bottom-this.state.bounds.bottom)+"px":""}:this.hasOwnScrollTarget&&""!==this.state.fixedOffset&&(e={marginTop:this.state.fixedOffset})),i)i=f["default"].cloneElement(i,{ref:y,key:this._key,style:e,className:g["default"](i.props.className,m)});else{var w=this.props.tagName;i=f["default"].createElement(w,h({ref:y,key:this._key,style:e,className:m},p),this.props.children)}if(L.sticky)return i;var v=this.state.disabled||null===this.state.bounds.height||!this.state.sticky&&!this.state.absolute?"auto":this.state.bounds.height+"px",_="auto"===v?"":this.state.style["margin-top"]?this.state.style["margin-top"]+"px":"",S="auto"===v?"":this.state.style["margin-bottom"]?this.state.style["margin-bottom"]+"px":"";return e={height:v,marginTop:_,marginBottom:S},this.state.absolute&&(e.position="relative"),f["default"].createElement("div",{ref:"wrapper",className:n,style:e}," ",i," ")}}]),e}(d.Component);E.propTypes={stickyWrapperClass:d.PropTypes.string,stickyClass:d.PropTypes.string,fixedClass:d.PropTypes.string,stateClass:d.PropTypes.string,disabledClass:d.PropTypes.string,absoluteClass:d.PropTypes.string,disabled:d.PropTypes.bool,debug:d.PropTypes.bool,tagName:d.PropTypes.string,scrollClass:d.PropTypes.object},E.defaultProps={stickyWrapperClass:"sticky-wrap",stickyClass:"sticky",fixedClass:"sticky-fixed",stateClass:"is-sticky",disabledClass:"sticky-disabled",absoluteClass:"is-absolute",debug:!1,disabled:!1,tagName:"div",scrollClass:{down:null,up:null,none:null,persist:!1}},i["default"]=E;var C=null,L=function(){function t(){l(this,t)}return u(t,null,[{key:"sticky",get:function(){if(null!==C)return C;if("undefined"!=typeof window){if(window.Modernizr&&window.Modernizr.hasOwnProperty("csspositionsticky"))return _globals.canSticky=window.Modernizr.csspositionsticky;var t=document.documentElement,e=document.createElement("div");t.appendChild(e);var i=["sticky","-webkit-sticky"];C=!1;for(var s=0;s - const {Sticky} = ReactStickyState; + var Sticky = window.ReactStickyState; + + const scrollClass = { diff --git a/package.json b/package.json index aace0a7..4e3cd3f 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,14 @@ "jsnext:main": "src/react-sticky-state.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "build-debug": "browserify -t [ babelify --presets [ es2015 react stage-0] --plugins [ transform-class-properties ] ] -t browserify-shim ./src/react-sticky-state.js --standalone ReactStickyState -o dist/react-sticky-state.min.js", - "build": "npm run build-debug && uglifyjs dist/react-sticky-state.js -o dist/react-sticky-state.min.js", - "dist": "npm run babel && npm run build", - "babel": "babel ./src -d ./dist", - "start": "npm run build-debug && concurrently --kill-others \"watchify -d -t [ babelify --presets [ es2015 react stage-0] --plugins [ transform-class-properties ] ] -t browserify-shim ./src/react-sticky-state.js --s ReactStickyState -o dist/react-sticky-state.min.js -v\" \"npm run server\"", - "server": "browser-sync start --server --no-ghost-mode --directory --files 'examples/**/**, dist/*.js' --startPath examples/index.html" + "build-js": "browserify --fast -e src/react-sticky-state.js -d --standalone ReactStickyState -t babelify -t browserify-shim | derequire | exorcist dist/react-sticky-state.min.js.map > dist/react-sticky-state.min.js", + "dist-js": "BABEL_ENV=production NODE_ENV=production browserify -e src/react-sticky-state.js --standalone ReactStickyState -t babelify -t browserify-shim | derequire > dist/react-sticky-state.min.js", + "dist-js-min": "uglifyjs -cmv dist/react-sticky-state.min.js -o dist/react-sticky-state.min.js", + "dist": "cp src/sticky-state.css dist/ && npm run dist-js && npm run dist-js-min && npm run build-lib", + "start": "run-p watch-js server", + "build-lib": "BABEL_ENV=production babel src -d dist", + "watch-js": "watchify -d --poll=100 --fast --standalone ReactStickyState -e src/react-sticky-state.js -t babelify -t browserify-shim -o 'exorcist dist/react-sticky-state.min.js.map > dist/react-sticky-state.min.js' -v", + "server": "browser-sync start --no-ghost-mode --server --directory --files 'examples/**/**, dist/*.js' --startPath examples/index.html" }, "repository": { "type": "git", @@ -47,7 +49,9 @@ "browser-sync": "2.16.0", "browserify": "13.1.0", "browserify-shim": "3.8.12", - "concurrently": "2.2.0", + "derequire": "2.0.3", + "exorcist": "0.4.0", + "npm-run-all": "3.1.0", "react": "15.3.1", "uglifyjs": "2.4.10", "watchify": "3.7.0" diff --git a/src/.tern-port b/src/.tern-port index 00f2188..965f09e 100644 --- a/src/.tern-port +++ b/src/.tern-port @@ -1 +1 @@ -59783 \ No newline at end of file +64013 \ No newline at end of file diff --git a/src/react-sticky-state.js b/src/react-sticky-state.js index c992409..79058b4 100644 --- a/src/react-sticky-state.js +++ b/src/react-sticky-state.js @@ -76,6 +76,7 @@ const initialState = { height: null, width: null }, + scrollClass: null, initialStyle: null, style: { top: null, @@ -296,7 +297,7 @@ export default class ReactStickyState extends Component { if (values.sticky !== this.state.sticky || values.absolute !== this.state.absolute) { this._updatingState = true; if (bounds) { - values = assign(values, this.getBounds()); + values = assign(values, this.getBounds(), {scrollClass : this.getScrollClass()}); } this.setState(values, () => { this._updatingState = false; @@ -383,7 +384,7 @@ export default class ReactStickyState extends Component { this.scroll.on('scroll:up', this.onScrollDirection); this.scroll.on('scroll:down', this.onScrollDirection); if (!this.props.scrollClass.persist) { - this.scroll.on('scroll:stop', ::this.render); + this.scroll.on('scroll:stop', this.onScrollDirection); } } } @@ -421,22 +422,24 @@ export default class ReactStickyState extends Component { } - getScrollClassObj(obj) { - obj = obj || {}; - var direction = (this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight) ? 0 : this.scroll.directionY; - obj[this.props.scrollClass.up] = direction < 0; - obj[this.props.scrollClass.down] = direction > 0; - return obj; - } + getScrollClass(){ + if(this.props.scrollClass.up || this.props.scrollClass.down){ + var direction = (this.scroll.y <= 0 || this.scroll.y + this.scroll.clientHeight >= this.scroll.scrollHeight) ? 0 : this.scroll.directionY; + var scrollClass = direction < 0 ? this.props.scrollClass.up : this.props.scrollClass.down; + scrollClass = direction === 0 ? null : scrollClass; + return scrollClass; + } + return null; + } onScrollDirection(e) { - console.log(e, this.scroll.directionY) - if (this.state.sticky || e.type === Scroll.EVENT_SCROLL_STOP) { - - - this.refs.el.className = classNames(this.refs.el.className, this.getScrollClassObj()); + if (this.state.sticky || e && e.type === Scroll.EVENT_SCROLL_STOP) { + this.setState({ + scrollClass : this.getScrollClass() + }) + // this.refs.el.className = classNames(this.refs.el.className, this.getScrollClassObj()); } } @@ -496,7 +499,7 @@ export default class ReactStickyState extends Component { render() { let element = React.Children.only(this.props.children); - const { stickyWrapperClass, stickyClass, scrollClass, fixedClass, stateClass, disabledClass, absoluteClass, disabled, debug, tagName, ...props } = this.props; + const { stickyWrapperClass, stickyClass, fixedClass, stateClass, disabledClass, absoluteClass, disabled, debug, tagName, ...props } = this.props; var style; const refName = 'el'; @@ -504,9 +507,7 @@ export default class ReactStickyState extends Component { {[stickyClass]: !this.state.disabled, [disabledClass]: this.state.disabled }, {[fixedClass]: !Can.sticky }, {[stateClass]: this.state.sticky && !this.state.disabled }, - {[scrollClass.up]: this.state.sticky && this.scroll.directionY > 0 }, - {[scrollClass.down]: this.state.sticky && this.scroll.directionY > 0 }, - {[absoluteClass]: this.state.absolute }); + {[absoluteClass]: this.state.absolute }, this.state.scrollClass); @@ -528,10 +529,12 @@ export default class ReactStickyState extends Component { element = React.cloneElement(element, { ref: refName, key: this._key, style: style, className: classNames(element.props.className, className) }); } else { const Comp = this.props.tagName; - element = < Comp ref = { refName } + element = { this.props.children } < /Comp>; + className = { className } {...props }> + { this.props.children } + ; } if (Can.sticky) { @@ -550,17 +553,14 @@ export default class ReactStickyState extends Component { if (this.state.absolute) { style.position = 'relative'; } - return ( < div ref = 'wrapper' + return (
{ element } < /div> + style = { style }> { element }
); } } -export { ReactStickyState as Sticky }; - - var _canSticky = null; class Can { diff --git a/sticky.css b/sticky.css deleted file mode 100644 index 144790d..0000000 --- a/sticky.css +++ /dev/null @@ -1,17 +0,0 @@ -.sticky { - position: -webkit-sticky; - position: -moz-sticky; - position: -ms-sticky; - position: -o-sticky; - position: sticky; -} - -.sticky.sticky-fixed.is-sticky { - position: fixed; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -.sticky.sticky-fixed.is-absolute{ - position: absolute; -} diff --git a/test/index.js b/test/index.js new file mode 100644 index 0000000..79ab8e9 --- /dev/null +++ b/test/index.js @@ -0,0 +1,3 @@ +var hans = require('../dist/react-sticky-state').Sticky; + +console.log(hans);