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;
+
+}());