Merge pull request #1 from soenkekluth/master

add project setup && build + deploy and release tasks

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["es2015", {"loose": true}]
+  ],
+
+  "plugins": [
+    "transform-class-properties",
+    "add-module-exports"
+  ]
+}

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -1 +1,4 @@
+node_modules
+lib
 .idea
+.tern-port

build.js

@@ -0,0 +1,117 @@
+import { rollup } from 'rollup';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import babel from 'rollup-plugin-babel';
+import babelrc from 'babelrc-rollup';
+import { minify } from 'uglify-js';
+import fs from 'fs';
+
+const pkg = require('./package.json');
+const external = !!pkg.dependencies ? Object.keys(pkg.dependencies) : [];
+
+/*
+  create the lib for publishing to npm
+*/
+
+rollup({
+    entry: 'src/vanilla-tilt.js',
+    plugins: [
+      nodeResolve({
+        module: true,
+        jsnext: true,
+        main: true,
+      })
+    ],
+    external: external
+  })
+  .then(bundle => bundle.write({
+    dest: pkg.module,
+    format: 'es'
+  })).catch(err => console.log(err.stack));
+
+
+rollup({
+    entry: 'src/vanilla-tilt.js',
+    plugins: [
+      nodeResolve({
+        module: true,
+        jsnext: true,
+        main: true,
+      }),
+      babel(babelrc()),
+      commonjs()
+    ],
+    external: external
+  })
+  .then(bundle => bundle.write({
+    dest: pkg.main,
+    format: 'cjs'
+  })).catch(err => console.log(err.stack));
+
+
+/*
+  create dist for using as script in html
+*/
+
+rollup({
+    entry: 'src/vanilla-tilt.js',
+    plugins: [
+      nodeResolve({
+        module: true,
+        jsnext: true,
+        main: true,
+      })
+    ],
+    external: external
+  })
+  .then((bundle) => {
+    bundle.write({
+        moduleName: 'VanillaTilt',
+        format: 'iife',
+        dest: pkg.dist,
+      })
+      .then(() => {
+        const code = minify(pkg.dist, {
+          mangle: { except: ['VanillaTilt'] }
+        }).code;
+
+        fs.writeFileSync(pkg.dist.replace('.js', '.min.js'), code);
+        return bundle;
+      })
+  }).catch(err => console.log(err.stack));
+
+
+
+
+rollup({
+  entry: 'src/vanilla-tilt.js',
+  plugins: [
+    nodeResolve({
+      module: true,
+      jsnext: true,
+      main: true
+    }),
+    babel(babelrc()),
+    commonjs(),
+  ],
+  external: external
+})
+.then((bundle) => {
+
+  const dest =  pkg.dist.replace('.js', '.babel.js');
+  bundle.write({
+      moduleName: 'VanillaTilt',
+      format: 'iife',
+      dest:dest,
+    })
+    .then(() => {
+      const code = minify(dest, {
+        mangle: { except: ['VanillaTilt'] }
+      }).code;
+
+      fs.writeFileSync(dest.replace('.js', '.min.js'), code);
+      return bundle;
+    })
+
+})
+.catch(err => console.log(err.stack));

dist/vanilla-tilt.babel.js

