react-sticky
Advanced tools
Comparing version 2.5.0 to 2.5.1
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Sticky = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ | ||
var React=require("react"),Sticky=React.createClass({statics:{__frame:null,__instances:[],register:function(t){Sticky.__instances.push(t),Sticky.__instances.sort(function(t,e){return t.top()>e.top()?1:e.top()>t.top()?-1:0}),null===Sticky.__frame&&Sticky.resumeLoop()},unregister:function(t){var e=Sticky.__instances.indexOf(t);e>-1&&Sticky.__instances.splice(e,1),0===Sticky.__instances.length&&Sticky.cancelLoop()},instancesAbove:function(t){return Sticky.__instances.slice(0,Sticky.__instances.indexOf(t))},isModernBrowser:function(){return window&&window.requestAnimationFrame&&window.cancelAnimationFrame},resumeLoop:function(){var t=Sticky.isModernBrowser()?requestAnimationFrame:setTimeout;Sticky.__frame=t(Sticky.onFrame,1e3/60)},cancelLoop:function(){var t=Sticky.isModernBrowser()?cancelAnimationFrame:clearTimeout;t(Sticky.__frame),Sticky.__frame=null},onFrame:function(){for(var t=0;t<Sticky.__instances.length;t++){var e=Sticky.__instances[t];e.handleFrame()}Sticky.resumeLoop()}},getDefaultProps:function(){return{type:React.DOM.div,className:"",style:{},stickyClass:"sticky",stickyStyle:{position:"fixed",top:0,left:0,right:0,zIndex:1},topOffset:0,onStickyStateChange:function(){}}},getInitialState:function(){return{events:["scroll","resize","touchmove","touchend"]}},pageOffset:function(){for(var t=Sticky.instancesAbove(this),e=0,n=0;n<t.length;n++){var i=t[n];i.state.isSticky&&(e+=i.domNode.getBoundingClientRect().height)}return(window.pageYOffset||document.documentElement.scrollTop)+e},top:function(){return this.domNode.getBoundingClientRect().top},shouldBeSticky:function(){return this.pageOffset()>=this.origin+this.props.topOffset},handleFrame:function(){if(this.hasUnhandledEvent||this.hasTouchEvent){var t=this.shouldBeSticky();this.nextState(t),this.hasUnhandledEvent=!1}},handleEvent:function(t){switch(t.type){case"touchmove":this.hasTouchEvent=!0;break;case"touchend":this.hasTouchEvent=!1;break;default:this.hasUnhandledEvent=!0}},componentDidMount:function(){this.state.events.forEach(function(t){window.addEventListener?window.addEventListener(t,this.handleEvent):window.attachEvent("on"+t,this.handleEvent)},this),this.domNode=React.findDOMNode?React.findDOMNode(this):this.getDOMNode(),this.origin=this.top()+this.pageOffset(),this.hasUnhandledEvent=!0,Sticky.register(this)},componentWillUnmount:function(){this.state.events.forEach(function(t){window.removeEventListener?window.removeEventListener(t,this.handleEvent):window.detachEvent("on"+t,this.handleEvent)},this),this.domNode=null,Sticky.unregister(this)},nextStyle:function(t){if(t){var e=function(t,e){for(var n in e)t[n]=e[n];return t};return e(e({},this.props.style),this.props.stickyStyle)}return this.props.style},nextClassName:function(t){var e=this.props.className;return t&&(e+=" "+this.props.stickyClass),e},nextState:function(t){var e=this.state.isSticky!==t;this.setState({isSticky:t,style:this.nextStyle(t),className:this.nextClassName(t)}),e&&this.props.onStickyStateChange(t)},render:function(){return this.props.type({style:this.state.style,className:this.state.className},this.props.children)}});module.exports=Sticky; | ||
var React=require("react"),Sticky=React.createClass({statics:{__frame:null,__instances:[],register:function(t){Sticky.__instances.push(t),Sticky.__instances.sort(function(t,e){return t.top()>e.top()?1:e.top()>t.top()?-1:0}),null===Sticky.__frame&&Sticky.resumeLoop()},unregister:function(t){var e=Sticky.__instances.indexOf(t);e>-1&&Sticky.__instances.splice(e,1),0===Sticky.__instances.length&&Sticky.cancelLoop()},instancesAbove:function(t){return Sticky.__instances.slice(0,Sticky.__instances.indexOf(t))},stickyInstancesAbove:function(t){for(var e=Sticky.instancesAbove(t),n=[],i=0;i<e.length;i++){var s=e[i];s.state.isSticky&&n.push(s)}return n},isModernBrowser:function(){return window&&window.requestAnimationFrame&&window.cancelAnimationFrame},resumeLoop:function(){var t=Sticky.isModernBrowser()?requestAnimationFrame:setTimeout;Sticky.__frame=t(Sticky.onFrame,1e3/60)},cancelLoop:function(){var t=Sticky.isModernBrowser()?cancelAnimationFrame:clearTimeout;t(Sticky.__frame),Sticky.__frame=null},onFrame:function(){for(var t=0;t<Sticky.__instances.length;t++){var e=Sticky.__instances[t];e.handleFrame()}Sticky.resumeLoop()}},getDefaultProps:function(){return{type:React.DOM.div,className:"",style:{},stickyClass:"sticky",stickyStyle:{position:"fixed",top:0,left:0,right:0,zIndex:1},topOffset:0,onStickyStateChange:function(){}}},getInitialState:function(){return{events:["scroll","resize","touchmove","touchend"]}},pageOffset:function(){for(var t=Sticky.stickyInstancesAbove(this),e=0,n=0;n<t.length;n++){var i=t[n];e+=i.domNode.getBoundingClientRect().height}return(window.pageYOffset||document.documentElement.scrollTop)+e},top:function(){return this.domNode.getBoundingClientRect().top},shouldBeSticky:function(){return this.pageOffset()>=this.origin+this.props.topOffset},handleFrame:function(){if(this.hasUnhandledEvent||this.hasTouchEvent){var t=this.shouldBeSticky();this.nextState(t),this.hasUnhandledEvent=!1}},handleEvent:function(t){switch(t.type){case"touchmove":this.hasTouchEvent=!0;break;case"touchend":this.hasTouchEvent=!1;break;default:this.hasUnhandledEvent=!0}},componentDidMount:function(){this.state.events.forEach(function(t){window.addEventListener?window.addEventListener(t,this.handleEvent):window.attachEvent("on"+t,this.handleEvent)},this),this.domNode=React.findDOMNode?React.findDOMNode(this):this.getDOMNode(),this.origin=this.top()+this.pageOffset(),this.hasUnhandledEvent=!0,Sticky.register(this)},componentWillUnmount:function(){this.state.events.forEach(function(t){window.removeEventListener?window.removeEventListener(t,this.handleEvent):window.detachEvent("on"+t,this.handleEvent)},this),this.domNode=null,Sticky.unregister(this)},nextStyle:function(t){if(t){var e=function(t,e){for(var n in e)t[n]=e[n];return t};return e(e({},this.props.style),this.props.stickyStyle)}return this.props.style},nextClassName:function(t){var e=this.props.className;return t&&(e+=" "+this.props.stickyClass),e},nextState:function(t){var e=this.state.isSticky!==t;this.setState({isSticky:t,style:this.nextStyle(t),className:this.nextClassName(t)}),e&&this.props.onStickyStateChange(t)},render:function(){return this.props.type({style:this.state.style,className:this.state.className},this.props.children)}});module.exports=Sticky; | ||
},{"react":"react"}]},{},[1])(1) | ||
@@ -4,0 +4,0 @@ }); |
@@ -53,2 +53,16 @@ var React = require('react'); | ||
/* | ||
* Return every Sticky instance that is | ||
* positioned above the supplied instance | ||
* that's state has isSticky === true. | ||
*/ | ||
stickyInstancesAbove: function(instance) { | ||
var instancesAbove = Sticky.instancesAbove(instance); | ||
var stickyInstancesAbove = []; | ||
for (var i = 0; i < instancesAbove.length; i++) { | ||
var sticky = instancesAbove[i]; | ||
if (sticky.state.isSticky) stickyInstancesAbove.push(sticky); | ||
} | ||
return stickyInstancesAbove; | ||
}, | ||
/* | ||
* Returns true if the browser environment can support | ||
@@ -121,9 +135,7 @@ * requestAnimationFrame. Otherwise returns false; | ||
pageOffset: function() { | ||
var otherStickies = Sticky.instancesAbove(this); | ||
var otherStickies = Sticky.stickyInstancesAbove(this); | ||
var otherStickyOffsets = 0; | ||
for (var i = 0; i < otherStickies.length; i++) { | ||
var otherSticky = otherStickies[i]; | ||
if (otherSticky.state.isSticky) { | ||
otherStickyOffsets += otherSticky.domNode.getBoundingClientRect().height; | ||
} | ||
otherStickyOffsets += otherSticky.domNode.getBoundingClientRect().height; | ||
} | ||
@@ -130,0 +142,0 @@ return (window.pageYOffset || document.documentElement.scrollTop) + otherStickyOffsets; |
{ | ||
"name": "react-sticky", | ||
"version": "2.5.0", | ||
"version": "2.5.1", | ||
"description": "Sticky component for React", | ||
@@ -5,0 +5,0 @@ "main": "./lib/sticky", |
@@ -14,3 +14,3 @@ react-sticky [![Build Status](https://travis-ci.org/captivationsoftware/react-sticky.svg?branch=master)](https://travis-ci.org/captivationsoftware/react-sticky) | ||
- Not bound to any version of React so it will scale along with the community! | ||
- Only 12K, with 0 external dependencies (besides React, of course)! | ||
- Only 12K minified, with 0 external dependencies (besides React, of course)! | ||
- Allows multiple Sticky elements on the page at once! | ||
@@ -23,3 +23,3 @@ | ||
Tip: Run `npm install` to build the compressed UMD version suitable for inclusion via CommonJS/AMD/manual `<script />` includes. | ||
Tip: run `npm install` to build the compressed UMD version suitable for inclusion via CommonJS, AMD, and even good old fashioned `<script>` tags. | ||
@@ -26,0 +26,0 @@ ## Code Example |
@@ -183,2 +183,11 @@ import { expect } from 'chai'; | ||
it ('should know which components above it are sticky', () => { | ||
this.sticky.state.isSticky = false; | ||
this.inBetween.state.isSticky = false; | ||
expect(Sticky.stickyInstancesAbove(this.bottomMost)).to.be.empty; | ||
this.inBetween.state.isSticky = true; | ||
expect(Sticky.stickyInstancesAbove(this.bottomMost)).to.deep.equal([this.inBetween]); | ||
}); | ||
it ('should incorporate height of other sticky elements above it when computing offset', () => { | ||
@@ -208,17 +217,23 @@ expect(this.inBetween.pageOffset()).to.equal(0); | ||
it ('should react to scroll events', (done) => { | ||
this.sticky.nextState = () => done(); | ||
it ('should react to scroll events', () => { | ||
expect(this.sticky.hasUnhandledEvent).to.be.false; | ||
emitEvent('scroll'); | ||
expect(this.sticky.hasUnhandledEvent).to.be.true; | ||
}); | ||
it ('should react to resize events', (done) => { | ||
this.sticky.nextState = () => done(); | ||
it ('should react to resize events', () => { | ||
expect(this.sticky.hasUnhandledEvent).to.be.false; | ||
emitEvent('resize'); | ||
expect(this.sticky.hasUnhandledEvent).to.be.true; | ||
}); | ||
it ('should react to touch events', (done) => { | ||
this.sticky.nextState = () => done(); | ||
it ('should react to touch events', () => { | ||
expect(this.sticky.hasUnhandledEvent).to.be.false; | ||
emitEvent('touchmove'); | ||
expect(this.sticky.hasUnhandledEvent).to.be.false; | ||
expect(this.sticky.hasTouchEvent).to.be.true; | ||
emitEvent('touchend'); | ||
expect(this.sticky.hasTouchEvent).to.be.false; | ||
}); | ||
}); | ||
}); |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
40454
496
0