universal-tilt.js - npm Package Compare versions

Comparing version 1.0.1 to 1.0.3

CHANGELOG.md

 # Changelog
 
+## 1.0.2
+* fixed bug with autoinit in Node.js
+
 ## 1.0.1
@@ -4,0 +7,0 @@ * added mobile option (enable or disable tilt effect on mobile devices)

dist/universal-tilt.babel.js

@@ -8,3 +8,3 @@ 'use strict';
 /*!
-* universal-tilt.js v1.0.1
+* universal-tilt.js v1.0.2
 * Created 2018 by Jakub Biesiada
@@ -376,3 +376,5 @@ * Original idea: https://github.com/gijsroge/tilt.js
 
-var AUTO_INIT = new UniversalTilt(document.querySelectorAll('[data-tilt]'));
+if (typeof document !== 'undefined') {
+  new UniversalTilt(document.querySelectorAll('[data-tilt]'));
+}
 
@@ -379,0 +381,0 @@ // jQuery

dist/universal-tilt.babel.min.js

@@ -1,1 +0,1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,i,s){return i&&e(t.prototype,i),s&&e(t,s),t}}(),UniversalTilt=function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e),t.length>0?this.init(t,i):0!==t.length&&(this.element=t,this.width=null,this.height=null,this.left=null,this.top=null,this.timeout=null,this.settings=this.settings(i),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform="perspective("+this.settings.perspective+"px)",this.addEventListeners())}return _createClass(e,[{key:"init",value:function(t,i){for(var s=0;s<t.length;s++)this.universalTilt=new e(t[s],i)}},{key:"isMobile",value:function(){if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement&&this.settings.mobile)return!0}},{key:"addEventListeners",value:function(){var e=this;this.isMobile()?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):(this.onMouseMoveBind=this.onMouseMove.bind(this),"element"===this.settings["position-base"]?this.base=this.element:"window"===this.settings["position-base"]&&(this.base=window),this.base.addEventListener("mouseenter",function(){return e.onMouseEnter()}),this.base.addEventListener("mousemove",this.onMouseMoveBind),this.base.addEventListener("mouseleave",function(){return e.onMouseLeave()}))}},{key:"onMouseEnter",value:function(e){this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onMouseEnter&&this.settings.onMouseEnter(this.element)}},{key:"onMouseMove",value:function(e){var t=this;this.event=e,this.updateElementPosition(),window.requestAnimationFrame(function(){return t.update()}),"function"==typeof this.settings.onMouseMove&&this.settings.onMouseMove(this.element)}},{key:"onMouseLeave",value:function(e){var t=this;this.transitions(),window.requestAnimationFrame(function(){return t.reset()}),"function"==typeof this.settings.onMouseLeave&&this.settings.onMouseLeave(this.element)}},{key:"onDeviceMove",value:function(e){this.update(),this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onDeviceMove&&this.settings.onDeviceMove(this.element)}},{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("+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=void 0,t=void 0;if(this.isMobile()){e=event.accelerationIncludingGravity.x/4,t=event.accelerationIncludingGravity.y/4;var i=void 0;90===window.orientation?(i=(1-t)/2,t=(1+e)/2,e=i):-90===window.orientation?(i=(1+t)/2,t=(1-e)/2,e=i):0===window.orientation?(t=i=(1+t)/2,e=(1+e)/2):180===window.orientation&&(t=i=(1-t)/2,e=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):"window"===this.settings["position-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 s=(this.settings.max/2-e*this.settings.max).toFixed(2),n=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(e-.5,.5-t)*(180/Math.PI);return{tiltX:this.reverse*s,tiltY:this.reverse*n,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("+this.settings.perspective+"px)\n     rotateX("+(this.settings.disabled&&"X"===this.settings.disabled.toUpperCase()?0:e.tiltY)+"deg)\n     rotateY("+(this.settings.disabled&&"Y"===this.settings.disabled.toUpperCase()?0:e.tiltX)+"deg)\n     scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.settings.shine&&Object.assign(this.shineElement.style,{transform:"rotate("+e.angle+"deg) translate3d(-50%, -50%, 0)",opacity:""+this.settings["shine-opacity"]}),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:e}))}},{key:"shine",value:function(){var e=document.createElement("div");e.classList.add("shine");var t=document.createElement("div");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:2*this.element.offsetWidth+"px",height: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 "+this.settings.speed+"ms "+this.settings.easing,this.settings.shine&&(this.shineElement.style.transition="opacity "+this.settings.speed+"ms "+this.settings.easing),this.timeout=setTimeout(function(){e.element.style.transition="",e.settings.shine&&(e.shineElement.style.transition="")},this.settings.speed)}},{key:"settings",value:function(e){var t={"position-base":"element",reset:!0,mobile:!0,shine:!1,"shine-opacity":0,"shine-save":!1,max:35,perspective:1e3,scale:1,disabled:null,reverse:!1,speed:300,easing:"cubic-bezier(.03,.98,.52,.99)",onMouseEnter:null,onMouseMove:null,onMouseLeave:null,onDeviceMove:null},i={};for(var s in t)if(s in e)i[s]=e[s];else if(this.element.getAttribute("data-"+s)){var n=this.element.getAttribute("data-"+s);try{i[s]=JSON.parse(n)}catch(e){i[s]=n}}else i[s]=t[s];return i}}]),e}(),AUTO_INIT=new UniversalTilt(document.querySelectorAll("[data-tilt]"));if(window.jQuery){var $=window.jQuery;$.fn.universalTilt=function(e){new UniversalTilt(this,e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var s=t[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}return function(t,i,s){return i&&e(t.prototype,i),s&&e(t,s),t}}(),UniversalTilt=function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,e),t.length>0?this.init(t,i):0!==t.length&&(this.element=t,this.width=null,this.height=null,this.left=null,this.top=null,this.timeout=null,this.settings=this.settings(i),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform="perspective("+this.settings.perspective+"px)",this.addEventListeners())}return _createClass(e,[{key:"init",value:function(t,i){for(var s=0;s<t.length;s++)this.universalTilt=new e(t[s],i)}},{key:"isMobile",value:function(){if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement&&this.settings.mobile)return!0}},{key:"addEventListeners",value:function(){var e=this;this.isMobile()?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):(this.onMouseMoveBind=this.onMouseMove.bind(this),"element"===this.settings["position-base"]?this.base=this.element:"window"===this.settings["position-base"]&&(this.base=window),this.base.addEventListener("mouseenter",function(){return e.onMouseEnter()}),this.base.addEventListener("mousemove",this.onMouseMoveBind),this.base.addEventListener("mouseleave",function(){return e.onMouseLeave()}))}},{key:"onMouseEnter",value:function(e){this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onMouseEnter&&this.settings.onMouseEnter(this.element)}},{key:"onMouseMove",value:function(e){var t=this;this.event=e,this.updateElementPosition(),window.requestAnimationFrame(function(){return t.update()}),"function"==typeof this.settings.onMouseMove&&this.settings.onMouseMove(this.element)}},{key:"onMouseLeave",value:function(e){var t=this;this.transitions(),window.requestAnimationFrame(function(){return t.reset()}),"function"==typeof this.settings.onMouseLeave&&this.settings.onMouseLeave(this.element)}},{key:"onDeviceMove",value:function(e){this.update(),this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onDeviceMove&&this.settings.onDeviceMove(this.element)}},{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("+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=void 0,t=void 0;if(this.isMobile()){e=event.accelerationIncludingGravity.x/4,t=event.accelerationIncludingGravity.y/4;var i=void 0;90===window.orientation?(i=(1-t)/2,t=(1+e)/2,e=i):-90===window.orientation?(i=(1+t)/2,t=(1-e)/2,e=i):0===window.orientation?(t=i=(1+t)/2,e=(1+e)/2):180===window.orientation&&(t=i=(1-t)/2,e=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):"window"===this.settings["position-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 s=(this.settings.max/2-e*this.settings.max).toFixed(2),n=(t*this.settings.max-this.settings.max/2).toFixed(2),o=Math.atan2(e-.5,.5-t)*(180/Math.PI);return{tiltX:this.reverse*s,tiltY:this.reverse*n,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("+this.settings.perspective+"px)\n     rotateX("+(this.settings.disabled&&"X"===this.settings.disabled.toUpperCase()?0:e.tiltY)+"deg)\n     rotateY("+(this.settings.disabled&&"Y"===this.settings.disabled.toUpperCase()?0:e.tiltX)+"deg)\n     scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.settings.shine&&Object.assign(this.shineElement.style,{transform:"rotate("+e.angle+"deg) translate3d(-50%, -50%, 0)",opacity:""+this.settings["shine-opacity"]}),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:e}))}},{key:"shine",value:function(){var e=document.createElement("div");e.classList.add("shine");var t=document.createElement("div");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:2*this.element.offsetWidth+"px",height: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 "+this.settings.speed+"ms "+this.settings.easing,this.settings.shine&&(this.shineElement.style.transition="opacity "+this.settings.speed+"ms "+this.settings.easing),this.timeout=setTimeout(function(){e.element.style.transition="",e.settings.shine&&(e.shineElement.style.transition="")},this.settings.speed)}},{key:"settings",value:function(e){var t={"position-base":"element",reset:!0,mobile:!0,shine:!1,"shine-opacity":0,"shine-save":!1,max:35,perspective:1e3,scale:1,disabled:null,reverse:!1,speed:300,easing:"cubic-bezier(.03,.98,.52,.99)",onMouseEnter:null,onMouseMove:null,onMouseLeave:null,onDeviceMove:null},i={};for(var s in t)if(s in e)i[s]=e[s];else if(this.element.getAttribute("data-"+s)){var n=this.element.getAttribute("data-"+s);try{i[s]=JSON.parse(n)}catch(e){i[s]=n}}else i[s]=t[s];return i}}]),e}();if("undefined"!=typeof document&&new UniversalTilt(document.querySelectorAll("[data-tilt]")),window.jQuery){var $=window.jQuery;$.fn.universalTilt=function(e){new UniversalTilt(this,e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);

dist/universal-tilt.js

 /*!
-* universal-tilt.js v1.0.1
+* universal-tilt.js v1.0.2
 * Created 2018 by Jakub Biesiada
@@ -340,3 +340,5 @@ * Original idea: https://github.com/gijsroge/tilt.js
 // autoinit
-const AUTO_INIT = new UniversalTilt(document.querySelectorAll('[data-tilt]'));
+if (typeof document !== 'undefined') {
+  new UniversalTilt(document.querySelectorAll('[data-tilt]'));
+}
 
@@ -343,0 +345,0 @@ // jQuery

dist/universal-tilt.min.js

 /*!
-* universal-tilt.js v1.0.1
+* universal-tilt.js v1.0.2
 * Created 2018 by Jakub Biesiada
@@ -7,2 +7,2 @@ * Original idea: https://github.com/gijsroge/tilt.js
 */