@@ -0,0 +1,218 @@
+var VanillaTilt = (function () {
+'use strict';
+
+var classCallCheck = function (instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+
+/**
+ * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
+ * Original idea: https://github.com/gijsroge/tilt.js
+ * MIT License.
+ * Version 1.0.1
+ */
+
+var VanillaTilt = function () {
+    function VanillaTilt(element) {
+        var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        classCallCheck(this, VanillaTilt);
+
+        if (!(element instanceof Node)) {
+            throw "Can't initialize VanillaTilt because " + element + " is not a Node.";
+        }
+
+        this.width = null;
+        this.height = null;
+        this.left = null;
+        this.top = null;
+        this.transitionTimeout = null;
+        this.updateCall = null;
+
+        this.updateBind = this.update.bind(this);
+
+        this.element = element;
+        this.settings = this.extendSettings(settings);
+
+        this.addEventListeners();
+    }
+
+    VanillaTilt.prototype.addEventListeners = function addEventListeners() {
+        this.onMouseEnterBind = this.onMouseEnter.bind(this);
+        this.onMouseMoveBind = this.onMouseMove.bind(this);
+        this.onMouseLeaveBind = this.onMouseLeave.bind(this);
+
+        this.element.addEventListener("mouseenter", this.onMouseEnterBind);
+        this.element.addEventListener("mousemove", this.onMouseMoveBind);
+        this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+    };
+
+    VanillaTilt.prototype.removeEventListeners = function removeEventListeners() {
+        this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
+        this.element.removeEventListener("mousemove", this.onMouseMoveBind);
+        this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+    };
+
+    VanillaTilt.prototype.destroy = function destroy() {
+        this.removeEventListeners();
+        this.element.vanillaTilt = null;
+        delete this.element.vanillaTilt;
+
+        this.element = null;
+    };
+
+    VanillaTilt.prototype.onMouseEnter = function onMouseEnter(event) {
+        this.updateElementPosition();
+        this.element.style.willChange = "transform";
+        this.setTransition();
+    };
+
+    VanillaTilt.prototype.onMouseMove = function onMouseMove(event) {
+        if (this.updateCall !== null) {
+            cancelAnimationFrame(this.updateCall);
+        }
+
+        this.event = event;
+        this.updateCall = requestAnimationFrame(this.updateBind);
+    };
+
+    VanillaTilt.prototype.onMouseLeave = function onMouseLeave(event) {
+        this.setTransition();
+
+        if (this.settings.reset) {
+            this.reset();
+        }
+    };
+
+    VanillaTilt.prototype.reset = function reset() {
+        var _this = this;
+
+        requestAnimationFrame(function () {
+            _this.event = {
+                pageX: _this.left + _this.width / 2,
+                pageY: _this.top + _this.height / 2
+            };
+
+            _this.element.style.transform = "perspective(" + _this.settings.perspective + "px) " + "rotateX(0deg) " + "rotateY(0deg) " + "scale3d(1, 1, 1)";
+        });
+    };
+
+    VanillaTilt.prototype.getValues = function getValues() {
+        var x = (this.event.clientX - this.left) / this.width;
+        var y = (this.event.clientY - this.top) / this.height;
+
+        x = Math.min(Math.max(x, 0), 1);
+        y = Math.min(Math.max(y, 0), 1);
+
+        var tiltX = (this.settings.max / 2 - x * this.settings.max).toFixed(2);
+        var tiltY = (y * this.settings.max - this.settings.max / 2).toFixed(2);
+
+        return {
+            tiltX: tiltX,
+            tiltY: tiltY,
+            percentageX: x * 100,
+            percentageY: y * 100
+        };
+    };
+
+    VanillaTilt.prototype.updateElementPosition = function updateElementPosition() {
+        var rect = this.element.getBoundingClientRect();
+
+        this.width = this.element.offsetWidth;
+        this.height = this.element.offsetHeight;
+        this.left = rect.left;
+        this.top = rect.top;
+    };
+
+    VanillaTilt.prototype.update = function update() {
+        var values = this.getValues();
+
+        this.element.style.transform = "perspective(" + this.settings.perspective + "px) " + "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " + "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " + "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
+
+        this.element.dispatchEvent(new CustomEvent("tiltChange", {
+            "detail": values
+        }));
+
+        this.updateCall = null;
+    };
+
+    VanillaTilt.prototype.setTransition = function setTransition() {
+        var _this2 = this;
+
+        clearTimeout(this.transitionTimeout);
+        this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
+        this.transitionTimeout = setTimeout(function () {
+            return _this2.element.style.transition = "";
+        }, this.settings.speed);
+    };
+
+    VanillaTilt.prototype.extendSettings = function extendSettings(settings) {
+        var defaultSettings = {
+            max: 35,
+            perspective: 1000,
+            easing: "cubic-bezier(.03,.98,.52,.99)",
+            scale: "1",
+            speed: "300",
+            transition: true,
+            axis: null,
+            reset: true
+        };
+
+        var newSettings = {};
+
+        for (var property in defaultSettings) {
+            if (property in settings) {
+                newSettings[property] = settings[property];
+            } else if (this.element.hasAttribute("data-tilt-" + property)) {
+                var attribute = this.element.getAttribute("data-tilt-" + property);
+                try {
+                    newSettings[property] = JSON.parse(attribute);
+                } catch (e) {
+                    newSettings[property] = attribute;
+                }
+            } else {
+                newSettings[property] = defaultSettings[property];
+            }
+        }
+
+        return newSettings;
+    };
+
+    VanillaTilt.init = function init(elements, settings) {
+        if (elements instanceof Node) {
+            elements = [elements];
+        }
+
+        if (elements instanceof NodeList) {
+            elements = [].slice.call(elements);
+        }
+
+        if (!(elements instanceof Array)) {
+            return;
+        }
+
+        elements.forEach(function (element) {
+            if (!("vanillaTilt" in element)) {
+                element.vanillaTilt = new VanillaTilt(element, settings);
+            }
+        });
+    };
+
+    return VanillaTilt;
+}();
+
+if (typeof document !== "undefined") {
+    /* expose the class to window */
+    window.VanillaTilt = VanillaTilt;
+
+    /**
+     * Auto load
+     */
+    VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
+}
+module.exports = exports["default"];
+
+return VanillaTilt;
+
+}());

dist/vanilla-tilt.babel.min.js

@@ -0,0 +1 @@
+var VanillaTilt=function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},VanillaTilt=function(){function VanillaTilt(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(t(this,VanillaTilt),!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" is not a Node.";this.width=null,this.height=null,this.left=null,this.top=null,this.transitionTimeout=null,this.updateCall=null,this.updateBind=this.update.bind(this),this.element=e,this.settings=this.extendSettings(i),this.addEventListeners()}return VanillaTilt.prototype.addEventListeners=function(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.element.addEventListener("mouseenter",this.onMouseEnterBind),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",this.onMouseLeaveBind)},VanillaTilt.prototype.removeEventListeners=function(){this.element.removeEventListener("mouseenter",this.onMouseEnterBind),this.element.removeEventListener("mousemove",this.onMouseMoveBind),this.element.removeEventListener("mouseleave",this.onMouseLeaveBind)},VanillaTilt.prototype.destroy=function(){this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null},VanillaTilt.prototype.onMouseEnter=function(t){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()},VanillaTilt.prototype.onMouseMove=function(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)},VanillaTilt.prototype.onMouseLeave=function(t){this.setTransition(),this.settings.reset&&this.reset()},VanillaTilt.prototype.reset=function(){var t=this;requestAnimationFrame(function(){t.event={pageX:t.left+t.width/2,pageY:t.top+t.height/2},t.element.style.transform="perspective("+t.settings.perspective+"px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"})},VanillaTilt.prototype.getValues=function(){var t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height;t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1);var i=(this.settings.max/2-t*this.settings.max).toFixed(2),n=(e*this.settings.max-this.settings.max/2).toFixed(2);return{tiltX:i,tiltY:n,percentageX:100*t,percentageY:100*e}},VanillaTilt.prototype.updateElementPosition=function(){var t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top},VanillaTilt.prototype.update=function(){var t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null},VanillaTilt.prototype.setTransition=function(){var t=this;clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.transitionTimeout=setTimeout(function(){return t.element.style.transition=""},this.settings.speed)},VanillaTilt.prototype.extendSettings=function(t){var e={max:35,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:"1",speed:"300",transition:!0,axis:null,reset:!0},i={};for(var n in e)if(n in t)i[n]=t[n];else if(this.element.hasAttribute("data-tilt-"+n)){var s=this.element.getAttribute("data-tilt-"+n);try{i[n]=JSON.parse(s)}catch(t){i[n]=s}}else i[n]=e[n];return i},VanillaTilt.init=function(t,e){t instanceof Node&&(t=[t]),t instanceof NodeList&&(t=[].slice.call(t)),t instanceof Array&&t.forEach(function(t){"vanillaTilt"in t||(t.vanillaTilt=new VanillaTilt(t,e))})},VanillaTilt}();return"undefined"!=typeof document&&(window.VanillaTilt=VanillaTilt,VanillaTilt.init(document.querySelectorAll("[data-tilt]"))),module.exports=exports.default,VanillaTilt}();

dist/vanilla-tilt.js

@@ -0,0 +1,209 @@
+var VanillaTilt = (function () {
+'use strict';
+
+/**
+ * Created by Șandor Sergiu (micku7zu) on 1/27/2017.
+ * Original idea: https://github.com/gijsroge/tilt.js
+ * MIT License.
+ * Version 1.0.1
+ */
+
+
+class VanillaTilt {
+    constructor(element, settings = {}) {
+        if (!(element instanceof Node)) {
+            throw("Can't initialize VanillaTilt because " + element + " is not a Node.");
+        }
+
+        this.width = null;
+        this.height = null;
+        this.left = null;
+        this.top = null;
+        this.transitionTimeout = null;
+        this.updateCall = null;
+
+        this.updateBind = this.update.bind(this);
+
+        this.element = element;
+        this.settings = this.extendSettings(settings);
+
+        this.addEventListeners();
+    }
+
+    addEventListeners() {
+        this.onMouseEnterBind = this.onMouseEnter.bind(this);
+        this.onMouseMoveBind = this.onMouseMove.bind(this);
+        this.onMouseLeaveBind = this.onMouseLeave.bind(this);
+
+        this.element.addEventListener("mouseenter", this.onMouseEnterBind);
+        this.element.addEventListener("mousemove", this.onMouseMoveBind);
+        this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+    }
+
+    removeEventListeners() {
+        this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
+        this.element.removeEventListener("mousemove", this.onMouseMoveBind);
+        this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+    }
+
+    destroy() {
+        this.removeEventListeners();
+        this.element.vanillaTilt = null;
+        delete this.element.vanillaTilt;
+
+        this.element = null;
+    }
+
+    onMouseEnter(event) {
+        this.updateElementPosition();
+        this.element.style.willChange = "transform";
+        this.setTransition();
+    }
+
+    onMouseMove(event) {
+        if (this.updateCall !== null) {
+            cancelAnimationFrame(this.updateCall);
+        }
+
+        this.event = event;
+        this.updateCall = requestAnimationFrame(this.updateBind);
+    }
+
+    onMouseLeave(event) {
+        this.setTransition();
+
+        if (this.settings.reset) {
+            this.reset();
+        }
+    }
+
+    reset() {
+        requestAnimationFrame(() => {
+            this.event = {
+                pageX: this.left + this.width / 2,
+                pageY: this.top + this.height / 2
+            };
+
+            this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
+                "rotateX(0deg) " +
+                "rotateY(0deg) " +
+                "scale3d(1, 1, 1)";
+        });
+    }
+
+    getValues() {
+        let x = (this.event.clientX - this.left) / this.width;
+        let y = (this.event.clientY - this.top) / this.height;
+
+        x = Math.min(Math.max(x, 0), 1);
+        y = Math.min(Math.max(y, 0), 1);
+
+        let tiltX = (this.settings.max / 2 - x * this.settings.max).toFixed(2);
+        let tiltY = (y * this.settings.max - this.settings.max / 2).toFixed(2);
+
+        return {
+            tiltX: tiltX,
+            tiltY: tiltY,
+            percentageX: x * 100,
+            percentageY: y * 100
+        };
+    }
+
+    updateElementPosition() {
+        let rect = this.element.getBoundingClientRect();
+
+        this.width = this.element.offsetWidth;
+        this.height = this.element.offsetHeight;
+        this.left = rect.left;
+        this.top = rect.top;
+    }
+
+    update() {
+        let values = this.getValues();
+
+        this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
+            "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
+            "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
+            "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
+
+
+        this.element.dispatchEvent(new CustomEvent("tiltChange", {
+            "detail": values
+        }));
+
+        this.updateCall = null;
+    }
+
+    setTransition() {
+        clearTimeout(this.transitionTimeout);
+        this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
+        this.transitionTimeout = setTimeout(() => this.element.style.transition = "", this.settings.speed);
+    }
+
+    extendSettings(settings) {
+        let defaultSettings = {
+            max: 35,
+            perspective: 1000,
+            easing: "cubic-bezier(.03,.98,.52,.99)",
+            scale: "1",
+            speed: "300",
+            transition: true,
+            axis: null,
+            reset: true
+        };
+
+        let newSettings = {};
+
+        for (var property in defaultSettings) {
+            if (property in settings) {
+                newSettings[property] = settings[property];
+            } else if (this.element.hasAttribute("data-tilt-" + property)) {
+                let attribute = this.element.getAttribute("data-tilt-" + property);
+                try {
+                    newSettings[property] = JSON.parse(attribute);
+                } catch (e) {
+                    newSettings[property] = attribute;
+                }
+
+            } else {
+                newSettings[property] = defaultSettings[property];
+            }
+        }
+
+        return newSettings;
+    }
+
+    static init(elements, settings) {
+        if (elements instanceof Node) {
+            elements = [elements];
+        }
+
+        if (elements instanceof NodeList) {
+            elements = [].slice.call(elements);
+        }
+
+        if (!(elements instanceof Array)) {
+            return;
+        }
+
+        elements.forEach((element) => {
+            if (!("vanillaTilt" in element)) {
+                element.vanillaTilt = new VanillaTilt(element, settings);
+            }
+        });
+    }
+}
+
+if(typeof document !== "undefined") {
+  /* expose the class to window */
+  window.VanillaTilt = VanillaTilt;
+
+  /**
+   * Auto load
+   */
+  VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
+}
+
+return VanillaTilt;
+
+}());

dist/vanilla-tilt.min.js

@@ -0,0 +1 @@
+var VanillaTilt=function(){"use strict";class t{constructor(t,e={}){if(!(t instanceof Node))throw"Can't initialize VanillaTilt because "+t+" is not a Node.";this.width=null,this.height=null,this.left=null,this.top=null,this.transitionTimeout=null,this.updateCall=null,this.updateBind=this.update.bind(this),this.element=t,this.settings=this.extendSettings(e),this.addEventListeners()}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.element.addEventListener("mouseenter",this.onMouseEnterBind),this.element.addEventListener("mousemove",this.onMouseMoveBind),this.element.addEventListener("mouseleave",this.onMouseLeaveBind)}removeEventListeners(){this.element.removeEventListener("mouseenter",this.onMouseEnterBind),this.element.removeEventListener("mousemove",this.onMouseMoveBind),this.element.removeEventListener("mouseleave",this.onMouseLeaveBind)}destroy(){this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onMouseEnter(t){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(t){this.setTransition(),this.settings.reset&&this.reset()}reset(){requestAnimationFrame(()=>{this.event={pageX:this.left+this.width/2,pageY:this.top+this.height/2},this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)"})}getValues(){let t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height;t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1);let i=(this.settings.max/2-t*this.settings.max).toFixed(2),s=(e*this.settings.max-this.settings.max/2).toFixed(2);return{tiltX:i,tiltY:s,percentageX:100*t,percentageY:100*e}}updateElementPosition(){let t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.transitionTimeout=setTimeout(()=>this.element.style.transition="",this.settings.speed)}extendSettings(t){let e={max:35,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:"1",speed:"300",transition:!0,axis:null,reset:!0},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){e instanceof Node&&(e=[e]),e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}();

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "vanilla-tilt",
+  "version": "1.1.0",
+  "description": "Tilt.js library without jQuery dependency.",
+  "main": "lib/vanilla-tilt.js",
+  "dist": "dist/vanilla-tilt.js",
+  "module": "lib/vanilla-tilt.es2015.js",
+  "jsnext:main": "lib/vanilla-tilt.es2015.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "run build:lib && cp ./README.md ./lib",
+    "build:lib": "cross-env NODE_ENV=production babel-node ./build.js",
+    "build:babel": "cross-env NODE_ENV=production babel src -d lib",
+    "deploy": "run build && gh-pages demo",
+    "release:patch": "release patch",
+    "release:minor": "release minor",
+    "release:major": "release major",
+    "release": "release"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.22.2",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-external-helpers": "^6.22.0",
+    "babel-plugin-transform-class-properties": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-stage-0": "^6.22.0",
+    "babelrc-rollup": "^3.0.0",
+    "cash-cp": "^0.2.0",
+    "cross-env": "^3.1.4",
+    "gh-pages": "^0.12.0",
+    "release-script": "^1.0.2",
+    "rollup": "^0.41.4",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^7.0.0",
+    "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-plugin-uglify": "^1.0.1",
+    "run-proxy": "^1.0.1",
+    "uglify-js": "mishoo/UglifyJS2#harmony"
+  },
+  "release-script": {
+    "altPkgRootFolder": "lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/micku7zu/vanilla-tilt.js.git"
+  },
+  "keywords": [
+    "tilt",
+    "effect",
+    "vanilla",
+    "js",
+    "60fps"
+  ],
+  "author": "Sönke Kluth <soenke.kluth@gmail.com> (http://soenkekluth.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/micku7zu/vanilla-tilt.js/issues"
+  },
+  "homepage": "https://github.com/micku7zu/vanilla-tilt.js#readme",
+  "dependencies": {
+    "dom-helpers": "^3.2.0"
+  }
+}

src/vanilla-tilt.js

@@ -4,199 +4,198 @@
  * MIT License.
  * Version 1.0.1
  */
-"use strict";
-(function (undefined) {
 
-    class VanillaTilt {
-        constructor(element, settings = {}) {
-            if (!(element instanceof Node)) {
-                throw("Can't initialize VanillaTilt because " + element + " is not a Node.");
-            }
-
-            this.width = null;
-            this.height = null;
-            this.left = null;
-            this.top = null;
-            this.transitionTimeout = null;
-            this.updateCall = null;
-
-            this.updateBind = this.update.bind(this);
-
-            this.element = element;
-            this.settings = this.extendSettings(settings);
-
-            this.addEventListeners();
-        }
-
-        addEventListeners() {
-            this.onMouseEnterBind = this.onMouseEnter.bind(this);
-            this.onMouseMoveBind = this.onMouseMove.bind(this);
-            this.onMouseLeaveBind = this.onMouseLeave.bind(this);
-
-            this.element.addEventListener("mouseenter", this.onMouseEnterBind);
-            this.element.addEventListener("mousemove", this.onMouseMoveBind);
-            this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
-        }
-
-        removeEventListeners() {
-            this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
-            this.element.removeEventListener("mousemove", this.onMouseMoveBind);
-            this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
-        }
-
-        destroy() {
-            this.removeEventListeners();
-            this.element.vanillaTilt = null;
-            delete this.element.vanillaTilt;
-
-            this.element = null;
-        }
-
-        onMouseEnter(event) {
-            this.updateElementPosition();
-            this.element.style.willChange = "transform";
-            this.setTransition();
-        }
-
-        onMouseMove(event) {
-            if (this.updateCall !== null) {
-                cancelAnimationFrame(this.updateCall);
-            }
-
-            this.event = event;
-            this.updateCall = requestAnimationFrame(this.updateBind);
-        }
-
-        onMouseLeave(event) {
-            this.setTransition();
-
-            if (this.settings.reset) {
-                this.reset();
-            }
-        }
-
-        reset() {
-            requestAnimationFrame(() => {
-                this.event = {
-                    pageX: this.left + this.width / 2,
-                    pageY: this.top + this.height / 2
-                };
-
-                this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
-                    "rotateX(0deg) " +
-                    "rotateY(0deg) " +
-                    "scale3d(1, 1, 1)";
-            });
-        }
-
-        getValues() {
-            let x = (this.event.clientX - this.left) / this.width;
-            let y = (this.event.clientY - this.top) / this.height;
-
-            x = Math.min(Math.max(x, 0), 1);
-            y = Math.min(Math.max(y, 0), 1);
-
-            let tiltX = (this.settings.max / 2 - x * this.settings.max).toFixed(2);
-            let tiltY = (y * this.settings.max - this.settings.max / 2).toFixed(2);
-
-            return {
-                tiltX: tiltX,
-                tiltY: tiltY,
-                percentageX: x * 100,
-                percentageY: y * 100
-            };
-        }
-
-        updateElementPosition() {
-            let rect = this.element.getBoundingClientRect();
-
-            this.width = this.element.offsetWidth;
-            this.height = this.element.offsetHeight;
-            this.left = rect.left;
-            this.top = rect.top;
-        }
-
-        update() {
-            let values = this.getValues();
-
-            this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
-                "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
-                "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
-                "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
-
-
-            this.element.dispatchEvent(new CustomEvent("tiltChange", {
-                "detail": values
-            }));
-
-            this.updateCall = null;
-        }
-
-        setTransition() {
-            clearTimeout(this.transitionTimeout);
-            this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
-            this.transitionTimeout = setTimeout(() => this.element.style.transition = "", this.settings.speed);
-        }
-
-        extendSettings(settings) {
-            let defaultSettings = {
-                max: 35,
-                perspective: 1000,
-                easing: "cubic-bezier(.03,.98,.52,.99)",
-                scale: "1",
-                speed: "300",
-                transition: true,
-                axis: null,
-                reset: true
-            };
-
-            let newSettings = {};
-
-            for (var property in defaultSettings) {
-                if (property in settings) {
-                    newSettings[property] = settings[property];
-                } else if (this.element.hasAttribute("data-tilt-" + property)) {
-                    let attribute = this.element.getAttribute("data-tilt-" + property);
-                    try {
-                        newSettings[property] = JSON.parse(attribute);
-                    } catch (e) {
-                        newSettings[property] = attribute;
-                    }
-
-                } else {
-                    newSettings[property] = defaultSettings[property];
-                }
-            }
-
-            return newSettings;
-        }
-
-        static init(elements, settings) {
-            if (elements instanceof Node) {
-                elements = [elements];
-            }
-
-            if (elements instanceof NodeList) {
-                elements = [].slice.call(elements);
-            }
-
-            if (!(elements instanceof Array)) {
-                return;
-            }
-
-            elements.forEach((element) => {
-                if (!("vanillaTilt" in element)) {
-                    element.vanillaTilt = new VanillaTilt(element, settings);
-                }
-            });
-        }
+export default class VanillaTilt {
+  constructor(element, settings = {}) {
+    if (!(element instanceof Node)) {
+      throw ("Can't initialize VanillaTilt because " + element + " is not a Node.");
     }
 
-    /* expose the class to window */
-    window.VanillaTilt = VanillaTilt;
+    this.width = null;
+    this.height = null;
+    this.left = null;
+    this.top = null;
+    this.transitionTimeout = null;
+    this.updateCall = null;
 
-    /**
-     * Auto load
-     */
-    VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
-})();
+    this.updateBind = this.update.bind(this);
+
+    this.element = element;
+    this.settings = this.extendSettings(settings);
+
+    this.addEventListeners();
+  }
+
+  addEventListeners() {
+    this.onMouseEnterBind = this.onMouseEnter.bind(this);
+    this.onMouseMoveBind = this.onMouseMove.bind(this);
+    this.onMouseLeaveBind = this.onMouseLeave.bind(this);
+
+    this.element.addEventListener("mouseenter", this.onMouseEnterBind);
+    this.element.addEventListener("mousemove", this.onMouseMoveBind);
+    this.element.addEventListener("mouseleave", this.onMouseLeaveBind);
+  }
+
+  removeEventListeners() {
+    this.element.removeEventListener("mouseenter", this.onMouseEnterBind);
+    this.element.removeEventListener("mousemove", this.onMouseMoveBind);
+    this.element.removeEventListener("mouseleave", this.onMouseLeaveBind);
+  }
+
+  destroy() {
+    this.removeEventListeners();
+    this.element.vanillaTilt = null;
+    delete this.element.vanillaTilt;
+
+    this.element = null;
+  }
+
+  onMouseEnter(event) {
+    this.updateElementPosition();
+    this.element.style.willChange = "transform";
+    this.setTransition();
+  }
+
+  onMouseMove(event) {
+    if (this.updateCall !== null) {
+      cancelAnimationFrame(this.updateCall);
+    }
+
+    this.event = event;
+    this.updateCall = requestAnimationFrame(this.updateBind);
+  }
+
+  onMouseLeave(event) {
+    this.setTransition();
+
+    if (this.settings.reset) {
+      this.reset();
+    }
+  }
+
+  reset() {
+    requestAnimationFrame(() => {
+      this.event = {
+        pageX: this.left + this.width / 2,
+        pageY: this.top + this.height / 2
+      };
+
+      this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
+        "rotateX(0deg) " +
+        "rotateY(0deg) " +
+        "scale3d(1, 1, 1)";
+    });
+  }
+
+  getValues() {
+    let x = (this.event.clientX - this.left) / this.width;
+    let y = (this.event.clientY - this.top) / this.height;
+
+    x = Math.min(Math.max(x, 0), 1);
+    y = Math.min(Math.max(y, 0), 1);
+
+    let tiltX = (this.settings.max / 2 - x * this.settings.max).toFixed(2);
+    let tiltY = (y * this.settings.max - this.settings.max / 2).toFixed(2);
+
+    return {
+      tiltX: tiltX,
+      tiltY: tiltY,
+      percentageX: x * 100,
+      percentageY: y * 100
+    };
+  }
+
+  updateElementPosition() {
+    let rect = this.element.getBoundingClientRect();
+
+    this.width = this.element.offsetWidth;
+    this.height = this.element.offsetHeight;
+    this.left = rect.left;
+    this.top = rect.top;
+  }
+
+  update() {
+    let values = this.getValues();
+
+    this.element.style.transform = "perspective(" + this.settings.perspective + "px) " +
+      "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " +
+      "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " +
+      "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")";
+
+
+    this.element.dispatchEvent(new CustomEvent("tiltChange", {
+      "detail": values
+    }));
+
+    this.updateCall = null;
+  }
+
+  setTransition() {
+    clearTimeout(this.transitionTimeout);
+    this.element.style.transition = this.settings.speed + "ms " + this.settings.easing;
+    this.transitionTimeout = setTimeout(() => this.element.style.transition = "", this.settings.speed);
+  }
+
+  extendSettings(settings) {
+    let defaultSettings = {
+      max: 35,
+      perspective: 1000,
+      easing: "cubic-bezier(.03,.98,.52,.99)",
+      scale: "1",
+      speed: "300",
+      transition: true,
+      axis: null,
+      reset: true
+    };
+
+    let newSettings = {};
+
+    for (var property in defaultSettings) {
+      if (property in settings) {
+        newSettings[property] = settings[property];
+      } else if (this.element.hasAttribute("data-tilt-" + property)) {
+        let attribute = this.element.getAttribute("data-tilt-" + property);
+        try {
+          newSettings[property] = JSON.parse(attribute);
+        } catch (e) {
+          newSettings[property] = attribute;
+        }
+
+      } else {
+        newSettings[property] = defaultSettings[property];
+      }
+    }
+
+    return newSettings;
+  }
+
+  static init(elements, settings) {
+    if (elements instanceof Node) {
+      elements = [elements];
+    }
+
+    if (elements instanceof NodeList) {
+      elements = [].slice.call(elements);
+    }
+
+    if (!(elements instanceof Array)) {
+      return;
+    }
+
+    elements.forEach((element) => {
+      if (!("vanillaTilt" in element)) {
+        element.vanillaTilt = new VanillaTilt(element, settings);
+      }
+    });
+  }
+}
+
+if (typeof document !== "undefined") {
+  /* expose the class to window */
+  window.VanillaTilt = VanillaTilt;
+
+  /**
+   * Auto load
+   */
+  VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
+}