api updates

index.js

@@ -15,11 +15,11 @@ var getArray = function (arrayLike) {
   return args
 }
 
-var events = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'
+var events = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'
 
-module.exports = function () {
-  // fx(node, attrs, data)
-  if (_.isString(arguments[0]) && arguments.length >= 2) {
+module.exports = {
+  // fx.mount(node, attrs, data)
+  mount: function () {
     var vdom = getVDOM(arguments)
 
     var animate = function (el, initialized, ctx) {
@@ -37,9 +37,11 @@ module.exports = function () {
     }
 
     return m(vdom.tag, vdom.attrs, vdom.children)
-  }
-  // fx(boolean, node, attrs, data)
-  else if (_.isBoolean(arguments[0])) {
+  },
+
+  // fx.toggle(boolean, node, attrs, data)
+  toggle: function () {
+    if (!_.isBoolean(arguments[0])) throw "The first argument to fx.toggle must be a boolean value."
     var value = arguments[0]
     var vdom = getVDOM(getArray(arguments))
 
@@ -58,13 +60,13 @@ module.exports = function () {
 
       if (ctx.state === value) return
       if (value) {
-        var className = 'fx show'
+        var className = 'fx true'
         dom.css('display', 'block')
         dom.addClass(className)
           .one(events, function () {dom.removeClass(className)})
         }
       else {
-        var className = 'fx hide'
+        var className = 'fx false'
         dom.addClass(className)
           .one(events, function () {
             dom.removeClass(className)
@@ -82,9 +84,12 @@ module.exports = function () {
     }
 
     return m(vdom.tag, vdom.attrs, vdom.children)
-  }
-  // fx(array, callback)
-  else if(_.isArray(arguments[0], arguments.length === 2)) {
+  },
+
+  // fx.map(array, callback)
+  map: function () {
+    if (!_.isArray(arguments[0])) throw "The first argument to fx.map() must be an array."
+    if (!_.isFunction(arguments[1])) throw "The second argument to fx.map() must be a function."
     var data = arguments[0], callback = arguments[1]
 
     var elements = _.map(data, callback)
@@ -135,5 +140,33 @@ module.exports = function () {
 
       return delement
     })
+  },
+
+  change: function () {
+    var value = arguments[0]
+    var vdom = getVDOM(getArray(arguments))
+
+    var animate = function (el, initialized, ctx)  {
+      if (ctx.state === value) return
+
+      var dom = $(el)
+      var changeClass = 'fx change'
+
+      if (ctx.state && !_.isEqual(ctx.data, value)) {
+        dom.addClass(changeClass)
+          .one(events, function () {dom.removeClass(changeClass)})
+      }
+
+      ctx.state = _.clone(value, true)
+    }
+
+    var originalConfig = vdom.attrs.config
+    vdom.attrs.config = function (el, init, ctx, dom) {
+      if (originalConfig) originalConfig.call(vdom, el, init, ctx, dom)
+      animate.call(vdom, el, init, ctx, dom)
+    }
+
+    return m(vdom.tag, vdom.attrs, vdom.children)
+
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mithril-fx",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "UI animation for Mithril.js",
   "main": "index.js",
   "scripts": {

playground/index.html

@@ -7,14 +7,18 @@
   <script type="text/javascript" src="../node_modules/mithril/mithril.min.js"></script>
   <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
   <script type="text/javascript" src="../node_modules/lodash/lodash.min.js"></script>
-  <script type="text/javascript" src="../dist/mithril.fx.js"></script>
+  <script type="text/javascript" src="../dist/mithril-fx.js"></script>
   <style type="text/css">
     div.box  {
       height: 70px;
       width: 70px;
       background-color: #f23;
     }
 
+    .list {
+      position: relative;
+    }
+
     .fx {
       animation-duration: 0.3s;
     }
@@ -24,11 +28,11 @@
       animation-name: slideInRight;
     }
 
-    .fx.hide {
+    .fx.false {
       animation-name: bounceOut;
     }
 
-    .fx.show {
+    .fx.true {
       animation-name: bounceIn;
     }
 
@@ -38,12 +42,19 @@
     h2.fx.change {
       animation-name: shake;
     }
-    h2.fx.move.high {
+    h2 {
+      /*transition:top 1s linear;*/
+    }
+    .list h2.fx.move.high {
       animation-name: slideInUp;
     }
-    h2.fx.move.low {
+    .list h2.fx.move.low {
       animation-name: slideInDown;
     }
+
+    h3.date.fx.change {
+      animation-name: shake;
+    }
   </style>
 </head>
 <body>
@@ -55,6 +66,7 @@
         toggleDisplay: function () {
           this.display = !this.display
         },
+        date: Date.now(),
         data: [
           {id: 1, name: "Sun"},
           {id: 2, name: "Moon"},
@@ -69,24 +81,31 @@
         },
         swapContents: function () {
           var tmp = this.data[0]
-          this.data[0] = this.data[2]
-          this.data[2] = tmp
+          this.data[0] = this.data[1]
+          this.data[1] = tmp
+        },
+        changeData: function () {
+          this.date = Date.now()
         }
       }
     },
     view: function (c) {
-      return fx('.root',
+      return fx.mount('.root',
         m("h1", "TOGGLE ANIMATION"),
         m("button", {onclick: c.toggleDisplay.bind(c)}, "Toggle"),
-        fx(c.display, "div.box", "Toggle this element."),
+        fx.toggle(c.display, "div.box", "Toggle this element."),
+        m("h1", "CHANGE IN DATA"),
+        m("button", {onclick: c.changeData.bind(c)}, "Change"),
+        fx.change(c.date, "h3.date", c.date),
         m("h1", "LIST"),
         m("div",
           m("button", {onclick: c.addContent.bind(c)}, "Add"),
           m("button", {onclick: c.changeContent.bind(c)}, "Change"),
           m("button", {onclick: c.swapContents.bind(c)}, "Swap")),
-        fx(c.data, function (planet) {
+        m(".list",
+          fx.map(c.data, function (planet) {
           return m("h2", planet.name)
-        }))
+        })))
     }
   }
 

readme.md

@@ -13,13 +13,16 @@
 var fx = require('mithril-fx')
 
 // Mount - animates fresh element being attached to DOM
-fx(tag, attrs, data)
+fx.mount(tag, attrs, children)
 
-// Toggle - animates an element based upon the a boolean value
-fx(boolean, tag, attrs, data)
+// Toggle - animates an element based upon a boolean value
+fx.toggle(boolean, tag, attrs, children)
 
-// List - animates elements being added, changed, moved
-fx(list, callback)
+// Data change - animates when data bound to an element changes
+fx.change(data, tag, attrs, children)
+
+// Array - animates elements being added, changed, moved
+fx.map(array, callback)
 ```
 
 # TODO