Refactored DomHelpers getViewportData method. Refactored windowDimens…

…ions for viewportSize.
FriendsOfECMAScript · Oct 18, 2016 · d4d9ab8 · d4d9ab8
1 parent d55212a
commit d4d9ab8
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foes-scrollproxy",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
   "description": "",
   "keywords": [

diff --git a/src/Core/ScrollProxy.js b/src/Core/ScrollProxy.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -16,10 +16,7 @@
     function ScrollProxy() {
       var latestKnownScrollY = window.pageYOffset,
         animating = false,
-        windowDimensions = {
-          height: -1,
-          width: -1
-        },
+        viewportSize = new DomHelpers.ViewportSize(-1, -1),
         listeners = [];
 
       var notifyListeners = function () {
@@ -45,8 +42,8 @@
         requestFrame();
       };
       var onResize = function () {
-        windowDimensions = DomHelpers.getWindowDimensions();
-        notifyListeners('onResize', windowDimensions);
+        viewportSize = DomHelpers.getViewportSize();
+        notifyListeners('onResize', viewportSize);
       };
       var bindListeners = function () {
         window.addEventListener('scroll', onScroll);
@@ -65,7 +62,7 @@
         }
       };
       var init = function () {
-        windowDimensions = DomHelpers.getWindowDimensions();
+        viewportSize = DomHelpers.getViewportSize();
         bindListeners();
       };
       init();

diff --git a/src/Core/ScrollProxyListener.js b/src/Core/ScrollProxyListener.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -19,16 +19,16 @@
 (function(window, DomHelpers, undefined) {
 
   function ScrollProxyListener() {
-    this.windowDimensions = DomHelpers.getWindowDimensions();
+    this.viewportSize = DomHelpers.getViewportSize();
     this.latestKnownScrollY = undefined;
     this.doFrame = function () {
 
     };
     this.onScroll = function (latestKnownScrollY) {
       this.latestKnownScrollY = latestKnownScrollY;
     };
-    this.onResize = function (windowDimensions) {
-      this.windowDimensions = windowDimensions;
+    this.onResize = function (viewportSize) {
+      this.viewportSize = viewportSize;
     };
   }
 

diff --git a/src/Helpers/DomHelpers.js b/src/Helpers/DomHelpers.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -14,26 +14,56 @@
     return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
   };
 
-  DomHelpers.getWindowDimensions = function () {
+  /**
+   *
+   * @returns {ViewportSize}
+   */
+  DomHelpers.getViewportSize = function () {
     var w = window,
       d = document,
       e = d.documentElement,
       g = d.getElementsByTagName('body')[0];
 
-    return {
-      height: w.innerHeight || e.clientHeight || g.clientHeight,
-      width: w.innerWidth || e.clientWidth || g.clientWidth
-    }
+    return new DomHelpers.ViewportSize(
+      w.innerHeight || e.clientHeight || g.clientHeight,
+      w.innerWidth || e.clientWidth || g.clientWidth
+    );
   };
 
-  DomHelpers.getViewportData = function (element, windowHeight) {
+  /**
+   *
+   * @param element
+   * @param viewportSize | Size object
+   * @returns {{isInViewport: boolean, rect: ClientRect}}
+   */
+
+  DomHelpers.getViewportData = function (element, viewportSize) {
     var rect = element.getBoundingClientRect();
     return {
-      isInViewport: ((rect.top >= 0 && rect.top <= windowHeight) || (rect.bottom >= 0 && rect.bottom <= windowHeight)),
+      isInViewport: (
+        // Vertically
+        (rect.top >= 0 && rect.top <= viewportSize.height) ||
+        (rect.bottom >= 0 && rect.bottom <= viewportSize.height)
+      ) && (
+        // Horizontally
+        (rect.left >= 0 && rect.left <= viewportSize.width) ||
+        (rect.right >= 0 && rect.right <= viewportSize.width)
+      ),
       rect: rect
     };
   };
 
+  /**
+   *
+   * @param height
+   * @param width
+   * @constructor
+   */
+  DomHelpers.ViewportSize = function(height, width) {
+    this.height = height;
+    this.width = width;
+  };
+
   // Expose DomHelpers
   window.DomHelpers = DomHelpers;
 

diff --git a/src/Plugins/ScrollImageParallaxListener.js b/src/Plugins/ScrollImageParallaxListener.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -38,19 +38,19 @@
     this.doFrame = function() {
       this.$images.each((function (index, el) {
         var $el = $(el);
-        var inViewportData = DomHelpers.getViewportData($el[0], this.windowDimensions.height);
+        var inViewportData = DomHelpers.getViewportData($el[0], this.viewportSize);
         if (inViewportData.isInViewport) {
           var maxTranslate = (this.scale - 1) * this.imagesHeights[index],
-            translate = this.direction * inViewportData.rect.top / this.windowDimensions.height * maxTranslate;
+            translate = this.direction * inViewportData.rect.top / this.viewportSize.height * maxTranslate;
           TweenLite.to($el, .5, { y: Math.floor(translate) });
         }
       }).bind(this));
     };
 
-    this.onResize = function(windowDimensions) {
-      this.windowDimensions = windowDimensions;
+    this.onResize = function(viewportSize) {
+      this.viewportSize = viewportSize;
       // Check breakpoint changed
-      var breakpoint = this.getNearestBreakpoint(this.windowDimensions.width);
+      var breakpoint = this.getNearestBreakpoint(this.viewportSize.width);
       if (this.currentBreakpoint !== breakpoint) {
         this.currentBreakpoint = breakpoint;
         this.init();

diff --git a/src/Plugins/ScrollStickyListener.js b/src/Plugins/ScrollStickyListener.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -35,7 +35,7 @@
       this.stickyHeight = this.$sticky.height();
 
       this.maxStickyTranslate = Math.max(this.containerHeight - this.stickyHeight - this.stickyTopOffset - this.stickyBottomOffset, 0);
-      this.stickyOffsetLeft = Math.floor(DomHelpers.getViewportData(this.$sticky.get(0)).rect.left);
+      this.stickyOffsetLeft = Math.floor(DomHelpers.getViewportData(this.$sticky.get(0), this.viewportSize).rect.left);
 
       this.onScroll();
       this.doFrame();
@@ -57,10 +57,11 @@
     };
 
     this.onScroll = function (latestKnownScrollY) {
-      this.containerOffsetTop = Math.floor(DomHelpers.getViewportData(this.$container.get(0)).rect.top);
+      this.containerOffsetTop = Math.floor(DomHelpers.getViewportData(this.$container.get(0), this.viewportSize).rect.top);
     };
 
-    this.onResize = function(windowDimensions) {
+    this.onResize = function(viewportSize) {
+      this.viewportSize = viewportSize;
       this.init();
     };
 

diff --git a/src/Plugins/ScrollStickyWithContentsListener.js b/src/Plugins/ScrollStickyWithContentsListener.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -51,19 +51,19 @@
       this.stickyWidth = this.$sticky.parent().outerWidth();
 
       this.maxStickyTranslate = Math.max(this.containerHeight - this.stickyHeight - this.stickyTopOffset - this.stickyBottomOffset, 0);
-      this.stickyOffsetLeft = Math.floor(DomHelpers.getViewportData(this.$sticky.get(0)).rect.left);
+      this.stickyOffsetLeft = Math.floor(DomHelpers.getViewportData(this.$sticky.get(0), this.viewportSize).rect.left);
 
       this.onScroll();
       this.doFrame();
     };
 
     this.doFrame = function () {
       var stickyTranslate = 0,
-        stickyExceedsViewport = this.stickyHeight > this.windowDimensions.height;
+        stickyExceedsViewport = this.stickyHeight > this.viewportSize.height;
 
       if (this.containerOffsetTop - this.triggerOffset < 0) {
         var absContainerOffsetTop = Math.abs(this.containerOffsetTop),
-          maxStickyInnerTranslateY = this.stickyHeight - this.windowDimensions.height + this.stickyTopOffset + this.stickyBottomOffset,
+          maxStickyInnerTranslateY = this.stickyHeight - this.viewportSize.height + this.stickyTopOffset + this.stickyBottomOffset,
           currentStickyTop = this.stickyRect.top;
         stickyTranslate = absContainerOffsetTop >= this.maxStickyTranslate ? this.maxStickyTranslate : absContainerOffsetTop;
 
@@ -95,12 +95,12 @@
       this.latestKnownScrollYDelta = this.latestKnownScrollY - latestKnownScrollY;
       this.latestKnownScrollY = latestKnownScrollY;
 
-      this.stickyRect = DomHelpers.getViewportData(this.$sticky.get(0)).rect;
-      this.containerOffsetTop = Math.floor(DomHelpers.getViewportData(this.$container.get(0)).rect.top);
+      this.stickyRect = DomHelpers.getViewportData(this.$sticky.get(0), this.viewportSize).rect;
+      this.containerOffsetTop = Math.floor(DomHelpers.getViewportData(this.$container.get(0), this.viewportSize).rect.top);
     };
 
-    this.onResize = function(windowDimensions) {
-      this.windowDimensions = windowDimensions;
+    this.onResize = function(viewportSize) {
+      this.viewportSize = viewportSize;
       this.init();
     };
 

diff --git a/src/Plugins/ScrollTextParallaxListener.js b/src/Plugins/ScrollTextParallaxListener.js
@@ -1,5 +1,5 @@
 /*
- * @author Mikel Tuesta <mikel@lin3s.com>
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
  */
 'use strict';
 
@@ -21,9 +21,9 @@
     this.doFrame = function() {
       this.$texts.each((function (index, el) {
         var $el = $(el);
-        var inViewportData = DomHelpers.getViewportData($el[0], this.windowDimensions.height);
+        var inViewportData = DomHelpers.getViewportData($el[0], this.viewportSize);
         if (inViewportData.isInViewport) {
-          var translate = this.direction * inViewportData.rect.top / this.windowDimensions.height * this.maxTranslate;
+          var translate = this.direction * inViewportData.rect.top / this.viewportSize.height * this.maxTranslate;
           TweenLite.to($el, .5, { y: translate });
         }
       }).bind(this))