Implemented roll-up and done some minor chores

- added roll-up
- extracted functionalities
- refactor to es6 syntax
- prep for testing

Author: vycoder

.npmignore

@@ -0,0 +1,9 @@
+# raw
+src
+
+# config
+rollup.config.js
+
+# tests
+test
+coverage

lib/vue-animate-onscroll.cjs.js

@@ -2,7 +2,14 @@
   "name": "vue-animate-onscroll",
   "version": "1.0.1",
   "description": "A simple Vue directive that animates element as they scroll into view.",
-  "main": "src/index.js",
+  "main": "dist/vue-animate-onscroll.cjs.js",
+  "module": "dist/vue-animate-onscroll.es.js",
+  "jsnext:main": "dist/vue-animate-onscroll.es.js",
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "npm run clean && rollup --config rollup.config.js",
+    "deploy": "npm build && npm version patch && npm publish"
+  },
   "author": "yev",
   "repository": {
     "type": "git",
@@ -15,5 +22,10 @@
     "reveal"
   ],
   "license": "MIT",
-  "dependencies": {}
+  "dependencies": {},
+  "devDependencies": {
+    "rimraf": "^2.6.2",
+    "rollup": "^0.66.4",
+    "rollup-plugin-terser": "^3.0.0"
+  }
 }

lib/vue-animate-onscroll.es.js

@@ -0,0 +1,22 @@
+import { terser } from 'rollup-plugin-terser'
+
+// Due to bug [Breaks with multiple outputs](https://github.com/TrySound/rollup-plugin-terser/issues/5) I had to create multiple configuration instead of a simpler one.
+
+export default [
+  {
+    input: 'src/index.js',
+    output: {
+      format: 'es',
+      file: 'lib/vue-animate-onscroll.es.js'
+    },
+    plugins: [ terser() ]
+  },
+  {
+    input: 'src/index.js',
+    output: {
+      format: 'cjs',
+      file: 'lib/vue-animate-onscroll.cjs.js'
+    },
+    plugins: [ terser() ]
+  }
+]

package.json

@@ -1,65 +1,21 @@
-var ScrollAnimate = function(el) {
-
-  var oldClasses = el.className;
-
-  function isInScrollView(rect){
-    return rect.top < document.documentElement.clientHeight && rect.bottom > 0;
-  }
-
-  function isDirectionAgnostic(params) {
-    return typeof params === 'string';
-  }
-
-  function shouldResetAnimation(isUpwards, modifiers, params) {
-    return modifiers.repeat &&
-      (isUpwards && params.down || !isUpwards && params.up);
-  }
-
-  return {
-    dispatch: function(isUpwards, binding) {
-      var params = binding.value;
-      var modifiers = binding.modifiers;
-
-      if(!isInScrollView(el.getBoundingClientRect())) {
-        if (modifiers.repeat && isDirectionAgnostic(params)) {
-          el.className = oldClasses;
-        }
-        return;
-      }
-
-      if (isDirectionAgnostic(params)) {
-        el.className = params;
-        return;
-      }
-
-      if (params.down && params.up) { // implicit repeat
-        el.className = isUpwards ? params.up : params.down;
-        return;
-      }
-      
-      if(shouldResetAnimation(isUpwards, modifiers, params)) {
-        el.className = oldClasses;
-        return;
-      }
-      el.className = params.up || params.down;
-    }
-  }
-}
+import ScrollAnimate from './scroll-animate'
 
 export default {
+  ScrollAnimate,
   install(Vue) {
-    var scrollAnimate;
+    let scrollAnimate;
     Vue.directive('animate-onscroll', {
       bind(el, binding) {
-        scrollAnimate = ScrollAnimate(el);
+        scrollAnimate = ScrollAnimate()
       },
       inserted(el, binding) {
+        const currentClassName = el.className
         window.addEventListener('scroll', function() {
-          var isUpwards = this.oldScroll > this.scrollY;
-          scrollAnimate.dispatch(isUpwards, binding);
-          this.oldScroll = this.scrollY;
-        });
+          const isUpwards = this.oldScroll > this.scrollY
+          scrollAnimate.run(el, binding, {isUpwards, currentClassName})
+          this.oldScroll = this.scrollY
+        })
       }
-    });
+    })
   }
 }

rollup.config.js

@@ -0,0 +1,43 @@
+export default () => {
+
+  const getClientHeight = () => document.documentElement.clientHeight
+
+  const isInScrollView = ({top, bottom}) => top < getClientHeight() && bottom > 0
+  
+  const isDirectionAgnostic = (params) => typeof params === 'string'
+
+  const shouldResetAnimation = ({params, isUpwards, repeat}) => repeat &&
+                                    (isUpwards && params.down || !isUpwards && params.up)
+
+  const applyAnimationClass = (el, current, newClass) => el.className = `${current} ${(newClass || '')}`
+
+  return {
+    run(el, {value: params, modifiers}, {isUpwards, currentClassName}) {
+
+      if(!isInScrollView(el.getBoundingClientRect())) {
+        if (modifiers.repeat && isDirectionAgnostic(params)) {
+          return applyAnimationClass(el, currentClassName)
+        }
+        return
+      }
+
+      if (isDirectionAgnostic(params)) {
+        return applyAnimationClass(el, currentClassName, params)
+      }
+
+      if (params.down && params.up) { // implicit repeat
+        const animationClass = isUpwards ? params.up : params.down
+        return applyAnimationClass(el, currentClassName, animationClass)
+      }
+      
+      if(shouldResetAnimation({params, isUpwards, ...modifiers})) {
+        return applyAnimationClass(el, currentClassName)
+      }
+      return applyAnimationClass(el, currentClassName, params.up || params.down)
+    }
+  }
+  
+}
+
+
+