react-scroll-parallax - npm Package Compare versions

Comparing version 2.0.0-alpha.1 to 2.0.0-alpha.2

__tests__/ViewportProgress.test.js

@@ -56,3 +56,3 @@ /* global describe, it, IntersectionObserver */
 
-    it('to pass a an object containing the { progress, mapRef }w keys', () => {
+    it('to pass a an object containing the { progress, mapRef, and updateAttributeCache } keys', () => {
         const node = document.createElement('div');
@@ -74,4 +74,5 @@ let testObject = {};
             mapRef: expect.any(Function),
+            updateAttributeCache: expect.any(Function),
         });
     });
 });

lib/components/Parallax.js

@@ -33,8 +33,2 @@ 'use strict';
 
-var observerOptions = {
-    root: null,
-    rootMargin: '10px',
-    threshold: [0.01, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
-};
-
 var Parallax = function (_Component) {
@@ -96,3 +90,3 @@ _inherits(Parallax, _Component);
                 _reactObserved2.default,
-                { initialViewState: true, intersectionRatio: 0.01, options: observerOptions },
+                { initialViewState: true, options: observerOptions },
                 function (_ref) {
@@ -153,3 +147,2 @@ var isInView = _ref.isInView,
 Parallax.defaultProps = {
-    observerOptions: observerOptions,
     x: [0, 0],
@@ -167,3 +160,3 @@ y: [0, 0],
     opacity: _propValidation.validateOpacity,
-    observerOptions: _propTypes2.default.object.isRequired
+    observerOptions: _propTypes2.default.object
     // @TODO: these should also be available:
@@ -170,0 +163,0 @@ // rotation

lib/controllers/ScrollController.js

@@ -62,3 +62,3 @@ 'use strict';
         value: function _addListeners() {
-            window.addEventListener('scroll', this._handleScroll, this.supportsPassive ? { passive: true } : false);
+            window.addEventListener('scroll', this._handleScroll, this.listenerOptions);
         }
@@ -68,3 +68,3 @@ }, {
         value: function _removeListeners() {
-            window.removeEventListener('scroll', this._handleScroll, this.supportsPassive ? { passive: true } : false);
+            window.removeEventListener('scroll', this._handleScroll, this.listenerOptions);
         }
@@ -76,2 +76,13 @@ }, {
         }
+    }, {
+        key: 'listenerOptions',
+
+
+        // Passive support test
+        get: function get() {
+            return this.supportsPassive ? { passive: true } : false;
+        }
+
+        // Window scroll handler. Sets the 'scrollY'
+
     }], [{
@@ -85,8 +96,2 @@ key: 'init',
 
-
-        // Passive support test
-
-
-        // Window scroll handler. Sets the 'scrollY'
-
     }]);
@@ -93,0 +98,0 @@

lib/controllers/Subscribers.js

