parallax-controller - npm Package Compare versions

Comparing version 0.1.20 to 0.1.21

dist/classes/Bounds.d.ts

@@ -1,2 +0,2 @@
-import { OffsetShape } from '..';
+import { OffsetShape } from '../types';
 import { Rect } from './Rect';
@@ -8,8 +8,2 @@ import { View } from './View';
 };
-export declare type RootMarginShape = {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-};
 export declare class Bounds {
@@ -26,9 +20,4 @@ totalDistY: number;
         translate: TranslateEffectsShape;
-        rootMargin?: RootMarginShape;
     });
     /**
-     * Sets the bounds based root margin
-     */
-    _setBoundsWithRootMargin(rootMargin: RootMarginShape): void;
-    /**
      * Sets the bounds based on X/Y translation
@@ -35,0 +24,0 @@ */

dist/classes/Rect.d.ts

 import { View } from './View';
 import { Scroll } from './Scroll';
+import { RootMarginShape } from '../types';
 export declare class Rect {
@@ -12,3 +13,12 @@ height: number;
     originTotalDistX: number;
-    constructor(el: HTMLElement, view: View, scroll: Scroll);
+    constructor(options: {
+        el: HTMLElement;
+        view: View;
+        scroll: Scroll;
+        rootMargin?: RootMarginShape;
+    });
+    /**
+     * Apply root margin to all properties
+     */
+    _setRectWithRootMargin(rootMargin: RootMarginShape): void;
 }

dist/parallax-controller.cjs.development.js

@@ -26,7 +26,3 @@ 'use strict';
 
