add project setup with package.json, babel, rollup and build + deploy scripts

.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,96 @@
+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';
+
+const pkg = require('./package.json');
+const external = !!pkg.dependencies ? Object.keys(pkg.dependencies) : [];
+
+rollup({
+  entry: 'src/vanilla-tilt.js',
+  plugins: [
+    nodeResolve({
+      module: true,
+      jsnext: true,
+      main: true,
+      extensions: ['.js', '.json'],
+      preferBuiltins: false
+    })
+  ]
+}).then(bundle => bundle.write({
+  dest: pkg.module,
+  format: 'es'
+}));
+
+
+
+rollup({
+  entry: 'src/vanilla-tilt.js',
+  plugins: [
+    nodeResolve({
+      jsnext: true,
+      main: true
+    }),
+    babel(babelrc()),
+    commonjs()
+  ]
+}).then(bundle => bundle.write({
+  dest: pkg.main,
+  format: 'cjs'
+})).catch(err => console.log(err.stack));
+
+
+
+rollup({
+  entry: 'src/vanilla-tilt.js',
+  plugins: [
+    nodeResolve({
+      jsnext: true,
+      main: true
+    }),
+    babel(babelrc()),
+    commonjs()
+  ],
+  external: external
+}).then(bundle => bundle.write({
+  dest: pkg.dist,
+  moduleName: 'VanillaTilt',
+  format: 'iife'
+})).catch(err => console.log(err.stack));
+
+
+
+
+
+// import babel from 'rollup-plugin-babel';
+// import babelrc from 'babelrc-rollup';
+// // import istanbul from 'rollup-plugin-istanbul';
+
+// let pkg = require('./package.json');
+// let external = !!pkg.dependencies ? Object.keys(pkg.dependencies) : [];
+
+// export default {
+//   entry: 'src/vanilla-tilt.js',
+//   plugins: [
+//     // babel(babelrc()),
+//     // istanbul({
+//     //   exclude: ['test/**/*', 'node_modules/**/*']
+//     // })
+//   ],
+//   external: external,
+//   // external: external,
+//   targets: [
+//     {
+//       dest: pkg.dist,
+//       format: 'iife',
+//       moduleName: 'VanillaTilt',
+//       sourceMap: false
+//     },
+//     {
+//       dest: pkg.module,
+//       format: 'es',
+//       sourceMap: false
+//     }
+//   ]
+// };

dist/vanilla-tilt.js

@@ -0,0 +1,207 @@
+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 micku7zu on 1/27/2017.
+ * Original idea: http://gijsroge.github.io/tilt.js/
+ * MIT License.
+ * Version 1.0.0
+ */
+
+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.width = this.element.offsetWidth;
+    this.height = this.element.offsetHeight;
+    this.left = this.element.offsetLeft;
+    this.top = this.element.offsetTop;
+
+    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.pageX - this.left) / this.width;
+    var y = (this.event.pageY - 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.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: 20,
+      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 (typeof elements === 'string') {
+      elements = document.querySelectorAll(elements);
+    }
+
+    if (elements instanceof Node) {
+      elements = [elements];
+    } else 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;
+}();
+
+module.exports = exports["default"];
+
+return VanillaTilt;
+
+}());

package.json

@@ -0,0 +1,62 @@
+{
+  "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",
+    "run-proxy": "^1.0.1"
+  },
+  "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"
+  }
+}