-class UniversalTilt{constructor(e,t={}){e.length>0?this.init(e,t):0!==e.length&&(this.element=e,this.width=null,this.height=null,this.left=null,this.top=null,this.timeout=null,this.settings=this.settings(t),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform=`perspective(${this.settings.perspective}px)`,this.addEventListeners())}init(e,t){for(let i=0;i<e.length;i++)this.universalTilt=new UniversalTilt(e[i],t)}isMobile(){if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement&&this.settings.mobile)return!0}addEventListeners(){this.isMobile()?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):(this.onMouseMoveBind=this.onMouseMove.bind(this),"element"===this.settings["position-base"]?this.base=this.element:"window"===this.settings["position-base"]&&(this.base=window),this.base.addEventListener("mouseenter",()=>this.onMouseEnter()),this.base.addEventListener("mousemove",this.onMouseMoveBind),this.base.addEventListener("mouseleave",()=>this.onMouseLeave()))}onMouseEnter(e){this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onMouseEnter&&this.settings.onMouseEnter(this.element)}onMouseMove(e){this.event=e,this.updateElementPosition(),window.requestAnimationFrame(()=>this.update()),"function"==typeof this.settings.onMouseMove&&this.settings.onMouseMove(this.element)}onMouseLeave(e){this.transitions(),window.requestAnimationFrame(()=>this.reset()),"function"==typeof this.settings.onMouseLeave&&this.settings.onMouseLeave(this.element)}onDeviceMove(e){this.update(),this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onDeviceMove&&this.settings.onDeviceMove(this.element)}reset(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform=`perspective(${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"})}getValues(){let e,t;if(this.isMobile()){e=event.accelerationIncludingGravity.x/4,t=event.accelerationIncludingGravity.y/4;let i,s;90===window.orientation?(s=(1-t)/2,t=i=(1+e)/2,e=s):-90===window.orientation?(s=(1+t)/2,t=i=(1-e)/2,e=s):0===window.orientation?(t=s=(1+t)/2,e=i=(1+e)/2):180===window.orientation&&(t=s=(1-t)/2,e=i=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):"window"===this.settings["position-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);let i=(this.settings.max/2-e*this.settings.max).toFixed(2),s=(t*this.settings.max-this.settings.max/2).toFixed(2),n=Math.atan2(e-.5,.5-t)*(180/Math.PI);return{tiltX:this.reverse*i,tiltY:this.reverse*s,angle:n}}updateElementPosition(){let e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}update(){let e=this.getValues();this.element.style.transform=`perspective(${this.settings.perspective}px)\n     rotateX(${this.settings.disabled&&"X"===this.settings.disabled.toUpperCase()?0:e.tiltY}deg)\n     rotateY(${this.settings.disabled&&"Y"===this.settings.disabled.toUpperCase()?0:e.tiltX}deg)\n     scale3d(${this.settings.scale}, ${this.settings.scale}, ${this.settings.scale})`,this.settings.shine&&Object.assign(this.shineElement.style,{transform:`rotate(${e.angle}deg) translate3d(-50%, -50%, 0)`,opacity:`${this.settings["shine-opacity"]}`}),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:e}))}shine(){const e=document.createElement("div");e.classList.add("shine");const t=document.createElement("div");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:`${2*this.element.offsetWidth}px`,height:`${2*this.element.offsetWidth}px`,transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}transitions(){clearTimeout(this.timeout),this.element.style.transition=`all ${this.settings.speed}ms ${this.settings.easing}`,this.settings.shine&&(this.shineElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.timeout=setTimeout(()=>{this.element.style.transition="",this.settings.shine&&(this.shineElement.style.transition="")},this.settings.speed)}settings(e){let t={"position-base":"element",reset:!0,mobile:!0,shine:!1,"shine-opacity":0,"shine-save":!1,max:35,perspective:1e3,scale:1,disabled:null,reverse:!1,speed:300,easing:"cubic-bezier(.03,.98,.52,.99)",onMouseEnter:null,onMouseMove:null,onMouseLeave:null,onDeviceMove:null},i={};for(let s in t)if(s in e)i[s]=e[s];else if(this.element.getAttribute(`data-${s}`)){let e=this.element.getAttribute(`data-${s}`);try{i[s]=JSON.parse(e)}catch(t){i[s]=e}}else i[s]=t[s];return i}}const AUTO_INIT=new UniversalTilt(document.querySelectorAll("[data-tilt]"));if(window.jQuery){window.jQuery.fn.universalTilt=function(e){new UniversalTilt(this,e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);
+class UniversalTilt{constructor(e,t={}){e.length>0?this.init(e,t):0!==e.length&&(this.element=e,this.width=null,this.height=null,this.left=null,this.top=null,this.timeout=null,this.settings=this.settings(t),this.reverse=this.settings.reverse?-1:1,this.settings.shine&&this.shine(),this.element.style.transform=`perspective(${this.settings.perspective}px)`,this.addEventListeners())}init(e,t){for(let i=0;i<e.length;i++)this.universalTilt=new UniversalTilt(e[i],t)}isMobile(){if(window.DeviceMotionEvent&&"ontouchstart"in document.documentElement&&this.settings.mobile)return!0}addEventListeners(){this.isMobile()?(this.onDeviceMoveBind=this.onDeviceMove.bind(this),window.addEventListener("devicemotion",this.onDeviceMoveBind)):(this.onMouseMoveBind=this.onMouseMove.bind(this),"element"===this.settings["position-base"]?this.base=this.element:"window"===this.settings["position-base"]&&(this.base=window),this.base.addEventListener("mouseenter",()=>this.onMouseEnter()),this.base.addEventListener("mousemove",this.onMouseMoveBind),this.base.addEventListener("mouseleave",()=>this.onMouseLeave()))}onMouseEnter(e){this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onMouseEnter&&this.settings.onMouseEnter(this.element)}onMouseMove(e){this.event=e,this.updateElementPosition(),window.requestAnimationFrame(()=>this.update()),"function"==typeof this.settings.onMouseMove&&this.settings.onMouseMove(this.element)}onMouseLeave(e){this.transitions(),window.requestAnimationFrame(()=>this.reset()),"function"==typeof this.settings.onMouseLeave&&this.settings.onMouseLeave(this.element)}onDeviceMove(e){this.update(),this.updateElementPosition(),this.transitions(),"function"==typeof this.settings.onDeviceMove&&this.settings.onDeviceMove(this.element)}reset(){this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.settings.reset&&(this.element.style.transform=`perspective(${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"})}getValues(){let e,t;if(this.isMobile()){e=event.accelerationIncludingGravity.x/4,t=event.accelerationIncludingGravity.y/4;let i,s;90===window.orientation?(s=(1-t)/2,t=i=(1+e)/2,e=s):-90===window.orientation?(s=(1+t)/2,t=i=(1-e)/2,e=s):0===window.orientation?(t=s=(1+t)/2,e=i=(1+e)/2):180===window.orientation&&(t=s=(1-t)/2,e=i=(1-e)/2)}else"element"===this.settings["position-base"]?(e=(this.event.clientX-this.left)/this.width,t=(this.event.clientY-this.top)/this.height):"window"===this.settings["position-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);let i=(this.settings.max/2-e*this.settings.max).toFixed(2),s=(t*this.settings.max-this.settings.max/2).toFixed(2),n=Math.atan2(e-.5,.5-t)*(180/Math.PI);return{tiltX:this.reverse*i,tiltY:this.reverse*s,angle:n}}updateElementPosition(){let e=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=e.left,this.top=e.top}update(){let e=this.getValues();this.element.style.transform=`perspective(${this.settings.perspective}px)\n     rotateX(${this.settings.disabled&&"X"===this.settings.disabled.toUpperCase()?0:e.tiltY}deg)\n     rotateY(${this.settings.disabled&&"Y"===this.settings.disabled.toUpperCase()?0:e.tiltX}deg)\n     scale3d(${this.settings.scale}, ${this.settings.scale}, ${this.settings.scale})`,this.settings.shine&&Object.assign(this.shineElement.style,{transform:`rotate(${e.angle}deg) translate3d(-50%, -50%, 0)`,opacity:`${this.settings["shine-opacity"]}`}),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:e}))}shine(){const e=document.createElement("div");e.classList.add("shine");const t=document.createElement("div");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:`${2*this.element.offsetWidth}px`,height:`${2*this.element.offsetWidth}px`,transform:"rotate(180deg) translate3d(-50%, -50%, 0)","transform-origin":"0% 0%",opacity:"0"})}transitions(){clearTimeout(this.timeout),this.element.style.transition=`all ${this.settings.speed}ms ${this.settings.easing}`,this.settings.shine&&(this.shineElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.timeout=setTimeout(()=>{this.element.style.transition="",this.settings.shine&&(this.shineElement.style.transition="")},this.settings.speed)}settings(e){let t={"position-base":"element",reset:!0,mobile:!0,shine:!1,"shine-opacity":0,"shine-save":!1,max:35,perspective:1e3,scale:1,disabled:null,reverse:!1,speed:300,easing:"cubic-bezier(.03,.98,.52,.99)",onMouseEnter:null,onMouseMove:null,onMouseLeave:null,onDeviceMove:null},i={};for(let s in t)if(s in e)i[s]=e[s];else if(this.element.getAttribute(`data-${s}`)){let e=this.element.getAttribute(`data-${s}`);try{i[s]=JSON.parse(e)}catch(t){i[s]=e}}else i[s]=t[s];return i}}if("undefined"!=typeof document&&new UniversalTilt(document.querySelectorAll("[data-tilt]")),window.jQuery){window.jQuery.fn.universalTilt=function(e){new UniversalTilt(this,e)}}"function"==typeof define&&define.amd?define("UniversalTilt",[],function(){return UniversalTilt}):"undefined"==typeof exports||exports.nodeType||("undefined"!=typeof module&&!module.nodeType&&module.exports&&(exports=module.exports=UniversalTilt),exports.default=UniversalTilt);

package.json

 {
   "name": "universal-tilt.js",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "JavaScript & jQuery parallax tilt effect",
@@ -5,0 +5,0 @@ "main": "dist/universal-tilt.js",

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

42017

increased by0.32%

Lines of code

623

increased by0.65%

No dependency changes