universal-tilt.js - npm Package Compare versions

Comparing version 2.0.0-beta.2 to 2.0.0

CHANGELOG.md

 # universal-tilt.js Changelog
 
-## Next
-#### Bug Fix
-- fix animation performance
+### [CHANGELOG.md for v1 here](https://github.com/JB1905/universal-tilt.js/blob/v1/CHANGELOG.md)
 
+## 2.0.0 (2019-03-05)
 #### Repository Changes
-- add tests
+- moved Changelog for v1 to branch
+- updated dependencies
 
@@ -39,86 +39,1 @@ ## 2.0.0 beta 2 (2019-01-18)
 - added ESLint config
-
-## 1.2.1 (2018-11-11)
-#### Bug Fix
-- fixed bug with `window` global variable in Node.js
-
-## 1.2.0 beta 1 / 1.2.0 (2018-10-15)
-#### Breaking Changes
-- replaced `mobile` option with `exclude` (disable tilt effect on selected user agents)
-
-#### Bug Fix
-- fixed bug with tilt effect on devices with gyroscope
-
-## 1.1.1 (2018-09-04)
-#### Documentation
-- updated README.md
-
-## 1.1.1 beta 1 (2018-09-02)
-#### Dependencies
-- updated Babel to `^7.0.0` stable
-- updated babel-plugin-add-module-exports to `^0.3.3`
-- updated Webpack to `^4.17.1`
-- updated babel-loader to `^8.0.0` stable
-
-#### Repository Changes
-- removed map for production version
-
-## 1.1.0 (2018-07-16)
-#### Repository Changes
-- switched from Gulp to Webpack
-- updated Babel to v7
-- only 2 dist version
-- changed main file from universal-tilt.js to universal-tilt.min.js
-- moved demo to gh-pages branch
-
-## 1.0.7 (2018-07-06)
-#### Documentation
-- updated README.md
-
-#### More
-- Internal updates & improvements
-
-## 1.0.6 (2018-04-30)
-#### Improvement
-- improved events performance
-
-## 1.0.5 (2018-04-14)
-#### Bug Fix
-- fixed bug with jQuery and Node.js compatibility
-
-## 1.0.3 (2018-04-14)
-#### Bug Fix
-- fixed bug with autoinit in Node.js
-
-## 1.0.1 (2018-04-14)
-#### New Feature
-- added mobile option (enable or disable tilt effect on mobile devices)
-
-## 1.0.0 (2018-04-01)
-#### Bug Fix
-- fixed bug with callbacks (when value is `null`)
-
-## 1.0.0 beta 3 (2018-03-29)
-#### New Feature
-- added callbacks on mouse enter, move, leave and device move
-
-## 1.0.0 beta 2 (2018-03-15)
-#### New Feature
-- added autoinit
-
-#### Bug Fix
-- fixed performance of shine effect
-- fixed performance on mobile devices
-
-## 1.0.0 beta 1 (2018-03-03)
-#### New Feature
-- npm added
-- AMD & CommonJS support added
-
-#### Change
-- renamed jQuery plugin from UniversalTilt() to universalTilt()
-
-## 0.5.0 (2018-01-26)
-#### New Feature
-- Position Base option
-- mobile support (devices with gyroscope)

lib/universal-tilt.js

@@ -123,4 +123,4 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-    var methods = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    var settings = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var callbacks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
@@ -134,4 +134,4 @@ _classCallCheck(this, UniversalTilt);
 
-      if (typeof _this.methods.onMouseEnter === 'function') {
-        _this.methods.onMouseEnter(_this.element);
+      if (typeof _this.callbacks.onMouseEnter === 'function') {
+        _this.callbacks.onMouseEnter(_this.element);
       }
@@ -141,6 +141,3 @@ });
     _defineProperty(this, "onMouseMove", function (e) {
-      if (_this.updateCall !== null) {
-        cancelAnimationFrame(_this.updateCall);
-      }
-
+      if (_this.updateCall !== null) cancelAnimationFrame(_this.updateCall);
       _this.event = e;
@@ -150,8 +147,8 @@
 
-      _this.updateCall = window.requestAnimationFrame(function () {
+      _this.updateCall = requestAnimationFrame(function () {
         return _this.update();
       });
 
-      if (typeof _this.methods.onMouseMove === 'function') {
-        _this.methods.onMouseMove(_this.element);
+      if (typeof _this.callbacks.onMouseMove === 'function') {
+        _this.callbacks.onMouseMove(_this.element);
       }
@@ -163,8 +160,8 @@ });
 
-      window.requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
         return _this.reset();
       });
 
-      if (typeof _this.methods.onMouseLeave === 'function') {
-        _this.methods.onMouseLeave(_this.element);
+      if (typeof _this.callbacks.onMouseLeave === 'function') {
+        _this.callbacks.onMouseLeave(_this.element);
       }
@@ -182,4 +179,4 @@ });
 
-      if (typeof _this.methods.onDeviceMove === 'function') {
-        _this.methods.onDeviceMove(_this.element);
+      if (typeof _this.callbacks.onDeviceMove === 'function') {
+        _this.callbacks.onDeviceMove(_this.element);
       }
@@ -189,7 +186,7 @@ });
     this.element = element;
-    this.methods = methods;
+    this.callbacks = callbacks;
     this.settings = this.extendSettings(settings);
 
-    if (typeof this.methods.onInit === 'function') {
-      this.methods.onInit(this.element);
+    if (typeof this.callbacks.onInit === 'function') {
+      this.callbacks.onInit(this.element);
     }
@@ -239,11 +236,8 @@
       clearTimeout(this.timeout);
+      if (this.updateCall !== null) cancelAnimationFrame(this.updateCall);
 
-      if (this.updateCall !== null) {
-        cancelAnimationFrame(this.updateCall);
+      if (typeof this.callbacks.onDestroy === 'function') {
+        this.callbacks.onDestroy(this.element);
       }
 
-      if (typeof this.methods.onDestroy === 'function') {
-        this.methods.onDestroy(this.element);
-      }
-
       this.reset();
@@ -375,3 +369,3 @@ this.removeEventListeners();
         'pointer-events': 'none',
-        'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
+        'background-image': 'linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)',
         width: "".concat(this.element.offsetWidth * 2, "px"),
@@ -457,4 +451,4 @@ height: "".concat(this.element.offsetWidth * 2, "px"),
       var elements = data.elements,
-          methods = data.methods,
-          settings = data.settings;
+          settings = data.settings,
+          callbacks = data.callbacks;
       if (elements instanceof Node) elements = [elements];
@@ -471,3 +465,3 @@ if (elements instanceof NodeList) elements = [].slice.call(elements);
           if (!('universalTilt' in element)) {
-            element.universalTilt = new UniversalTilt(element, methods, settings);
+            element.universalTilt = new UniversalTilt(element, settings, callbacks);
           }
@@ -513,3 +507,3 @@ }
       settings: data.settings || {},
-      methods: data.methods || {}
+      callbacks: data.callbacks || {}
     });
@@ -516,0 +510,0 @@ };

lib/universal-tilt.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("UniversalTilt",[],t):"object"==typeof exports?exports.UniversalTilt=t():e.UniversalTilt=t()}("object"!=typeof window?global.window=global:window,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}n.r(t),n.d(t,"default",function(){return o});var o=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),s(this,"onMouseEnter",function(){n.updateElementPosition(),n.transitions(),"function"==typeof n.methods.onMouseEnter&&n.methods.onMouseEnter(n.element)}),s(this,"onMouseMove",function(e){null!==n.updateCall&&cancelAnimationFrame(n.updateCall),n.event=e,n.updateElementPosition(),n.updateCall=window.requestAnimationFrame(function(){return n.update()}),"function"==typeof n.methods.onMouseMove&&n.methods.onMouseMove(n.element)}),s(this,"onMouseLeave",function(){n.transitions(),window.requestAnimationFrame(function(){return n.reset()}),"function"==typeof n.methods.onMouseLeave&&n.methods.onMouseLeave(n.element)}),s(this,"onDeviceMove",function(e){n.event=e,n.update(),n.updateElementPosition(),n.transitions(),"function"==typeof n.methods.onDeviceMove&&n.methods.onDeviceMove(n.element)}),this.element=t,this.methods=i,this.settings=this.extendSettings(o),"function"==typeof this.methods.onInit&&this.methods.onInit(this.element),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform="perspective(".concat(this.settings.perspective,"px)"),this.addEventListeners()}var t,n,o;return t=e,o=[{key:"init",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.elements,i=t.methods,s=t.settings;n instanceof Node&&(n=[n]),n instanceof NodeList&&(n=[].slice.call(n));var o=!0,a=!1,r=void 0;try{for(var l,h=n[Symbol.iterator]();!(o=(l=h.next()).done);o=!0){var u=l.value;"universalTilt"in u||(u.universalTilt=new e(u,i,s))}}catch(e){a=!0,r=e}finally{try{o||null==h.return||h.return()}finally{if(a)throw r}}}}],(n=[{key:"isMobile",value:function(){return window.DeviceMotionEvent&&"ontouchstart"in document.documentElement}},{key:"addEventListeners",value:function(){navigator.userAgent.match(this.settings.exclude)||(this.isMobile()?window.addEventListener("devicemotion",this.onDeviceMove):("element"===this.settings.base?this.base=this.element:"window"===this.settings.base&&(this.base=window),this.base.addEventListener("mouseenter",this.onMouseEnter),this.base.addEventListener("mousemove",this.onMouseMove),this.base.addEventListener("mouseleave",this.onMouseLeave)))}},{key:"removeEventListeners",value:function(){window.removeEventListener("devicemotion",this.onDeviceMove),this.base.removeEventListener("mouseenter",this.onMouseEnter),this.base.removeEventListener("mousemove",this.onMouseMove),this.base.removeEventListener("mouseleave",this.onMouseLeave)}},{key:"destroy",value:function(){clearTimeout(this.timeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),"function"==typeof this.methods.onDestroy&&this.methods.onDestroy(this.element),this.reset(),this.removeEventListeners(),this.element.universalTilt=null,delete this.element.universalTilt,this.element=null}},{key:"reset",value:function(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform="perspective(".concat(this.settings.perspective,"px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)")),this.settings.shine&&!this.settings["shine-save"]&&Object.assign(this.shineElement.style,{transform:"rotate(180deg) translate3d(-50%, -50%, 0)",opacity:"0"})}},{key:"getValues",value:function(){var e,t,n;this.isMobile()?(e=this.event.accelerationIncludingGravity.x/4,t=this.event.accelerationIncludingGravity.y/4,90===window.orientation?(n=(1-t)/2,t=(1+e)/2,e=n):-90===window.orientation?(n=(1+t)/2,t=(1-e)/2,e=n):0===window.orientation?(t=n=(1+t)/2,e=(1+e)/2):180===window.orientation&&(t=n=(1-t)/2,e=(1-e)/2)):"element"===this.settings.base?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):"window"===this.settings.base&&(e=this.event.clientX/window.innerWidth,t=this.event.clientY/window.innerHeight);e=Math.min(Math.max(e,0),1),t=Math.min(Math.max(t,0),1);var i=(this.settings.max/2-e*this.settings.max).toFixed(2),s=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(e-.5,.5-t)*(180/Math.PI);return{tiltX:this.reverse*i,tiltY:this.reverse*s,angle:o}}},{key:"updateElementPosition",value:function(){var e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}},{key:"update",value:function(){var e=this.getValues();this.element.style.transform="perspective(".concat(this.settings.perspective,"px)\n      rotateX(").concat(this.settings.disabled&&"X"===this.settings.disabled.toUpperCase()?0:e.tiltY,"deg)\n      rotateY(").concat(this.settings.disabled&&"Y"===this.settings.disabled.toUpperCase()?0:e.tiltX,"deg)\n      scale3d(").concat(this.settings.scale,", ").concat(this.settings.scale,", ").concat(this.settings.scale,")"),this.settings.shine&&Object.assign(this.shineElement.style,{transform:"rotate(".concat(e.angle,"deg) translate3d(-50%, -50%, 0)"),opacity:"".concat(this.settings["shine-opacity"])}),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:e})),this.updateCall=null}},{key:"shine",value:function(){var e=document.createElement("div"),t=document.createElement("div");e.classList.add("shine"),t.classList.add("shine-inner"),e.appendChild(t),this.element.appendChild(e),this.shineWrapper=this.element.querySelector(".shine"),this.shineElement=this.element.querySelector(".shine-inner"),Object.assign(this.shineWrapper.style,{position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden"}),Object.assign(this.shineElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:"".concat(2*this.element.offsetWidth,"px"),height:"".concat(2*this.element.offsetWidth,"px"),transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}},{key:"transitions",value:function(){var e=this;clearTimeout(this.timeout),this.element.style.transition="all ".concat(this.settings.speed,"ms ").concat(this.settings.easing),this.settings.shine&&(this.shineElement.style.transition="opacity ".concat(this.settings.speed,"ms ").concat(this.settings.easing)),this.timeout=setTimeout(function(){e.element.style.transition="",e.settings.shine&&(e.shineElement.style.transition="")},this.settings.speed)}},{key:"extendSettings",value:function(e){var t={base:"element",disabled:null,easing:"cubic-bezier(.03, .98, .52, .99)",exclude:null,max:35,perspective:1e3,reset:!0,reverse:!1,scale:1,shine:!1,"shine-opacity":0,"shine-save":!1,speed:300},n={};for(var i in t)if(i in e)n[i]=e[i];else if(this.element.getAttribute("data-".concat(i))){var s=this.element.getAttribute("data-".concat(i));try{n[i]=JSON.parse(s)}catch(e){n[i]=s}}else n[i]=t[i];return n}}])&&i(t.prototype,n),o&&i(t,o),e}();if("undefined"!=typeof document){window.UniversalTilt=o;var a=document.querySelectorAll("[data-tilt]");a.length&&o.init({elements:a})}window.jQuery&&(window.jQuery.fn.universalTilt=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o.init({elements:this,settings:e.settings||{},methods:e.methods||{}})})}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("UniversalTilt",[],t):"object"==typeof exports?exports.UniversalTilt=t():e.UniversalTilt=t()}("object"!=typeof window?global.window=global:window,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function s(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}n.r(t),n.d(t,"default",function(){return o});var o=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),s(this,"onMouseEnter",function(){n.updateElementPosition(),n.transitions(),"function"==typeof n.callbacks.onMouseEnter&&n.callbacks.onMouseEnter(n.element)}),s(this,"onMouseMove",function(e){null!==n.updateCall&&cancelAnimationFrame(n.updateCall),n.event=e,n.updateElementPosition(),n.updateCall=requestAnimationFrame(function(){return n.update()}),"function"==typeof n.callbacks.onMouseMove&&n.callbacks.onMouseMove(n.element)}),s(this,"onMouseLeave",function(){n.transitions(),requestAnimationFrame(function(){return n.reset()}),"function"==typeof n.callbacks.onMouseLeave&&n.callbacks.onMouseLeave(n.element)}),s(this,"onDeviceMove",function(e){n.event=e,n.update(),n.updateElementPosition(),n.transitions(),"function"==typeof n.callbacks.onDeviceMove&&n.callbacks.onDeviceMove(n.element)}),this.element=t,this.callbacks=o,this.settings=this.extendSettings(i),"function"==typeof this.callbacks.onInit&&this.callbacks.onInit(this.element),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform="perspective(".concat(this.settings.perspective,"px)"),this.addEventListeners()}var t,n,o;return t=e,o=[{key:"init",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.elements,i=t.settings,s=t.callbacks;n instanceof Node&&(n=[n]),n instanceof NodeList&&(n=[].slice.call(n));var o=!0,a=!1,l=void 0;try{for(var r,c=n[Symbol.iterator]();!(o=(r=c.next()).done);o=!0){var h=r.value;"universalTilt"in h||(h.universalTilt=new e(h,i,s))}}catch(e){a=!0,l=e}finally{try{o||null==c.return||c.return()}finally{if(a)throw l}}}}],(n=[{key:"isMobile",value:function(){return window.DeviceMotionEvent&&"ontouchstart"in document.documentElement}},{key:"addEventListeners",value:function(){navigator.userAgent.match(this.settings.exclude)||(this.isMobile()?window.addEventListener("devicemotion",this.onDeviceMove):("element"===this.settings.base?this.base=this.element:"window"===this.settings.base&&(this.base=window),this.base.addEventListener("mouseenter",this.onMouseEnter),this.base.addEventListener("mousemove",this.onMouseMove),this.base.addEventListener("mouseleave",this.onMouseLeave)))}},{key:"removeEventListeners",value:function(){window.removeEventListener("devicemotion",this.onDeviceMove),this.base.removeEventListener("mouseenter",this.onMouseEnter),this.base.removeEventListener("mousemove",this.onMouseMove),this.base.removeEventListener("mouseleave",this.onMouseLeave)}},{key:"destroy",value:function(){clearTimeout(this.timeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),"function"==typeof this.callbacks.onDestroy&&this.callbacks.onDestroy(this.element),this.reset(),this.removeEventListeners(),this.element.universalTilt=null,delete this.element.universalTilt,this.element=null}},{key:"reset",value:function(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform="perspective(".concat(this.settings.perspective,"px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)")),this.settings.shine&&!this.settings["shine-save"]&&Object.assign(this.shineElement.style,{transform:"rotate(180deg) translate3d(-50%, -50%, 0)",opacity:"0"})}},{key:"getValues",value:function(){var e,t,n;this.isMobile()?(e=this.event.accelerationIncludingGravity.x/4,t=this.event.accelerationIncludingGravity.y/4,90===window.orientation?(n=(1-t)/2,t=(1+e)/2,e=n):-90===window.orientation?(n=(1+t)/2,t=(1-e)/2,e=n):0===window.orientation?(t=n=(1+t)/2,e=(1+e)/2):180===window.orientation&&(t=n=(1-t)/2,e=(1-e)/2)):"element"===this.settings.base?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):"window"===this.settings.base&&(e=this.event.clientX/window.innerWidth,t=this.event.clientY/window.innerHeight);e=Math.min(Math.max(e,0),1),t=Math.min(Math.max(t,0),1);var i=(this.settings.max/2-e*this.settings.max).toFixed(2),s=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(e-.5,.5-t)*(180/Math.PI);return{tiltX:this.reverse*i,tiltY:this.reverse*s,angle:o}}},{key:"updateElementPosition",value:function(){var e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}},{key:"update",value:function(){var e=this.getValues();this.element.style.transform="perspective(".concat(this.settings.perspective,"px)\n      rotateX(").concat(this.settings.disabled&&"X"===this.settings.disabled.toUpperCase()?0:e.tiltY,"deg)\n      rotateY(").concat(this.settings.disabled&&"Y"===this.settings.disabled.toUpperCase()?0:e.tiltX,"deg)\n      scale3d(").concat(this.settings.scale,", ").concat(this.settings.scale,", ").concat(this.settings.scale,")"),this.settings.shine&&Object.assign(this.shineElement.style,{transform:"rotate(".concat(e.angle,"deg) translate3d(-50%, -50%, 0)"),opacity:"".concat(this.settings["shine-opacity"])}),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:e})),this.updateCall=null}},{key:"shine",value:function(){var e=document.createElement("div"),t=document.createElement("div");e.classList.add("shine"),t.classList.add("shine-inner"),e.appendChild(t),this.element.appendChild(e),this.shineWrapper=this.element.querySelector(".shine"),this.shineElement=this.element.querySelector(".shine-inner"),Object.assign(this.shineWrapper.style,{position:"absolute",top:"0",left:"0",height:"100%",width:"100%",overflow:"hidden"}),Object.assign(this.shineElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)",width:"".concat(2*this.element.offsetWidth,"px"),height:"".concat(2*this.element.offsetWidth,"px"),transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}},{key:"transitions",value:function(){var e=this;clearTimeout(this.timeout),this.element.style.transition="all ".concat(this.settings.speed,"ms ").concat(this.settings.easing),this.settings.shine&&(this.shineElement.style.transition="opacity ".concat(this.settings.speed,"ms ").concat(this.settings.easing)),this.timeout=setTimeout(function(){e.element.style.transition="",e.settings.shine&&(e.shineElement.style.transition="")},this.settings.speed)}},{key:"extendSettings",value:function(e){var t={base:"element",disabled:null,easing:"cubic-bezier(.03, .98, .52, .99)",exclude:null,max:35,perspective:1e3,reset:!0,reverse:!1,scale:1,shine:!1,"shine-opacity":0,"shine-save":!1,speed:300},n={};for(var i in t)if(i in e)n[i]=e[i];else if(this.element.getAttribute("data-".concat(i))){var s=this.element.getAttribute("data-".concat(i));try{n[i]=JSON.parse(s)}catch(e){n[i]=s}}else n[i]=t[i];return n}}])&&i(t.prototype,n),o&&i(t,o),e}();if("undefined"!=typeof document){window.UniversalTilt=o;var a=document.querySelectorAll("[data-tilt]");a.length&&o.init({elements:a})}window.jQuery&&(window.jQuery.fn.universalTilt=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o.init({elements:this,settings:e.settings||{},callbacks:e.callbacks||{}})})}])});

package.json

 {
   "name": "universal-tilt.js",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0",
   "description": "Parallax tilt effect library",
@@ -12,6 +12,6 @@ "author": "Jakub Biesiada",
     "build:dev": "webpack --env dev",
-    "test": "mocha -r @babel/register --exit",
+    "test": "jest --coverage",
     "watch": "npm run build -- --watch",
     "watch:dev": "npm run build:dev -- --watch",
-    "watch:test": "mocha -r @babel/register --watch",
+    "watch:test": "npm run test -- --watch",
     "lint": "eslint ./src --fix",
@@ -39,21 +39,17 @@ "prettier": "prettier --write 'src/**/*.js'",
     "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/preset-env": "^7.2.3",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/preset-env": "^7.3.1",
     "@babel/register": "^7.0.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "chai": "^4.2.0",
-    "eslint": "^5.12.0",
-    "eslint-config-prettier": "^3.5.0",
+    "eslint": "^5.13.0",
+    "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-prettier": "^3.0.1",
     "gh-pages": "^2.0.1",
+    "jest": "^24.1.0",
     "jquery": "^3.3.1",
-    "jsdom": "13.1.0",
-    "jsdom-global": "^3.0.2",
-    "mocha": "^5.2.0",
-    "prettier": "^1.15.3",
-    "webpack": "^4.28.4",
-    "webpack-cli": "^3.2.1"
+    "prettier": "^1.16.4",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3"
   }
 }

README.md

@@ -21,3 +21,3 @@ # [universal-tilt.js](https://github.com/jb1905/universal-tilt.js)
 ## How to Install
-At the beginning install the library in your project via npm:
+First, install the library in your project by npm:
 ```bash
@@ -32,5 +32,5 @@ $ npm install universal-tilt.js
 
-**You can also connect script via one of CDNs:**
-bundle.run: `https://bundle.run/universal-tilt.js`
-jsDelivr: `https://cdn.jsdelivr.net/npm/universal-tilt.js/`
+**You can also connect script via one of CDNs:**<br>
+bundle.run: `https://bundle.run/universal-tilt.js`<br>
+jsDelivr: `https://cdn.jsdelivr.net/npm/universal-tilt.js/`<br>
 unpkg: `https://unpkg.com/universal-tilt.js/`
@@ -71,3 +71,3 @@
   },
-  methods: {
+  callbacks: {
     // callbacks...
@@ -102,3 +102,3 @@ }
   },
-  methods: {
+  callbacks: {
     // callbacks...
@@ -150,11 +150,11 @@ }
 
-### Methods
+### Callbacks
 Name | Description | Available options
 -|-|-
-**onDestroy** | Callback on plugin destroy | `el => { // code }`
-**onDeviceMove**<sup>2</sup> | Callback on device move | `el => { // code }`
-**onInit** | Callback on plugin init | `el => { // code }`
-**onMouseEnter** | Callback on mouse enter | `el => { // code }`
-**onMouseLeave** | Callback on mouse leave | `el => { // code }`
-**onMouseMove** | Callback on mouse move | `el => { // code }`
+**onDestroy** | Callback on plugin destroy | `el => { /* code */ }`
+**onDeviceMove**<sup>2</sup> | Callback on device move | `el => { /* code */ }`
+**onInit** | Callback on plugin init | `el => { /* code */ }`
+**onMouseEnter** | Callback on mouse enter | `el => { /* code */ }`
+**onMouseLeave** | Callback on mouse leave | `el => { /* code */ }`
+**onMouseMove** | Callback on mouse move | `el => { /* code */ }`
 
@@ -161,0 +161,0 @@ <sup>1</sup> *shine value must be true*<br>

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

15

decreased by-21.05%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

61504

decreased by-3.11%

Lines of code

452

decreased by-0.88%

No dependency changes