@@ -33,9 +33,9 @@ 'use strict';
         this._updateSubscribers = function () {
-            _this.subscriptions.forEach(function (f) {
-                return f(_this.state);
+            _this.subscriptions.forEach(function (cb) {
+                return cb(_this.state);
             });
         };
 
-        this._updateSingleSubscriber = function (f) {
-            f(_this.state);
+        this._updateSingleSubscriber = function (cb) {
+            cb(_this.state);
         };
@@ -54,11 +54,11 @@ }
         key: 'subscribe',
-        value: function subscribe(f) {
-            this.subscriptions.push(f);
-            this._updateSingleSubscriber(f);
+        value: function subscribe(cb) {
+            this.subscriptions.push(cb);
+            this._updateSingleSubscriber(cb);
         }
     }, {
         key: 'unsubscribe',
-        value: function unsubscribe(f) {
+        value: function unsubscribe(cb) {
             this.subscriptions = this.subscriptions.filter(function (x) {
-                return f !== x;
+                return cb !== x;
             });
@@ -65,0 +65,0 @@ }

lib/utils/createBoundsStyle.js

@@ -7,5 +7,9 @@ 'use strict';
 exports.default = createBoundsStyle;
-exports.transformBoundsY = transformBoundsY;
-exports.transformBoundsX = transformBoundsX;
-exports.transformBoundsScale = transformBoundsScale;
+
+var _BoundsStyle = require('./BoundsStyle');
+
+var _BoundsStyle2 = _interopRequireDefault(_BoundsStyle);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function createBoundsStyle(x, y, scale, el) {
@@ -21,13 +25,2 @@ // NOTE: This creates the style for the bounds element
 
-    var bounds = {};
-
-    bounds.mt = 0;
-    bounds.mb = 0;
-    bounds.ml = 0;
-    bounds.mr = 0;
-    bounds.pt = 0;
-    bounds.pb = 0;
-    bounds.pl = 0;
-    bounds.pr = 0;
-
     var hasScale = scale;
@@ -58,81 +51,6 @@ var hasYPercent = y[0].unit === '%';
 
-    if (y) {
-        bounds = transformBoundsY(bounds, y, height);
-    }
+    var bounds = new _BoundsStyle2.default().transformBoundsY(y, height).transformBoundsX(x, width).transformBoundsScale(scale, width, height).boundsStyle;
 
-    if (x) {
-        bounds = transformBoundsX(bounds, x, width);
-    }
-
-    if (scale) {
-        bounds = transformBoundsScale(bounds, scale, width, height);
-    }
-
-    return {
-        marginTop: bounds.mt,
-        marginBottom: bounds.mb,
-        marginLeft: bounds.ml,
-        marginRight: bounds.mr,
-        paddingTop: bounds.mt * -1,
-        paddingBottom: bounds.mb * -1,
-        paddingLeft: bounds.ml * -1,
-        paddingRight: bounds.mr * -1
-    };
+    return bounds;
 }
-
-function transformBoundsY(bounds, y, h) {
-    var newBounds = Object.assign({}, bounds);
-
-    var hasYPercent = y[0].unit === '%';
-
-    var y0 = y[0].value;
-    var y1 = y[1].value;
-
-    // transform percent to px
-    var value0 = hasYPercent ? y0 / 100 * h : y0;
-    var value1 = hasYPercent ? y1 / 100 * h : y1;
-
-    var yMin = Math.min(value0, value1);
-    var yMax = Math.max(value0, value1);
-
-    newBounds.mt = newBounds.mt + yMin;
-    newBounds.mb = newBounds.mb - yMax;
-
-    return newBounds;
-}
-
-function transformBoundsX(bounds, x, w) {
-    var newBounds = Object.assign({}, bounds);
-
-    var hasXPercent = x[0].unit === '%';
-
-    var x0 = x[0].value;
-    var x1 = x[1].value;
-
-    // transform percent to px
-    var value0 = hasXPercent ? x0 / 100 * w : x0;
-    var value1 = hasXPercent ? x1 / 100 * w : x1;
-
-    var xMin = Math.min(value0, value1);
-    var xMax = Math.max(value0, value1);
-
-    newBounds.ml = newBounds.ml + xMin;
-    newBounds.mr = newBounds.mr - xMax;
-
-    return newBounds;
-}
-
-function transformBoundsScale(bounds, scale, w, h) {
-    var newBounds = Object.assign({}, bounds);
-
-    var scaleMax = Math.max(scale[0], scale[1]);
-    var halfDeltaX = (w * scaleMax - w) / 2;
-    var halfDeltaY = (h * scaleMax - h) / 2;
-
-    newBounds.mt = newBounds.mt - halfDeltaY;
-    newBounds.mb = newBounds.mb - halfDeltaY;
-    newBounds.ml = newBounds.ml - halfDeltaX;
-    newBounds.mr = newBounds.mr - halfDeltaX;
-
-    return newBounds;
-}
+module.exports = exports['default'];

package.json

 {
     "name": "react-scroll-parallax",
-    "version": "2.0.0-alpha.1",
+    "version": "2.0.0-alpha.2",
     "description": "React component to create parallax scrolling effects",
@@ -14,4 +14,5 @@ "repository": {
         "gh-pages": "NODE_ENV=production webpack --progress --colors",
-        "test": "BABEL_ENV=test jest && yarn run storybook:export",
+        "test": "BABEL_ENV=test jest",
         "test:watch": "BABEL_ENV=test jest --watch",
+        "test:coverage": "BABEL_ENV=test jest && codecov",
         "prettier": "prettier --tab-width 4 --single-quote --trailing-comma es5 --print-width 80 --write \"{src,examples,__tests__}/**/**/**/*.js\"",
@@ -27,3 +28,5 @@ "prepublish": "babel ./src --out-dir ./lib --presets es2015,react,stage-0 --plugins babel-plugin-add-module-exports",
             "<rootDir>/src/"
-        ]
+        ],
+        "coverageDirectory": "./coverage/",
+        "collectCoverage": true
     },
@@ -43,3 +46,3 @@ "keywords": [
         "prop-types": "^15.5.7",
-        "react-observed": "^1.0.0-beta.2"
+        "react-observed": "^1.0.0-beta.4"
     },
@@ -62,2 +65,3 @@ "devDependencies": {
         "babel-preset-stage-0": "^6.24.1",
+        "codecov": "^3.0.0",
         "cross-env": "^3.1.4",
@@ -64,0 +68,0 @@ "css-loader": "^0.28.0",

README.md

 # React Scroll Parallax v2
 
-[![Build Status](https://travis-ci.org/jscottsmith/react-scroll-parallax.svg?branch=v2)](https://travis-ci.org/jscottsmith/react-scroll-parallax)
+[![Build Status](https://travis-ci.org/jscottsmith/react-scroll-parallax.svg?branch=v2)](https://travis-ci.org/jscottsmith/react-scroll-parallax) [![codecov](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/v2/graph/badge.svg)](https://codecov.io/gh/jscottsmith/react-scroll-parallax/branch/v2)
 
@@ -38,3 +38,3 @@ A small library of components for creating **vertical** scroll based effects like parallax based on an element's position in the viewport. Works with universal (server-side rendered) React apps.
 
-This package also requires [support](https://caniuse.com/#search=IntersectionObserver) for the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Since this isn't supported in older browsers you will need to add a [polyfill](https://github.com/w3c/IntersectionObserver/tree/gh-pages/polyfill).
+This package also requires [support](https://caniuse.com/#search=IntersectionObserver) for the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Since this isn't supported in older browsers (or the latest [Safari](https://media.giphy.com/media/3og0INyCmHlNylks9O/giphy.gif) and [no update](https://bugs.webkit.org/show_bug.cgi?id=159475) as to when it will land) you will need to add a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).
 
@@ -41,0 +41,0 @@ ```

src/components/Parallax.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-
 import Observed from 'react-observed';
@@ -17,11 +16,4 @@ import {
 
-const observerOptions = {
-    root: null,
-    rootMargin: '10px',
-    threshold: [0.01, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
-};
-
 class Parallax extends Component {
     static defaultProps = {
-        observerOptions,
         x: [0, 0],
@@ -43,3 +35,3 @@ y: [0, 0],
         opacity: validateOpacity,
-        observerOptions: PropTypes.object.isRequired,
+        observerOptions: PropTypes.object,
         // @TODO: these should also be available:
@@ -83,3 +75,3 @@ // rotation
         return (
-            <Observed initialViewState intersectionRatio={0.01} options={observerOptions}>
+            <Observed initialViewState options={observerOptions}>
                 {({ isInView, mapRef: observedRef }) => (
@@ -86,0 +78,0 @@ <ScrollPosition isInView={isInView}>

src/controllers/ScrollController.js

@@ -29,5 +29,9 @@ import { testForPassiveScroll } from '../utils/index';
 
-    // Passive support test
     supportsPassive = testForPassiveScroll();
 
+    // Passive support test
+    get listenerOptions() {
+        return this.supportsPassive ? { passive: true } : false;
+    }
+
     // Window scroll handler. Sets the 'scrollY'
@@ -47,3 +51,3 @@ _handleScroll = () => {
             this._handleScroll,
-            this.supportsPassive ? { passive: true } : false
+            this.listenerOptions
         );
@@ -56,3 +60,3 @@ }
             this._handleScroll,
-            this.supportsPassive ? { passive: true } : false
+            this.listenerOptions
         );
@@ -59,0 +63,0 @@ }

src/controllers/Subscribers.js

@@ -20,7 +20,7 @@ import { testForPassiveScroll } from '../utils/index';
     _updateSubscribers = () => {
-        this.subscriptions.forEach(f => f(this.state));
+        this.subscriptions.forEach(cb => cb(this.state));
     };
 
-    _updateSingleSubscriber = f => {
-        f(this.state);
+    _updateSingleSubscriber = cb => {
+        cb(this.state);
     };
@@ -33,9 +33,9 @@
 
-    subscribe(f) {
-        this.subscriptions.push(f);
-        this._updateSingleSubscriber(f);
+    subscribe(cb) {
+        this.subscriptions.push(cb);
+        this._updateSingleSubscriber(cb);
     }
 
-    unsubscribe(f) {
-        this.subscriptions = this.subscriptions.filter(x => f !== x);
+    unsubscribe(cb) {
+        this.subscriptions = this.subscriptions.filter(x => cb !== x);
     }
@@ -42,0 +42,0 @@ }

src/utils/createBoundsStyle.js

@@ -0,1 +1,3 @@
+import BoundsStyle from './BoundsStyle';
+
 export default function createBoundsStyle(x, y, scale, el) {
@@ -11,13 +13,2 @@ // NOTE: This creates the style for the bounds element
 
-    let bounds = {};
-
-    bounds.mt = 0;
-    bounds.mb = 0;
-    bounds.ml = 0;
-    bounds.mr = 0;
-    bounds.pt = 0;
-    bounds.pb = 0;
-    bounds.pl = 0;
-    bounds.pr = 0;
-
     const hasScale = scale;
@@ -49,81 +40,9 @@ const hasYPercent = y[0].unit === '%';
 
-    if (y) {
-        bounds = transformBoundsY(bounds, y, height);
-    }
+    const bounds = new BoundsStyle()
+        .transformBoundsY(y, height)
+        .transformBoundsX(x, width)
+        .transformBoundsScale(scale, width, height).boundsStyle;
 
-    if (x) {
-        bounds = transformBoundsX(bounds, x, width);
-    }
-
-    if (scale) {
-        bounds = transformBoundsScale(bounds, scale, width, height);
-    }
-
-    return {
-        marginTop: bounds.mt,
-        marginBottom: bounds.mb,
-        marginLeft: bounds.ml,
-        marginRight: bounds.mr,
-        paddingTop: bounds.mt * -1,
-        paddingBottom: bounds.mb * -1,
-        paddingLeft: bounds.ml * -1,
-        paddingRight: bounds.mr * -1,
-    };
+    return bounds;
 }
 
-export function transformBoundsY(bounds, y, h) {
-    const newBounds = Object.assign({}, bounds);
-
-    const hasYPercent = y[0].unit === '%';
-
-    const y0 = y[0].value;
-    const y1 = y[1].value;
-
-    // transform percent to px
-    const value0 = hasYPercent ? y0 / 100 * h : y0;
-    const value1 = hasYPercent ? y1 / 100 * h : y1;
-
-    const yMin = Math.min(value0, value1);
-    const yMax = Math.max(value0, value1);
-
-    newBounds.mt = newBounds.mt + yMin;
-    newBounds.mb = newBounds.mb - yMax;
-
-    return newBounds;
-}
-
-export function transformBoundsX(bounds, x, w) {
-    const newBounds = Object.assign({}, bounds);
-
-    const hasXPercent = x[0].unit === '%';
-
-    const x0 = x[0].value;
-    const x1 = x[1].value;
-
-    // transform percent to px
-    const value0 = hasXPercent ? x0 / 100 * w : x0;
-    const value1 = hasXPercent ? x1 / 100 * w : x1;
-
-    const xMin = Math.min(value0, value1);
-    const xMax = Math.max(value0, value1);
-
-    newBounds.ml = newBounds.ml + xMin;
-    newBounds.mr = newBounds.mr - xMax;
-
-    return newBounds;
-}
-
-export function transformBoundsScale(bounds, scale, w, h) {
-    const newBounds = Object.assign({}, bounds);
-
-    const scaleMax = Math.max(scale[0], scale[1]);
-    const halfDeltaX = (w * scaleMax - w) / 2;
-    const halfDeltaY = (h * scaleMax - h) / 2;
-
-    newBounds.mt = newBounds.mt - halfDeltaY;
-    newBounds.mb = newBounds.mb - halfDeltaY;
-    newBounds.ml = newBounds.ml - halfDeltaX;
-    newBounds.mr = newBounds.mr - halfDeltaX;
-
-    return newBounds;
-}

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

Improved metrics

Total package byte prevSize

429210

increased by0.39%

Number of package files

80

increased by3.9%

Lines of code

3415

increased by2.34%

Worsened metrics

Dev dependency count

32

increased by3.23%

Dependency changes

• Updatedreact-observed@^1.0.0-beta.4