react-sticky - npm Package Compare versions

Comparing version 2.5.0 to 2.5.1

dist/sticky.min.js

 (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 @@ });

lib/sticky.js

@@ -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;

package.json

 {
   "name": "react-sticky",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Sticky component for React",
@@ -5,0 +5,0 @@ "main": "./lib/sticky",

README.md

@@ -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

test/unit.js

@@ -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;
     });
   });
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This 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 risk

Package 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

Improved metrics

Total package byte prevSize

40454

increased by5.16%

Lines of code

496

increased by5.31%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes