Update to version 1.7.0 Refactored some code after many pull requests.

micku7zu · Apr 13, 2019 · d034afe · d034afe
1 parent 2595c33
commit d034afe
Show file tree

Hide file tree

Showing 13 changed files with 194 additions and 164 deletions.
diff --git a/README.md b/README.md
@@ -77,10 +77,10 @@ VanillaTilt.init(elements);
 ### Install
 You can copy and include any of the following file:
 
-* [dist/vanilla-tilt.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js) ~ 6kb
-* [dist/vanilla-tilt.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js) ~ 3.5kb
-* [dist/vanilla-tilt.babel.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.js) ~ 8.5kb
-* [dist/vanilla-tilt.babel.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.min.js) ~ 4.3kb
+* [dist/vanilla-tilt.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js) ~ 15kb
+* [dist/vanilla-tilt.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js) ~ 8.5kb
+* [dist/vanilla-tilt.babel.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.js) ~ 16.5kb
+* [dist/vanilla-tilt.babel.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.min.js) ~ 9.5kb
 
 #### NPM
 

diff --git a/dist/vanilla-tilt.babel.js b/dist/vanilla-tilt.babel.js
@@ -11,7 +11,7 @@ var classCallCheck = function (instance, Constructor) {
  * Created by Sergiu Șandor (micku7zu) on 1/27/2017.
  * Original idea: https://github.com/gijsroge/tilt.js
  * MIT License.
- * Version 1.6.3
+ * Version 1.7.0
  */
 
 var VanillaTilt = function () {
@@ -25,6 +25,8 @@ var VanillaTilt = function () {
 
     this.width = null;
     this.height = null;
+    this.clientWidth = null;
+    this.clientHeight = null;
     this.left = null;
     this.top = null;
 
@@ -43,20 +45,24 @@ var VanillaTilt = function () {
 
     this.element = element;
     this.settings = this.extendSettings(settings);
-    this.elementListener = this.getElementListener();
 
     this.reverse = this.settings.reverse ? -1 : 1;
-
     this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
     this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
     this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
     this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope);
     this.gyroscopeSamples = this.settings.gyroscopeSamples;
 
+    this.elementListener = this.getElementListener();
+
     if (this.glare) {
       this.prepareGlare();
     }
 
+    if (this.fullPageListening) {
+      this.updateClientSize();
+    }
+
     this.addEventListeners();
     this.updateInitialPosition();
   }
@@ -72,8 +78,8 @@ var VanillaTilt = function () {
 
 
   VanillaTilt.prototype.getElementListener = function getElementListener() {
-    if (!this.settings || !this.settings["mouse-event-element"]) {
-      return this.element;
+    if (this.fullPageListening) {
+      return window.document;
     }
 
     if (typeof this.settings["mouse-event-element"] === "string") {
@@ -87,6 +93,8 @@ var VanillaTilt = function () {
     if (this.settings["mouse-event-element"] instanceof Node) {
       return this.settings["mouse-event-element"];
     }
+
+    return this.element;
   };
 
   /**
@@ -104,14 +112,9 @@ var VanillaTilt = function () {
 
     this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
     this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
 
-    if (this.fullPageListening) {
-      window.document.addEventListener("mousemove", this.onMouseMoveBind);
-    } else {
-      this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
-    }
-
-    if (this.glare) {
+    if (this.glare || this.fullPageListening) {
       window.addEventListener("resize", this.onWindowResizeBind);
     }
 
@@ -128,18 +131,13 @@ var VanillaTilt = function () {
   VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
     this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
     this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
-
-    if (this.fullPageListening) {
-      window.document.removeEventListener("mousemove", this.onMouseMoveBind);
-    } else {
-      this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
-    }
+    this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
 
     if (this.gyroscope) {
       window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
     }
 
-    if (this.glare) {
+    if (this.glare || this.fullPageListening) {
       window.removeEventListener("resize", this.onWindowResizeBind);
     }
   };
@@ -221,10 +219,6 @@ var VanillaTilt = function () {
   };
 
   VanillaTilt.prototype.onMouseLeave = function onMouseLeave() {
-    if (this.fullPageListening) {
-      return;
-    }
-
     this.setTransition();
 
     if (this.settings.reset) {
@@ -261,8 +255,8 @@ var VanillaTilt = function () {
 
     if (this.fullPageListening) {
       this.event = {
-        clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * document.body.clientWidth,
-        clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * document.body.clientHeight
+        clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth,
+        clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight
       };
     } else {
       this.event = {
@@ -283,8 +277,8 @@ var VanillaTilt = function () {
         y = void 0;
 
     if (this.fullPageListening) {
-      x = this.event.clientX / document.body.clientWidth;
-      y = this.event.clientY / document.body.clientHeight;
+      x = this.event.clientX / this.clientWidth;
+      y = this.event.clientY / this.clientHeight;
     } else {
       x = (this.event.clientX - this.left) / this.width;
       y = (this.event.clientY - this.top) / this.height;
@@ -384,14 +378,23 @@ var VanillaTilt = function () {
   };
 
   VanillaTilt.prototype.updateGlareSize = function updateGlareSize() {
-    Object.assign(this.glareElement.style, {
-      "width": "" + this.element.offsetWidth * 2,
-      "height": "" + this.element.offsetWidth * 2
-    });
+    if (this.glare) {
+      Object.assign(this.glareElement.style, {
+        "width": "" + this.element.offsetWidth * 2,
+        "height": "" + this.element.offsetWidth * 2
+      });
+    }
+  };
+
+  VanillaTilt.prototype.updateClientSize = function updateClientSize() {
+    this.clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+
+    this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
   };
 
   VanillaTilt.prototype.onWindowResize = function onWindowResize() {
     this.updateGlareSize();
+    this.updateClientSize();
   };
 
   VanillaTilt.prototype.setTransition = function setTransition() {

diff --git a/dist/vanilla-tilt.babel.min.js b/dist/vanilla-tilt.babel.min.js
diff --git a/dist/vanilla-tilt.js b/dist/vanilla-tilt.js
@@ -5,7 +5,7 @@ var VanillaTilt = (function () {
  * Created by Sergiu Șandor (micku7zu) on 1/27/2017.
  * Original idea: https://github.com/gijsroge/tilt.js
  * MIT License.
- * Version 1.6.3
+ * Version 1.7.0
  */
 
 class VanillaTilt {
@@ -16,6 +16,8 @@ class VanillaTilt {
 
     this.width = null;
     this.height = null;
+    this.clientWidth = null;
+    this.clientHeight = null;
     this.left = null;
     this.top = null;
 
@@ -34,20 +36,24 @@ class VanillaTilt {
 
     this.element = element;
     this.settings = this.extendSettings(settings);
-    this.elementListener = this.getElementListener();
 
     this.reverse = this.settings.reverse ? -1 : 1;
-
     this.glare = VanillaTilt.isSettingTrue(this.settings.glare);
     this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]);
     this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]);
     this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope);
     this.gyroscopeSamples = this.settings.gyroscopeSamples;
 
+    this.elementListener = this.getElementListener();
+
     if (this.glare) {
       this.prepareGlare();
     }
 
+    if (this.fullPageListening) {
+      this.updateClientSize();
+    }
+
     this.addEventListeners();
     this.updateInitialPosition();
   }
@@ -61,8 +67,8 @@ class VanillaTilt {
    * @return {Node}
    */
   getElementListener() {
-    if (!this.settings || !this.settings["mouse-event-element"]) {
-      return this.element;
+    if (this.fullPageListening) {
+      return window.document;
     }
 
     if (typeof this.settings["mouse-event-element"] === "string") {
@@ -76,6 +82,8 @@ class VanillaTilt {
     if (this.settings["mouse-event-element"] instanceof Node) {
       return this.settings["mouse-event-element"];
     }
+
+    return this.element;
   }
 
   /**
@@ -91,14 +99,9 @@ class VanillaTilt {
 
     this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind);
     this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind);
+    this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
 
-    if (this.fullPageListening) {
-      window.document.addEventListener("mousemove", this.onMouseMoveBind);
-    } else {
-      this.elementListener.addEventListener("mousemove", this.onMouseMoveBind);
-    }
-
-    if (this.glare) {
+    if (this.glare || this.fullPageListening) {
       window.addEventListener("resize", this.onWindowResizeBind);
     }
 
@@ -113,18 +116,13 @@ class VanillaTilt {
   removeEventListeners() {
     this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind);
     this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind);
-
-    if (this.fullPageListening) {
-      window.document.removeEventListener("mousemove", this.onMouseMoveBind);
-    } else {
-      this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
-    }
+    this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind);
 
     if (this.gyroscope) {
       window.removeEventListener("deviceorientation", this.onDeviceOrientationBind);
     }
 
-    if (this.glare) {
+    if (this.glare || this.fullPageListening) {
       window.removeEventListener("resize", this.onWindowResizeBind);
     }
   }
@@ -206,10 +204,6 @@ class VanillaTilt {
   }
 
   onMouseLeave() {
-    if (this.fullPageListening) {
-      return;
-    }
-
     this.setTransition();
 
     if (this.settings.reset) {
@@ -249,8 +243,8 @@ class VanillaTilt {
 
     if (this.fullPageListening) {
       this.event = {
-        clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * document.body.clientWidth,
-        clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * document.body.clientHeight
+        clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth,
+        clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight
       };
     } else {
       this.event = {
@@ -271,8 +265,8 @@ class VanillaTilt {
     let x, y;
 
     if (this.fullPageListening) {
-      x = this.event.clientX / document.body.clientWidth;
-      y = this.event.clientY / document.body.clientHeight;
+      x = this.event.clientX / this.clientWidth;
+      y = this.event.clientY / this.clientHeight;
     } else {
       x = (this.event.clientX - this.left) / this.width;
       y = (this.event.clientY - this.top) / this.height;
@@ -373,14 +367,27 @@ class VanillaTilt {
   }
 
   updateGlareSize() {
-    Object.assign(this.glareElement.style, {
-      "width": `${this.element.offsetWidth * 2}`,
-      "height": `${this.element.offsetWidth * 2}`,
-    });
+    if (this.glare) {
+      Object.assign(this.glareElement.style, {
+        "width": `${this.element.offsetWidth * 2}`,
+        "height": `${this.element.offsetWidth * 2}`,
+      });
+    }
+  }
+
+  updateClientSize() {
+    this.clientWidth = window.innerWidth
+      || document.documentElement.clientWidth
+      || document.body.clientWidth;
+
+    this.clientHeight = window.innerHeight
+      || document.documentElement.clientHeight
+      || document.body.clientHeight;
   }
 
   onWindowResize() {
     this.updateGlareSize();
+    this.updateClientSize();
   }
 
   setTransition() {