-    if (options.rootMargin) {
-      this._setBoundsWithRootMargin(options.rootMargin);
-    }
-
-    if (options.translate.translateX || options.translate.translateY && !options.rootMargin) {
+    if (options.translate.translateX || options.translate.translateY) {
       this._setBoundsWithTranslations(options.rect, options.view, options.translate);
@@ -36,3 +32,3 @@ }
   /**
-   * Sets the bounds based root margin
+   * Sets the bounds based on X/Y translation
    */
@@ -43,15 +39,2 @@
 
-  _proto._setBoundsWithRootMargin = function _setBoundsWithRootMargin(rootMargin) {
-    this.top = this.top -= rootMargin.top;
-    this.right = this.right += rootMargin.right;
-    this.bottom = this.bottom += rootMargin.bottom;
-    this.left = this.left -= rootMargin.left;
-    this.totalDistY += rootMargin.top += rootMargin.bottom;
-    this.totalDistX += rootMargin.left += rootMargin.right;
-  }
-  /**
-   * Sets the bounds based on X/Y translation
-   */
-  ;
-
   _proto._setBoundsWithTranslations = function _setBoundsWithTranslations(rect, view, translate) {
@@ -142,25 +125,52 @@ var _ref = translate.translateX || DEFAULT_VALUE,
 
-var Rect = function Rect(el, view, scroll) {
-  var rect = el.getBoundingClientRect(); // rect is based on viewport -- must adjust for relative scroll container
+var Rect = /*#__PURE__*/function () {
+  function Rect(options) {
+    var rect = options.el.getBoundingClientRect(); // rect is based on viewport -- must adjust for relative scroll container
 
-  if (view.scrollContainer) {
-    var scrollRect = view.scrollContainer.getBoundingClientRect();
-    rect = _extends({}, rect, {
-      top: rect.top - scrollRect.top,
-      right: rect.right - scrollRect.left,
-      bottom: rect.bottom - scrollRect.top,
-      left: rect.left - scrollRect.left
-    });
+    if (options.view.scrollContainer) {
+      var scrollRect = options.view.scrollContainer.getBoundingClientRect();
+      rect = _extends({}, rect, {
+        top: rect.top - scrollRect.top,
+        right: rect.right - scrollRect.left,
+        bottom: rect.bottom - scrollRect.top,
+        left: rect.left - scrollRect.left
+      });
+    }
+
+    this.height = options.el.offsetHeight;
+    this.width = options.el.offsetWidth;
+    this.left = rect.left + options.scroll.x;
+    this.right = rect.right + options.scroll.x;
+    this.top = rect.top + options.scroll.y;
+    this.bottom = rect.bottom + options.scroll.y;
+    this.originTotalDistY = options.view.height + this.height;
+    this.originTotalDistX = options.view.width + this.width;
+
+    if (options.rootMargin) {
+      this._setRectWithRootMargin(options.rootMargin);
+    }
   }
+  /**
+   * Apply root margin to all properties
+   */
 
-  this.height = el.offsetHeight;
-  this.width = el.offsetWidth;
-  this.left = rect.left + scroll.x;
-  this.right = rect.right + scroll.x;
-  this.top = rect.top + scroll.y;
-  this.bottom = rect.bottom + scroll.y;
-  this.originTotalDistY = view.height + this.height;
-  this.originTotalDistX = view.width + this.width;
-};
 
+  var _proto = Rect.prototype;
+
+  _proto._setRectWithRootMargin = function _setRectWithRootMargin(rootMargin) {
+    var totalRootY = rootMargin.top + rootMargin.bottom;
+    var totalRootX = rootMargin.left + rootMargin.right;
+    this.top -= rootMargin.top;
+    this.right += rootMargin.right;
+    this.bottom += rootMargin.bottom;
+    this.left -= rootMargin.left;
+    this.height += totalRootY;
+    this.width += totalRootX;
+    this.originTotalDistY += totalRootY;
+    this.originTotalDistX += totalRootX;
+  };
+
+  return Rect;
+}();
+
 (function (ValidCSSEffects) {
@@ -468,3 +478,8 @@ ValidCSSEffects["translateX"] = "translateX";
     if (!this.elOuter) return this;
-    this.rect = new Rect(this.elOuter, view, scroll);
+    this.rect = new Rect({
+      el: this.elOuter,
+      rootMargin: this.props.rootMargin,
+      view: view,
+      scroll: scroll
+    });
     var translate = {
@@ -477,4 +492,3 @@ translateX: this.effects.translateX,
       translate: translate,
-      rect: this.rect,
-      rootMargin: this.props.rootMargin
+      rect: this.rect
     });
@@ -481,0 +495,0 @@ return this;

dist/parallax-controller.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,i=[{value:0,unit:""},{value:0,unit:""}],s=function(){function t(t){this.totalDistY=t.view.height+t.rect.height,this.totalDistX=t.view.width+t.rect.width,this.top=t.rect.top,this.bottom=t.rect.bottom,this.left=t.rect.left,this.right=t.rect.right,t.rootMargin&&this._setBoundsWithRootMargin(t.rootMargin),(t.translate.translateX||t.translate.translateY&&!t.rootMargin)&&this._setBoundsWithTranslations(t.rect,t.view,t.translate)}var e=t.prototype;return e._setBoundsWithRootMargin=function(t){this.top=this.top-=t.top,this.right=this.right+=t.right,this.bottom=this.bottom+=t.bottom,this.left=this.left-=t.left,this.totalDistY+=t.top+=t.bottom,this.totalDistX+=t.left+=t.right},e._setBoundsWithTranslations=function(t,e,s){var n=s.translateX||i,r=n[0],o=n[1],a=s.translateY||i,l=a[0],h=a[1],u=l.value,c=h.value;if("%"===h.unit&&"%"===l.unit){var d=t.height/100;u=l.value*d,c=h.value*d}var p=r.value,f=o.value;if("%"===o.unit&&"%"===r.unit){var v=t.width/100;p=r.value*v,f=o.value*v}var g=Math.abs(u)+Math.abs(c);this.totalDistY=e.height+t.height+g;var w=e.height+t.height+(c>u?-1*g:g),m=Math.abs(p)+Math.abs(f);this.totalDistX=e.width+t.width+m;var E=t.originTotalDistY/w,x=t.originTotalDistX/(e.width+t.width+(f>p?-1*m:m));this.top=t.top,this.bottom=t.bottom,u<0&&(this.top=this.top+u*E),c>0&&(this.bottom=this.bottom+c*E),this.left=t.left,this.right=t.right,p<0&&(this.left=this.left+p*x),f>0&&(this.right=this.right+f*x)},t}();function n(){return(n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var r,o,a,l,h=function(t,e,i){var s=t.getBoundingClientRect();if(e.scrollContainer){var r=e.scrollContainer.getBoundingClientRect();s=n({},s,{top:s.top-r.top,right:s.right-r.left,bottom:s.bottom-r.top,left:s.left-r.left})}this.height=t.offsetHeight,this.width=t.offsetWidth,this.left=s.left+i.x,this.right=s.right+i.x,this.top=s.top+i.y,this.bottom=s.bottom+i.y,this.originTotalDistY=e.height+this.height,this.originTotalDistX=e.width+this.width};(r=exports.ValidCSSEffects||(exports.ValidCSSEffects={})).translateX="translateX",r.translateY="translateY",r.rotate="rotate",r.rotateX="rotateX",r.rotateY="rotateY",r.rotateZ="rotateZ",r.scale="scale",r.scaleX="scaleX",r.scaleY="scaleY",r.scaleZ="scaleZ",r.opacity="opacity",(o=exports.Units||(exports.Units={})).px="px",o["%"]="%",(a=exports.RotationUnits||(exports.RotationUnits={})).deg="deg",a.turn="turn",a.rad="rad",(exports.ScaleUnits||(exports.ScaleUnits={}))[""]="",(l=exports.ScrollAxis||(exports.ScrollAxis={})).vertical="vertical",l.horizontal="horizontal";var u=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function c(t,e){void 0===e&&(e=exports.Units["%"]);var i={value:0,unit:e};if(void 0===t)return i;if("number"!=typeof t&&"string"!=typeof t)throw new Error("Invalid value provided. Must provide a value as a string or number");if(t=String(t),i.value=parseFloat(t),i.unit=t.match(/[\d.\-\+]*\s*(.*)/)[1]||e,!u.includes(i.unit))throw new Error("Invalid unit provided.");return i}var d=Object.values(exports.ValidCSSEffects),p={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function f(t){var e={};return d.forEach((function(i){var s,n;if(void 0!==(null==t||null==(s=t[i])?void 0:s[0])&&void 0!==(null==t||null==(n=t[i])?void 0:n[1])){var r,o,a=p[i];if(e[i]=[c(null==t||null==(r=t[i])?void 0:r[0],a),c(null==t||null==(o=t[i])?void 0:o[1],a)],e[i][0].unit!==e[i][1].unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}})),e}function v(t,e,i,s){var n=t-s,r=e-s;return n>=0&&n<=i||r>=0&&r<=i||n<=0&&r>=i}function g(t,e,i,s,n){var r=(-1*(t-s)+i)/e;return n&&(r=n(r)),r}function w(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function m(t,e){var i,s,n;return{value:w(e,(null==t||null==(i=t[0])?void 0:i.value)||0,(null==t||null==(s=t[1])?void 0:s.value)||0,0,1),unit:null==t||null==(n=t[0])?void 0:n.unit}}var E=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function x(t,e,i){var s=function(t,e){return E.reduce((function(i,s){var n=t[s]&&m(t[s],e);return void 0===n||void 0===n.value||void 0===n.unit?i:i+(s+"(")+n.value+n.unit+")"}),"")}(e,i),n=function(t,e){var i=t.opacity&&m(t.opacity,e);return void 0===i||void 0===i.value||void 0===i.unit?"":""+i.value}(e,i);t.style.transform=s,t.style.opacity=n}function _(t){var e=t.elInner;e&&(e.style.transform="")}var S=0;function b(){return++S}var y={ease:[.25,.1,.25,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],easeInQuad:[.55,.085,.68,.53],easeInCubic:[.55,.055,.675,.19],easeInQuart:[.895,.03,.685,.22],easeInQuint:[.755,.05,.855,.06],easeInSine:[.47,0,.745,.715],easeInExpo:[.95,.05,.795,.035],easeInCirc:[.6,.04,.98,.335],easeOutQuad:[.25,.46,.45,.94],easeOutCubic:[.215,.61,.355,1],easeOutQuart:[.165,.84,.44,1],easeOutQuint:[.23,1,.32,1],easeOutSine:[.39,.575,.565,1],easeOutExpo:[.19,1,.22,1],easeOutCirc:[.075,.82,.165,1],easeInOutQuad:[.455,.03,.515,.955],easeInOutCubic:[.645,.045,.355,1],easeInOutQuart:[.77,0,.175,1],easeInOutQuint:[.86,0,.07,1],easeInOutSine:[.445,.05,.55,.95],easeInOutExpo:[1,0,0,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]},C=function(){function t(t){this.elInner=t.elInner,this.elOuter=t.elOuter,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=b(),this.effects=f(this.props),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),this.updatePosition=t.scrollAxis===exports.ScrollAxis.vertical?this._updatePositionVertical:this._updatePositionHorizontal}var i=t.prototype;return i.updateProps=function(t){return this.props=n({},this.props,t),this.effects=f(t),this._setElementEasing(t.easing),this},i.setCachedAttributes=function(t,e){return this.elOuter?(this.rect=new h(this.elOuter,t,e),this.bounds=new s({view:t,translate:{translateX:this.effects.translateX,translateY:this.effects.translateY},rect:this.rect,rootMargin:this.props.rootMargin}),this):this},i._setElementEasing=function(t){if(Array.isArray(t)&&(this.easing=e(t[0],t[1],t[2],t[3])),"string"==typeof t&&void 0!==y[t]){var i=y[t];this.easing=e(i[0],i[1],i[2],i[3])}},i._updatePositionHorizontal=function(t,e){return this.bounds&&this.rect&&this.elInner?(this.isInView=v(this.bounds.left,this.bounds.right,t.width,e.x),this.isInView?(this.progress=g(this.rect.left,this.rect.originTotalDistX,t.width,e.x,this.easing),x(this.elInner,this.effects,this.progress),this):this):this},i._updatePositionVertical=function(t,e){return this.bounds&&this.rect&&this.elInner?(this.isInView=v(this.bounds.top,this.bounds.bottom,t.height,e.y),this.isInView?(this.progress=g(this.rect.top,this.rect.originTotalDistY,t.height,e.y,this.easing),x(this.elInner,this.effects,this.progress),this):this):this},t}(),I=function(){function t(t){var e=t.width,i=t.height;this.scrollContainer=t.scrollContainer,this.width=e,this.height=i}return t.prototype.setSize=function(t,e){return this.width=t,this.height=e,this},t}(),O=function(){function t(t,e){this.x=t,this.y=e}return t.prototype.setScroll=function(t,e){return this.x=t,this.y=e,this},t}();function A(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}return t}var P=function(){function t(t){var e=t.scrollAxis,i=void 0===e?exports.ScrollAxis.vertical:e,s=t.scrollContainer;this.scrollAxis=i,this.elements=[],this._hasScrollContainer=!!s,this.viewEl=null!=s?s:window;var n=this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,r=this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset;this.scroll=new O(n,r),this.view=new I({width:0,height:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=A(),this._bindAllMethods(),this._addListeners(this.viewEl),this._setViewSize()}t.init=function(e){if("undefined"==typeof window)throw new Error("Looks like ParallaxController.init() was called on the server. This method must be called on the client.");return new t(e)};var e=t.prototype;return e._bindAllMethods=function(){var t=this;["_addListeners","_removeListeners","_handleScroll","_handleResize","_updateAllElements","_updateElementPosition","_setViewSize","getElements","createElement","removeElementById","updateElementPropsById","resetElementStyles","update","updateScrollContainer","destroy"].forEach((function(e){t[e]=t[e].bind(t)}))},e._addListeners=function(t){t.addEventListener("scroll",this._handleScroll,!!this._supportsPassive&&{passive:!0}),window.addEventListener("resize",this._handleResize,!1)},e._removeListeners=function(t){t.removeEventListener("scroll",this._handleScroll,!1),window.removeEventListener("resize",this._handleResize,!1)},e._handleScroll=function(){var t=this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,e=this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset;this.scroll.setScroll(t,e),!this._ticking&&this.elements.length>0&&(this._ticking=!0,window.requestAnimationFrame(this._updateAllElements))},e._handleResize=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e._updateAllElements=function(t){var e=this,i=(void 0===t?{}:t).updateCache;this.elements&&this.elements.forEach((function(t){e._updateElementPosition(t),i&&t.setCachedAttributes(e.view,e.scroll)})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(this.view,this.scroll)},e._setViewSize=function(){if(this._hasScrollContainer)return this.view.setSize(this.viewEl.offsetWidth,this.viewEl.offsetHeight);var t=document.documentElement,e=window.innerWidth||t.clientWidth,i=window.innerHeight||t.clientHeight;return this.view.setSize(e,i)},e.getElements=function(){return this.elements},e.createElement=function(t){var e=new C(n({},t,{scrollAxis:this.scrollAxis}));return e.setCachedAttributes(this.view,this.scroll),this.elements=this.elements?[].concat(this.elements,[e]):[e],this._updateElementPosition(e),e},e.removeElementById=function(t){this.elements&&(this.elements=this.elements.filter((function(e){return e.id!==t})))},e.updateElementPropsById=function(t,e){this.elements&&(this.elements=this.elements.map((function(i){return i.id===t?i.updateProps(e):i}))),this.update()},e.resetElementStyles=function(t){_(t)},e.update=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e.updateScrollContainer=function(t){this._removeListeners(this.viewEl),this.viewEl=t,this._hasScrollContainer=!!t,this.view=new I({width:0,height:0,scrollContainer:t}),this._setViewSize(),this._addListeners(this.viewEl),this._updateAllElements({updateCache:!0})},e.destroy=function(){this._removeListeners(this.viewEl),this.elements&&this.elements.forEach((function(t){return _(t)})),this.elements=void 0},t}();exports.Bounds=s,exports.Element=C,exports.ParallaxController=P,exports.Rect=h,exports.Scroll=O,exports.View=I,exports.createId=b,exports.getProgressAmount=g,exports.isElementInView=v,exports.parseElementTransitionEffects=f,exports.parseValueAndUnit=c,exports.resetStyles=_,exports.scaleBetween=w,exports.scaleEffectByProgress=m,exports.setElementStyles=x,exports.testForPassiveScroll=A;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,i=[{value:0,unit:""},{value:0,unit:""}],s=function(){function t(t){this.totalDistY=t.view.height+t.rect.height,this.totalDistX=t.view.width+t.rect.width,this.top=t.rect.top,this.bottom=t.rect.bottom,this.left=t.rect.left,this.right=t.rect.right,(t.translate.translateX||t.translate.translateY)&&this._setBoundsWithTranslations(t.rect,t.view,t.translate)}return t.prototype._setBoundsWithTranslations=function(t,e,s){var n=s.translateX||i,r=n[0],o=n[1],l=s.translateY||i,a=l[0],h=l[1],u=a.value,c=h.value;if("%"===h.unit&&"%"===a.unit){var d=t.height/100;u=a.value*d,c=h.value*d}var p=r.value,f=o.value;if("%"===o.unit&&"%"===r.unit){var v=t.width/100;p=r.value*v,f=o.value*v}var w=Math.abs(u)+Math.abs(c);this.totalDistY=e.height+t.height+w;var g=e.height+t.height+(c>u?-1*w:w),m=Math.abs(p)+Math.abs(f);this.totalDistX=e.width+t.width+m;var E=t.originTotalDistY/g,x=t.originTotalDistX/(e.width+t.width+(f>p?-1*m:m));this.top=t.top,this.bottom=t.bottom,u<0&&(this.top=this.top+u*E),c>0&&(this.bottom=this.bottom+c*E),this.left=t.left,this.right=t.right,p<0&&(this.left=this.left+p*x),f>0&&(this.right=this.right+f*x)},t}();function n(){return(n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var r,o,l,a,h=function(){function t(t){var e=t.el.getBoundingClientRect();if(t.view.scrollContainer){var i=t.view.scrollContainer.getBoundingClientRect();e=n({},e,{top:e.top-i.top,right:e.right-i.left,bottom:e.bottom-i.top,left:e.left-i.left})}this.height=t.el.offsetHeight,this.width=t.el.offsetWidth,this.left=e.left+t.scroll.x,this.right=e.right+t.scroll.x,this.top=e.top+t.scroll.y,this.bottom=e.bottom+t.scroll.y,this.originTotalDistY=t.view.height+this.height,this.originTotalDistX=t.view.width+this.width,t.rootMargin&&this._setRectWithRootMargin(t.rootMargin)}return t.prototype._setRectWithRootMargin=function(t){var e=t.top+t.bottom,i=t.left+t.right;this.top-=t.top,this.right+=t.right,this.bottom+=t.bottom,this.left-=t.left,this.height+=e,this.width+=i,this.originTotalDistY+=e,this.originTotalDistX+=i},t}();(r=exports.ValidCSSEffects||(exports.ValidCSSEffects={})).translateX="translateX",r.translateY="translateY",r.rotate="rotate",r.rotateX="rotateX",r.rotateY="rotateY",r.rotateZ="rotateZ",r.scale="scale",r.scaleX="scaleX",r.scaleY="scaleY",r.scaleZ="scaleZ",r.opacity="opacity",(o=exports.Units||(exports.Units={})).px="px",o["%"]="%",(l=exports.RotationUnits||(exports.RotationUnits={})).deg="deg",l.turn="turn",l.rad="rad",(exports.ScaleUnits||(exports.ScaleUnits={}))[""]="",(a=exports.ScrollAxis||(exports.ScrollAxis={})).vertical="vertical",a.horizontal="horizontal";var u=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function c(t,e){void 0===e&&(e=exports.Units["%"]);var i={value:0,unit:e};if(void 0===t)return i;if("number"!=typeof t&&"string"!=typeof t)throw new Error("Invalid value provided. Must provide a value as a string or number");if(t=String(t),i.value=parseFloat(t),i.unit=t.match(/[\d.\-\+]*\s*(.*)/)[1]||e,!u.includes(i.unit))throw new Error("Invalid unit provided.");return i}var d=Object.values(exports.ValidCSSEffects),p={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function f(t){var e={};return d.forEach((function(i){var s,n;if(void 0!==(null==t||null==(s=t[i])?void 0:s[0])&&void 0!==(null==t||null==(n=t[i])?void 0:n[1])){var r,o,l=p[i];if(e[i]=[c(null==t||null==(r=t[i])?void 0:r[0],l),c(null==t||null==(o=t[i])?void 0:o[1],l)],e[i][0].unit!==e[i][1].unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}})),e}function v(t,e,i,s){var n=t-s,r=e-s;return n>=0&&n<=i||r>=0&&r<=i||n<=0&&r>=i}function w(t,e,i,s,n){var r=(-1*(t-s)+i)/e;return n&&(r=n(r)),r}function g(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function m(t,e){var i,s,n;return{value:g(e,(null==t||null==(i=t[0])?void 0:i.value)||0,(null==t||null==(s=t[1])?void 0:s.value)||0,0,1),unit:null==t||null==(n=t[0])?void 0:n.unit}}var E=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function x(t,e,i){var s=function(t,e){return E.reduce((function(i,s){var n=t[s]&&m(t[s],e);return void 0===n||void 0===n.value||void 0===n.unit?i:i+(s+"(")+n.value+n.unit+")"}),"")}(e,i),n=function(t,e){var i=t.opacity&&m(t.opacity,e);return void 0===i||void 0===i.value||void 0===i.unit?"":""+i.value}(e,i);t.style.transform=s,t.style.opacity=n}function _(t){var e=t.elInner;e&&(e.style.transform="")}var S=0;function b(){return++S}var y={ease:[.25,.1,.25,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],easeInQuad:[.55,.085,.68,.53],easeInCubic:[.55,.055,.675,.19],easeInQuart:[.895,.03,.685,.22],easeInQuint:[.755,.05,.855,.06],easeInSine:[.47,0,.745,.715],easeInExpo:[.95,.05,.795,.035],easeInCirc:[.6,.04,.98,.335],easeOutQuad:[.25,.46,.45,.94],easeOutCubic:[.215,.61,.355,1],easeOutQuart:[.165,.84,.44,1],easeOutQuint:[.23,1,.32,1],easeOutSine:[.39,.575,.565,1],easeOutExpo:[.19,1,.22,1],easeOutCirc:[.075,.82,.165,1],easeInOutQuad:[.455,.03,.515,.955],easeInOutCubic:[.645,.045,.355,1],easeInOutQuart:[.77,0,.175,1],easeInOutQuint:[.86,0,.07,1],easeInOutSine:[.445,.05,.55,.95],easeInOutExpo:[1,0,0,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]},C=function(){function t(t){this.elInner=t.elInner,this.elOuter=t.elOuter,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=b(),this.effects=f(this.props),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),this.updatePosition=t.scrollAxis===exports.ScrollAxis.vertical?this._updatePositionVertical:this._updatePositionHorizontal}var i=t.prototype;return i.updateProps=function(t){return this.props=n({},this.props,t),this.effects=f(t),this._setElementEasing(t.easing),this},i.setCachedAttributes=function(t,e){return this.elOuter?(this.rect=new h({el:this.elOuter,rootMargin:this.props.rootMargin,view:t,scroll:e}),this.bounds=new s({view:t,translate:{translateX:this.effects.translateX,translateY:this.effects.translateY},rect:this.rect}),this):this},i._setElementEasing=function(t){if(Array.isArray(t)&&(this.easing=e(t[0],t[1],t[2],t[3])),"string"==typeof t&&void 0!==y[t]){var i=y[t];this.easing=e(i[0],i[1],i[2],i[3])}},i._updatePositionHorizontal=function(t,e){return this.bounds&&this.rect&&this.elInner?(this.isInView=v(this.bounds.left,this.bounds.right,t.width,e.x),this.isInView?(this.progress=w(this.rect.left,this.rect.originTotalDistX,t.width,e.x,this.easing),x(this.elInner,this.effects,this.progress),this):this):this},i._updatePositionVertical=function(t,e){return this.bounds&&this.rect&&this.elInner?(this.isInView=v(this.bounds.top,this.bounds.bottom,t.height,e.y),this.isInView?(this.progress=w(this.rect.top,this.rect.originTotalDistY,t.height,e.y,this.easing),x(this.elInner,this.effects,this.progress),this):this):this},t}(),I=function(){function t(t){var e=t.width,i=t.height;this.scrollContainer=t.scrollContainer,this.width=e,this.height=i}return t.prototype.setSize=function(t,e){return this.width=t,this.height=e,this},t}(),O=function(){function t(t,e){this.x=t,this.y=e}return t.prototype.setScroll=function(t,e){return this.x=t,this.y=e,this},t}();function A(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}return t}var P=function(){function t(t){var e=t.scrollAxis,i=void 0===e?exports.ScrollAxis.vertical:e,s=t.scrollContainer;this.scrollAxis=i,this.elements=[],this._hasScrollContainer=!!s,this.viewEl=null!=s?s:window;var n=this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,r=this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset;this.scroll=new O(n,r),this.view=new I({width:0,height:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=A(),this._bindAllMethods(),this._addListeners(this.viewEl),this._setViewSize()}t.init=function(e){if("undefined"==typeof window)throw new Error("Looks like ParallaxController.init() was called on the server. This method must be called on the client.");return new t(e)};var e=t.prototype;return e._bindAllMethods=function(){var t=this;["_addListeners","_removeListeners","_handleScroll","_handleResize","_updateAllElements","_updateElementPosition","_setViewSize","getElements","createElement","removeElementById","updateElementPropsById","resetElementStyles","update","updateScrollContainer","destroy"].forEach((function(e){t[e]=t[e].bind(t)}))},e._addListeners=function(t){t.addEventListener("scroll",this._handleScroll,!!this._supportsPassive&&{passive:!0}),window.addEventListener("resize",this._handleResize,!1)},e._removeListeners=function(t){t.removeEventListener("scroll",this._handleScroll,!1),window.removeEventListener("resize",this._handleResize,!1)},e._handleScroll=function(){var t=this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,e=this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset;this.scroll.setScroll(t,e),!this._ticking&&this.elements.length>0&&(this._ticking=!0,window.requestAnimationFrame(this._updateAllElements))},e._handleResize=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e._updateAllElements=function(t){var e=this,i=(void 0===t?{}:t).updateCache;this.elements&&this.elements.forEach((function(t){e._updateElementPosition(t),i&&t.setCachedAttributes(e.view,e.scroll)})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(this.view,this.scroll)},e._setViewSize=function(){if(this._hasScrollContainer)return this.view.setSize(this.viewEl.offsetWidth,this.viewEl.offsetHeight);var t=document.documentElement,e=window.innerWidth||t.clientWidth,i=window.innerHeight||t.clientHeight;return this.view.setSize(e,i)},e.getElements=function(){return this.elements},e.createElement=function(t){var e=new C(n({},t,{scrollAxis:this.scrollAxis}));return e.setCachedAttributes(this.view,this.scroll),this.elements=this.elements?[].concat(this.elements,[e]):[e],this._updateElementPosition(e),e},e.removeElementById=function(t){this.elements&&(this.elements=this.elements.filter((function(e){return e.id!==t})))},e.updateElementPropsById=function(t,e){this.elements&&(this.elements=this.elements.map((function(i){return i.id===t?i.updateProps(e):i}))),this.update()},e.resetElementStyles=function(t){_(t)},e.update=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e.updateScrollContainer=function(t){this._removeListeners(this.viewEl),this.viewEl=t,this._hasScrollContainer=!!t,this.view=new I({width:0,height:0,scrollContainer:t}),this._setViewSize(),this._addListeners(this.viewEl),this._updateAllElements({updateCache:!0})},e.destroy=function(){this._removeListeners(this.viewEl),this.elements&&this.elements.forEach((function(t){return _(t)})),this.elements=void 0},t}();exports.Bounds=s,exports.Element=C,exports.ParallaxController=P,exports.Rect=h,exports.Scroll=O,exports.View=I,exports.createId=b,exports.getProgressAmount=w,exports.isElementInView=v,exports.parseElementTransitionEffects=f,exports.parseValueAndUnit=c,exports.resetStyles=_,exports.scaleBetween=g,exports.scaleEffectByProgress=m,exports.setElementStyles=x,exports.testForPassiveScroll=A;
 //# sourceMappingURL=parallax-controller.cjs.production.min.js.map

dist/parallax-controller.esm.js

@@ -20,7 +20,3 @@ import bezier from 'bezier-easing';
 
-    if (options.rootMargin) {
-      this._setBoundsWithRootMargin(options.rootMargin);
-    }
-
-    if (options.translate.translateX || options.translate.translateY && !options.rootMargin) {
+    if (options.translate.translateX || options.translate.translateY) {
       this._setBoundsWithTranslations(options.rect, options.view, options.translate);
@@ -30,3 +26,3 @@ }
   /**
-   * Sets the bounds based root margin
+   * Sets the bounds based on X/Y translation
    */
@@ -37,15 +33,2 @@
 
-  _proto._setBoundsWithRootMargin = function _setBoundsWithRootMargin(rootMargin) {
-    this.top = this.top -= rootMargin.top;
-    this.right = this.right += rootMargin.right;
-    this.bottom = this.bottom += rootMargin.bottom;
-    this.left = this.left -= rootMargin.left;
-    this.totalDistY += rootMargin.top += rootMargin.bottom;
-    this.totalDistX += rootMargin.left += rootMargin.right;
-  }
-  /**
-   * Sets the bounds based on X/Y translation
-   */
-  ;
-
   _proto._setBoundsWithTranslations = function _setBoundsWithTranslations(rect, view, translate) {
@@ -136,25 +119,52 @@ var _ref = translate.translateX || DEFAULT_VALUE,
 
-var Rect = function Rect(el, view, scroll) {
-  var rect = el.getBoundingClientRect(); // rect is based on viewport -- must adjust for relative scroll container
+var Rect = /*#__PURE__*/function () {
+  function Rect(options) {
+    var rect = options.el.getBoundingClientRect(); // rect is based on viewport -- must adjust for relative scroll container
 
-  if (view.scrollContainer) {
-    var scrollRect = view.scrollContainer.getBoundingClientRect();
-    rect = _extends({}, rect, {
-      top: rect.top - scrollRect.top,
-      right: rect.right - scrollRect.left,
-      bottom: rect.bottom - scrollRect.top,
-      left: rect.left - scrollRect.left
-    });
+    if (options.view.scrollContainer) {
+      var scrollRect = options.view.scrollContainer.getBoundingClientRect();
+      rect = _extends({}, rect, {
+        top: rect.top - scrollRect.top,
+        right: rect.right - scrollRect.left,
+        bottom: rect.bottom - scrollRect.top,
+        left: rect.left - scrollRect.left
+      });
+    }
+
+    this.height = options.el.offsetHeight;
+    this.width = options.el.offsetWidth;
+    this.left = rect.left + options.scroll.x;
+    this.right = rect.right + options.scroll.x;
+    this.top = rect.top + options.scroll.y;
+    this.bottom = rect.bottom + options.scroll.y;
+    this.originTotalDistY = options.view.height + this.height;
+    this.originTotalDistX = options.view.width + this.width;
+
+    if (options.rootMargin) {
+      this._setRectWithRootMargin(options.rootMargin);
+    }
   }
+  /**
+   * Apply root margin to all properties
+   */
 
-  this.height = el.offsetHeight;
-  this.width = el.offsetWidth;
-  this.left = rect.left + scroll.x;
-  this.right = rect.right + scroll.x;
-  this.top = rect.top + scroll.y;
-  this.bottom = rect.bottom + scroll.y;
-  this.originTotalDistY = view.height + this.height;
-  this.originTotalDistX = view.width + this.width;
-};
 
+  var _proto = Rect.prototype;
+
+  _proto._setRectWithRootMargin = function _setRectWithRootMargin(rootMargin) {
+    var totalRootY = rootMargin.top + rootMargin.bottom;
+    var totalRootX = rootMargin.left + rootMargin.right;
+    this.top -= rootMargin.top;
+    this.right += rootMargin.right;
+    this.bottom += rootMargin.bottom;
+    this.left -= rootMargin.left;
+    this.height += totalRootY;
+    this.width += totalRootX;
+    this.originTotalDistY += totalRootY;
+    this.originTotalDistX += totalRootX;
+  };
+
+  return Rect;
+}();
+
 var ValidCSSEffects;
@@ -472,3 +482,8 @@
     if (!this.elOuter) return this;
-    this.rect = new Rect(this.elOuter, view, scroll);
+    this.rect = new Rect({
+      el: this.elOuter,
+      rootMargin: this.props.rootMargin,
+      view: view,
+      scroll: scroll
+    });
     var translate = {
@@ -481,4 +496,3 @@ translateX: this.effects.translateX,
       translate: translate,
-      rect: this.rect,
-      rootMargin: this.props.rootMargin
+      rect: this.rect
     });
@@ -485,0 +499,0 @@ return this;

dist/types.d.ts

@@ -1,2 +0,1 @@
-import { RootMarginShape } from './classes/Bounds';
 export declare type ParallaxStartEndEffects = {
@@ -92,1 +91,7 @@ translateX?: OffsetShape[];
 export declare type ValidEasingPresets = 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'easeInQuad' | 'easeInCubic' | 'easeInQuart' | 'easeInQuint' | 'easeInSine' | 'easeInExpo' | 'easeInCirc' | 'easeOutQuad' | 'easeOutCubic' | 'easeOutQuart' | 'easeOutQuint' | 'easeOutSine' | 'easeOutExpo' | 'easeOutCirc' | 'easeInOutQuad' | 'easeInOutCubic' | 'easeInOutQuart' | 'easeInOutQuint' | 'easeInOutSine' | 'easeInOutExpo' | 'easeInOutCirc' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack';
+export declare type RootMarginShape = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package.json

 {
-  "version": "0.1.20",
+  "version": "0.1.21",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/classes/Bounds.test.ts

@@ -18,28 +18,5 @@ import { View } from './View';
 describe('Bounds', () => {
-  test(`sets bounds based on root margin when provided`, () => {
-    const bounds = new Bounds({
-      rect: DEFAULT_RECT,
-      view: DEFAULT_VIEW,
-      translate: {
-        translateX: undefined,
-        translateY: undefined,
-      },
-      rootMargin: {
-        top: 10,
-        left: 20,
-        right: 30,
-        bottom: 40,
-      },
-    });
-
-    expect(bounds.top).toBe(490);
-    expect(bounds.left).toBe(180);
-    expect(bounds.right).toBe(930);
-    expect(bounds.bottom).toBe(740);
-    expect(bounds.totalDistY).toBe(1250);
-    expect(bounds.totalDistX).toBe(1750);
-  });
-
   test(`does not adjust the bounds if translate values are not provided`, () => {
     const bounds = new Bounds({
+      // @ts-expect-error
       rect: DEFAULT_RECT,
@@ -46,0 +23,0 @@ view: DEFAULT_VIEW,

src/classes/Bounds.ts

@@ -1,2 +0,2 @@
-import { OffsetShape } from '..';
+import { OffsetShape } from '../types';
 import { Rect } from './Rect';
@@ -15,8 +15,2 @@ import { View } from './View';
 
-export type RootMarginShape = {
-  top: number;
-  bottom: number;
-  left: number;
-  right: number;
-};
 export class Bounds {
@@ -34,3 +28,2 @@ totalDistY: number;
     translate: TranslateEffectsShape;
-    rootMargin?: RootMarginShape;
   }) {
@@ -45,10 +38,3 @@ // basic bounds
 
-    if (options.rootMargin) {
-      this._setBoundsWithRootMargin(options.rootMargin);
-    }
-
-    if (
-      options.translate.translateX ||
-      (options.translate.translateY && !options.rootMargin)
-    ) {
+    if (options.translate.translateX || options.translate.translateY) {
       this._setBoundsWithTranslations(
@@ -61,14 +47,4 @@ options.rect,
   }
+
   /**
-   * Sets the bounds based root margin
-   */
-  _setBoundsWithRootMargin(rootMargin: RootMarginShape) {
-    this.top = this.top -= rootMargin.top;
-    this.right = this.right += rootMargin.right;
-    this.bottom = this.bottom += rootMargin.bottom;
-    this.left = this.left -= rootMargin.left;
-    this.totalDistY += rootMargin.top += rootMargin.bottom;
-    this.totalDistX += rootMargin.left += rootMargin.right;
-  }
-  /**
    * Sets the bounds based on X/Y translation
@@ -75,0 +51,0 @@ */

src/classes/Element.ts

@@ -68,3 +68,8 @@ import bezier from 'bezier-easing';
 
-    this.rect = new Rect(this.elOuter, view, scroll);
+    this.rect = new Rect({
+      el: this.elOuter,
+      rootMargin: this.props.rootMargin,
+      view,
+      scroll,
+    });
 
@@ -79,3 +84,2 @@ const translate = {
       rect: this.rect,
-      rootMargin: this.props.rootMargin,
     });
@@ -82,0 +86,0 @@ return this;

src/classes/Rect.test.ts

 import { Rect } from './Rect';
 import { createElementMock } from '../testUtils/createElementMock';
+import { Scroll } from './Scroll';
+import { View } from './View';
 
+const DEFAULT_VIEW = new View({ width: 1000, height: 1000 });
+const DEFAULT_SCROLL = new Scroll(0, 0);
+
+describe('Rect', () => {
+  test(`sets bounds based on root margin when provided`, () => {
+    const rect = new Rect({
+      view: DEFAULT_VIEW,
+      scroll: DEFAULT_SCROLL,
+      el: createElementMock(
+        { offsetWidth: 100, offsetHeight: 100 },
+        {
+          getBoundingClientRect: () => ({
+            top: 500,
+            left: 200,
+            bottom: 600,
+            right: 300,
+          }),
+        }
+      ),
+      rootMargin: {
+        top: 10,
+        left: 20,
+        right: 30,
+        bottom: 40,
+      },
+    });
+
+    expect(rect.top).toBe(490);
+    expect(rect.left).toBe(180);
+    expect(rect.right).toBe(330);
+    expect(rect.bottom).toBe(640);
+    expect(rect.originTotalDistY).toBe(1150);
+    expect(rect.originTotalDistX).toBe(1150);
+  });
+});
+
 describe.each([
@@ -97,3 +135,3 @@ [
     // @ts-ignore
-    expect(new Rect(element, view, scroll)).toEqual(
+    expect(new Rect({ el: element, view, scroll })).toEqual(
       expect.objectContaining(expected)
@@ -100,0 +138,0 @@ );

src/classes/Rect.ts

 import { View } from './View';
 import { Scroll } from './Scroll';
+import { RootMarginShape } from '../types';
 
@@ -14,8 +15,13 @@ export class Rect {
 
-  constructor(el: HTMLElement, view: View, scroll: Scroll) {
-    let rect = el.getBoundingClientRect();
+  constructor(options: {
+    el: HTMLElement;
+    view: View;
+    scroll: Scroll;
+    rootMargin?: RootMarginShape;
+  }) {
+    let rect = options.el.getBoundingClientRect();
 
     // rect is based on viewport -- must adjust for relative scroll container
-    if (view.scrollContainer) {
-      const scrollRect = view.scrollContainer.getBoundingClientRect();
+    if (options.view.scrollContainer) {
+      const scrollRect = options.view.scrollContainer.getBoundingClientRect();
       rect = {
@@ -30,11 +36,31 @@ ...rect,
 
-    this.height = el.offsetHeight;
-    this.width = el.offsetWidth;
-    this.left = rect.left + scroll.x;
-    this.right = rect.right + scroll.x;
-    this.top = rect.top + scroll.y;
-    this.bottom = rect.bottom + scroll.y;
-    this.originTotalDistY = view.height + this.height;
-    this.originTotalDistX = view.width + this.width;
+    this.height = options.el.offsetHeight;
+    this.width = options.el.offsetWidth;
+    this.left = rect.left + options.scroll.x;
+    this.right = rect.right + options.scroll.x;
+    this.top = rect.top + options.scroll.y;
+    this.bottom = rect.bottom + options.scroll.y;
+    this.originTotalDistY = options.view.height + this.height;
+    this.originTotalDistX = options.view.width + this.width;
+
+    if (options.rootMargin) {
+      this._setRectWithRootMargin(options.rootMargin);
+    }
   }
+
+  /**
+   * Apply root margin to all properties
+   */
+  _setRectWithRootMargin(rootMargin: RootMarginShape) {
+    let totalRootY = rootMargin.top + rootMargin.bottom;
+    let totalRootX = rootMargin.left + rootMargin.right;
+    this.top -= rootMargin.top;
+    this.right += rootMargin.right;
+    this.bottom += rootMargin.bottom;
+    this.left -= rootMargin.left;
+    this.height += totalRootY;
+    this.width += totalRootX;
+    this.originTotalDistY += totalRootY;
+    this.originTotalDistX += totalRootX;
+  }
 }

src/types.ts

@@ -1,3 +0,1 @@
-import { RootMarginShape } from './classes/Bounds';
-
 export type ParallaxStartEndEffects = {
@@ -137,1 +135,8 @@ translateX?: OffsetShape[];
   | 'easeInOutBack';
+
+export type RootMarginShape = {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+};

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

301384

increased by0.84%

Lines of code

4219

increased by1.18%

No dependency changes