├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── dist
    ├── mithril.animate.js
    ├── mithril.animate.min.js
    ├── mithril.bindings.js
    ├── nobind
    │   ├── mithril.animate.nobind.js
    │   └── mithril.animate.nobind.min.js
    └── version
    │   ├── mithril.animate-0.0.1.js
    │   ├── mithril.animate-0.0.1.min.js
    │   ├── mithril.animate-0.0.1.nobind.js
    │   └── mithril.animate-0.0.1.nobind.min.js
├── examples
    ├── all.example.js
    ├── all.htm
    ├── box.htm
    ├── catspin.css
    ├── dizzycats.htm
    ├── examplestyle.css
    ├── icons.png
    ├── max.jpg
    ├── misc.htm
    ├── mishka.jpg
    ├── mithril.js
    ├── pickle.jpg
    └── timed.htm
├── package.json
└── src
    ├── _mithril.animate.js
    ├── mithril.animate.bindings.js
    └── mithril.animate.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 | 	//	Concatenation file order
 4 | 	var concatFiles = ['node_modules/mithril.bindings/dist/mithril.bindings.js', 'src/mithril.animate.js', 'src/mithril.animate.bindings.js'];
 5 | 		concatNobindFiles = ['src/mithril.animate.js'];
 6 | 
 7 | 	grunt.initConfig({
 8 | 		pkg: grunt.file.readJSON('package.json'),
 9 | 		concat: {
10 | 			options: {
11 | 				separator: ';'
12 | 			},
13 | 			dist: {
14 | 				//  We'd prefer to fail on missing files, but at least this will warn: https://github.com/gruntjs/grunt-contrib-concat/issues/15
15 | 				nonull: true,
16 | 				files: {
17 | 					'dist/version/<%= pkg.name %>-<%= pkg.version %>.js': concatFiles,
18 | 					'dist/<%= pkg.name %>.js': concatFiles,
19 | 					'dist/version/<%= pkg.name %>-<%= pkg.version %>.nobind.js': concatNobindFiles,
20 | 					'dist/nobind/<%= pkg.name %>.nobind.js': concatNobindFiles
21 | 				}
22 | 			}
23 | 		},
24 | 		qunit: {
25 | 			files: ['test/**/*.htm']
26 | 		},
27 | 		uglify: {
28 | 			options: {
29 | 				banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
30 | 			},
31 | 			dist: {
32 | 				files: {
33 | 					'dist/version/<%= pkg.name %>-<%= pkg.version %>.min.js': 'dist/version/<%= pkg.name %>-<%= pkg.version %>.js',
34 | 					'dist/<%= pkg.name %>.min.js': 'dist/<%= pkg.name %>.js',
35 | 					'dist/version/<%= pkg.name %>-<%= pkg.version %>.nobind.min.js': 'dist/version/<%= pkg.name %>-<%= pkg.version %>.nobind.js',
36 | 					'dist/nobind/<%= pkg.name %>.nobind.min.js': 'dist/nobind/<%= pkg.name %>.nobind.js'
37 | 				}
38 | 			}
39 | 		},
40 | 		jshint: {
41 | 			files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
42 | 			options: {
43 | 				ignores: [],
44 | 				// options here to override JSHint defaults
45 | 				globals: {
46 | 					jQuery: true,
47 | 					console: true,
48 | 					module: true,
49 | 					document: true
50 | 				},
51 | 				//	Ignore specific errors
52 | 				'-W015': true,	//	Indentation of }
53 | 				'-W099': true,	//	Mixed spaces and tabs
54 | 				'-W032': true	//	Unnecessary semicolon
55 | 			}
56 | 		},
57 | 		watch: {
58 | 			files: ['<%= jshint.files %>'],
59 | 			//	Just build when watching
60 | 			tasks: ['concat']
61 | 		}
62 | 	});
63 | 
64 | 	grunt.loadNpmTasks('grunt-contrib-uglify');
65 | 	grunt.loadNpmTasks('grunt-contrib-jshint');
66 | 	grunt.loadNpmTasks('grunt-contrib-qunit');
67 | 	grunt.loadNpmTasks('grunt-contrib-watch');
68 | 	grunt.loadNpmTasks('grunt-contrib-concat');
69 | 
70 | 	grunt.registerTask('test', ['jshint', 'qunit']);
71 | 	grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
72 | 	grunt.registerTask('justbuild', ['concat', 'uglify']);
73 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 jsguy
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | mithril.animate
2 | ===============
3 | 
4 | [Documentation and examples](http://jsguy.github.io/mithril.animate/)
5 | 
6 | A compact library that allows you to bind CSS3 animations to properties on your Mithril elements - has a fallback to jQuery.animate for older browsers.


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mithril.animate",
 3 |   "main": "dist/mithril.animate.min.js",
 4 |   "version": "0.1.1",
 5 |   "description": "A compact library that allows you to bind CSS3 animations to properties on your Mithril elements.",
 6 |   "keywords": [
 7 |     "animation",
 8 |     "css3",
 9 |     "transition",
10 |     "transform",
11 |     "keyframe",
12 |     "mithril",
13 |     "awesome"
14 |   ],
15 |   "authors": [
16 |     "Mikkel Bergmann (jsguy)"
17 |   ],
18 |   "license": "MIT",
19 |   "homepage": "http://jsguy.github.io/mithril.animate/"
20 | }


--------------------------------------------------------------------------------
/dist/mithril.animate.js:
--------------------------------------------------------------------------------
  1 | //	Mithril bindings.
  2 | //	Copyright (C) 2014 jsguy (Mikkel Bergmann)
  3 | //	MIT licensed
  4 | (function(){
  5 | var mithrilBindings = function(m){
  6 | 	m.bindings = m.bindings || {};
  7 | 
  8 | 	//	Pub/Sub based extended properties
  9 | 	m.p = function(value) {
 10 | 		var self = this,
 11 | 			subs = [],
 12 | 			prevValue,
 13 | 			delay = false,
 14 | 			//  Send notifications to subscribers
 15 | 			notify = function (value, prevValue) {
 16 | 				var i;
 17 | 				for (i = 0; i < subs.length; i += 1) {
 18 | 					subs[i].func.apply(subs[i].context, [value, prevValue]);
 19 | 				}
 20 | 			},
 21 | 			prop = function() {
 22 | 				if (arguments.length) {
 23 | 					value = arguments[0];
 24 | 					if (prevValue !== value) {
 25 | 						var tmpPrev = prevValue;
 26 | 						prevValue = value;
 27 | 						notify(value, tmpPrev);
 28 | 					}
 29 | 				}
 30 | 				return value;
 31 | 			};
 32 | 
 33 | 		//	Allow push on arrays
 34 | 		prop.push = function(val) {
 35 | 			if(value.push && typeof value.length !== "undefined") {
 36 | 				value.push(val);
 37 | 			}
 38 | 			prop(value);
 39 | 		};
 40 | 
 41 | 		//	Subscribe for when the value changes
 42 | 		prop.subscribe = function (func, context) {
 43 | 			subs.push({ func: func, context: context || self });
 44 | 			return prop;
 45 | 		};
 46 | 
 47 | 		//	Allow property to not automatically render
 48 | 		prop.delay = function(value) {
 49 | 			delay = !!value;
 50 | 			return prop;
 51 | 		};
 52 | 
 53 | 		//	Automatically update rendering when a value changes
 54 | 		//	As mithril waits for a request animation frame, this should be ok.
 55 | 		//	You can use .delay(true) to be able to manually handle updates
 56 | 		prop.subscribe(function(val){
 57 | 			if(!delay) {
 58 | 				m.startComputation();
 59 | 				m.endComputation();
 60 | 			}
 61 | 			return prop;
 62 | 		});
 63 | 
 64 | 		return prop;
 65 | 	};
 66 | 
 67 | 	//	Element function that applies our extended bindings
 68 | 	//	Note: 
 69 | 	//		. Some attributes can be removed when applied, eg: custom attributes
 70 | 	//	
 71 | 	m.e = function(element, attrs, children) {
 72 | 		for (var name in attrs) {
 73 | 			if (m.bindings[name]) {
 74 | 				m.bindings[name].func.apply(attrs, [attrs[name]]);
 75 | 				if(m.bindings[name].removeable) {
 76 | 					delete attrs[name];
 77 | 				}
 78 | 			}
 79 | 		}
 80 | 		return m(element, attrs, children);
 81 | 	};
 82 | 
 83 | 	//	Add bindings method
 84 | 	//	Non-standard attributes do not need to be rendered, eg: valueInput
 85 | 	//	so they are set as removable
 86 | 	m.addBinding = function(name, func, removeable){
 87 | 		m.bindings[name] = {
 88 | 			func: func,
 89 | 			removeable: removeable
 90 | 		};
 91 | 	};
 92 | 
 93 | 	//	Get the underlying value of a property
 94 | 	m.unwrap = function(prop) {
 95 | 		return (typeof prop == "function")? prop(): prop;
 96 | 	};
 97 | 
 98 | 	//	Bi-directional binding of value
 99 | 	m.addBinding("value", function(prop) {
100 | 		if (typeof prop == "function") {
101 | 			this.value = prop();
102 | 			this.onchange = m.withAttr("value", prop);
103 | 		} else {
104 | 			this.value = prop;
105 | 		}
106 | 	});
107 | 
108 | 	//	Bi-directional binding of checked property
109 | 	m.addBinding("checked", function(prop) {
110 | 		if (typeof prop == "function") {
111 | 			this.checked = prop();
112 | 			this.onchange = m.withAttr("checked", prop);
113 | 		} else {
114 | 			this.checked = prop;
115 | 		}
116 | 	});
117 | 
118 | 	//	Hide node
119 | 	m.addBinding("hide", function(prop){
120 | 		this.style = {
121 | 			display: m.unwrap(prop)? "none" : ""
122 | 		};
123 | 	}, true);
124 | 
125 | 	//	Toggle value(s) on click
126 | 	m.addBinding('toggle', function(prop){
127 | 		this.onclick = function(){
128 | 			//	Toggle allows an enum list to be toggled, eg: [prop, value2, value2]
129 | 			var isFunc = typeof prop === 'function', tmp, i, vals = [], val, tVal;
130 | 
131 | 			//	Toggle boolean
132 | 			if(isFunc) {
133 | 				value = prop();
134 | 				prop(!value);
135 | 			} else {
136 | 				//	Toggle enumeration
137 | 				tmp = prop[0];
138 | 				val = tmp();
139 | 				vals = prop.slice(1);
140 | 				tVal = vals[0];
141 | 
142 | 				for(i = 0; i < vals.length; i += 1) {
143 | 					if(val == vals[i]) {
144 | 						if(typeof vals[i+1] !== 'undefined') {
145 | 							tVal = vals[i+1];
146 | 						}
147 | 						break;
148 | 					}
149 | 				}
150 | 				tmp(tVal);
151 | 			}
152 | 		};
153 | 	}, true);
154 | 
155 | 	//	Set hover states, a'la jQuery pattern
156 | 	m.addBinding('hover', function(prop){
157 | 		this.onmouseover = prop[0];
158 | 		if(prop[1]) {
159 | 			this.onmouseout = prop[1];
160 | 		}
161 | 	}, true );
162 | 
163 | 	//	Add value bindings for various event types 
164 | 	var events = ["Input", "Keyup", "Keypress"],
165 | 		createBinding = function(name, eve){
166 | 			//	Bi-directional binding of value
167 | 			m.addBinding(name, function(prop) {
168 | 				if (typeof prop == "function") {
169 | 					this.value = prop();
170 | 					this[eve] = m.withAttr("value", prop);
171 | 				} else {
172 | 					this.value = prop;
173 | 				}
174 | 			}, true);
175 | 		};
176 | 
177 | 	for(var i = 0; i < events.length; i += 1) {
178 | 		var eve = events[i];
179 | 		createBinding("value" + eve, "on" + eve.toLowerCase());
180 | 	}
181 | 
182 | 
183 | 	//	Set a value on a property
184 | 	m.set = function(prop, value){
185 | 		return function() {
186 | 			prop(value);
187 | 		};
188 | 	};
189 | 
190 | 	/*	Returns a function that can trigger a binding 
191 | 		Usage: onclick: m.trigger('binding', prop)
192 | 	*/
193 | 	m.trigger = function(){
194 | 		var args = Array.prototype.slice.call(arguments);
195 | 		return function(){
196 | 			var name = args[0],
197 | 				argList = args.slice(1);
198 | 			if (m.bindings[name]) {
199 | 				m.bindings[name].func.apply(this, argList);
200 | 			}
201 | 		};
202 | 	};
203 | 
204 | 	return m.bindings;
205 | };
206 | 
207 | if (typeof module != "undefined" && module !== null && module.exports) {
208 | 	module.exports = mithrilBindings;
209 | } else if (typeof define === "function" && define.amd) {
210 | 	define(function() {
211 | 		return mithrilBindings;
212 | 	});
213 | } else {
214 | 	mithrilBindings(typeof window != "undefined"? window.m || {}: {});
215 | }
216 | 
217 | }());;/*
218 | 	mithril.animate - Copyright 2014 jsguy
219 | 	MIT Licensed.
220 | */
221 | (function (m) {
222 | 	//	Known prefiex
223 | 	var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
224 | 	transitionProps = ['TransitionProperty', 'TransitionTimingFunction', 'TransitionDelay', 'TransitionDuration', 'TransitionEnd'],
225 | 	transformProps = ['rotate', 'rotatex', 'rotatey', 'scale', 'skew', 'translate', 'translatex', 'translatey', 'matrix'],
226 | 
227 | 	defaultDuration = 400,
228 | 
229 | 	err = function(msg){
230 | 		window.console && console.error && console.error(msg);
231 | 	},
232 | 	
233 | 	//	Capitalise		
234 | 	cap = function(str){
235 | 		return str.charAt(0).toUpperCase() + str.substr(1);
236 | 	},
237 | 
238 | 	//	For checking what vendor prefixes are native
239 | 	div = document.createElement('div'),
240 | 
241 | 	//	vendor prefix, ie: transitionDuration becomes MozTransitionDuration
242 | 	vp = function (prop, dashed) {
243 | 		var pf;
244 | 		//	Handle unprefixed
245 | 		if (prop in div.style) {
246 | 			return prop;
247 | 		}
248 | 
249 | 		//	Handle keyframes
250 | 		if(prop == "@keyframes") {
251 | 			for (var i = 0; i < prefixes.length; i += 1) {
252 | 				//	Testing using transition
253 | 				pf = prefixes[i] + "Transition";
254 | 				if (pf in div.style) {
255 | 					return "@-" + prefixes[i].toLowerCase() + "-keyframes";
256 | 				}
257 | 			}
258 | 			return prop;
259 | 		}
260 | 
261 | 		for (var i = 0; i < prefixes.length; i += 1) {
262 | 			if(dashed) {
263 | 				pf = "-" +(prefixes[i] + "-" + prop).toLowerCase();
264 | 			} else {
265 | 				pf = prefixes[i] + cap(prop);
266 | 			}
267 | 			if (pf in div.style) {
268 | 				return pf;
269 | 			}
270 | 		}
271 | 		//	Can't find it - return original property.
272 | 		return prop;
273 | 	},
274 | 
275 | 	//	See if we can use native transitions
276 | 	supportsTransitions = function() {
277 | 		var b = document.body || document.documentElement,
278 | 			s = b.style,
279 | 			p = 'transition';
280 | 
281 | 		if (typeof s[p] == 'string') { return true; }
282 | 
283 | 		// Tests for vendor specific prop
284 | 		p = p.charAt(0).toUpperCase() + p.substr(1);
285 | 
286 | 		for (var i=0; i<prefixes.length; i++) {
287 | 			if (typeof s[prefixes[i] + p] == 'string') { return true; }
288 | 		}
289 | 
290 | 		return false;
291 | 	},
292 | 
293 | 	//	Converts CSS transition times to MS
294 | 	getTimeinMS = function(str) {
295 | 		var result = 0, tmp;
296 | 		str += "";
297 | 		str = str.toLowerCase();
298 | 		if(str.indexOf("ms") !== -1) {
299 | 			tmp = str.split("ms");
300 | 			result = Number(tmp[0]);
301 | 		} else if(str.indexOf("s") !== -1) {
302 | 			//	s
303 | 			tmp = str.split("s");
304 | 			result = Number(tmp[0]) * 1000;
305 | 		} else {
306 | 			result = Number(str);
307 | 		}
308 | 
309 | 		return Math.round(result);
310 | 	},
311 | 
312 | 	//	Set style properties
313 | 	setStyleProps = function(obj, props){
314 | 		for(var i in props) {if(props.hasOwnProperty(i)) {
315 | 			obj.style[vp(i)] = props[i];
316 | 		}}
317 | 	},
318 | 
319 | 	//	Set props for transitions and transforms with basic defaults
320 | 	setTransitionProps = function(args){
321 | 		var props = {
322 | 				//	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) initial, inherit
323 | 				TransitionTimingFunction: "ease",
324 | 				TransitionDuration: defaultDuration + "ms",
325 | 				TransitionProperty: "all"
326 | 			},
327 | 			p, i, tmp, tmp2, found;
328 | 
329 | 		//	Set any allowed properties 
330 | 		for(p in args) { if(args.hasOwnProperty(p)) {
331 | 			tmp = 'Transition' + cap(p);
332 | 			tmp2 = p.toLowerCase();
333 | 			found = false;
334 | 
335 | 			//	Look at transition props
336 | 			for(i = 0; i < transitionProps.length; i += 1) {
337 | 				if(tmp == transitionProps[i]) {
338 | 					props[transitionProps[i]] = args[p];
339 | 					found = true;
340 | 					break;
341 | 				}
342 | 			}
343 | 
344 | 			//	Look at transform props
345 | 			for(i = 0; i < transformProps.length; i += 1) {
346 | 				if(tmp2 == transformProps[i]) {
347 | 					props[vp("transform")] = props[vp("transform")] || "";
348 | 					props[vp("transform")] += " " +p + "(" + args[p] + ")";
349 | 					found = true;
350 | 					break;
351 | 				}
352 | 			}
353 | 
354 | 			if(!found) {
355 | 				props[p] = args[p];
356 | 			}
357 | 		}}
358 | 		return props;
359 | 	},
360 | 
361 | 	//	Fix animatiuon properties
362 | 	//	Normalises transforms, eg: rotate, scale, etc...
363 | 	normaliseTransformProps = function(args){
364 | 		var props = {},
365 | 			tmpProp,
366 | 			p, i, found,
367 | 			normal = function(props, p, value){
368 | 				var tmp = p.toLowerCase(),
369 | 					found = false, i;
370 | 
371 | 				//	Look at transform props
372 | 				for(i = 0; i < transformProps.length; i += 1) {
373 | 					if(tmp == transformProps[i]) {
374 | 						props[vp("transform", true)] = props[vp("transform", true)] || "";
375 | 						props[vp("transform", true)] += " " +p + "(" + value + ")";
376 | 						found = true;
377 | 						break;
378 | 					}
379 | 				}
380 | 
381 | 				if(!found) {
382 | 					props[p] = value;
383 | 				} else {
384 | 					//	Remove transform property
385 | 					delete props[p];
386 | 				}
387 | 			};
388 | 
389 | 		//	Set any allowed properties 
390 | 		for(p in args) { if(args.hasOwnProperty(p)) {
391 | 			//	If we have a percentage, we have a key frame
392 | 			if(p.indexOf("%") !== -1) {
393 | 				for(i in args[p]) { if(args[p].hasOwnProperty(i)) {
394 | 					normal(args[p], i, args[p][i]);
395 | 				}}
396 | 				props[p] = args[p];
397 | 			} else {
398 | 				normal(props, p, args[p]);
399 | 			}
400 | 		}}
401 | 
402 | 		return props;
403 | 	},
404 | 
405 | 
406 | 	//	If an object is empty
407 | 	isEmpty = function(obj) {
408 | 		for(var i in obj) {if(obj.hasOwnProperty(i)) {
409 | 			return false;
410 | 		}}
411 | 		return true; 
412 | 	},
413 | 	//	Creates a hashed name for the animation
414 | 	//	Use to create a unique keyframe animation style rule
415 | 	aniName = function(props){
416 | 		return "ani" + JSON.stringify(props).split(/[{},%":]/).join("");
417 | 	},
418 | 	animations = {},
419 | 
420 | 	//	See if we can use transitions
421 | 	canTrans = supportsTransitions();
422 | 
423 | 	//	IE10+ http://caniuse.com/#search=css-animations
424 | 	m.animateProperties = function(el, args, cb){
425 | 		el.style = el.style || {};
426 | 		var props = setTransitionProps(args), time;
427 | 
428 | 		if(typeof props.TransitionDuration !== 'undefined') {
429 | 			props.TransitionDuration = getTimeinMS(props.TransitionDuration) + "ms";
430 | 		} else {
431 | 			props.TransitionDuration = defaultDuration + "ms";
432 | 		}
433 | 
434 | 		time = getTimeinMS(props.TransitionDuration) || 0;
435 | 
436 | 		//	See if we support transitions
437 | 		if(canTrans) {
438 | 			setStyleProps(el, props);
439 | 		} else {
440 | 			//	Try and fall back to jQuery
441 | 			//	TODO: Switch to use velocity, it is better suited.
442 | 			if(typeof $ !== 'undefined' && $.fn && $.fn.animate) {
443 | 				$(el).animate(props, time);
444 | 			}
445 | 		}
446 | 
447 | 		if(cb){
448 | 			setTimeout(cb, time+1);
449 | 		}
450 | 	};
451 | 
452 | 	//	Trigger a transition animation
453 | 	m.trigger = function(name, value, options, cb){
454 | 		options = options || {};
455 | 		var ani = animations[name];
456 | 		if(!ani) {
457 | 			return err("Animation " + name + " not found.");
458 | 		}
459 | 
460 | 		return function(e){
461 | 			var args = ani.fn(function(){
462 | 				return typeof value == 'function'? value(): value;
463 | 			});
464 | 
465 | 			//	Allow override via options
466 | 			for(i in options) if(options.hasOwnProperty(i)) {{
467 | 				args[i] = options[i];
468 | 			}}
469 | 
470 | 			m.animateProperties(e.target, args, cb);
471 | 		};
472 | 	};
473 | 
474 | 	//	Adds an animation for bindings and so on.
475 | 	m.addAnimation = function(name, fn, options){
476 | 		options = options || {};
477 | 
478 | 		if(animations[name]) {
479 | 			return err("Animation " + name + " already defined.");
480 | 		} else if(typeof fn !== "function") {
481 | 			return err("Animation " + name + " is being added as a transition based animation, and must use a function.");
482 | 		}
483 | 
484 | 		options.duration = options.duration || defaultDuration;
485 | 
486 | 		animations[name] = {
487 | 			options: options,
488 | 			fn: fn
489 | 		};
490 | 
491 | 		//	Add a default binding for the name
492 | 		m.addBinding(name, function(prop){
493 | 			m.bindAnimation(name, this, fn, prop);
494 | 		}, true);
495 | 	};
496 | 
497 | 	m.addKFAnimation = function(name, arg, options){
498 | 		options = options || {};
499 | 
500 | 		if(animations[name]) {
501 | 			return err("Animation " + name + " already defined.");
502 | 		}
503 | 
504 | 		var init = function(props) {
505 | 			var aniId = aniName(props),
506 | 				hasAni = document.getElementById(aniId),
507 | 				kf;
508 | 
509 | 			//	Only insert once
510 | 			if(!hasAni) {
511 | 				animations[name].id = aniId;
512 | 
513 | 				props = normaliseTransformProps(props);
514 | 				//  Create keyframes
515 | 				kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
516 | 					.split("\"").join("")
517 | 					.split("},").join("}\n")
518 | 					.split(",").join(";")
519 | 					.split("%:").join("% ");
520 | 
521 | 				var s = document.createElement('style');
522 | 				s.setAttribute('id', aniId);
523 | 				s.id = aniId;
524 | 				s.textContent = kf;
525 | 				//  Might not have head?
526 | 				document.head.appendChild(s);
527 | 			}
528 | 
529 | 			animations[name].isInitialised = true;
530 | 			animations[name].options.animateImmediately = true;
531 | 		};
532 | 
533 | 		options.duration = options.duration || defaultDuration;
534 | 		options.animateImmediately = options.animateImmediately || false;
535 | 
536 | 		animations[name] = {
537 | 			init: init,
538 | 			options: options,
539 | 			arg: arg
540 | 		};
541 | 
542 | 		//	Add a default binding for the name
543 | 		m.addBinding(name, function(prop){
544 | 			m.bindAnimation(name, this, arg, prop);
545 | 		}, true);
546 | 	};
547 | 
548 | 
549 | 	/*	Options - defaults - what it does:
550 | 
551 | 		Delay - unedefined - delays the animation
552 | 		Direction - 
553 | 		Duration
554 | 		FillMode - "forward" makes sure it sticks: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
555 | 		IterationCount, 
556 | 		Name, PlayState, TimingFunction
557 | 	
558 | 	*/
559 | 
560 | 	//	Useful to know, 'to' and 'from': http://lea.verou.me/2012/12/animations-with-one-keyframe/
561 | 	m.animateKF = function(name, el, options, cb){
562 | 		options = options || {};
563 | 		var ani = animations[name], i, props = {};
564 | 		if(!ani) {
565 | 			return err("Animation " + name + " not found.");
566 | 		}
567 | 
568 | 		//	Allow override via options
569 | 		ani.options = ani.options || {};
570 | 		for(i in options) if(options.hasOwnProperty(i)) {{
571 | 			ani.options[i] = options[i];
572 | 		}}
573 | 
574 | 		if(!ani.isInitialised && ani.init) {
575 | 			ani.init(ani.arg);
576 | 		}
577 | 
578 | 		//	Allow animate overrides
579 | 		for(i in ani.options) if(ani.options.hasOwnProperty(i)) {{
580 | 			props[vp("animation" + cap(i))] = ani.options[i];
581 | 		}}
582 | 
583 | 		//	Set required items and default values for props
584 | 		props[vp("animationName")] = ani.id;
585 | 		props[vp("animationDuration")] = (props[vp("animationDuration")]? props[vp("animationDuration")]: defaultDuration) + "ms";
586 | 		props[vp("animationDelay")] = props[vp("animationDelay")]? props[vp("animationDuration")] + "ms": undefined;
587 | 		props[vp("animationFillMode")] = props[vp("animationFillMode")] || "forwards";
588 | 
589 | 		el.style = el.style || {};
590 | 
591 | 		//	Use for callback
592 | 		var endAni = function(){
593 | 			//	Remove listener
594 | 			el.removeEventListener("animationend", endAni, false);
595 | 			if(cb){
596 | 				cb(el);
597 | 			}
598 | 		};
599 | 
600 | 		//	Remove animation if any
601 | 		el.style[vp("animation")] = "";
602 | 		el.style[vp("animationName")] = "";
603 | 
604 | 		//	Must use two request animation frame calls, for FF to
605 | 		//	work properly, does not seem to have any adverse effects
606 | 		requestAnimationFrame(function(){
607 | 			requestAnimationFrame(function(){
608 | 				//	Apply props
609 | 				for(i in props) if(props.hasOwnProperty(i)) {{
610 | 					el.style[i] = props[i];
611 | 				}}
612 | 
613 | 				el.addEventListener("animationend", endAni, false);
614 | 			});
615 | 		});
616 | 	};
617 | 
618 | 	m.triggerKF = function(name, options){
619 | 		return function(){
620 | 			m.animateKF(name, this, options);
621 | 		};
622 | 	};
623 | 
624 | 	m.bindAnimation = function(name, el, options, prop) {
625 | 		var ani = animations[name];
626 | 
627 | 		if(!ani && !ani.name) {
628 | 			return err("Animation " + name + " not found.");
629 | 		}
630 | 
631 | 		if(ani.fn) {
632 | 			m.animateProperties(el, ani.fn(prop));
633 | 		} else {
634 | 			var oldConfig = el.config;
635 | 			el.config = function(el, isInit){
636 | 				if(!ani.isInitialised && ani.init) {
637 | 					ani.init(options);
638 | 				}
639 | 				if(prop() && isInit) {
640 | 					m.animateKF(name, el, options);
641 | 				}
642 | 				if(oldConfig) {
643 | 					oldConfig.apply(el, arguments);
644 | 				}
645 | 			};
646 | 		}
647 | 	};
648 | 
649 | }(window.m || {}));;/* Default transform2d bindings */
650 | (function (m) {
651 | 	var basicBindings = ['scale', 'scalex', 'scaley', 'translate', 'translatex', 'translatey', 
652 | 		'matrix', 'backgroundColor', 'backgroundPosition', 'borderBottomColor', 
653 | 		'borderBottomWidth', 'borderLeftColor', 'borderLeftWidth', 'borderRightColor', 
654 | 		'borderRightWidth', 'borderSpacing', 'borderTopColor', 'borderTopWidth', 'bottom', 
655 | 		'clip', 'color', 'fontSize', 'fontWeight', 'height', 'left', 'letterSpacing', 
656 | 		'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 
657 | 		'maxWidth', 'minHeight', 'minWidth', 'opacity', 'outlineColor', 'outlineWidth', 
658 | 		'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'right', 'textIndent', 
659 | 		'textShadow', 'top', 'verticalAlign', 'visibility', 'width', 'wordSpacing', 'zIndex'],
660 | 		degBindings = ['rotate', 'rotatex', 'rotatey', 'skewx', 'skewy'], i;
661 | 
662 | 	//	Basic bindings where we pass the prop straight through
663 | 	for(i = 0; i < basicBindings.length; i += 1) {
664 | 		(function(name){
665 | 			m.addAnimation(name, function(prop){
666 | 				var options = {};
667 | 				options[name] = prop();
668 | 				return options;
669 | 			});
670 | 		}(basicBindings[i]));
671 | 	}
672 | 	
673 | 	//	Degree based bindings - conditionally postfix with "deg"
674 | 	for(i = 0; i < degBindings.length; i += 1) {
675 | 		(function(name){
676 | 			m.addAnimation(name, function(prop){
677 | 				var options = {}, value = prop();
678 | 				options[name] = isNaN(value)? value: value + "deg";
679 | 				return options;
680 | 			});
681 | 		}(degBindings[i]));
682 | 	}
683 | 
684 | 	//	Attributes that require more than one prop
685 | 	m.addAnimation("skew", function(prop){
686 | 		var value = prop();
687 | 		return {
688 | 			skew: [
689 | 				value[0] + (isNaN(value[0])? "":"deg"), 
690 | 				value[1] + (isNaN(value[1])? "":"deg")
691 | 			]
692 | 		};
693 | 	});
694 | }(window.m));


--------------------------------------------------------------------------------
/dist/mithril.animate.min.js:
--------------------------------------------------------------------------------
1 | /*! mithril.animate 07-07-2015 */
2 | !function(){var a=function(a){a.bindings=a.bindings||{},a.p=function(b){var c,d=this,e=[],f=!1,g=function(a,b){var c;for(c=0;c<e.length;c+=1)e[c].func.apply(e[c].context,[a,b])},h=function(){if(arguments.length&&(b=arguments[0],c!==b)){var a=c;c=b,g(b,a)}return b};return h.push=function(a){b.push&&"undefined"!=typeof b.length&&b.push(a),h(b)},h.subscribe=function(a,b){return e.push({func:a,context:b||d}),h},h.delay=function(a){return f=!!a,h},h.subscribe(function(b){return f||(a.startComputation(),a.endComputation()),h}),h},a.e=function(b,c,d){for(var e in c)a.bindings[e]&&(a.bindings[e].func.apply(c,[c[e]]),a.bindings[e].removeable&&delete c[e]);return a(b,c,d)},a.addBinding=function(b,c,d){a.bindings[b]={func:c,removeable:d}},a.unwrap=function(a){return"function"==typeof a?a():a},a.addBinding("value",function(b){"function"==typeof b?(this.value=b(),this.onchange=a.withAttr("value",b)):this.value=b}),a.addBinding("checked",function(b){"function"==typeof b?(this.checked=b(),this.onchange=a.withAttr("checked",b)):this.checked=b}),a.addBinding("hide",function(b){this.style={display:a.unwrap(b)?"none":""}},!0),a.addBinding("toggle",function(a){this.onclick=function(){var b,c,d,e,f="function"==typeof a,g=[];if(f)value=a(),a(!value);else{for(b=a[0],d=b(),g=a.slice(1),e=g[0],c=0;c<g.length;c+=1)if(d==g[c]){"undefined"!=typeof g[c+1]&&(e=g[c+1]);break}b(e)}}},!0),a.addBinding("hover",function(a){this.onmouseover=a[0],a[1]&&(this.onmouseout=a[1])},!0);for(var b=["Input","Keyup","Keypress"],c=function(b,c){a.addBinding(b,function(b){"function"==typeof b?(this.value=b(),this[c]=a.withAttr("value",b)):this.value=b},!0)},d=0;d<b.length;d+=1){var e=b[d];c("value"+e,"on"+e.toLowerCase())}return a.set=function(a,b){return function(){a(b)}},a.trigger=function(){var b=Array.prototype.slice.call(arguments);return function(){var c=b[0],d=b.slice(1);a.bindings[c]&&a.bindings[c].func.apply(this,d)}},a.bindings};"undefined"!=typeof module&&null!==module&&module.exports?module.exports=a:"function"==typeof define&&define.amd?define(function(){return a}):a("undefined"!=typeof window?window.m||{}:{})}(),function(a){var b=["Moz","Webkit","Khtml","O","ms"],c=["TransitionProperty","TransitionTimingFunction","TransitionDelay","TransitionDuration","TransitionEnd"],d=["rotate","rotatex","rotatey","scale","skew","translate","translatex","translatey","matrix"],e=400,f=function(a){window.console&&console.error&&console.error(a)},g=function(a){return a.charAt(0).toUpperCase()+a.substr(1)},h=document.createElement("div"),j=function(a,c){var d;if(a in h.style)return a;if("@keyframes"==a){for(var e=0;e<b.length;e+=1)if(d=b[e]+"Transition",d in h.style)return"@-"+b[e].toLowerCase()+"-keyframes";return a}for(var e=0;e<b.length;e+=1)if(d=c?"-"+(b[e]+"-"+a).toLowerCase():b[e]+g(a),d in h.style)return d;return a},k=function(){var a=document.body||document.documentElement,c=a.style,d="transition";if("string"==typeof c[d])return!0;d=d.charAt(0).toUpperCase()+d.substr(1);for(var e=0;e<b.length;e++)if("string"==typeof c[b[e]+d])return!0;return!1},l=function(a){var b,c=0;return a+="",a=a.toLowerCase(),-1!==a.indexOf("ms")?(b=a.split("ms"),c=Number(b[0])):-1!==a.indexOf("s")?(b=a.split("s"),c=1e3*Number(b[0])):c=Number(a),Math.round(c)},m=function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a.style[j(c)]=b[c])},n=function(a){var b,f,h,i,k,l={TransitionTimingFunction:"ease",TransitionDuration:e+"ms",TransitionProperty:"all"};for(b in a)if(a.hasOwnProperty(b)){for(h="Transition"+g(b),i=b.toLowerCase(),k=!1,f=0;f<c.length;f+=1)if(h==c[f]){l[c[f]]=a[b],k=!0;break}for(f=0;f<d.length;f+=1)if(i==d[f]){l[j("transform")]=l[j("transform")]||"",l[j("transform")]+=" "+b+"("+a[b]+")",k=!0;break}k||(l[b]=a[b])}return l},o=function(a){var b,c,e={},f=function(a,b,c){var e,f=b.toLowerCase(),g=!1;for(e=0;e<d.length;e+=1)if(f==d[e]){a[j("transform",!0)]=a[j("transform",!0)]||"",a[j("transform",!0)]+=" "+b+"("+c+")",g=!0;break}g?delete a[b]:a[b]=c};for(b in a)if(a.hasOwnProperty(b))if(-1!==b.indexOf("%")){for(c in a[b])a[b].hasOwnProperty(c)&&f(a[b],c,a[b][c]);e[b]=a[b]}else f(e,b,a[b]);return e},p=function(a){return"ani"+JSON.stringify(a).split(/[{},%":]/).join("")},q={},r=k();a.animateProperties=function(a,b,c){a.style=a.style||{};var d,f=n(b);"undefined"!=typeof f.TransitionDuration?f.TransitionDuration=l(f.TransitionDuration)+"ms":f.TransitionDuration=e+"ms",d=l(f.TransitionDuration)||0,r?m(a,f):"undefined"!=typeof $&&$.fn&&$.fn.animate&&$(a).animate(f,d),c&&setTimeout(c,d+1)},a.trigger=function(b,c,d,e){d=d||{};var g=q[b];return g?function(b){var f=g.fn(function(){return"function"==typeof c?c():c});for(i in d)d.hasOwnProperty(i)&&(f[i]=d[i]);a.animateProperties(b.target,f,e)}:f("Animation "+b+" not found.")},a.addAnimation=function(b,c,d){return d=d||{},q[b]?f("Animation "+b+" already defined."):"function"!=typeof c?f("Animation "+b+" is being added as a transition based animation, and must use a function."):(d.duration=d.duration||e,q[b]={options:d,fn:c},void a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0))},a.addKFAnimation=function(b,c,d){if(d=d||{},q[b])return f("Animation "+b+" already defined.");var g=function(a){var c,d=p(a),e=document.getElementById(d);if(!e){q[b].id=d,a=o(a),c=j("@keyframes")+" "+d+" "+JSON.stringify(a).split('"').join("").split("},").join("}\n").split(",").join(";").split("%:").join("% ");var f=document.createElement("style");f.setAttribute("id",d),f.id=d,f.textContent=c,document.head.appendChild(f)}q[b].isInitialised=!0,q[b].options.animateImmediately=!0};d.duration=d.duration||e,d.animateImmediately=d.animateImmediately||!1,q[b]={init:g,options:d,arg:c},a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0)},a.animateKF=function(a,b,c,d){c=c||{};var h,i=q[a],k={};if(!i)return f("Animation "+a+" not found.");i.options=i.options||{};for(h in c)c.hasOwnProperty(h)&&(i.options[h]=c[h]);!i.isInitialised&&i.init&&i.init(i.arg);for(h in i.options)i.options.hasOwnProperty(h)&&(k[j("animation"+g(h))]=i.options[h]);k[j("animationName")]=i.id,k[j("animationDuration")]=(k[j("animationDuration")]?k[j("animationDuration")]:e)+"ms",k[j("animationDelay")]=k[j("animationDelay")]?k[j("animationDuration")]+"ms":void 0,k[j("animationFillMode")]=k[j("animationFillMode")]||"forwards",b.style=b.style||{};var l=function(){b.removeEventListener("animationend",l,!1),d&&d(b)};b.style[j("animation")]="",b.style[j("animationName")]="",requestAnimationFrame(function(){requestAnimationFrame(function(){for(h in k)k.hasOwnProperty(h)&&(b.style[h]=k[h]);b.addEventListener("animationend",l,!1)})})},a.triggerKF=function(b,c){return function(){a.animateKF(b,this,c)}},a.bindAnimation=function(b,c,d,e){var g=q[b];if(!g&&!g.name)return f("Animation "+b+" not found.");if(g.fn)a.animateProperties(c,g.fn(e));else{var h=c.config;c.config=function(c,f){!g.isInitialised&&g.init&&g.init(d),e()&&f&&a.animateKF(b,c,d),h&&h.apply(c,arguments)}}}}(window.m||{}),function(a){var b,c=["scale","scalex","scaley","translate","translatex","translatey","matrix","backgroundColor","backgroundPosition","borderBottomColor","borderBottomWidth","borderLeftColor","borderLeftWidth","borderRightColor","borderRightWidth","borderSpacing","borderTopColor","borderTopWidth","bottom","clip","color","fontSize","fontWeight","height","left","letterSpacing","lineHeight","marginBottom","marginLeft","marginRight","marginTop","maxHeight","maxWidth","minHeight","minWidth","opacity","outlineColor","outlineWidth","paddingBottom","paddingLeft","paddingRight","paddingTop","right","textIndent","textShadow","top","verticalAlign","visibility","width","wordSpacing","zIndex"],d=["rotate","rotatex","rotatey","skewx","skewy"];for(b=0;b<c.length;b+=1)!function(b){a.addAnimation(b,function(a){var c={};return c[b]=a(),c})}(c[b]);for(b=0;b<d.length;b+=1)!function(b){a.addAnimation(b,function(a){var c={},d=a();return c[b]=isNaN(d)?d:d+"deg",c})}(d[b]);a.addAnimation("skew",function(a){var b=a();return{skew:[b[0]+(isNaN(b[0])?"":"deg"),b[1]+(isNaN(b[1])?"":"deg")]}})}(window.m);


--------------------------------------------------------------------------------
/dist/mithril.bindings.js:
--------------------------------------------------------------------------------
  1 | //	Mithril bindings.
  2 | //	Copyright (C) 2016 jsguy (Mikkel Bergmann)
  3 | //	MIT licensed
  4 | (function(){
  5 | var mithrilBindings = function(m){
  6 | 	m.bindings = m.bindings || {};
  7 | 
  8 | 	//	Pub/Sub based extended properties
  9 | 	m.p = function(value) {
 10 | 		var self = this,
 11 | 			subs = [],
 12 | 			prevValue,
 13 | 			delay = false,
 14 | 			//  Send notifications to subscribers
 15 | 			notify = function (value, prevValue) {
 16 | 				var i;
 17 | 				for (i = 0; i < subs.length; i += 1) {
 18 | 					subs[i].func.apply(subs[i].context, [value, prevValue]);
 19 | 				}
 20 | 			},
 21 | 			//	Really basic value checker
 22 | 			//	Assumes value changed, if not string, number or boolean
 23 | 			isEqual = function(v1, v2){
 24 | 				if(typeof v1 === "string" || typeof v1 === "number" || typeof v === "boolean") {
 25 | 					//	Allow coercion
 26 | 					return v1 == v2;
 27 | 				} else {
 28 | 					return false;
 29 | 				}
 30 | 			},
 31 | 			prop = function() {
 32 | 				if (arguments.length) {
 33 | 					value = arguments[0];
 34 | 					if (!isEqual(prevValue, value)) {
 35 | 						var tmpPrev = prevValue;
 36 | 						prevValue = value;
 37 | 						notify(value, tmpPrev);
 38 | 					}
 39 | 				}
 40 | 				return value;
 41 | 			};
 42 | 
 43 | 		//	Allow push on arrays
 44 | 		prop.push = function(val) {
 45 | 			if(value.push && typeof value.length !== "undefined") {
 46 | 				value.push(val);
 47 | 			}
 48 | 			prop(value);
 49 | 		};
 50 | 
 51 | 		//	Subscribe for when the value changes
 52 | 		prop.subscribe = function (func, context) {
 53 | 			subs.push({ func: func, context: context || self });
 54 | 			return prop;
 55 | 		};
 56 | 
 57 | 		//	Allow property to not automatically render
 58 | 		prop.delay = function(value) {
 59 | 			delay = !!value;
 60 | 			return prop;
 61 | 		};
 62 | 
 63 | 		//	Automatically update rendering when a value changes
 64 | 		//	As mithril waits for a request animation frame, this should be ok.
 65 | 		//	You can use .delay(true) to be able to manually handle updates
 66 | 		prop.subscribe(function(val){
 67 | 			if(!delay) {
 68 | 				m.redraw();
 69 | 			}
 70 | 			return prop;
 71 | 		});
 72 | 
 73 | 		return prop;
 74 | 	};
 75 | 
 76 | 	//	Element function that applies our extended bindings
 77 | 	//	Note:
 78 | 	//		. Some attributes can be removed when applied, eg: custom attributes
 79 | 	//
 80 | 	m.e = function(element, attrs, children) {
 81 | 		for (var name in attrs) {
 82 | 			if (m.bindings[name]) {
 83 | 				m.bindings[name].func.apply(attrs, [attrs[name]]);
 84 | 				if(m.bindings[name].removeable) {
 85 | 					delete attrs[name];
 86 | 				}
 87 | 			}
 88 | 		}
 89 | 		return m(element, attrs, children);
 90 | 	};
 91 | 
 92 | 	//	Add bindings method
 93 | 	//	Non-standard attributes do not need to be rendered, eg: valueInput
 94 | 	//	so they are set as removable
 95 | 	m.addBinding = function(name, func, removeable){
 96 | 		m.bindings[name] = {
 97 | 			func: func,
 98 | 			removeable: removeable
 99 | 		};
100 | 	};
101 | 
102 | 	//	Get the underlying value of a property
103 | 	m.unwrap = function(prop) {
104 | 		return (typeof prop == "function")? prop(): prop;
105 | 	};
106 | 
107 | 	//	Bi-directional binding of value
108 | 	m.addBinding("value", function(prop) {
109 | 		if (typeof prop == "function") {
110 | 			this.value = prop();
111 | 			this.onchange = m.withAttr("value", prop);
112 | 		} else {
113 | 			this.value = prop;
114 | 		}
115 | 	});
116 | 
117 | 	//	Bi-directional binding of checked property
118 | 	m.addBinding("checked", function(prop) {
119 | 		if (typeof prop == "function") {
120 | 			this.checked = prop();
121 | 			this.onchange = m.withAttr("checked", prop);
122 | 		} else {
123 | 			this.checked = prop;
124 | 		}
125 | 	});
126 | 
127 | 	//	Hide node
128 | 	m.addBinding("hide", function(prop){
129 | 		this.style = {
130 | 			display: m.unwrap(prop)? "none" : ""
131 | 		};
132 | 	}, true);
133 | 
134 | 	//	Toggle value(s) on click
135 | 	m.addBinding('toggle', function(prop){
136 | 		this.onclick = function(){
137 | 			//	Toggle allows an enum list to be toggled, eg: [prop, value2, value2]
138 | 			var isFunc = typeof prop === 'function', tmp, i, vals = [], val, tVal;
139 | 
140 | 			//	Toggle boolean
141 | 			if(isFunc) {
142 | 				value = prop();
143 | 				prop(!value);
144 | 			} else {
145 | 				//	Toggle enumeration
146 | 				tmp = prop[0];
147 | 				val = tmp();
148 | 				vals = prop.slice(1);
149 | 				tVal = vals[0];
150 | 
151 | 				for(i = 0; i < vals.length; i += 1) {
152 | 					if(val == vals[i]) {
153 | 						if(typeof vals[i+1] !== 'undefined') {
154 | 							tVal = vals[i+1];
155 | 						}
156 | 						break;
157 | 					}
158 | 				}
159 | 				tmp(tVal);
160 | 			}
161 | 		};
162 | 	}, true);
163 | 
164 | 	//	Set hover states, a'la jQuery pattern
165 | 	m.addBinding('hover', function(prop){
166 | 		this.onmouseover = prop[0];
167 | 		if(prop[1]) {
168 | 			this.onmouseout = prop[1];
169 | 		}
170 | 	}, true );
171 | 
172 | 	//	Add value bindings for various event types
173 | 	var events = ["Input", "Keyup", "Keypress"],
174 | 		createBinding = function(name, eve){
175 | 			//	Bi-directional binding of value
176 | 			m.addBinding(name, function(prop) {
177 | 				if (typeof prop == "function") {
178 | 					this.value = prop();
179 | 					this[eve] = m.withAttr("value", prop);
180 | 				} else {
181 | 					this.value = prop;
182 | 				}
183 | 			}, true);
184 | 		};
185 | 
186 | 	for(var i = 0; i < events.length; i += 1) {
187 | 		var eve = events[i];
188 | 		createBinding("value" + eve, "on" + eve.toLowerCase());
189 | 	}
190 | 
191 | 
192 | 	//	Set a value on a property
193 | 	m.set = function(prop, value){
194 | 		return function() {
195 | 			prop(value);
196 | 		};
197 | 	};
198 | 
199 | 	/*	Returns a function that can trigger a binding
200 | 		Usage: onclick: m.trigger('binding', prop)
201 | 	*/
202 | 	m.trigger = function(){
203 | 		var args = Array.prototype.slice.call(arguments);
204 | 		return function(){
205 | 			var name = args[0],
206 | 				argList = args.slice(1);
207 | 			if (m.bindings[name]) {
208 | 				m.bindings[name].func.apply(this, argList);
209 | 			}
210 | 		};
211 | 	};
212 | 
213 | 	return m.bindings;
214 | };
215 | 
216 | if (typeof module != "undefined" && module !== null && module.exports) {
217 | 	module.exports = mithrilBindings;
218 | } else if (typeof define === "function" && define.amd) {
219 | 	define(function() {
220 | 		return mithrilBindings;
221 | 	});
222 | } else {
223 | 	mithrilBindings(typeof window != "undefined"? window.m || {}: {});
224 | }
225 | 
226 | }());


--------------------------------------------------------------------------------
/dist/nobind/mithril.animate.nobind.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	mithril.animate - Copyright 2014 jsguy
  3 | 	MIT Licensed.
  4 | */
  5 | (function (m) {
  6 | 	//	Known prefiex
  7 | 	var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
  8 | 	transitionProps = ['TransitionProperty', 'TransitionTimingFunction', 'TransitionDelay', 'TransitionDuration', 'TransitionEnd'],
  9 | 	transformProps = ['rotate', 'rotatex', 'rotatey', 'scale', 'skew', 'translate', 'translatex', 'translatey', 'matrix'],
 10 | 
 11 | 	defaultDuration = 400,
 12 | 
 13 | 	err = function(msg){
 14 | 		window.console && console.error && console.error(msg);
 15 | 	},
 16 | 	
 17 | 	//	Capitalise		
 18 | 	cap = function(str){
 19 | 		return str.charAt(0).toUpperCase() + str.substr(1);
 20 | 	},
 21 | 
 22 | 	//	For checking what vendor prefixes are native
 23 | 	div = document.createElement('div'),
 24 | 
 25 | 	//	vendor prefix, ie: transitionDuration becomes MozTransitionDuration
 26 | 	vp = function (prop, dashed) {
 27 | 		var pf;
 28 | 		//	Handle unprefixed
 29 | 		if (prop in div.style) {
 30 | 			return prop;
 31 | 		}
 32 | 
 33 | 		//	Handle keyframes
 34 | 		if(prop == "@keyframes") {
 35 | 			for (var i = 0; i < prefixes.length; i += 1) {
 36 | 				//	Testing using transition
 37 | 				pf = prefixes[i] + "Transition";
 38 | 				if (pf in div.style) {
 39 | 					return "@-" + prefixes[i].toLowerCase() + "-keyframes";
 40 | 				}
 41 | 			}
 42 | 			return prop;
 43 | 		}
 44 | 
 45 | 		for (var i = 0; i < prefixes.length; i += 1) {
 46 | 			if(dashed) {
 47 | 				pf = "-" +(prefixes[i] + "-" + prop).toLowerCase();
 48 | 			} else {
 49 | 				pf = prefixes[i] + cap(prop);
 50 | 			}
 51 | 			if (pf in div.style) {
 52 | 				return pf;
 53 | 			}
 54 | 		}
 55 | 		//	Can't find it - return original property.
 56 | 		return prop;
 57 | 	},
 58 | 
 59 | 	//	See if we can use native transitions
 60 | 	supportsTransitions = function() {
 61 | 		var b = document.body || document.documentElement,
 62 | 			s = b.style,
 63 | 			p = 'transition';
 64 | 
 65 | 		if (typeof s[p] == 'string') { return true; }
 66 | 
 67 | 		// Tests for vendor specific prop
 68 | 		p = p.charAt(0).toUpperCase() + p.substr(1);
 69 | 
 70 | 		for (var i=0; i<prefixes.length; i++) {
 71 | 			if (typeof s[prefixes[i] + p] == 'string') { return true; }
 72 | 		}
 73 | 
 74 | 		return false;
 75 | 	},
 76 | 
 77 | 	//	Converts CSS transition times to MS
 78 | 	getTimeinMS = function(str) {
 79 | 		var result = 0, tmp;
 80 | 		str += "";
 81 | 		str = str.toLowerCase();
 82 | 		if(str.indexOf("ms") !== -1) {
 83 | 			tmp = str.split("ms");
 84 | 			result = Number(tmp[0]);
 85 | 		} else if(str.indexOf("s") !== -1) {
 86 | 			//	s
 87 | 			tmp = str.split("s");
 88 | 			result = Number(tmp[0]) * 1000;
 89 | 		} else {
 90 | 			result = Number(str);
 91 | 		}
 92 | 
 93 | 		return Math.round(result);
 94 | 	},
 95 | 
 96 | 	//	Set style properties
 97 | 	setStyleProps = function(obj, props){
 98 | 		for(var i in props) {if(props.hasOwnProperty(i)) {
 99 | 			obj.style[vp(i)] = props[i];
100 | 		}}
101 | 	},
102 | 
103 | 	//	Set props for transitions and transforms with basic defaults
104 | 	setTransitionProps = function(args){
105 | 		var props = {
106 | 				//	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) initial, inherit
107 | 				TransitionTimingFunction: "ease",
108 | 				TransitionDuration: defaultDuration + "ms",
109 | 				TransitionProperty: "all"
110 | 			},
111 | 			p, i, tmp, tmp2, found;
112 | 
113 | 		//	Set any allowed properties 
114 | 		for(p in args) { if(args.hasOwnProperty(p)) {
115 | 			tmp = 'Transition' + cap(p);
116 | 			tmp2 = p.toLowerCase();
117 | 			found = false;
118 | 
119 | 			//	Look at transition props
120 | 			for(i = 0; i < transitionProps.length; i += 1) {
121 | 				if(tmp == transitionProps[i]) {
122 | 					props[transitionProps[i]] = args[p];
123 | 					found = true;
124 | 					break;
125 | 				}
126 | 			}
127 | 
128 | 			//	Look at transform props
129 | 			for(i = 0; i < transformProps.length; i += 1) {
130 | 				if(tmp2 == transformProps[i]) {
131 | 					props[vp("transform")] = props[vp("transform")] || "";
132 | 					props[vp("transform")] += " " +p + "(" + args[p] + ")";
133 | 					found = true;
134 | 					break;
135 | 				}
136 | 			}
137 | 
138 | 			if(!found) {
139 | 				props[p] = args[p];
140 | 			}
141 | 		}}
142 | 		return props;
143 | 	},
144 | 
145 | 	//	Fix animatiuon properties
146 | 	//	Normalises transforms, eg: rotate, scale, etc...
147 | 	normaliseTransformProps = function(args){
148 | 		var props = {},
149 | 			tmpProp,
150 | 			p, i, found,
151 | 			normal = function(props, p, value){
152 | 				var tmp = p.toLowerCase(),
153 | 					found = false, i;
154 | 
155 | 				//	Look at transform props
156 | 				for(i = 0; i < transformProps.length; i += 1) {
157 | 					if(tmp == transformProps[i]) {
158 | 						props[vp("transform", true)] = props[vp("transform", true)] || "";
159 | 						props[vp("transform", true)] += " " +p + "(" + value + ")";
160 | 						found = true;
161 | 						break;
162 | 					}
163 | 				}
164 | 
165 | 				if(!found) {
166 | 					props[p] = value;
167 | 				} else {
168 | 					//	Remove transform property
169 | 					delete props[p];
170 | 				}
171 | 			};
172 | 
173 | 		//	Set any allowed properties 
174 | 		for(p in args) { if(args.hasOwnProperty(p)) {
175 | 			//	If we have a percentage, we have a key frame
176 | 			if(p.indexOf("%") !== -1) {
177 | 				for(i in args[p]) { if(args[p].hasOwnProperty(i)) {
178 | 					normal(args[p], i, args[p][i]);
179 | 				}}
180 | 				props[p] = args[p];
181 | 			} else {
182 | 				normal(props, p, args[p]);
183 | 			}
184 | 		}}
185 | 
186 | 		return props;
187 | 	},
188 | 
189 | 
190 | 	//	If an object is empty
191 | 	isEmpty = function(obj) {
192 | 		for(var i in obj) {if(obj.hasOwnProperty(i)) {
193 | 			return false;
194 | 		}}
195 | 		return true; 
196 | 	},
197 | 	//	Creates a hashed name for the animation
198 | 	//	Use to create a unique keyframe animation style rule
199 | 	aniName = function(props){
200 | 		return "ani" + JSON.stringify(props).split(/[{},%":]/).join("");
201 | 	},
202 | 	animations = {},
203 | 
204 | 	//	See if we can use transitions
205 | 	canTrans = supportsTransitions();
206 | 
207 | 	//	IE10+ http://caniuse.com/#search=css-animations
208 | 	m.animateProperties = function(el, args, cb){
209 | 		el.style = el.style || {};
210 | 		var props = setTransitionProps(args), time;
211 | 
212 | 		if(typeof props.TransitionDuration !== 'undefined') {
213 | 			props.TransitionDuration = getTimeinMS(props.TransitionDuration) + "ms";
214 | 		} else {
215 | 			props.TransitionDuration = defaultDuration + "ms";
216 | 		}
217 | 
218 | 		time = getTimeinMS(props.TransitionDuration) || 0;
219 | 
220 | 		//	See if we support transitions
221 | 		if(canTrans) {
222 | 			setStyleProps(el, props);
223 | 		} else {
224 | 			//	Try and fall back to jQuery
225 | 			//	TODO: Switch to use velocity, it is better suited.
226 | 			if(typeof $ !== 'undefined' && $.fn && $.fn.animate) {
227 | 				$(el).animate(props, time);
228 | 			}
229 | 		}
230 | 
231 | 		if(cb){
232 | 			setTimeout(cb, time+1);
233 | 		}
234 | 	};
235 | 
236 | 	//	Trigger a transition animation
237 | 	m.trigger = function(name, value, options, cb){
238 | 		options = options || {};
239 | 		var ani = animations[name];
240 | 		if(!ani) {
241 | 			return err("Animation " + name + " not found.");
242 | 		}
243 | 
244 | 		return function(e){
245 | 			var args = ani.fn(function(){
246 | 				return typeof value == 'function'? value(): value;
247 | 			});
248 | 
249 | 			//	Allow override via options
250 | 			for(i in options) if(options.hasOwnProperty(i)) {{
251 | 				args[i] = options[i];
252 | 			}}
253 | 
254 | 			m.animateProperties(e.target, args, cb);
255 | 		};
256 | 	};
257 | 
258 | 	//	Adds an animation for bindings and so on.
259 | 	m.addAnimation = function(name, fn, options){
260 | 		options = options || {};
261 | 
262 | 		if(animations[name]) {
263 | 			return err("Animation " + name + " already defined.");
264 | 		} else if(typeof fn !== "function") {
265 | 			return err("Animation " + name + " is being added as a transition based animation, and must use a function.");
266 | 		}
267 | 
268 | 		options.duration = options.duration || defaultDuration;
269 | 
270 | 		animations[name] = {
271 | 			options: options,
272 | 			fn: fn
273 | 		};
274 | 
275 | 		//	Add a default binding for the name
276 | 		m.addBinding(name, function(prop){
277 | 			m.bindAnimation(name, this, fn, prop);
278 | 		}, true);
279 | 	};
280 | 
281 | 	m.addKFAnimation = function(name, arg, options){
282 | 		options = options || {};
283 | 
284 | 		if(animations[name]) {
285 | 			return err("Animation " + name + " already defined.");
286 | 		}
287 | 
288 | 		var init = function(props) {
289 | 			var aniId = aniName(props),
290 | 				hasAni = document.getElementById(aniId),
291 | 				kf;
292 | 
293 | 			//	Only insert once
294 | 			if(!hasAni) {
295 | 				animations[name].id = aniId;
296 | 
297 | 				props = normaliseTransformProps(props);
298 | 				//  Create keyframes
299 | 				kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
300 | 					.split("\"").join("")
301 | 					.split("},").join("}\n")
302 | 					.split(",").join(";")
303 | 					.split("%:").join("% ");
304 | 
305 | 				var s = document.createElement('style');
306 | 				s.setAttribute('id', aniId);
307 | 				s.id = aniId;
308 | 				s.textContent = kf;
309 | 				//  Might not have head?
310 | 				document.head.appendChild(s);
311 | 			}
312 | 
313 | 			animations[name].isInitialised = true;
314 | 			animations[name].options.animateImmediately = true;
315 | 		};
316 | 
317 | 		options.duration = options.duration || defaultDuration;
318 | 		options.animateImmediately = options.animateImmediately || false;
319 | 
320 | 		animations[name] = {
321 | 			init: init,
322 | 			options: options,
323 | 			arg: arg
324 | 		};
325 | 
326 | 		//	Add a default binding for the name
327 | 		m.addBinding(name, function(prop){
328 | 			m.bindAnimation(name, this, arg, prop);
329 | 		}, true);
330 | 	};
331 | 
332 | 
333 | 	/*	Options - defaults - what it does:
334 | 
335 | 		Delay - unedefined - delays the animation
336 | 		Direction - 
337 | 		Duration
338 | 		FillMode - "forward" makes sure it sticks: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
339 | 		IterationCount, 
340 | 		Name, PlayState, TimingFunction
341 | 	
342 | 	*/
343 | 
344 | 	//	Useful to know, 'to' and 'from': http://lea.verou.me/2012/12/animations-with-one-keyframe/
345 | 	m.animateKF = function(name, el, options, cb){
346 | 		options = options || {};
347 | 		var ani = animations[name], i, props = {};
348 | 		if(!ani) {
349 | 			return err("Animation " + name + " not found.");
350 | 		}
351 | 
352 | 		//	Allow override via options
353 | 		ani.options = ani.options || {};
354 | 		for(i in options) if(options.hasOwnProperty(i)) {{
355 | 			ani.options[i] = options[i];
356 | 		}}
357 | 
358 | 		if(!ani.isInitialised && ani.init) {
359 | 			ani.init(ani.arg);
360 | 		}
361 | 
362 | 		//	Allow animate overrides
363 | 		for(i in ani.options) if(ani.options.hasOwnProperty(i)) {{
364 | 			props[vp("animation" + cap(i))] = ani.options[i];
365 | 		}}
366 | 
367 | 		//	Set required items and default values for props
368 | 		props[vp("animationName")] = ani.id;
369 | 		props[vp("animationDuration")] = (props[vp("animationDuration")]? props[vp("animationDuration")]: defaultDuration) + "ms";
370 | 		props[vp("animationDelay")] = props[vp("animationDelay")]? props[vp("animationDuration")] + "ms": undefined;
371 | 		props[vp("animationFillMode")] = props[vp("animationFillMode")] || "forwards";
372 | 
373 | 		el.style = el.style || {};
374 | 
375 | 		//	Use for callback
376 | 		var endAni = function(){
377 | 			//	Remove listener
378 | 			el.removeEventListener("animationend", endAni, false);
379 | 			if(cb){
380 | 				cb(el);
381 | 			}
382 | 		};
383 | 
384 | 		//	Remove animation if any
385 | 		el.style[vp("animation")] = "";
386 | 		el.style[vp("animationName")] = "";
387 | 
388 | 		//	Must use two request animation frame calls, for FF to
389 | 		//	work properly, does not seem to have any adverse effects
390 | 		requestAnimationFrame(function(){
391 | 			requestAnimationFrame(function(){
392 | 				//	Apply props
393 | 				for(i in props) if(props.hasOwnProperty(i)) {{
394 | 					el.style[i] = props[i];
395 | 				}}
396 | 
397 | 				el.addEventListener("animationend", endAni, false);
398 | 			});
399 | 		});
400 | 	};
401 | 
402 | 	m.triggerKF = function(name, options){
403 | 		return function(){
404 | 			m.animateKF(name, this, options);
405 | 		};
406 | 	};
407 | 
408 | 	m.bindAnimation = function(name, el, options, prop) {
409 | 		var ani = animations[name];
410 | 
411 | 		if(!ani && !ani.name) {
412 | 			return err("Animation " + name + " not found.");
413 | 		}
414 | 
415 | 		if(ani.fn) {
416 | 			m.animateProperties(el, ani.fn(prop));
417 | 		} else {
418 | 			var oldConfig = el.config;
419 | 			el.config = function(el, isInit){
420 | 				if(!ani.isInitialised && ani.init) {
421 | 					ani.init(options);
422 | 				}
423 | 				if(prop() && isInit) {
424 | 					m.animateKF(name, el, options);
425 | 				}
426 | 				if(oldConfig) {
427 | 					oldConfig.apply(el, arguments);
428 | 				}
429 | 			};
430 | 		}
431 | 	};
432 | 
433 | }(window.m || {}));


--------------------------------------------------------------------------------
/dist/nobind/mithril.animate.nobind.min.js:
--------------------------------------------------------------------------------
1 | /*! mithril.animate 07-07-2015 */
2 | !function(a){var b=["Moz","Webkit","Khtml","O","ms"],c=["TransitionProperty","TransitionTimingFunction","TransitionDelay","TransitionDuration","TransitionEnd"],d=["rotate","rotatex","rotatey","scale","skew","translate","translatex","translatey","matrix"],e=400,f=function(a){window.console&&console.error&&console.error(a)},g=function(a){return a.charAt(0).toUpperCase()+a.substr(1)},h=document.createElement("div"),j=function(a,c){var d;if(a in h.style)return a;if("@keyframes"==a){for(var e=0;e<b.length;e+=1)if(d=b[e]+"Transition",d in h.style)return"@-"+b[e].toLowerCase()+"-keyframes";return a}for(var e=0;e<b.length;e+=1)if(d=c?"-"+(b[e]+"-"+a).toLowerCase():b[e]+g(a),d in h.style)return d;return a},k=function(){var a=document.body||document.documentElement,c=a.style,d="transition";if("string"==typeof c[d])return!0;d=d.charAt(0).toUpperCase()+d.substr(1);for(var e=0;e<b.length;e++)if("string"==typeof c[b[e]+d])return!0;return!1},l=function(a){var b,c=0;return a+="",a=a.toLowerCase(),-1!==a.indexOf("ms")?(b=a.split("ms"),c=Number(b[0])):-1!==a.indexOf("s")?(b=a.split("s"),c=1e3*Number(b[0])):c=Number(a),Math.round(c)},m=function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a.style[j(c)]=b[c])},n=function(a){var b,f,h,i,k,l={TransitionTimingFunction:"ease",TransitionDuration:e+"ms",TransitionProperty:"all"};for(b in a)if(a.hasOwnProperty(b)){for(h="Transition"+g(b),i=b.toLowerCase(),k=!1,f=0;f<c.length;f+=1)if(h==c[f]){l[c[f]]=a[b],k=!0;break}for(f=0;f<d.length;f+=1)if(i==d[f]){l[j("transform")]=l[j("transform")]||"",l[j("transform")]+=" "+b+"("+a[b]+")",k=!0;break}k||(l[b]=a[b])}return l},o=function(a){var b,c,e={},f=function(a,b,c){var e,f=b.toLowerCase(),g=!1;for(e=0;e<d.length;e+=1)if(f==d[e]){a[j("transform",!0)]=a[j("transform",!0)]||"",a[j("transform",!0)]+=" "+b+"("+c+")",g=!0;break}g?delete a[b]:a[b]=c};for(b in a)if(a.hasOwnProperty(b))if(-1!==b.indexOf("%")){for(c in a[b])a[b].hasOwnProperty(c)&&f(a[b],c,a[b][c]);e[b]=a[b]}else f(e,b,a[b]);return e},p=function(a){return"ani"+JSON.stringify(a).split(/[{},%":]/).join("")},q={},r=k();a.animateProperties=function(a,b,c){a.style=a.style||{};var d,f=n(b);"undefined"!=typeof f.TransitionDuration?f.TransitionDuration=l(f.TransitionDuration)+"ms":f.TransitionDuration=e+"ms",d=l(f.TransitionDuration)||0,r?m(a,f):"undefined"!=typeof $&&$.fn&&$.fn.animate&&$(a).animate(f,d),c&&setTimeout(c,d+1)},a.trigger=function(b,c,d,e){d=d||{};var g=q[b];return g?function(b){var f=g.fn(function(){return"function"==typeof c?c():c});for(i in d)d.hasOwnProperty(i)&&(f[i]=d[i]);a.animateProperties(b.target,f,e)}:f("Animation "+b+" not found.")},a.addAnimation=function(b,c,d){return d=d||{},q[b]?f("Animation "+b+" already defined."):"function"!=typeof c?f("Animation "+b+" is being added as a transition based animation, and must use a function."):(d.duration=d.duration||e,q[b]={options:d,fn:c},void a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0))},a.addKFAnimation=function(b,c,d){if(d=d||{},q[b])return f("Animation "+b+" already defined.");var g=function(a){var c,d=p(a),e=document.getElementById(d);if(!e){q[b].id=d,a=o(a),c=j("@keyframes")+" "+d+" "+JSON.stringify(a).split('"').join("").split("},").join("}\n").split(",").join(";").split("%:").join("% ");var f=document.createElement("style");f.setAttribute("id",d),f.id=d,f.textContent=c,document.head.appendChild(f)}q[b].isInitialised=!0,q[b].options.animateImmediately=!0};d.duration=d.duration||e,d.animateImmediately=d.animateImmediately||!1,q[b]={init:g,options:d,arg:c},a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0)},a.animateKF=function(a,b,c,d){c=c||{};var h,i=q[a],k={};if(!i)return f("Animation "+a+" not found.");i.options=i.options||{};for(h in c)c.hasOwnProperty(h)&&(i.options[h]=c[h]);!i.isInitialised&&i.init&&i.init(i.arg);for(h in i.options)i.options.hasOwnProperty(h)&&(k[j("animation"+g(h))]=i.options[h]);k[j("animationName")]=i.id,k[j("animationDuration")]=(k[j("animationDuration")]?k[j("animationDuration")]:e)+"ms",k[j("animationDelay")]=k[j("animationDelay")]?k[j("animationDuration")]+"ms":void 0,k[j("animationFillMode")]=k[j("animationFillMode")]||"forwards",b.style=b.style||{};var l=function(){b.removeEventListener("animationend",l,!1),d&&d(b)};b.style[j("animation")]="",b.style[j("animationName")]="",requestAnimationFrame(function(){requestAnimationFrame(function(){for(h in k)k.hasOwnProperty(h)&&(b.style[h]=k[h]);b.addEventListener("animationend",l,!1)})})},a.triggerKF=function(b,c){return function(){a.animateKF(b,this,c)}},a.bindAnimation=function(b,c,d,e){var g=q[b];if(!g&&!g.name)return f("Animation "+b+" not found.");if(g.fn)a.animateProperties(c,g.fn(e));else{var h=c.config;c.config=function(c,f){!g.isInitialised&&g.init&&g.init(d),e()&&f&&a.animateKF(b,c,d),h&&h.apply(c,arguments)}}}}(window.m||{});


--------------------------------------------------------------------------------
/dist/version/mithril.animate-0.0.1.js:
--------------------------------------------------------------------------------
  1 | //	Mithril bindings.
  2 | //	Copyright (C) 2014 jsguy (Mikkel Bergmann)
  3 | //	MIT licensed
  4 | (function(){
  5 | var mithrilBindings = function(m){
  6 | 	m.bindings = m.bindings || {};
  7 | 
  8 | 	//	Pub/Sub based extended properties
  9 | 	m.p = function(value) {
 10 | 		var self = this,
 11 | 			subs = [],
 12 | 			prevValue,
 13 | 			delay = false,
 14 | 			//  Send notifications to subscribers
 15 | 			notify = function (value, prevValue) {
 16 | 				var i;
 17 | 				for (i = 0; i < subs.length; i += 1) {
 18 | 					subs[i].func.apply(subs[i].context, [value, prevValue]);
 19 | 				}
 20 | 			},
 21 | 			prop = function() {
 22 | 				if (arguments.length) {
 23 | 					value = arguments[0];
 24 | 					if (prevValue !== value) {
 25 | 						var tmpPrev = prevValue;
 26 | 						prevValue = value;
 27 | 						notify(value, tmpPrev);
 28 | 					}
 29 | 				}
 30 | 				return value;
 31 | 			};
 32 | 
 33 | 		//	Allow push on arrays
 34 | 		prop.push = function(val) {
 35 | 			if(value.push && typeof value.length !== "undefined") {
 36 | 				value.push(val);
 37 | 			}
 38 | 			prop(value);
 39 | 		};
 40 | 
 41 | 		//	Subscribe for when the value changes
 42 | 		prop.subscribe = function (func, context) {
 43 | 			subs.push({ func: func, context: context || self });
 44 | 			return prop;
 45 | 		};
 46 | 
 47 | 		//	Allow property to not automatically render
 48 | 		prop.delay = function(value) {
 49 | 			delay = !!value;
 50 | 			return prop;
 51 | 		};
 52 | 
 53 | 		//	Automatically update rendering when a value changes
 54 | 		//	As mithril waits for a request animation frame, this should be ok.
 55 | 		//	You can use .delay(true) to be able to manually handle updates
 56 | 		prop.subscribe(function(val){
 57 | 			if(!delay) {
 58 | 				m.startComputation();
 59 | 				m.endComputation();
 60 | 			}
 61 | 			return prop;
 62 | 		});
 63 | 
 64 | 		return prop;
 65 | 	};
 66 | 
 67 | 	//	Element function that applies our extended bindings
 68 | 	//	Note: 
 69 | 	//		. Some attributes can be removed when applied, eg: custom attributes
 70 | 	//	
 71 | 	m.e = function(element, attrs, children) {
 72 | 		for (var name in attrs) {
 73 | 			if (m.bindings[name]) {
 74 | 				m.bindings[name].func.apply(attrs, [attrs[name]]);
 75 | 				if(m.bindings[name].removeable) {
 76 | 					delete attrs[name];
 77 | 				}
 78 | 			}
 79 | 		}
 80 | 		return m(element, attrs, children);
 81 | 	};
 82 | 
 83 | 	//	Add bindings method
 84 | 	//	Non-standard attributes do not need to be rendered, eg: valueInput
 85 | 	//	so they are set as removable
 86 | 	m.addBinding = function(name, func, removeable){
 87 | 		m.bindings[name] = {
 88 | 			func: func,
 89 | 			removeable: removeable
 90 | 		};
 91 | 	};
 92 | 
 93 | 	//	Get the underlying value of a property
 94 | 	m.unwrap = function(prop) {
 95 | 		return (typeof prop == "function")? prop(): prop;
 96 | 	};
 97 | 
 98 | 	//	Bi-directional binding of value
 99 | 	m.addBinding("value", function(prop) {
100 | 		if (typeof prop == "function") {
101 | 			this.value = prop();
102 | 			this.onchange = m.withAttr("value", prop);
103 | 		} else {
104 | 			this.value = prop;
105 | 		}
106 | 	});
107 | 
108 | 	//	Bi-directional binding of checked property
109 | 	m.addBinding("checked", function(prop) {
110 | 		if (typeof prop == "function") {
111 | 			this.checked = prop();
112 | 			this.onchange = m.withAttr("checked", prop);
113 | 		} else {
114 | 			this.checked = prop;
115 | 		}
116 | 	});
117 | 
118 | 	//	Hide node
119 | 	m.addBinding("hide", function(prop){
120 | 		this.style = {
121 | 			display: m.unwrap(prop)? "none" : ""
122 | 		};
123 | 	}, true);
124 | 
125 | 	//	Toggle value(s) on click
126 | 	m.addBinding('toggle', function(prop){
127 | 		this.onclick = function(){
128 | 			//	Toggle allows an enum list to be toggled, eg: [prop, value2, value2]
129 | 			var isFunc = typeof prop === 'function', tmp, i, vals = [], val, tVal;
130 | 
131 | 			//	Toggle boolean
132 | 			if(isFunc) {
133 | 				value = prop();
134 | 				prop(!value);
135 | 			} else {
136 | 				//	Toggle enumeration
137 | 				tmp = prop[0];
138 | 				val = tmp();
139 | 				vals = prop.slice(1);
140 | 				tVal = vals[0];
141 | 
142 | 				for(i = 0; i < vals.length; i += 1) {
143 | 					if(val == vals[i]) {
144 | 						if(typeof vals[i+1] !== 'undefined') {
145 | 							tVal = vals[i+1];
146 | 						}
147 | 						break;
148 | 					}
149 | 				}
150 | 				tmp(tVal);
151 | 			}
152 | 		};
153 | 	}, true);
154 | 
155 | 	//	Set hover states, a'la jQuery pattern
156 | 	m.addBinding('hover', function(prop){
157 | 		this.onmouseover = prop[0];
158 | 		if(prop[1]) {
159 | 			this.onmouseout = prop[1];
160 | 		}
161 | 	}, true );
162 | 
163 | 	//	Add value bindings for various event types 
164 | 	var events = ["Input", "Keyup", "Keypress"],
165 | 		createBinding = function(name, eve){
166 | 			//	Bi-directional binding of value
167 | 			m.addBinding(name, function(prop) {
168 | 				if (typeof prop == "function") {
169 | 					this.value = prop();
170 | 					this[eve] = m.withAttr("value", prop);
171 | 				} else {
172 | 					this.value = prop;
173 | 				}
174 | 			}, true);
175 | 		};
176 | 
177 | 	for(var i = 0; i < events.length; i += 1) {
178 | 		var eve = events[i];
179 | 		createBinding("value" + eve, "on" + eve.toLowerCase());
180 | 	}
181 | 
182 | 
183 | 	//	Set a value on a property
184 | 	m.set = function(prop, value){
185 | 		return function() {
186 | 			prop(value);
187 | 		};
188 | 	};
189 | 
190 | 	/*	Returns a function that can trigger a binding 
191 | 		Usage: onclick: m.trigger('binding', prop)
192 | 	*/
193 | 	m.trigger = function(){
194 | 		var args = Array.prototype.slice.call(arguments);
195 | 		return function(){
196 | 			var name = args[0],
197 | 				argList = args.slice(1);
198 | 			if (m.bindings[name]) {
199 | 				m.bindings[name].func.apply(this, argList);
200 | 			}
201 | 		};
202 | 	};
203 | 
204 | 	return m.bindings;
205 | };
206 | 
207 | if (typeof module != "undefined" && module !== null && module.exports) {
208 | 	module.exports = mithrilBindings;
209 | } else if (typeof define === "function" && define.amd) {
210 | 	define(function() {
211 | 		return mithrilBindings;
212 | 	});
213 | } else {
214 | 	mithrilBindings(typeof window != "undefined"? window.m || {}: {});
215 | }
216 | 
217 | }());;/*
218 | 	mithril.animate - Copyright 2014 jsguy
219 | 	MIT Licensed.
220 | */
221 | (function (m) {
222 | 	//	Known prefiex
223 | 	var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
224 | 	transitionProps = ['TransitionProperty', 'TransitionTimingFunction', 'TransitionDelay', 'TransitionDuration', 'TransitionEnd'],
225 | 	transformProps = ['rotate', 'rotatex', 'rotatey', 'scale', 'skew', 'translate', 'translatex', 'translatey', 'matrix'],
226 | 
227 | 	defaultDuration = 400,
228 | 
229 | 	err = function(msg){
230 | 		window.console && console.error && console.error(msg);
231 | 	},
232 | 	
233 | 	//	Capitalise		
234 | 	cap = function(str){
235 | 		return str.charAt(0).toUpperCase() + str.substr(1);
236 | 	},
237 | 
238 | 	//	For checking what vendor prefixes are native
239 | 	div = document.createElement('div'),
240 | 
241 | 	//	vendor prefix, ie: transitionDuration becomes MozTransitionDuration
242 | 	vp = function (prop, dashed) {
243 | 		var pf;
244 | 		//	Handle unprefixed
245 | 		if (prop in div.style) {
246 | 			return prop;
247 | 		}
248 | 
249 | 		//	Handle keyframes
250 | 		if(prop == "@keyframes") {
251 | 			for (var i = 0; i < prefixes.length; i += 1) {
252 | 				//	Testing using transition
253 | 				pf = prefixes[i] + "Transition";
254 | 				if (pf in div.style) {
255 | 					return "@-" + prefixes[i].toLowerCase() + "-keyframes";
256 | 				}
257 | 			}
258 | 			return prop;
259 | 		}
260 | 
261 | 		for (var i = 0; i < prefixes.length; i += 1) {
262 | 			if(dashed) {
263 | 				pf = "-" +(prefixes[i] + "-" + prop).toLowerCase();
264 | 			} else {
265 | 				pf = prefixes[i] + cap(prop);
266 | 			}
267 | 			if (pf in div.style) {
268 | 				return pf;
269 | 			}
270 | 		}
271 | 		//	Can't find it - return original property.
272 | 		return prop;
273 | 	},
274 | 
275 | 	//	See if we can use native transitions
276 | 	supportsTransitions = function() {
277 | 		var b = document.body || document.documentElement,
278 | 			s = b.style,
279 | 			p = 'transition';
280 | 
281 | 		if (typeof s[p] == 'string') { return true; }
282 | 
283 | 		// Tests for vendor specific prop
284 | 		p = p.charAt(0).toUpperCase() + p.substr(1);
285 | 
286 | 		for (var i=0; i<prefixes.length; i++) {
287 | 			if (typeof s[prefixes[i] + p] == 'string') { return true; }
288 | 		}
289 | 
290 | 		return false;
291 | 	},
292 | 
293 | 	//	Converts CSS transition times to MS
294 | 	getTimeinMS = function(str) {
295 | 		var result = 0, tmp;
296 | 		str += "";
297 | 		str = str.toLowerCase();
298 | 		if(str.indexOf("ms") !== -1) {
299 | 			tmp = str.split("ms");
300 | 			result = Number(tmp[0]);
301 | 		} else if(str.indexOf("s") !== -1) {
302 | 			//	s
303 | 			tmp = str.split("s");
304 | 			result = Number(tmp[0]) * 1000;
305 | 		} else {
306 | 			result = Number(str);
307 | 		}
308 | 
309 | 		return Math.round(result);
310 | 	},
311 | 
312 | 	//	Set style properties
313 | 	setStyleProps = function(obj, props){
314 | 		for(var i in props) {if(props.hasOwnProperty(i)) {
315 | 			obj.style[vp(i)] = props[i];
316 | 		}}
317 | 	},
318 | 
319 | 	//	Set props for transitions and transforms with basic defaults
320 | 	setTransitionProps = function(args){
321 | 		var props = {
322 | 				//	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) initial, inherit
323 | 				TransitionTimingFunction: "ease",
324 | 				TransitionDuration: defaultDuration + "ms",
325 | 				TransitionProperty: "all"
326 | 			},
327 | 			p, i, tmp, tmp2, found;
328 | 
329 | 		//	Set any allowed properties 
330 | 		for(p in args) { if(args.hasOwnProperty(p)) {
331 | 			tmp = 'Transition' + cap(p);
332 | 			tmp2 = p.toLowerCase();
333 | 			found = false;
334 | 
335 | 			//	Look at transition props
336 | 			for(i = 0; i < transitionProps.length; i += 1) {
337 | 				if(tmp == transitionProps[i]) {
338 | 					props[transitionProps[i]] = args[p];
339 | 					found = true;
340 | 					break;
341 | 				}
342 | 			}
343 | 
344 | 			//	Look at transform props
345 | 			for(i = 0; i < transformProps.length; i += 1) {
346 | 				if(tmp2 == transformProps[i]) {
347 | 					props[vp("transform")] = props[vp("transform")] || "";
348 | 					props[vp("transform")] += " " +p + "(" + args[p] + ")";
349 | 					found = true;
350 | 					break;
351 | 				}
352 | 			}
353 | 
354 | 			if(!found) {
355 | 				props[p] = args[p];
356 | 			}
357 | 		}}
358 | 		return props;
359 | 	},
360 | 
361 | 	//	Fix animatiuon properties
362 | 	//	Normalises transforms, eg: rotate, scale, etc...
363 | 	normaliseTransformProps = function(args){
364 | 		var props = {},
365 | 			tmpProp,
366 | 			p, i, found,
367 | 			normal = function(props, p, value){
368 | 				var tmp = p.toLowerCase(),
369 | 					found = false, i;
370 | 
371 | 				//	Look at transform props
372 | 				for(i = 0; i < transformProps.length; i += 1) {
373 | 					if(tmp == transformProps[i]) {
374 | 						props[vp("transform", true)] = props[vp("transform", true)] || "";
375 | 						props[vp("transform", true)] += " " +p + "(" + value + ")";
376 | 						found = true;
377 | 						break;
378 | 					}
379 | 				}
380 | 
381 | 				if(!found) {
382 | 					props[p] = value;
383 | 				} else {
384 | 					//	Remove transform property
385 | 					delete props[p];
386 | 				}
387 | 			};
388 | 
389 | 		//	Set any allowed properties 
390 | 		for(p in args) { if(args.hasOwnProperty(p)) {
391 | 			//	If we have a percentage, we have a key frame
392 | 			if(p.indexOf("%") !== -1) {
393 | 				for(i in args[p]) { if(args[p].hasOwnProperty(i)) {
394 | 					normal(args[p], i, args[p][i]);
395 | 				}}
396 | 				props[p] = args[p];
397 | 			} else {
398 | 				normal(props, p, args[p]);
399 | 			}
400 | 		}}
401 | 
402 | 		return props;
403 | 	},
404 | 
405 | 
406 | 	//	If an object is empty
407 | 	isEmpty = function(obj) {
408 | 		for(var i in obj) {if(obj.hasOwnProperty(i)) {
409 | 			return false;
410 | 		}}
411 | 		return true; 
412 | 	},
413 | 	//	Creates a hashed name for the animation
414 | 	//	Use to create a unique keyframe animation style rule
415 | 	aniName = function(props){
416 | 		return "ani" + JSON.stringify(props).split(/[{},%":]/).join("");
417 | 	},
418 | 	animations = {},
419 | 
420 | 	//	See if we can use transitions
421 | 	canTrans = supportsTransitions();
422 | 
423 | 	//	IE10+ http://caniuse.com/#search=css-animations
424 | 	m.animateProperties = function(el, args, cb){
425 | 		el.style = el.style || {};
426 | 		var props = setTransitionProps(args), time;
427 | 
428 | 		if(typeof props.TransitionDuration !== 'undefined') {
429 | 			props.TransitionDuration = getTimeinMS(props.TransitionDuration) + "ms";
430 | 		} else {
431 | 			props.TransitionDuration = defaultDuration + "ms";
432 | 		}
433 | 
434 | 		time = getTimeinMS(props.TransitionDuration) || 0;
435 | 
436 | 		//	See if we support transitions
437 | 		if(canTrans) {
438 | 			setStyleProps(el, props);
439 | 		} else {
440 | 			//	Try and fall back to jQuery
441 | 			//	TODO: Switch to use velocity, it is better suited.
442 | 			if(typeof $ !== 'undefined' && $.fn && $.fn.animate) {
443 | 				$(el).animate(props, time);
444 | 			}
445 | 		}
446 | 
447 | 		if(cb){
448 | 			setTimeout(cb, time+1);
449 | 		}
450 | 	};
451 | 
452 | 	//	Trigger a transition animation
453 | 	m.trigger = function(name, value, options, cb){
454 | 		options = options || {};
455 | 		var ani = animations[name];
456 | 		if(!ani) {
457 | 			return err("Animation " + name + " not found.");
458 | 		}
459 | 
460 | 		return function(e){
461 | 			var args = ani.fn(function(){
462 | 				return typeof value == 'function'? value(): value;
463 | 			});
464 | 
465 | 			//	Allow override via options
466 | 			for(i in options) if(options.hasOwnProperty(i)) {{
467 | 				args[i] = options[i];
468 | 			}}
469 | 
470 | 			m.animateProperties(e.target, args, cb);
471 | 		};
472 | 	};
473 | 
474 | 	//	Adds an animation for bindings and so on.
475 | 	m.addAnimation = function(name, fn, options){
476 | 		options = options || {};
477 | 
478 | 		if(animations[name]) {
479 | 			return err("Animation " + name + " already defined.");
480 | 		} else if(typeof fn !== "function") {
481 | 			return err("Animation " + name + " is being added as a transition based animation, and must use a function.");
482 | 		}
483 | 
484 | 		options.duration = options.duration || defaultDuration;
485 | 
486 | 		animations[name] = {
487 | 			options: options,
488 | 			fn: fn
489 | 		};
490 | 
491 | 		//	Add a default binding for the name
492 | 		m.addBinding(name, function(prop){
493 | 			m.bindAnimation(name, this, fn, prop);
494 | 		}, true);
495 | 	};
496 | 
497 | 	m.addKFAnimation = function(name, arg, options){
498 | 		options = options || {};
499 | 
500 | 		if(animations[name]) {
501 | 			return err("Animation " + name + " already defined.");
502 | 		}
503 | 
504 | 		var init = function(props) {
505 | 			var aniId = aniName(props),
506 | 				hasAni = document.getElementById(aniId),
507 | 				kf;
508 | 
509 | 			//	Only insert once
510 | 			if(!hasAni) {
511 | 				animations[name].id = aniId;
512 | 
513 | 				props = normaliseTransformProps(props);
514 | 				//  Create keyframes
515 | 				kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
516 | 					.split("\"").join("")
517 | 					.split("},").join("}\n")
518 | 					.split(",").join(";")
519 | 					.split("%:").join("% ");
520 | 
521 | 				var s = document.createElement('style');
522 | 				s.setAttribute('id', aniId);
523 | 				s.id = aniId;
524 | 				s.textContent = kf;
525 | 				//  Might not have head?
526 | 				document.head.appendChild(s);
527 | 			}
528 | 
529 | 			animations[name].isInitialised = true;
530 | 			animations[name].options.animateImmediately = true;
531 | 		};
532 | 
533 | 		options.duration = options.duration || defaultDuration;
534 | 		options.animateImmediately = options.animateImmediately || false;
535 | 
536 | 		animations[name] = {
537 | 			init: init,
538 | 			options: options,
539 | 			arg: arg
540 | 		};
541 | 
542 | 		//	Add a default binding for the name
543 | 		m.addBinding(name, function(prop){
544 | 			m.bindAnimation(name, this, arg, prop);
545 | 		}, true);
546 | 	};
547 | 
548 | 
549 | 	/*	Options - defaults - what it does:
550 | 
551 | 		Delay - unedefined - delays the animation
552 | 		Direction - 
553 | 		Duration
554 | 		FillMode - "forward" makes sure it sticks: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
555 | 		IterationCount, 
556 | 		Name, PlayState, TimingFunction
557 | 	
558 | 	*/
559 | 
560 | 	//	Useful to know, 'to' and 'from': http://lea.verou.me/2012/12/animations-with-one-keyframe/
561 | 	m.animateKF = function(name, el, options, cb){
562 | 		options = options || {};
563 | 		var ani = animations[name], i, props = {};
564 | 		if(!ani) {
565 | 			return err("Animation " + name + " not found.");
566 | 		}
567 | 
568 | 		//	Allow override via options
569 | 		ani.options = ani.options || {};
570 | 		for(i in options) if(options.hasOwnProperty(i)) {{
571 | 			ani.options[i] = options[i];
572 | 		}}
573 | 
574 | 		if(!ani.isInitialised && ani.init) {
575 | 			ani.init(ani.arg);
576 | 		}
577 | 
578 | 		//	Allow animate overrides
579 | 		for(i in ani.options) if(ani.options.hasOwnProperty(i)) {{
580 | 			props[vp("animation" + cap(i))] = ani.options[i];
581 | 		}}
582 | 
583 | 		//	Set required items and default values for props
584 | 		props[vp("animationName")] = ani.id;
585 | 		props[vp("animationDuration")] = (props[vp("animationDuration")]? props[vp("animationDuration")]: defaultDuration) + "ms";
586 | 		props[vp("animationDelay")] = props[vp("animationDelay")]? props[vp("animationDuration")] + "ms": undefined;
587 | 		props[vp("animationFillMode")] = props[vp("animationFillMode")] || "forwards";
588 | 
589 | 		el.style = el.style || {};
590 | 
591 | 		//	Use for callback
592 | 		var endAni = function(){
593 | 			//	Remove listener
594 | 			el.removeEventListener("animationend", endAni, false);
595 | 			if(cb){
596 | 				cb(el);
597 | 			}
598 | 		};
599 | 
600 | 		//	Remove animation if any
601 | 		el.style[vp("animation")] = "";
602 | 		el.style[vp("animationName")] = "";
603 | 
604 | 		//	Must use two request animation frame calls, for FF to
605 | 		//	work properly, does not seem to have any adverse effects
606 | 		requestAnimationFrame(function(){
607 | 			requestAnimationFrame(function(){
608 | 				//	Apply props
609 | 				for(i in props) if(props.hasOwnProperty(i)) {{
610 | 					el.style[i] = props[i];
611 | 				}}
612 | 
613 | 				el.addEventListener("animationend", endAni, false);
614 | 			});
615 | 		});
616 | 	};
617 | 
618 | 	m.triggerKF = function(name, options){
619 | 		return function(){
620 | 			m.animateKF(name, this, options);
621 | 		};
622 | 	};
623 | 
624 | 	m.bindAnimation = function(name, el, options, prop) {
625 | 		var ani = animations[name];
626 | 
627 | 		if(!ani && !ani.name) {
628 | 			return err("Animation " + name + " not found.");
629 | 		}
630 | 
631 | 		if(ani.fn) {
632 | 			m.animateProperties(el, ani.fn(prop));
633 | 		} else {
634 | 			var oldConfig = el.config;
635 | 			el.config = function(el, isInit){
636 | 				if(!ani.isInitialised && ani.init) {
637 | 					ani.init(options);
638 | 				}
639 | 				if(prop() && isInit) {
640 | 					m.animateKF(name, el, options);
641 | 				}
642 | 				if(oldConfig) {
643 | 					oldConfig.apply(el, arguments);
644 | 				}
645 | 			};
646 | 		}
647 | 	};
648 | 
649 | }(window.m || {}));;/* Default transform2d bindings */
650 | (function (m) {
651 | 	var basicBindings = ['scale', 'scalex', 'scaley', 'translate', 'translatex', 'translatey', 
652 | 		'matrix', 'backgroundColor', 'backgroundPosition', 'borderBottomColor', 
653 | 		'borderBottomWidth', 'borderLeftColor', 'borderLeftWidth', 'borderRightColor', 
654 | 		'borderRightWidth', 'borderSpacing', 'borderTopColor', 'borderTopWidth', 'bottom', 
655 | 		'clip', 'color', 'fontSize', 'fontWeight', 'height', 'left', 'letterSpacing', 
656 | 		'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 
657 | 		'maxWidth', 'minHeight', 'minWidth', 'opacity', 'outlineColor', 'outlineWidth', 
658 | 		'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'right', 'textIndent', 
659 | 		'textShadow', 'top', 'verticalAlign', 'visibility', 'width', 'wordSpacing', 'zIndex'],
660 | 		degBindings = ['rotate', 'rotatex', 'rotatey', 'skewx', 'skewy'], i;
661 | 
662 | 	//	Basic bindings where we pass the prop straight through
663 | 	for(i = 0; i < basicBindings.length; i += 1) {
664 | 		(function(name){
665 | 			m.addAnimation(name, function(prop){
666 | 				var options = {};
667 | 				options[name] = prop();
668 | 				return options;
669 | 			});
670 | 		}(basicBindings[i]));
671 | 	}
672 | 	
673 | 	//	Degree based bindings - conditionally postfix with "deg"
674 | 	for(i = 0; i < degBindings.length; i += 1) {
675 | 		(function(name){
676 | 			m.addAnimation(name, function(prop){
677 | 				var options = {}, value = prop();
678 | 				options[name] = isNaN(value)? value: value + "deg";
679 | 				return options;
680 | 			});
681 | 		}(degBindings[i]));
682 | 	}
683 | 
684 | 	//	Attributes that require more than one prop
685 | 	m.addAnimation("skew", function(prop){
686 | 		var value = prop();
687 | 		return {
688 | 			skew: [
689 | 				value[0] + (isNaN(value[0])? "":"deg"), 
690 | 				value[1] + (isNaN(value[1])? "":"deg")
691 | 			]
692 | 		};
693 | 	});
694 | }(window.m));


--------------------------------------------------------------------------------
/dist/version/mithril.animate-0.0.1.min.js:
--------------------------------------------------------------------------------
1 | /*! mithril.animate 07-07-2015 */
2 | !function(){var a=function(a){a.bindings=a.bindings||{},a.p=function(b){var c,d=this,e=[],f=!1,g=function(a,b){var c;for(c=0;c<e.length;c+=1)e[c].func.apply(e[c].context,[a,b])},h=function(){if(arguments.length&&(b=arguments[0],c!==b)){var a=c;c=b,g(b,a)}return b};return h.push=function(a){b.push&&"undefined"!=typeof b.length&&b.push(a),h(b)},h.subscribe=function(a,b){return e.push({func:a,context:b||d}),h},h.delay=function(a){return f=!!a,h},h.subscribe(function(b){return f||(a.startComputation(),a.endComputation()),h}),h},a.e=function(b,c,d){for(var e in c)a.bindings[e]&&(a.bindings[e].func.apply(c,[c[e]]),a.bindings[e].removeable&&delete c[e]);return a(b,c,d)},a.addBinding=function(b,c,d){a.bindings[b]={func:c,removeable:d}},a.unwrap=function(a){return"function"==typeof a?a():a},a.addBinding("value",function(b){"function"==typeof b?(this.value=b(),this.onchange=a.withAttr("value",b)):this.value=b}),a.addBinding("checked",function(b){"function"==typeof b?(this.checked=b(),this.onchange=a.withAttr("checked",b)):this.checked=b}),a.addBinding("hide",function(b){this.style={display:a.unwrap(b)?"none":""}},!0),a.addBinding("toggle",function(a){this.onclick=function(){var b,c,d,e,f="function"==typeof a,g=[];if(f)value=a(),a(!value);else{for(b=a[0],d=b(),g=a.slice(1),e=g[0],c=0;c<g.length;c+=1)if(d==g[c]){"undefined"!=typeof g[c+1]&&(e=g[c+1]);break}b(e)}}},!0),a.addBinding("hover",function(a){this.onmouseover=a[0],a[1]&&(this.onmouseout=a[1])},!0);for(var b=["Input","Keyup","Keypress"],c=function(b,c){a.addBinding(b,function(b){"function"==typeof b?(this.value=b(),this[c]=a.withAttr("value",b)):this.value=b},!0)},d=0;d<b.length;d+=1){var e=b[d];c("value"+e,"on"+e.toLowerCase())}return a.set=function(a,b){return function(){a(b)}},a.trigger=function(){var b=Array.prototype.slice.call(arguments);return function(){var c=b[0],d=b.slice(1);a.bindings[c]&&a.bindings[c].func.apply(this,d)}},a.bindings};"undefined"!=typeof module&&null!==module&&module.exports?module.exports=a:"function"==typeof define&&define.amd?define(function(){return a}):a("undefined"!=typeof window?window.m||{}:{})}(),function(a){var b=["Moz","Webkit","Khtml","O","ms"],c=["TransitionProperty","TransitionTimingFunction","TransitionDelay","TransitionDuration","TransitionEnd"],d=["rotate","rotatex","rotatey","scale","skew","translate","translatex","translatey","matrix"],e=400,f=function(a){window.console&&console.error&&console.error(a)},g=function(a){return a.charAt(0).toUpperCase()+a.substr(1)},h=document.createElement("div"),j=function(a,c){var d;if(a in h.style)return a;if("@keyframes"==a){for(var e=0;e<b.length;e+=1)if(d=b[e]+"Transition",d in h.style)return"@-"+b[e].toLowerCase()+"-keyframes";return a}for(var e=0;e<b.length;e+=1)if(d=c?"-"+(b[e]+"-"+a).toLowerCase():b[e]+g(a),d in h.style)return d;return a},k=function(){var a=document.body||document.documentElement,c=a.style,d="transition";if("string"==typeof c[d])return!0;d=d.charAt(0).toUpperCase()+d.substr(1);for(var e=0;e<b.length;e++)if("string"==typeof c[b[e]+d])return!0;return!1},l=function(a){var b,c=0;return a+="",a=a.toLowerCase(),-1!==a.indexOf("ms")?(b=a.split("ms"),c=Number(b[0])):-1!==a.indexOf("s")?(b=a.split("s"),c=1e3*Number(b[0])):c=Number(a),Math.round(c)},m=function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a.style[j(c)]=b[c])},n=function(a){var b,f,h,i,k,l={TransitionTimingFunction:"ease",TransitionDuration:e+"ms",TransitionProperty:"all"};for(b in a)if(a.hasOwnProperty(b)){for(h="Transition"+g(b),i=b.toLowerCase(),k=!1,f=0;f<c.length;f+=1)if(h==c[f]){l[c[f]]=a[b],k=!0;break}for(f=0;f<d.length;f+=1)if(i==d[f]){l[j("transform")]=l[j("transform")]||"",l[j("transform")]+=" "+b+"("+a[b]+")",k=!0;break}k||(l[b]=a[b])}return l},o=function(a){var b,c,e={},f=function(a,b,c){var e,f=b.toLowerCase(),g=!1;for(e=0;e<d.length;e+=1)if(f==d[e]){a[j("transform",!0)]=a[j("transform",!0)]||"",a[j("transform",!0)]+=" "+b+"("+c+")",g=!0;break}g?delete a[b]:a[b]=c};for(b in a)if(a.hasOwnProperty(b))if(-1!==b.indexOf("%")){for(c in a[b])a[b].hasOwnProperty(c)&&f(a[b],c,a[b][c]);e[b]=a[b]}else f(e,b,a[b]);return e},p=function(a){return"ani"+JSON.stringify(a).split(/[{},%":]/).join("")},q={},r=k();a.animateProperties=function(a,b,c){a.style=a.style||{};var d,f=n(b);"undefined"!=typeof f.TransitionDuration?f.TransitionDuration=l(f.TransitionDuration)+"ms":f.TransitionDuration=e+"ms",d=l(f.TransitionDuration)||0,r?m(a,f):"undefined"!=typeof $&&$.fn&&$.fn.animate&&$(a).animate(f,d),c&&setTimeout(c,d+1)},a.trigger=function(b,c,d,e){d=d||{};var g=q[b];return g?function(b){var f=g.fn(function(){return"function"==typeof c?c():c});for(i in d)d.hasOwnProperty(i)&&(f[i]=d[i]);a.animateProperties(b.target,f,e)}:f("Animation "+b+" not found.")},a.addAnimation=function(b,c,d){return d=d||{},q[b]?f("Animation "+b+" already defined."):"function"!=typeof c?f("Animation "+b+" is being added as a transition based animation, and must use a function."):(d.duration=d.duration||e,q[b]={options:d,fn:c},void a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0))},a.addKFAnimation=function(b,c,d){if(d=d||{},q[b])return f("Animation "+b+" already defined.");var g=function(a){var c,d=p(a),e=document.getElementById(d);if(!e){q[b].id=d,a=o(a),c=j("@keyframes")+" "+d+" "+JSON.stringify(a).split('"').join("").split("},").join("}\n").split(",").join(";").split("%:").join("% ");var f=document.createElement("style");f.setAttribute("id",d),f.id=d,f.textContent=c,document.head.appendChild(f)}q[b].isInitialised=!0,q[b].options.animateImmediately=!0};d.duration=d.duration||e,d.animateImmediately=d.animateImmediately||!1,q[b]={init:g,options:d,arg:c},a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0)},a.animateKF=function(a,b,c,d){c=c||{};var h,i=q[a],k={};if(!i)return f("Animation "+a+" not found.");i.options=i.options||{};for(h in c)c.hasOwnProperty(h)&&(i.options[h]=c[h]);!i.isInitialised&&i.init&&i.init(i.arg);for(h in i.options)i.options.hasOwnProperty(h)&&(k[j("animation"+g(h))]=i.options[h]);k[j("animationName")]=i.id,k[j("animationDuration")]=(k[j("animationDuration")]?k[j("animationDuration")]:e)+"ms",k[j("animationDelay")]=k[j("animationDelay")]?k[j("animationDuration")]+"ms":void 0,k[j("animationFillMode")]=k[j("animationFillMode")]||"forwards",b.style=b.style||{};var l=function(){b.removeEventListener("animationend",l,!1),d&&d(b)};b.style[j("animation")]="",b.style[j("animationName")]="",requestAnimationFrame(function(){requestAnimationFrame(function(){for(h in k)k.hasOwnProperty(h)&&(b.style[h]=k[h]);b.addEventListener("animationend",l,!1)})})},a.triggerKF=function(b,c){return function(){a.animateKF(b,this,c)}},a.bindAnimation=function(b,c,d,e){var g=q[b];if(!g&&!g.name)return f("Animation "+b+" not found.");if(g.fn)a.animateProperties(c,g.fn(e));else{var h=c.config;c.config=function(c,f){!g.isInitialised&&g.init&&g.init(d),e()&&f&&a.animateKF(b,c,d),h&&h.apply(c,arguments)}}}}(window.m||{}),function(a){var b,c=["scale","scalex","scaley","translate","translatex","translatey","matrix","backgroundColor","backgroundPosition","borderBottomColor","borderBottomWidth","borderLeftColor","borderLeftWidth","borderRightColor","borderRightWidth","borderSpacing","borderTopColor","borderTopWidth","bottom","clip","color","fontSize","fontWeight","height","left","letterSpacing","lineHeight","marginBottom","marginLeft","marginRight","marginTop","maxHeight","maxWidth","minHeight","minWidth","opacity","outlineColor","outlineWidth","paddingBottom","paddingLeft","paddingRight","paddingTop","right","textIndent","textShadow","top","verticalAlign","visibility","width","wordSpacing","zIndex"],d=["rotate","rotatex","rotatey","skewx","skewy"];for(b=0;b<c.length;b+=1)!function(b){a.addAnimation(b,function(a){var c={};return c[b]=a(),c})}(c[b]);for(b=0;b<d.length;b+=1)!function(b){a.addAnimation(b,function(a){var c={},d=a();return c[b]=isNaN(d)?d:d+"deg",c})}(d[b]);a.addAnimation("skew",function(a){var b=a();return{skew:[b[0]+(isNaN(b[0])?"":"deg"),b[1]+(isNaN(b[1])?"":"deg")]}})}(window.m);


--------------------------------------------------------------------------------
/dist/version/mithril.animate-0.0.1.nobind.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	mithril.animate - Copyright 2014 jsguy
  3 | 	MIT Licensed.
  4 | */
  5 | (function (m) {
  6 | 	//	Known prefiex
  7 | 	var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
  8 | 	transitionProps = ['TransitionProperty', 'TransitionTimingFunction', 'TransitionDelay', 'TransitionDuration', 'TransitionEnd'],
  9 | 	transformProps = ['rotate', 'rotatex', 'rotatey', 'scale', 'skew', 'translate', 'translatex', 'translatey', 'matrix'],
 10 | 
 11 | 	defaultDuration = 400,
 12 | 
 13 | 	err = function(msg){
 14 | 		window.console && console.error && console.error(msg);
 15 | 	},
 16 | 	
 17 | 	//	Capitalise		
 18 | 	cap = function(str){
 19 | 		return str.charAt(0).toUpperCase() + str.substr(1);
 20 | 	},
 21 | 
 22 | 	//	For checking what vendor prefixes are native
 23 | 	div = document.createElement('div'),
 24 | 
 25 | 	//	vendor prefix, ie: transitionDuration becomes MozTransitionDuration
 26 | 	vp = function (prop, dashed) {
 27 | 		var pf;
 28 | 		//	Handle unprefixed
 29 | 		if (prop in div.style) {
 30 | 			return prop;
 31 | 		}
 32 | 
 33 | 		//	Handle keyframes
 34 | 		if(prop == "@keyframes") {
 35 | 			for (var i = 0; i < prefixes.length; i += 1) {
 36 | 				//	Testing using transition
 37 | 				pf = prefixes[i] + "Transition";
 38 | 				if (pf in div.style) {
 39 | 					return "@-" + prefixes[i].toLowerCase() + "-keyframes";
 40 | 				}
 41 | 			}
 42 | 			return prop;
 43 | 		}
 44 | 
 45 | 		for (var i = 0; i < prefixes.length; i += 1) {
 46 | 			if(dashed) {
 47 | 				pf = "-" +(prefixes[i] + "-" + prop).toLowerCase();
 48 | 			} else {
 49 | 				pf = prefixes[i] + cap(prop);
 50 | 			}
 51 | 			if (pf in div.style) {
 52 | 				return pf;
 53 | 			}
 54 | 		}
 55 | 		//	Can't find it - return original property.
 56 | 		return prop;
 57 | 	},
 58 | 
 59 | 	//	See if we can use native transitions
 60 | 	supportsTransitions = function() {
 61 | 		var b = document.body || document.documentElement,
 62 | 			s = b.style,
 63 | 			p = 'transition';
 64 | 
 65 | 		if (typeof s[p] == 'string') { return true; }
 66 | 
 67 | 		// Tests for vendor specific prop
 68 | 		p = p.charAt(0).toUpperCase() + p.substr(1);
 69 | 
 70 | 		for (var i=0; i<prefixes.length; i++) {
 71 | 			if (typeof s[prefixes[i] + p] == 'string') { return true; }
 72 | 		}
 73 | 
 74 | 		return false;
 75 | 	},
 76 | 
 77 | 	//	Converts CSS transition times to MS
 78 | 	getTimeinMS = function(str) {
 79 | 		var result = 0, tmp;
 80 | 		str += "";
 81 | 		str = str.toLowerCase();
 82 | 		if(str.indexOf("ms") !== -1) {
 83 | 			tmp = str.split("ms");
 84 | 			result = Number(tmp[0]);
 85 | 		} else if(str.indexOf("s") !== -1) {
 86 | 			//	s
 87 | 			tmp = str.split("s");
 88 | 			result = Number(tmp[0]) * 1000;
 89 | 		} else {
 90 | 			result = Number(str);
 91 | 		}
 92 | 
 93 | 		return Math.round(result);
 94 | 	},
 95 | 
 96 | 	//	Set style properties
 97 | 	setStyleProps = function(obj, props){
 98 | 		for(var i in props) {if(props.hasOwnProperty(i)) {
 99 | 			obj.style[vp(i)] = props[i];
100 | 		}}
101 | 	},
102 | 
103 | 	//	Set props for transitions and transforms with basic defaults
104 | 	setTransitionProps = function(args){
105 | 		var props = {
106 | 				//	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) initial, inherit
107 | 				TransitionTimingFunction: "ease",
108 | 				TransitionDuration: defaultDuration + "ms",
109 | 				TransitionProperty: "all"
110 | 			},
111 | 			p, i, tmp, tmp2, found;
112 | 
113 | 		//	Set any allowed properties 
114 | 		for(p in args) { if(args.hasOwnProperty(p)) {
115 | 			tmp = 'Transition' + cap(p);
116 | 			tmp2 = p.toLowerCase();
117 | 			found = false;
118 | 
119 | 			//	Look at transition props
120 | 			for(i = 0; i < transitionProps.length; i += 1) {
121 | 				if(tmp == transitionProps[i]) {
122 | 					props[transitionProps[i]] = args[p];
123 | 					found = true;
124 | 					break;
125 | 				}
126 | 			}
127 | 
128 | 			//	Look at transform props
129 | 			for(i = 0; i < transformProps.length; i += 1) {
130 | 				if(tmp2 == transformProps[i]) {
131 | 					props[vp("transform")] = props[vp("transform")] || "";
132 | 					props[vp("transform")] += " " +p + "(" + args[p] + ")";
133 | 					found = true;
134 | 					break;
135 | 				}
136 | 			}
137 | 
138 | 			if(!found) {
139 | 				props[p] = args[p];
140 | 			}
141 | 		}}
142 | 		return props;
143 | 	},
144 | 
145 | 	//	Fix animatiuon properties
146 | 	//	Normalises transforms, eg: rotate, scale, etc...
147 | 	normaliseTransformProps = function(args){
148 | 		var props = {},
149 | 			tmpProp,
150 | 			p, i, found,
151 | 			normal = function(props, p, value){
152 | 				var tmp = p.toLowerCase(),
153 | 					found = false, i;
154 | 
155 | 				//	Look at transform props
156 | 				for(i = 0; i < transformProps.length; i += 1) {
157 | 					if(tmp == transformProps[i]) {
158 | 						props[vp("transform", true)] = props[vp("transform", true)] || "";
159 | 						props[vp("transform", true)] += " " +p + "(" + value + ")";
160 | 						found = true;
161 | 						break;
162 | 					}
163 | 				}
164 | 
165 | 				if(!found) {
166 | 					props[p] = value;
167 | 				} else {
168 | 					//	Remove transform property
169 | 					delete props[p];
170 | 				}
171 | 			};
172 | 
173 | 		//	Set any allowed properties 
174 | 		for(p in args) { if(args.hasOwnProperty(p)) {
175 | 			//	If we have a percentage, we have a key frame
176 | 			if(p.indexOf("%") !== -1) {
177 | 				for(i in args[p]) { if(args[p].hasOwnProperty(i)) {
178 | 					normal(args[p], i, args[p][i]);
179 | 				}}
180 | 				props[p] = args[p];
181 | 			} else {
182 | 				normal(props, p, args[p]);
183 | 			}
184 | 		}}
185 | 
186 | 		return props;
187 | 	},
188 | 
189 | 
190 | 	//	If an object is empty
191 | 	isEmpty = function(obj) {
192 | 		for(var i in obj) {if(obj.hasOwnProperty(i)) {
193 | 			return false;
194 | 		}}
195 | 		return true; 
196 | 	},
197 | 	//	Creates a hashed name for the animation
198 | 	//	Use to create a unique keyframe animation style rule
199 | 	aniName = function(props){
200 | 		return "ani" + JSON.stringify(props).split(/[{},%":]/).join("");
201 | 	},
202 | 	animations = {},
203 | 
204 | 	//	See if we can use transitions
205 | 	canTrans = supportsTransitions();
206 | 
207 | 	//	IE10+ http://caniuse.com/#search=css-animations
208 | 	m.animateProperties = function(el, args, cb){
209 | 		el.style = el.style || {};
210 | 		var props = setTransitionProps(args), time;
211 | 
212 | 		if(typeof props.TransitionDuration !== 'undefined') {
213 | 			props.TransitionDuration = getTimeinMS(props.TransitionDuration) + "ms";
214 | 		} else {
215 | 			props.TransitionDuration = defaultDuration + "ms";
216 | 		}
217 | 
218 | 		time = getTimeinMS(props.TransitionDuration) || 0;
219 | 
220 | 		//	See if we support transitions
221 | 		if(canTrans) {
222 | 			setStyleProps(el, props);
223 | 		} else {
224 | 			//	Try and fall back to jQuery
225 | 			//	TODO: Switch to use velocity, it is better suited.
226 | 			if(typeof $ !== 'undefined' && $.fn && $.fn.animate) {
227 | 				$(el).animate(props, time);
228 | 			}
229 | 		}
230 | 
231 | 		if(cb){
232 | 			setTimeout(cb, time+1);
233 | 		}
234 | 	};
235 | 
236 | 	//	Trigger a transition animation
237 | 	m.trigger = function(name, value, options, cb){
238 | 		options = options || {};
239 | 		var ani = animations[name];
240 | 		if(!ani) {
241 | 			return err("Animation " + name + " not found.");
242 | 		}
243 | 
244 | 		return function(e){
245 | 			var args = ani.fn(function(){
246 | 				return typeof value == 'function'? value(): value;
247 | 			});
248 | 
249 | 			//	Allow override via options
250 | 			for(i in options) if(options.hasOwnProperty(i)) {{
251 | 				args[i] = options[i];
252 | 			}}
253 | 
254 | 			m.animateProperties(e.target, args, cb);
255 | 		};
256 | 	};
257 | 
258 | 	//	Adds an animation for bindings and so on.
259 | 	m.addAnimation = function(name, fn, options){
260 | 		options = options || {};
261 | 
262 | 		if(animations[name]) {
263 | 			return err("Animation " + name + " already defined.");
264 | 		} else if(typeof fn !== "function") {
265 | 			return err("Animation " + name + " is being added as a transition based animation, and must use a function.");
266 | 		}
267 | 
268 | 		options.duration = options.duration || defaultDuration;
269 | 
270 | 		animations[name] = {
271 | 			options: options,
272 | 			fn: fn
273 | 		};
274 | 
275 | 		//	Add a default binding for the name
276 | 		m.addBinding(name, function(prop){
277 | 			m.bindAnimation(name, this, fn, prop);
278 | 		}, true);
279 | 	};
280 | 
281 | 	m.addKFAnimation = function(name, arg, options){
282 | 		options = options || {};
283 | 
284 | 		if(animations[name]) {
285 | 			return err("Animation " + name + " already defined.");
286 | 		}
287 | 
288 | 		var init = function(props) {
289 | 			var aniId = aniName(props),
290 | 				hasAni = document.getElementById(aniId),
291 | 				kf;
292 | 
293 | 			//	Only insert once
294 | 			if(!hasAni) {
295 | 				animations[name].id = aniId;
296 | 
297 | 				props = normaliseTransformProps(props);
298 | 				//  Create keyframes
299 | 				kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
300 | 					.split("\"").join("")
301 | 					.split("},").join("}\n")
302 | 					.split(",").join(";")
303 | 					.split("%:").join("% ");
304 | 
305 | 				var s = document.createElement('style');
306 | 				s.setAttribute('id', aniId);
307 | 				s.id = aniId;
308 | 				s.textContent = kf;
309 | 				//  Might not have head?
310 | 				document.head.appendChild(s);
311 | 			}
312 | 
313 | 			animations[name].isInitialised = true;
314 | 			animations[name].options.animateImmediately = true;
315 | 		};
316 | 
317 | 		options.duration = options.duration || defaultDuration;
318 | 		options.animateImmediately = options.animateImmediately || false;
319 | 
320 | 		animations[name] = {
321 | 			init: init,
322 | 			options: options,
323 | 			arg: arg
324 | 		};
325 | 
326 | 		//	Add a default binding for the name
327 | 		m.addBinding(name, function(prop){
328 | 			m.bindAnimation(name, this, arg, prop);
329 | 		}, true);
330 | 	};
331 | 
332 | 
333 | 	/*	Options - defaults - what it does:
334 | 
335 | 		Delay - unedefined - delays the animation
336 | 		Direction - 
337 | 		Duration
338 | 		FillMode - "forward" makes sure it sticks: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
339 | 		IterationCount, 
340 | 		Name, PlayState, TimingFunction
341 | 	
342 | 	*/
343 | 
344 | 	//	Useful to know, 'to' and 'from': http://lea.verou.me/2012/12/animations-with-one-keyframe/
345 | 	m.animateKF = function(name, el, options, cb){
346 | 		options = options || {};
347 | 		var ani = animations[name], i, props = {};
348 | 		if(!ani) {
349 | 			return err("Animation " + name + " not found.");
350 | 		}
351 | 
352 | 		//	Allow override via options
353 | 		ani.options = ani.options || {};
354 | 		for(i in options) if(options.hasOwnProperty(i)) {{
355 | 			ani.options[i] = options[i];
356 | 		}}
357 | 
358 | 		if(!ani.isInitialised && ani.init) {
359 | 			ani.init(ani.arg);
360 | 		}
361 | 
362 | 		//	Allow animate overrides
363 | 		for(i in ani.options) if(ani.options.hasOwnProperty(i)) {{
364 | 			props[vp("animation" + cap(i))] = ani.options[i];
365 | 		}}
366 | 
367 | 		//	Set required items and default values for props
368 | 		props[vp("animationName")] = ani.id;
369 | 		props[vp("animationDuration")] = (props[vp("animationDuration")]? props[vp("animationDuration")]: defaultDuration) + "ms";
370 | 		props[vp("animationDelay")] = props[vp("animationDelay")]? props[vp("animationDuration")] + "ms": undefined;
371 | 		props[vp("animationFillMode")] = props[vp("animationFillMode")] || "forwards";
372 | 
373 | 		el.style = el.style || {};
374 | 
375 | 		//	Use for callback
376 | 		var endAni = function(){
377 | 			//	Remove listener
378 | 			el.removeEventListener("animationend", endAni, false);
379 | 			if(cb){
380 | 				cb(el);
381 | 			}
382 | 		};
383 | 
384 | 		//	Remove animation if any
385 | 		el.style[vp("animation")] = "";
386 | 		el.style[vp("animationName")] = "";
387 | 
388 | 		//	Must use two request animation frame calls, for FF to
389 | 		//	work properly, does not seem to have any adverse effects
390 | 		requestAnimationFrame(function(){
391 | 			requestAnimationFrame(function(){
392 | 				//	Apply props
393 | 				for(i in props) if(props.hasOwnProperty(i)) {{
394 | 					el.style[i] = props[i];
395 | 				}}
396 | 
397 | 				el.addEventListener("animationend", endAni, false);
398 | 			});
399 | 		});
400 | 	};
401 | 
402 | 	m.triggerKF = function(name, options){
403 | 		return function(){
404 | 			m.animateKF(name, this, options);
405 | 		};
406 | 	};
407 | 
408 | 	m.bindAnimation = function(name, el, options, prop) {
409 | 		var ani = animations[name];
410 | 
411 | 		if(!ani && !ani.name) {
412 | 			return err("Animation " + name + " not found.");
413 | 		}
414 | 
415 | 		if(ani.fn) {
416 | 			m.animateProperties(el, ani.fn(prop));
417 | 		} else {
418 | 			var oldConfig = el.config;
419 | 			el.config = function(el, isInit){
420 | 				if(!ani.isInitialised && ani.init) {
421 | 					ani.init(options);
422 | 				}
423 | 				if(prop() && isInit) {
424 | 					m.animateKF(name, el, options);
425 | 				}
426 | 				if(oldConfig) {
427 | 					oldConfig.apply(el, arguments);
428 | 				}
429 | 			};
430 | 		}
431 | 	};
432 | 
433 | }(window.m || {}));


--------------------------------------------------------------------------------
/dist/version/mithril.animate-0.0.1.nobind.min.js:
--------------------------------------------------------------------------------
1 | /*! mithril.animate 07-07-2015 */
2 | !function(a){var b=["Moz","Webkit","Khtml","O","ms"],c=["TransitionProperty","TransitionTimingFunction","TransitionDelay","TransitionDuration","TransitionEnd"],d=["rotate","rotatex","rotatey","scale","skew","translate","translatex","translatey","matrix"],e=400,f=function(a){window.console&&console.error&&console.error(a)},g=function(a){return a.charAt(0).toUpperCase()+a.substr(1)},h=document.createElement("div"),j=function(a,c){var d;if(a in h.style)return a;if("@keyframes"==a){for(var e=0;e<b.length;e+=1)if(d=b[e]+"Transition",d in h.style)return"@-"+b[e].toLowerCase()+"-keyframes";return a}for(var e=0;e<b.length;e+=1)if(d=c?"-"+(b[e]+"-"+a).toLowerCase():b[e]+g(a),d in h.style)return d;return a},k=function(){var a=document.body||document.documentElement,c=a.style,d="transition";if("string"==typeof c[d])return!0;d=d.charAt(0).toUpperCase()+d.substr(1);for(var e=0;e<b.length;e++)if("string"==typeof c[b[e]+d])return!0;return!1},l=function(a){var b,c=0;return a+="",a=a.toLowerCase(),-1!==a.indexOf("ms")?(b=a.split("ms"),c=Number(b[0])):-1!==a.indexOf("s")?(b=a.split("s"),c=1e3*Number(b[0])):c=Number(a),Math.round(c)},m=function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a.style[j(c)]=b[c])},n=function(a){var b,f,h,i,k,l={TransitionTimingFunction:"ease",TransitionDuration:e+"ms",TransitionProperty:"all"};for(b in a)if(a.hasOwnProperty(b)){for(h="Transition"+g(b),i=b.toLowerCase(),k=!1,f=0;f<c.length;f+=1)if(h==c[f]){l[c[f]]=a[b],k=!0;break}for(f=0;f<d.length;f+=1)if(i==d[f]){l[j("transform")]=l[j("transform")]||"",l[j("transform")]+=" "+b+"("+a[b]+")",k=!0;break}k||(l[b]=a[b])}return l},o=function(a){var b,c,e={},f=function(a,b,c){var e,f=b.toLowerCase(),g=!1;for(e=0;e<d.length;e+=1)if(f==d[e]){a[j("transform",!0)]=a[j("transform",!0)]||"",a[j("transform",!0)]+=" "+b+"("+c+")",g=!0;break}g?delete a[b]:a[b]=c};for(b in a)if(a.hasOwnProperty(b))if(-1!==b.indexOf("%")){for(c in a[b])a[b].hasOwnProperty(c)&&f(a[b],c,a[b][c]);e[b]=a[b]}else f(e,b,a[b]);return e},p=function(a){return"ani"+JSON.stringify(a).split(/[{},%":]/).join("")},q={},r=k();a.animateProperties=function(a,b,c){a.style=a.style||{};var d,f=n(b);"undefined"!=typeof f.TransitionDuration?f.TransitionDuration=l(f.TransitionDuration)+"ms":f.TransitionDuration=e+"ms",d=l(f.TransitionDuration)||0,r?m(a,f):"undefined"!=typeof $&&$.fn&&$.fn.animate&&$(a).animate(f,d),c&&setTimeout(c,d+1)},a.trigger=function(b,c,d,e){d=d||{};var g=q[b];return g?function(b){var f=g.fn(function(){return"function"==typeof c?c():c});for(i in d)d.hasOwnProperty(i)&&(f[i]=d[i]);a.animateProperties(b.target,f,e)}:f("Animation "+b+" not found.")},a.addAnimation=function(b,c,d){return d=d||{},q[b]?f("Animation "+b+" already defined."):"function"!=typeof c?f("Animation "+b+" is being added as a transition based animation, and must use a function."):(d.duration=d.duration||e,q[b]={options:d,fn:c},void a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0))},a.addKFAnimation=function(b,c,d){if(d=d||{},q[b])return f("Animation "+b+" already defined.");var g=function(a){var c,d=p(a),e=document.getElementById(d);if(!e){q[b].id=d,a=o(a),c=j("@keyframes")+" "+d+" "+JSON.stringify(a).split('"').join("").split("},").join("}\n").split(",").join(";").split("%:").join("% ");var f=document.createElement("style");f.setAttribute("id",d),f.id=d,f.textContent=c,document.head.appendChild(f)}q[b].isInitialised=!0,q[b].options.animateImmediately=!0};d.duration=d.duration||e,d.animateImmediately=d.animateImmediately||!1,q[b]={init:g,options:d,arg:c},a.addBinding(b,function(d){a.bindAnimation(b,this,c,d)},!0)},a.animateKF=function(a,b,c,d){c=c||{};var h,i=q[a],k={};if(!i)return f("Animation "+a+" not found.");i.options=i.options||{};for(h in c)c.hasOwnProperty(h)&&(i.options[h]=c[h]);!i.isInitialised&&i.init&&i.init(i.arg);for(h in i.options)i.options.hasOwnProperty(h)&&(k[j("animation"+g(h))]=i.options[h]);k[j("animationName")]=i.id,k[j("animationDuration")]=(k[j("animationDuration")]?k[j("animationDuration")]:e)+"ms",k[j("animationDelay")]=k[j("animationDelay")]?k[j("animationDuration")]+"ms":void 0,k[j("animationFillMode")]=k[j("animationFillMode")]||"forwards",b.style=b.style||{};var l=function(){b.removeEventListener("animationend",l,!1),d&&d(b)};b.style[j("animation")]="",b.style[j("animationName")]="",requestAnimationFrame(function(){requestAnimationFrame(function(){for(h in k)k.hasOwnProperty(h)&&(b.style[h]=k[h]);b.addEventListener("animationend",l,!1)})})},a.triggerKF=function(b,c){return function(){a.animateKF(b,this,c)}},a.bindAnimation=function(b,c,d,e){var g=q[b];if(!g&&!g.name)return f("Animation "+b+" not found.");if(g.fn)a.animateProperties(c,g.fn(e));else{var h=c.config;c.config=function(c,f){!g.isInitialised&&g.init&&g.init(d),e()&&f&&a.animateKF(b,c,d),h&&h.apply(c,arguments)}}}}(window.m||{});


--------------------------------------------------------------------------------
/examples/all.example.js:
--------------------------------------------------------------------------------
  1 | //	Custom animations
  2 | m.addAnimation("rotateCWOpacity", function(prop){
  3 | 	var value = prop()? 0: 1;
  4 | 	return {
  5 | 		opacity: value,
  6 | 		rotate: (value * -180) + "deg"
  7 | 	};
  8 | });
  9 | 
 10 | m.addAnimation("rotateCCWOpacityIn", function(prop){
 11 | 	var value = prop()? 1: 0;
 12 | 	return {
 13 | 		opacity: value,
 14 | 		rotate: (value * 180) + "deg"
 15 | 	};
 16 | });
 17 | 
 18 | //	Basic animation examples
 19 | var allExample = {
 20 | 	model: function() {
 21 | 		this.opacity = m.p();
 22 | 		this.scale = m.p();
 23 | 		this.rotate = m.p();
 24 | 		this.skew = m.p([0,0]);
 25 | 		this.translateX = m.p();
 26 | 		this.opacityScale = m.p();
 27 | 		this.opacityUp = m.p({
 28 | 			up: m.p(0),
 29 | 			opacity: m.p(1)
 30 | 		});
 31 | 		this.opacityDown = m.p({
 32 | 			down: m.p(0),
 33 | 			opacity: m.p(1)
 34 | 		});
 35 | 		this.spinMenu = m.p();
 36 | 	},
 37 | 	controller: function() {
 38 | 		var self = this;
 39 | 		self.model = new allExample.model();
 40 | 
 41 | 		//	Shortcut to set a value in view
 42 | 		//	TODO: Would be nice to include somewhere as default behaviour
 43 | 		self.set = function(prop, value){
 44 | 			return function(){
 45 | 				prop(value);
 46 | 			};
 47 | 		};
 48 | 
 49 | 		//	Shortcut to set hover opacity up
 50 | 		self.opacityUpHover = [
 51 | 			function(){
 52 | 				self.model.opacityUp().up("-6em");
 53 | 				self.model.opacityUp().opacity("0");
 54 | 			},
 55 | 			function(){
 56 | 				self.model.opacityUp().up("0");
 57 | 				self.model.opacityUp().opacity("1");
 58 | 			}
 59 | 		];
 60 | 
 61 | 		//	Shortcut to set hover opacity up
 62 | 		self.opacityDownHover = [
 63 | 			function(){
 64 | 				self.model.opacityDown().down("6em");
 65 | 				self.model.opacityDown().opacity("0");
 66 | 			},
 67 | 			function(){
 68 | 				self.model.opacityDown().down("0");
 69 | 				self.model.opacityDown().opacity("1");
 70 | 			}
 71 | 		];
 72 | 
 73 | 
 74 | 	},
 75 | 	view: function(c) {
 76 | 		var o = c.model;
 77 | 		return [
 78 | 			m.e("h2", "Single animation"),
 79 | 
 80 | 			m.e("div.exampleBox", { hover: [c.set(o.opacity, 0), c.set(o.opacity, 1)] }, [
 81 | 				m.e("h3", "Opacity"),
 82 | 				m.e("div.eBox", { opacity: o.opacity })
 83 | 			]),
 84 | 			m.e("div.exampleBox", { hover: [c.set(o.scale, 0), c.set(o.scale, 1)] }, [
 85 | 				m.e("h3", "Scale"),
 86 | 				m.e("div.eBox", { scale: o.scale })
 87 | 			]),
 88 | 			m.e("div.exampleBox", { hover: [c.set(o.rotate, 225), c.set(o.rotate, 0)] }, [
 89 | 				m.e("h3", "Rotate"),
 90 | 				m.e("div.eBox", { rotate: o.rotate })
 91 | 			]),
 92 | 			m.e("div.exampleBox", { hover: [c.set(o.skew, [25, -50]), c.set(o.skew, [0,0])] }, [
 93 | 				m.e("h3", "Skew"),
 94 | 				m.e("div.eBox", { skew: o.skew })
 95 | 			]),
 96 | 			m.e("div.exampleBox", { hover: [c.set(o.translateX, "6em"), c.set(o.translateX, 0)] }, [
 97 | 				m.e("h3", "translateX"),
 98 | 				m.e("div.eBox", { translatex: o.translateX})
 99 | 			]),
100 | 
101 | 			m.e("h2", "Multiple animation"),
102 | 
103 | 			m.e("div.exampleBox", { hover: [c.set(o.opacityScale, 0), c.set(o.opacityScale, 1)] }, [
104 | 				m.e("h3", "Opacity scale"),
105 | 				m.e("div.eBox", { opacity: o.opacityScale, scale: o.opacityScale})
106 | 			]),
107 | 			m.e("div.exampleBox", { hover: c.opacityUpHover }, [
108 | 				m.e("h3", "Opacity up"),
109 | 				m.e("div.eBox", { translatey: o.opacityUp().up, opacity: o.opacityUp().opacity })
110 | 			]),
111 | 			m.e("div.exampleBox", { hover: c.opacityDownHover }, [
112 | 				m.e("h3", "Opacity down"),
113 | 				m.e("div.eBox", { translatey: o.opacityDown().down, opacity: o.opacityDown().opacity })
114 | 			]),
115 | 
116 | 			m.e("h2", "Custom animation"),
117 | 
118 | 			m.e("div.exampleBox", { hover: [c.set(o.spinMenu, 1), c.set(o.spinMenu, 0)] }, [
119 | 				m.e("h3", "Material menu"),
120 | 				m.e("a", { target: "_blank", href: "http://www.google.com/design/spec/animation/delightful-details.html" }, "Based on this"),
121 | 				m.e("div.boxSurround", [
122 | 					m.e("div.eBox.icon", { rotateCWOpacity: o.spinMenu }),
123 | 					m.e("div.eBox.alt1.icon", { rotateCCWOpacityIn: o.spinMenu }),
124 | 				])
125 | 			])
126 | 		];
127 | 	}
128 | };
129 | 


--------------------------------------------------------------------------------
/examples/all.htm:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<title></title>
 4 | 	<script src="mithril.js"></script>
 5 | 	<script src="../node_modules/mithril.bindings/dist/mithril.bindings.js"></script>
 6 | 	<script src="../src/mithril.animate.js"></script>
 7 | 	<script src="../src/mithril.animate.bindings.js"></script>
 8 | 	<link rel="stylesheet" type="text/css" href="examplestyle.css">
 9 | </head>
10 | <body>
11 | <h1>Mithril.animate - bindable animations</h1>
12 | <p>
13 | 	A compact library that allows you to bind CSS3 animations to properties on your mithril elements.
14 | </p>
15 | 
16 | <div id="content"></div>
17 | 
18 | <h2>Source</h2>
19 | 
20 | <a href="all.example.js" target="_blank">Click here for the source for these examples</a>
21 | 
22 | <script src="all.example.js"></script>
23 | 
24 | <script>
25 | 	//initialize
26 | 	m.module(document.getElementById('content'), allExample);
27 | </script>
28 | 
29 | </body>
30 | </html>


--------------------------------------------------------------------------------
/examples/box.htm:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<title></title>
 4 | 	<script src="mithril.js"></script>
 5 | 	<script src="../dist/mithril.animate.js"></script>
 6 | 	<!--
 7 | 	<script src="../../mithril.bindings/src/mithril.bindings.js"></script>
 8 | 	<script src="../../mithril.bindings/src/mithril.bindings.defaults.js"></script>
 9 | 	<script src="../../mithril.bindings/src/mithril.bindings.utils.js"></script>
10 | 	<script src="../src/mithril.animate.js"></script>
11 | 	<script src="../src/mithril.animate.bindings.js"></script>
12 | 	-->
13 | 	<link rel="stylesheet" type="text/css" href="catspin.css">
14 | </head>
15 | <body>
16 | <h1>Mithril.animate - bindable animations</h1>
17 | <p>
18 | 	This example shows you how to create a silly spinning box with cats on it.<br/>
19 | 	Click the cat to see it in action. <a href="catspin.css" target="_blank">Uses a little CSS</a>
20 | </p>
21 | 
22 | <div id="content"></div>
23 | 
24 | <script>
25 | //	Add our animation
26 | m.addKFAnimation("spinBox", {
27 | 	'0%': { rotatex: "0", rotatey: "0" },
28 | 	'100%': { rotatex: "360deg", rotatey: "360deg" }
29 | }, {
30 | 	duration: 2000,
31 | 	timingFunction: "linear"
32 | });
33 | 
34 | //	Create app
35 | var app = {
36 | 	controller: function() {},
37 | 	view: function(c) {
38 | 		var o = c.model;
39 | 		return [
40 | 			m.e("div.box", {
41 | 				onclick: m.triggerKF('spinBox', { duration: 5000 })
42 | 			}, [
43 | 				m.e("div.boxFace1"),
44 | 				m.e("div.boxFace2")
45 | 			])
46 | 		];
47 | 	}
48 | };
49 | 
50 | //initialize
51 | m.module(document.getElementById('content'), app);
52 | </script>
53 | 
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/examples/catspin.css:
--------------------------------------------------------------------------------
 1 | .box 				{ margin:4em auto; width:16em; height:16em; transform-style:preserve-3d; transform-origin:50% 50% -5em; position:relative; }
 2 | .box div 			{ position:absolute; width:16em; height:16em; background-color:#4c4c4c; transform-style:preserve-3d; backface-visibility:hidden; }
 3 | .boxFace1 			{ background-image: url(mishka.jpg); background-repeat: no-repeat; }
 4 | .boxFace2 			{ transform:rotateX(180deg) translateZ(16em); }
 5 | 
 6 | .boxFace1::before, 
 7 | .boxFace1::after, 
 8 | .boxFace2::before, 
 9 | .boxFace2::after 	{ position:absolute; content:''; display:block; width:100%; height:100%; transform-style:preserve-3d; }
10 | 
11 | .boxFace1::before, 
12 | .boxFace2::before 	{ transform:rotateY(90deg); transform-origin:0 50%; background-color:#444; background-image: url(pickle.jpg); background-repeat: no-repeat; }
13 | .boxFace2::before 	{ transform-origin:100% 50%; transform:rotateY(-90deg); }
14 | .boxFace1::after,
15 | .boxFace2::after 	{ transform:rotateX(-90deg); transform-origin:50% 0; background-color:#555; background-image: url(max.jpg); background-repeat: no-repeat; }


--------------------------------------------------------------------------------
/examples/dizzycats.htm:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<title></title>
 4 | 	<script src="mithril.js"></script>
 5 | 	<script src="../dist/mithril.animate.js"></script>
 6 | 	<link rel="stylesheet" type="text/css" href="catspin.css">
 7 | </head>
 8 | <body>
 9 | <h1>Mithril.animate - bindable animations</h1>
10 | <p>
11 | 	This example shows you how to create a silly spinning box with cats on it that spins forever.<br/>
12 | 	Click the button to see it in action. <a href="catspin.css" target="_blank">Uses a little CSS</a>
13 | </p>
14 | 
15 | <div id="content"></div>
16 | 
17 | <script>
18 | //	Add our animation
19 | m.addKFAnimation("spinBox", {
20 | 	'0%': { rotatex: "0", rotatey: "0" },
21 | 	'100%': { rotatex: "360deg", rotatey: "360deg" }
22 | }, {
23 | 	timingFunction: "linear"
24 | });
25 | 
26 | //	This triggers the animation, then re-animates when it is finished
27 | var reAnimate = function(box){
28 | 	m.animateKF('spinBox', box(), { duration: 5000 }, function(el){
29 | 		reAnimate(box);
30 | 	});
31 | };
32 | 
33 | //	This binds a reAnimate init function
34 | var animateBinder = function(box) {
35 | 	return function(){
36 | 		reAnimate(box);
37 | 	};
38 | };
39 | 
40 | //	Create app
41 | var app = {
42 | 	controller: function() {
43 | 		//	We need this to get a reference to the box we want to animate
44 | 		this.box = m.prop();
45 | 	},
46 | 	view: function(c) {
47 | 		var o = c.model;
48 | 		return [
49 | 			//	A button to trigger the animation
50 | 			m.e("button", {onclick: animateBinder(c.box)}, "Make the cats dizzy!"),
51 | 			//	Get a reference to the box we want to animate
52 | 			m.e("div.box", {config: c.box}, [
53 | 				m.e("div.boxFace1"),
54 | 				m.e("div.boxFace2")
55 | 			])
56 | 		];
57 | 	}
58 | };
59 | 
60 | //initialize
61 | m.module(document.getElementById('content'), app);
62 | </script>
63 | 
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/examples/examplestyle.css:
--------------------------------------------------------------------------------
 1 | #content { font-family: sans-serif; }
 2 | .eBox { width: 2em; height: 2em; background-color: #7b7; border: 1px solid #70bb70; margin-top: 1em;}
 3 | .eBox.alt1 { background-color: #cfc; border: 1px solid #c0ffc0; opacity: 0; }
 4 | .eBox.abs { top: 72px; position: absolute; }
 5 | 
 6 | .eBox.icon { position: absolute; background-color: inherit; border: none; background-image: url(icons.png); background-repeat: no-repeat; background-position: 0 -32px;  }
 7 | .eBox.icon.alt1 { background-position: 0 0;  }
 8 | .exampleBox:before, .exampleBox:after {content: " "; display: table; }
 9 | .exampleBox:after {clear: both; }
10 | .exampleBox { *zoom: 1; min-height: 7em; position: relative; border: 2px solid #333; border-radius: 3px; float: left; margin: 0 0 1em 1em; min-height: 7em; padding: 1em; position: relative; width: 8em; }
11 | h2 { font-size: 1.2em; clear: both; }
12 | .exampleBox h3 { font-size: 1em; margin-top: 0; font-family: sans-serif; }
13 | .exampleBox a { font-size: 0.7em }


--------------------------------------------------------------------------------
/examples/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguy/mithril.animate/7810d79e9c24cb89d6052dde31c68ccafd35f970/examples/icons.png


--------------------------------------------------------------------------------
/examples/max.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguy/mithril.animate/7810d79e9c24cb89d6052dde31c68ccafd35f970/examples/max.jpg


--------------------------------------------------------------------------------
/examples/misc.htm:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | 	<title></title>
  4 | 	<script src="mithril.js"></script>
  5 | 	<script src="../dist/mithril.animate.js"></script>
  6 | 	<script src="../dist/mithril.bindings.js"></script>
  7 | 	<!--
  8 | 	<script src="../../mithril.bindings/src/mithril.bindings.js"></script>
  9 | 	<script src="../../mithril.bindings/src/mithril.bindings.defaults.js"></script>
 10 | 	<script src="../../mithril.bindings/src/mithril.bindings.utils.js"></script>
 11 | 	<script src="../src/mithril.animate.js"></script>
 12 | 	<script src="../src/mithril.animate.bindings.js"></script>
 13 | 	-->
 14 | 	<link rel="stylesheet" type="text/css" href="examplestyle.css">
 15 | 	<style>
 16 | 		.rBox { display: block; position: relative; padding: 0.5em 1em; border: 1px solid #ccc; width: 5em; }
 17 | 		.con { perspective: 200px; }
 18 | 	</style>
 19 | </head>
 20 | <body>
 21 | <h1>Mithril.animate - bindable animations</h1>
 22 | <p>
 23 | 	This example shows you how to create miscellaneous animations and bindings, including a custom keyframe animation.<br/>
 24 | 	<b>Note: </b>One downside to using property bound animations is that they will animate each time there are changes in the vDOM.
 25 | </p>
 26 | 
 27 | <div id="content"></div>
 28 | 
 29 | <script>
 30 | //	Keyframes are static animations and cannot use prop values
 31 | m.addKFAnimation("bleh", {
 32 | 	'0%': 	{ left: 0, top: 0 },
 33 | 	'25%': 	{ left: 100, top: 40, rotate: "720deg" },
 34 | 	'50%': 	{ left: 200, top: 300, rotatey: "180deg" },
 35 | 	'75%': 	{ left: 300, top: 75, scale: 6, rotatex: "180deg" },
 36 | 	'100%': { left: 0, top: 0 }
 37 | }, {
 38 | 	duration: 2000 
 39 | });
 40 | 
 41 | //	Ketframe fade out - useful for "one-way" animations, eg: delete element
 42 | m.addKFAnimation("fadeout", {
 43 | 	'0%': { opacity: 1 },
 44 | 	'100%': { opacity: 0 }
 45 | });
 46 | 
 47 | 
 48 | //	Transition based animations can take a property, so we use a function
 49 | m.addAnimation("fadeyo", function(prop){
 50 | 	console.log('prop', prop);
 51 | 	return { opacity: prop()? 1: 0 };
 52 | });
 53 | 
 54 | //	Multi transition animation with specified options
 55 | m.addAnimation("rotateOpacity", function(prop){
 56 | 	var value = prop()? 1: 0;
 57 | 	return {
 58 | 		opacity: 1-value,
 59 | 		rotate: (value * -360) + "deg"
 60 | 	};
 61 | }, { 
 62 | 	duration: 2000,
 63 | 	timingFunction: 'linear' 
 64 | });
 65 | 
 66 | 
 67 | window.model = {
 68 | 	myProperty: m.p(true),
 69 | 	myProperty2: m.p(false),
 70 | 	myProperty3: m.p(0),
 71 | 	myProperty4: m.p(1)
 72 | };
 73 | 
 74 | 
 75 | var app = {
 76 | 	view: function(c) {
 77 | 		console.log(arguments);
 78 | 		var o = window.model;
 79 | 		return [
 80 | 			//	Using event to trigger
 81 | 			m.e("div.con", [
 82 | 				m.e("div.rBox", {
 83 | 					onclick: m.triggerKF('bleh')
 84 | 				}, "Click me!")
 85 | 			])
 86 | 
 87 | 			//	Using binding to trigger KF animation
 88 | 			//	Note: using toggle property when you click
 89 | 			, m.e("div.rBox", {
 90 | 				toggle: o.myProperty2, 
 91 | 				fadeout: o.myProperty2
 92 | 			}, "Click me to fade out")
 93 | 
 94 | 			//	Using binding for transition animation, this is a neat
 95 | 			//	way to be able to run the animation in reverse
 96 | 			, m.e("div.rBox", {
 97 | 				toggle: o.myProperty4, 
 98 | 				fadeyo: o.myProperty4
 99 | 			}, "Click me to toggle fade")
100 | 
101 | 			//	Using event to trigger transition animation with option overrides
102 | 			, m.e("div.rBox", {
103 | 				onclick: m.trigger('fadeyo', 0, {}, function(){
104 | 					/*Run when animation is done*/
105 | 				})
106 | 			}, "Click me to trigger fade")
107 | 
108 | 			//	Event trigger multi transition animation with option overrides
109 | 			, m.e("div.rBox", {
110 | 				onclick: m.trigger('rotateOpacity', 1, { timingFunction: 'linear' })
111 | 			}, "Click me to trigger rotateOpacity")
112 | 
113 | 		];
114 | 	}
115 | };
116 | 
117 | //initialize
118 | m.mount(document.getElementById('content'), app);
119 | </script>
120 | 
121 | </body>
122 | </html>


--------------------------------------------------------------------------------
/examples/mishka.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguy/mithril.animate/7810d79e9c24cb89d6052dde31c68ccafd35f970/examples/mishka.jpg


--------------------------------------------------------------------------------
/examples/mithril.js:
--------------------------------------------------------------------------------
   1 | ;(function() {
   2 | "use strict"
   3 | function Vnode(tag, key, attrs0, children, text, dom) {
   4 | 	return {tag: tag, key: key, attrs: attrs0, children: children, text: text, dom: dom, domSize: undefined, state: undefined, _state: undefined, events: undefined, instance: undefined, skip: false}
   5 | }
   6 | Vnode.normalize = function(node) {
   7 | 	if (Array.isArray(node)) return Vnode("[", undefined, undefined, Vnode.normalizeChildren(node), undefined, undefined)
   8 | 	if (node != null && typeof node !== "object") return Vnode("#", undefined, undefined, node === false ? "" : node, undefined, undefined)
   9 | 	return node
  10 | }
  11 | Vnode.normalizeChildren = function normalizeChildren(children) {
  12 | 	for (var i = 0; i < children.length; i++) {
  13 | 		children[i] = Vnode.normalize(children[i])
  14 | 	}
  15 | 	return children
  16 | }
  17 | var selectorParser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[(.+?)(?:\s*=\s*("|'|)((?:\\["'\]]|.)*?)\5)?\])/g
  18 | var selectorCache = {}
  19 | var hasOwn = {}.hasOwnProperty
  20 | function compileSelector(selector) {
  21 | 	var match, tag = "div", classes = [], attrs = {}
  22 | 	while (match = selectorParser.exec(selector)) {
  23 | 		var type = match[1], value = match[2]
  24 | 		if (type === "" && value !== "") tag = value
  25 | 		else if (type === "#") attrs.id = value
  26 | 		else if (type === ".") classes.push(value)
  27 | 		else if (match[3][0] === "[") {
  28 | 			var attrValue = match[6]
  29 | 			if (attrValue) attrValue = attrValue.replace(/\\(["'])/g, "$1").replace(/\\\\/g, "\\")
  30 | 			if (match[4] === "class") classes.push(attrValue)
  31 | 			else attrs[match[4]] = attrValue === "" ? attrValue : attrValue || true
  32 | 		}
  33 | 	}
  34 | 	if (classes.length > 0) attrs.className = classes.join(" ")
  35 | 	return selectorCache[selector] = {tag: tag, attrs: attrs}
  36 | }
  37 | function execSelector(state, attrs, children) {
  38 | 	var hasAttrs = false, childList, text
  39 | 	var className = attrs.className || attrs.class
  40 | 	for (var key in state.attrs) {
  41 | 		if (hasOwn.call(state.attrs, key)) {
  42 | 			attrs[key] = state.attrs[key]
  43 | 		}
  44 | 	}
  45 | 	if (className !== undefined) {
  46 | 		if (attrs.class !== undefined) {
  47 | 			attrs.class = undefined
  48 | 			attrs.className = className
  49 | 		}
  50 | 		if (state.attrs.className != null) {
  51 | 			attrs.className = state.attrs.className + " " + className
  52 | 		}
  53 | 	}
  54 | 	for (var key in attrs) {
  55 | 		if (hasOwn.call(attrs, key) && key !== "key") {
  56 | 			hasAttrs = true
  57 | 			break
  58 | 		}
  59 | 	}
  60 | 	if (Array.isArray(children) && children.length === 1 && children[0] != null && children[0].tag === "#") {
  61 | 		text = children[0].children
  62 | 	} else {
  63 | 		childList = children
  64 | 	}
  65 | 	return Vnode(state.tag, attrs.key, hasAttrs ? attrs : undefined, childList, text)
  66 | }
  67 | function hyperscript(selector) {
  68 | 	// Because sloppy mode sucks
  69 | 	var attrs = arguments[1], start = 2, children
  70 | 	if (selector == null || typeof selector !== "string" && typeof selector !== "function" && typeof selector.view !== "function") {
  71 | 		throw Error("The selector must be either a string or a component.");
  72 | 	}
  73 | 	if (typeof selector === "string") {
  74 | 		var cached = selectorCache[selector] || compileSelector(selector)
  75 | 	}
  76 | 	if (attrs == null) {
  77 | 		attrs = {}
  78 | 	} else if (typeof attrs !== "object" || attrs.tag != null || Array.isArray(attrs)) {
  79 | 		attrs = {}
  80 | 		start = 1
  81 | 	}
  82 | 	if (arguments.length === start + 1) {
  83 | 		children = arguments[start]
  84 | 		if (!Array.isArray(children)) children = [children]
  85 | 	} else {
  86 | 		children = []
  87 | 		while (start < arguments.length) children.push(arguments[start++])
  88 | 	}
  89 | 	var normalized = Vnode.normalizeChildren(children)
  90 | 	if (typeof selector === "string") {
  91 | 		return execSelector(cached, attrs, normalized)
  92 | 	} else {
  93 | 		return Vnode(selector, attrs.key, attrs, normalized)
  94 | 	}
  95 | }
  96 | hyperscript.trust = function(html) {
  97 | 	if (html == null) html = ""
  98 | 	return Vnode("<", undefined, undefined, html, undefined, undefined)
  99 | }
 100 | hyperscript.fragment = function(attrs1, children) {
 101 | 	return Vnode("[", attrs1.key, attrs1, Vnode.normalizeChildren(children), undefined, undefined)
 102 | }
 103 | var m = hyperscript
 104 | /** @constructor */
 105 | var PromisePolyfill = function(executor) {
 106 | 	if (!(this instanceof PromisePolyfill)) throw new Error("Promise must be called with `new`")
 107 | 	if (typeof executor !== "function") throw new TypeError("executor must be a function")
 108 | 	var self = this, resolvers = [], rejectors = [], resolveCurrent = handler(resolvers, true), rejectCurrent = handler(rejectors, false)
 109 | 	var instance = self._instance = {resolvers: resolvers, rejectors: rejectors}
 110 | 	var callAsync = typeof setImmediate === "function" ? setImmediate : setTimeout
 111 | 	function handler(list, shouldAbsorb) {
 112 | 		return function execute(value) {
 113 | 			var then
 114 | 			try {
 115 | 				if (shouldAbsorb && value != null && (typeof value === "object" || typeof value === "function") && typeof (then = value.then) === "function") {
 116 | 					if (value === self) throw new TypeError("Promise can't be resolved w/ itself")
 117 | 					executeOnce(then.bind(value))
 118 | 				}
 119 | 				else {
 120 | 					callAsync(function() {
 121 | 						if (!shouldAbsorb && list.length === 0) console.error("Possible unhandled promise rejection:", value)
 122 | 						for (var i = 0; i < list.length; i++) list[i](value)
 123 | 						resolvers.length = 0, rejectors.length = 0
 124 | 						instance.state = shouldAbsorb
 125 | 						instance.retry = function() {execute(value)}
 126 | 					})
 127 | 				}
 128 | 			}
 129 | 			catch (e) {
 130 | 				rejectCurrent(e)
 131 | 			}
 132 | 		}
 133 | 	}
 134 | 	function executeOnce(then) {
 135 | 		var runs = 0
 136 | 		function run(fn) {
 137 | 			return function(value) {
 138 | 				if (runs++ > 0) return
 139 | 				fn(value)
 140 | 			}
 141 | 		}
 142 | 		var onerror = run(rejectCurrent)
 143 | 		try {then(run(resolveCurrent), onerror)} catch (e) {onerror(e)}
 144 | 	}
 145 | 	executeOnce(executor)
 146 | }
 147 | PromisePolyfill.prototype.then = function(onFulfilled, onRejection) {
 148 | 	var self = this, instance = self._instance
 149 | 	function handle(callback, list, next, state) {
 150 | 		list.push(function(value) {
 151 | 			if (typeof callback !== "function") next(value)
 152 | 			else try {resolveNext(callback(value))} catch (e) {if (rejectNext) rejectNext(e)}
 153 | 		})
 154 | 		if (typeof instance.retry === "function" && state === instance.state) instance.retry()
 155 | 	}
 156 | 	var resolveNext, rejectNext
 157 | 	var promise = new PromisePolyfill(function(resolve, reject) {resolveNext = resolve, rejectNext = reject})
 158 | 	handle(onFulfilled, instance.resolvers, resolveNext, true), handle(onRejection, instance.rejectors, rejectNext, false)
 159 | 	return promise
 160 | }
 161 | PromisePolyfill.prototype.catch = function(onRejection) {
 162 | 	return this.then(null, onRejection)
 163 | }
 164 | PromisePolyfill.resolve = function(value) {
 165 | 	if (value instanceof PromisePolyfill) return value
 166 | 	return new PromisePolyfill(function(resolve) {resolve(value)})
 167 | }
 168 | PromisePolyfill.reject = function(value) {
 169 | 	return new PromisePolyfill(function(resolve, reject) {reject(value)})
 170 | }
 171 | PromisePolyfill.all = function(list) {
 172 | 	return new PromisePolyfill(function(resolve, reject) {
 173 | 		var total = list.length, count = 0, values = []
 174 | 		if (list.length === 0) resolve([])
 175 | 		else for (var i = 0; i < list.length; i++) {
 176 | 			(function(i) {
 177 | 				function consume(value) {
 178 | 					count++
 179 | 					values[i] = value
 180 | 					if (count === total) resolve(values)
 181 | 				}
 182 | 				if (list[i] != null && (typeof list[i] === "object" || typeof list[i] === "function") && typeof list[i].then === "function") {
 183 | 					list[i].then(consume, reject)
 184 | 				}
 185 | 				else consume(list[i])
 186 | 			})(i)
 187 | 		}
 188 | 	})
 189 | }
 190 | PromisePolyfill.race = function(list) {
 191 | 	return new PromisePolyfill(function(resolve, reject) {
 192 | 		for (var i = 0; i < list.length; i++) {
 193 | 			list[i].then(resolve, reject)
 194 | 		}
 195 | 	})
 196 | }
 197 | if (typeof window !== "undefined") {
 198 | 	if (typeof window.Promise === "undefined") window.Promise = PromisePolyfill
 199 | 	var PromisePolyfill = window.Promise
 200 | } else if (typeof global !== "undefined") {
 201 | 	if (typeof global.Promise === "undefined") global.Promise = PromisePolyfill
 202 | 	var PromisePolyfill = global.Promise
 203 | } else {
 204 | }
 205 | var buildQueryString = function(object) {
 206 | 	if (Object.prototype.toString.call(object) !== "[object Object]") return ""
 207 | 	var args = []
 208 | 	for (var key0 in object) {
 209 | 		destructure(key0, object[key0])
 210 | 	}
 211 | 	return args.join("&")
 212 | 	function destructure(key0, value) {
 213 | 		if (Array.isArray(value)) {
 214 | 			for (var i = 0; i < value.length; i++) {
 215 | 				destructure(key0 + "[" + i + "]", value[i])
 216 | 			}
 217 | 		}
 218 | 		else if (Object.prototype.toString.call(value) === "[object Object]") {
 219 | 			for (var i in value) {
 220 | 				destructure(key0 + "[" + i + "]", value[i])
 221 | 			}
 222 | 		}
 223 | 		else args.push(encodeURIComponent(key0) + (value != null && value !== "" ? "=" + encodeURIComponent(value) : ""))
 224 | 	}
 225 | }
 226 | var FILE_PROTOCOL_REGEX = new RegExp("^file://", "i")
 227 | var _8 = function($window, Promise) {
 228 | 	var callbackCount = 0
 229 | 	var oncompletion
 230 | 	function setCompletionCallback(callback) {oncompletion = callback}
 231 | 	function finalizer() {
 232 | 		var count = 0
 233 | 		function complete() {if (--count === 0 && typeof oncompletion === "function") oncompletion()}
 234 | 		return function finalize(promise0) {
 235 | 			var then0 = promise0.then
 236 | 			promise0.then = function() {
 237 | 				count++
 238 | 				var next = then0.apply(promise0, arguments)
 239 | 				next.then(complete, function(e) {
 240 | 					complete()
 241 | 					if (count === 0) throw e
 242 | 				})
 243 | 				return finalize(next)
 244 | 			}
 245 | 			return promise0
 246 | 		}
 247 | 	}
 248 | 	function normalize(args, extra) {
 249 | 		if (typeof args === "string") {
 250 | 			var url = args
 251 | 			args = extra || {}
 252 | 			if (args.url == null) args.url = url
 253 | 		}
 254 | 		return args
 255 | 	}
 256 | 	function request(args, extra) {
 257 | 		var finalize = finalizer()
 258 | 		args = normalize(args, extra)
 259 | 		var promise0 = new Promise(function(resolve, reject) {
 260 | 			if (args.method == null) args.method = "GET"
 261 | 			args.method = args.method.toUpperCase()
 262 | 			var useBody = (args.method === "GET" || args.method === "TRACE") ? false : (typeof args.useBody === "boolean" ? args.useBody : true)
 263 | 			if (typeof args.serialize !== "function") args.serialize = typeof FormData !== "undefined" && args.data instanceof FormData ? function(value) {return value} : JSON.stringify
 264 | 			if (typeof args.deserialize !== "function") args.deserialize = deserialize
 265 | 			if (typeof args.extract !== "function") args.extract = extract
 266 | 			args.url = interpolate(args.url, args.data)
 267 | 			if (useBody) args.data = args.serialize(args.data)
 268 | 			else args.url = assemble(args.url, args.data)
 269 | 			var xhr = new $window.XMLHttpRequest(),
 270 | 				aborted = false,
 271 | 				_abort = xhr.abort
 272 | 			xhr.abort = function abort() {
 273 | 				aborted = true
 274 | 				_abort.call(xhr)
 275 | 			}
 276 | 			xhr.open(args.method, args.url, typeof args.async === "boolean" ? args.async : true, typeof args.user === "string" ? args.user : undefined, typeof args.password === "string" ? args.password : undefined)
 277 | 			if (args.serialize === JSON.stringify && useBody) {
 278 | 				xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8")
 279 | 			}
 280 | 			if (args.deserialize === deserialize) {
 281 | 				xhr.setRequestHeader("Accept", "application/json, text/*")
 282 | 			}
 283 | 			if (args.withCredentials) xhr.withCredentials = args.withCredentials
 284 | 			for (var key in args.headers) if ({}.hasOwnProperty.call(args.headers, key)) {
 285 | 				xhr.setRequestHeader(key, args.headers[key])
 286 | 			}
 287 | 			if (typeof args.config === "function") xhr = args.config(xhr, args) || xhr
 288 | 			xhr.onreadystatechange = function() {
 289 | 				// Don't throw errors on xhr.abort().
 290 | 				if(aborted) return
 291 | 				if (xhr.readyState === 4) {
 292 | 					try {
 293 | 						var response = (args.extract !== extract) ? args.extract(xhr, args) : args.deserialize(args.extract(xhr, args))
 294 | 						if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304 || FILE_PROTOCOL_REGEX.test(args.url)) {
 295 | 							resolve(cast(args.type, response))
 296 | 						}
 297 | 						else {
 298 | 							var error = new Error(xhr.responseText)
 299 | 							for (var key in response) error[key] = response[key]
 300 | 							reject(error)
 301 | 						}
 302 | 					}
 303 | 					catch (e) {
 304 | 						reject(e)
 305 | 					}
 306 | 				}
 307 | 			}
 308 | 			if (useBody && (args.data != null)) xhr.send(args.data)
 309 | 			else xhr.send()
 310 | 		})
 311 | 		return args.background === true ? promise0 : finalize(promise0)
 312 | 	}
 313 | 	function jsonp(args, extra) {
 314 | 		var finalize = finalizer()
 315 | 		args = normalize(args, extra)
 316 | 		var promise0 = new Promise(function(resolve, reject) {
 317 | 			var callbackName = args.callbackName || "_mithril_" + Math.round(Math.random() * 1e16) + "_" + callbackCount++
 318 | 			var script = $window.document.createElement("script")
 319 | 			$window[callbackName] = function(data) {
 320 | 				script.parentNode.removeChild(script)
 321 | 				resolve(cast(args.type, data))
 322 | 				delete $window[callbackName]
 323 | 			}
 324 | 			script.onerror = function() {
 325 | 				script.parentNode.removeChild(script)
 326 | 				reject(new Error("JSONP request failed"))
 327 | 				delete $window[callbackName]
 328 | 			}
 329 | 			if (args.data == null) args.data = {}
 330 | 			args.url = interpolate(args.url, args.data)
 331 | 			args.data[args.callbackKey || "callback"] = callbackName
 332 | 			script.src = assemble(args.url, args.data)
 333 | 			$window.document.documentElement.appendChild(script)
 334 | 		})
 335 | 		return args.background === true? promise0 : finalize(promise0)
 336 | 	}
 337 | 	function interpolate(url, data) {
 338 | 		if (data == null) return url
 339 | 		var tokens = url.match(/:[^\/]+/gi) || []
 340 | 		for (var i = 0; i < tokens.length; i++) {
 341 | 			var key = tokens[i].slice(1)
 342 | 			if (data[key] != null) {
 343 | 				url = url.replace(tokens[i], data[key])
 344 | 			}
 345 | 		}
 346 | 		return url
 347 | 	}
 348 | 	function assemble(url, data) {
 349 | 		var querystring = buildQueryString(data)
 350 | 		if (querystring !== "") {
 351 | 			var prefix = url.indexOf("?") < 0 ? "?" : "&"
 352 | 			url += prefix + querystring
 353 | 		}
 354 | 		return url
 355 | 	}
 356 | 	function deserialize(data) {
 357 | 		try {return data !== "" ? JSON.parse(data) : null}
 358 | 		catch (e) {throw new Error(data)}
 359 | 	}
 360 | 	function extract(xhr) {return xhr.responseText}
 361 | 	function cast(type0, data) {
 362 | 		if (typeof type0 === "function") {
 363 | 			if (Array.isArray(data)) {
 364 | 				for (var i = 0; i < data.length; i++) {
 365 | 					data[i] = new type0(data[i])
 366 | 				}
 367 | 			}
 368 | 			else return new type0(data)
 369 | 		}
 370 | 		return data
 371 | 	}
 372 | 	return {request: request, jsonp: jsonp, setCompletionCallback: setCompletionCallback}
 373 | }
 374 | var requestService = _8(window, PromisePolyfill)
 375 | var coreRenderer = function($window) {
 376 | 	var $doc = $window.document
 377 | 	var $emptyFragment = $doc.createDocumentFragment()
 378 | 	var nameSpace = {
 379 | 		svg: "http://www.w3.org/2000/svg",
 380 | 		math: "http://www.w3.org/1998/Math/MathML"
 381 | 	}
 382 | 	var onevent
 383 | 	function setEventCallback(callback) {return onevent = callback}
 384 | 	function getNameSpace(vnode) {
 385 | 		return vnode.attrs && vnode.attrs.xmlns || nameSpace[vnode.tag]
 386 | 	}
 387 | 	//create
 388 | 	function createNodes(parent, vnodes, start, end, hooks, nextSibling, ns) {
 389 | 		for (var i = start; i < end; i++) {
 390 | 			var vnode = vnodes[i]
 391 | 			if (vnode != null) {
 392 | 				createNode(parent, vnode, hooks, ns, nextSibling)
 393 | 			}
 394 | 		}
 395 | 	}
 396 | 	function createNode(parent, vnode, hooks, ns, nextSibling) {
 397 | 		var tag = vnode.tag
 398 | 		if (typeof tag === "string") {
 399 | 			vnode.state = {}
 400 | 			if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
 401 | 			switch (tag) {
 402 | 				case "#": return createText(parent, vnode, nextSibling)
 403 | 				case "<": return createHTML(parent, vnode, nextSibling)
 404 | 				case "[": return createFragment(parent, vnode, hooks, ns, nextSibling)
 405 | 				default: return createElement(parent, vnode, hooks, ns, nextSibling)
 406 | 			}
 407 | 		}
 408 | 		else return createComponent(parent, vnode, hooks, ns, nextSibling)
 409 | 	}
 410 | 	function createText(parent, vnode, nextSibling) {
 411 | 		vnode.dom = $doc.createTextNode(vnode.children)
 412 | 		insertNode(parent, vnode.dom, nextSibling)
 413 | 		return vnode.dom
 414 | 	}
 415 | 	function createHTML(parent, vnode, nextSibling) {
 416 | 		var match1 = vnode.children.match(/^\s*?<(\w+)/im) || []
 417 | 		var parent1 = {caption: "table", thead: "table", tbody: "table", tfoot: "table", tr: "tbody", th: "tr", td: "tr", colgroup: "table", col: "colgroup"}[match1[1]] || "div"
 418 | 		var temp = $doc.createElement(parent1)
 419 | 		temp.innerHTML = vnode.children
 420 | 		vnode.dom = temp.firstChild
 421 | 		vnode.domSize = temp.childNodes.length
 422 | 		var fragment = $doc.createDocumentFragment()
 423 | 		var child
 424 | 		while (child = temp.firstChild) {
 425 | 			fragment.appendChild(child)
 426 | 		}
 427 | 		insertNode(parent, fragment, nextSibling)
 428 | 		return fragment
 429 | 	}
 430 | 	function createFragment(parent, vnode, hooks, ns, nextSibling) {
 431 | 		var fragment = $doc.createDocumentFragment()
 432 | 		if (vnode.children != null) {
 433 | 			var children = vnode.children
 434 | 			createNodes(fragment, children, 0, children.length, hooks, null, ns)
 435 | 		}
 436 | 		vnode.dom = fragment.firstChild
 437 | 		vnode.domSize = fragment.childNodes.length
 438 | 		insertNode(parent, fragment, nextSibling)
 439 | 		return fragment
 440 | 	}
 441 | 	function createElement(parent, vnode, hooks, ns, nextSibling) {
 442 | 		var tag = vnode.tag
 443 | 		var attrs2 = vnode.attrs
 444 | 		var is = attrs2 && attrs2.is
 445 | 		ns = getNameSpace(vnode) || ns
 446 | 		var element = ns ?
 447 | 			is ? $doc.createElementNS(ns, tag, {is: is}) : $doc.createElementNS(ns, tag) :
 448 | 			is ? $doc.createElement(tag, {is: is}) : $doc.createElement(tag)
 449 | 		vnode.dom = element
 450 | 		if (attrs2 != null) {
 451 | 			setAttrs(vnode, attrs2, ns)
 452 | 		}
 453 | 		insertNode(parent, element, nextSibling)
 454 | 		if (vnode.attrs != null && vnode.attrs.contenteditable != null) {
 455 | 			setContentEditable(vnode)
 456 | 		}
 457 | 		else {
 458 | 			if (vnode.text != null) {
 459 | 				if (vnode.text !== "") element.textContent = vnode.text
 460 | 				else vnode.children = [Vnode("#", undefined, undefined, vnode.text, undefined, undefined)]
 461 | 			}
 462 | 			if (vnode.children != null) {
 463 | 				var children = vnode.children
 464 | 				createNodes(element, children, 0, children.length, hooks, null, ns)
 465 | 				setLateAttrs(vnode)
 466 | 			}
 467 | 		}
 468 | 		return element
 469 | 	}
 470 | 	function initComponent(vnode, hooks) {
 471 | 		var sentinel
 472 | 		if (typeof vnode.tag.view === "function") {
 473 | 			vnode.state = Object.create(vnode.tag)
 474 | 			sentinel = vnode.state.view
 475 | 			if (sentinel.$$reentrantLock$$ != null) return $emptyFragment
 476 | 			sentinel.$$reentrantLock$$ = true
 477 | 		} else {
 478 | 			vnode.state = void 0
 479 | 			sentinel = vnode.tag
 480 | 			if (sentinel.$$reentrantLock$$ != null) return $emptyFragment
 481 | 			sentinel.$$reentrantLock$$ = true
 482 | 			vnode.state = (vnode.tag.prototype != null && typeof vnode.tag.prototype.view === "function") ? new vnode.tag(vnode) : vnode.tag(vnode)
 483 | 		}
 484 | 		vnode._state = vnode.state
 485 | 		if (vnode.attrs != null) initLifecycle(vnode.attrs, vnode, hooks)
 486 | 		initLifecycle(vnode._state, vnode, hooks)
 487 | 		vnode.instance = Vnode.normalize(vnode._state.view.call(vnode.state, vnode))
 488 | 		if (vnode.instance === vnode) throw Error("A view cannot return the vnode it received as argument")
 489 | 		sentinel.$$reentrantLock$$ = null
 490 | 	}
 491 | 	function createComponent(parent, vnode, hooks, ns, nextSibling) {
 492 | 		initComponent(vnode, hooks)
 493 | 		if (vnode.instance != null) {
 494 | 			var element = createNode(parent, vnode.instance, hooks, ns, nextSibling)
 495 | 			vnode.dom = vnode.instance.dom
 496 | 			vnode.domSize = vnode.dom != null ? vnode.instance.domSize : 0
 497 | 			insertNode(parent, element, nextSibling)
 498 | 			return element
 499 | 		}
 500 | 		else {
 501 | 			vnode.domSize = 0
 502 | 			return $emptyFragment
 503 | 		}
 504 | 	}
 505 | 	//update
 506 | 	function updateNodes(parent, old, vnodes, recycling, hooks, nextSibling, ns) {
 507 | 		if (old === vnodes || old == null && vnodes == null) return
 508 | 		else if (old == null) createNodes(parent, vnodes, 0, vnodes.length, hooks, nextSibling, ns)
 509 | 		else if (vnodes == null) removeNodes(old, 0, old.length, vnodes)
 510 | 		else {
 511 | 			if (old.length === vnodes.length) {
 512 | 				var isUnkeyed = false
 513 | 				for (var i = 0; i < vnodes.length; i++) {
 514 | 					if (vnodes[i] != null && old[i] != null) {
 515 | 						isUnkeyed = vnodes[i].key == null && old[i].key == null
 516 | 						break
 517 | 					}
 518 | 				}
 519 | 				if (isUnkeyed) {
 520 | 					for (var i = 0; i < old.length; i++) {
 521 | 						if (old[i] === vnodes[i]) continue
 522 | 						else if (old[i] == null && vnodes[i] != null) createNode(parent, vnodes[i], hooks, ns, getNextSibling(old, i + 1, nextSibling))
 523 | 						else if (vnodes[i] == null) removeNodes(old, i, i + 1, vnodes)
 524 | 						else updateNode(parent, old[i], vnodes[i], hooks, getNextSibling(old, i + 1, nextSibling), recycling, ns)
 525 | 					}
 526 | 					return
 527 | 				}
 528 | 			}
 529 | 			recycling = recycling || isRecyclable(old, vnodes)
 530 | 			if (recycling) {
 531 | 				var pool = old.pool
 532 | 				old = old.concat(old.pool)
 533 | 			}
 534 | 			var oldStart = 0, start = 0, oldEnd = old.length - 1, end = vnodes.length - 1, map
 535 | 			while (oldEnd >= oldStart && end >= start) {
 536 | 				var o = old[oldStart], v = vnodes[start]
 537 | 				if (o === v && !recycling) oldStart++, start++
 538 | 				else if (o == null) oldStart++
 539 | 				else if (v == null) start++
 540 | 				else if (o.key === v.key) {
 541 | 					var shouldRecycle = (pool != null && oldStart >= old.length - pool.length) || ((pool == null) && recycling)
 542 | 					oldStart++, start++
 543 | 					updateNode(parent, o, v, hooks, getNextSibling(old, oldStart, nextSibling), shouldRecycle, ns)
 544 | 					if (recycling && o.tag === v.tag) insertNode(parent, toFragment(o), nextSibling)
 545 | 				}
 546 | 				else {
 547 | 					var o = old[oldEnd]
 548 | 					if (o === v && !recycling) oldEnd--, start++
 549 | 					else if (o == null) oldEnd--
 550 | 					else if (v == null) start++
 551 | 					else if (o.key === v.key) {
 552 | 						var shouldRecycle = (pool != null && oldEnd >= old.length - pool.length) || ((pool == null) && recycling)
 553 | 						updateNode(parent, o, v, hooks, getNextSibling(old, oldEnd + 1, nextSibling), shouldRecycle, ns)
 554 | 						if (recycling || start < end) insertNode(parent, toFragment(o), getNextSibling(old, oldStart, nextSibling))
 555 | 						oldEnd--, start++
 556 | 					}
 557 | 					else break
 558 | 				}
 559 | 			}
 560 | 			while (oldEnd >= oldStart && end >= start) {
 561 | 				var o = old[oldEnd], v = vnodes[end]
 562 | 				if (o === v && !recycling) oldEnd--, end--
 563 | 				else if (o == null) oldEnd--
 564 | 				else if (v == null) end--
 565 | 				else if (o.key === v.key) {
 566 | 					var shouldRecycle = (pool != null && oldEnd >= old.length - pool.length) || ((pool == null) && recycling)
 567 | 					updateNode(parent, o, v, hooks, getNextSibling(old, oldEnd + 1, nextSibling), shouldRecycle, ns)
 568 | 					if (recycling && o.tag === v.tag) insertNode(parent, toFragment(o), nextSibling)
 569 | 					if (o.dom != null) nextSibling = o.dom
 570 | 					oldEnd--, end--
 571 | 				}
 572 | 				else {
 573 | 					if (!map) map = getKeyMap(old, oldEnd)
 574 | 					if (v != null) {
 575 | 						var oldIndex = map[v.key]
 576 | 						if (oldIndex != null) {
 577 | 							var movable = old[oldIndex]
 578 | 							var shouldRecycle = (pool != null && oldIndex >= old.length - pool.length) || ((pool == null) && recycling)
 579 | 							updateNode(parent, movable, v, hooks, getNextSibling(old, oldEnd + 1, nextSibling), recycling, ns)
 580 | 							insertNode(parent, toFragment(movable), nextSibling)
 581 | 							old[oldIndex].skip = true
 582 | 							if (movable.dom != null) nextSibling = movable.dom
 583 | 						}
 584 | 						else {
 585 | 							var dom = createNode(parent, v, hooks, ns, nextSibling)
 586 | 							nextSibling = dom
 587 | 						}
 588 | 					}
 589 | 					end--
 590 | 				}
 591 | 				if (end < start) break
 592 | 			}
 593 | 			createNodes(parent, vnodes, start, end + 1, hooks, nextSibling, ns)
 594 | 			removeNodes(old, oldStart, oldEnd + 1, vnodes)
 595 | 		}
 596 | 	}
 597 | 	function updateNode(parent, old, vnode, hooks, nextSibling, recycling, ns) {
 598 | 		var oldTag = old.tag, tag = vnode.tag
 599 | 		if (oldTag === tag) {
 600 | 			vnode.state = old.state
 601 | 			vnode._state = old._state
 602 | 			vnode.events = old.events
 603 | 			if (!recycling && shouldNotUpdate(vnode, old)) return
 604 | 			if (typeof oldTag === "string") {
 605 | 				if (vnode.attrs != null) {
 606 | 					if (recycling) {
 607 | 						vnode.state = {}
 608 | 						initLifecycle(vnode.attrs, vnode, hooks)
 609 | 					}
 610 | 					else updateLifecycle(vnode.attrs, vnode, hooks)
 611 | 				}
 612 | 				switch (oldTag) {
 613 | 					case "#": updateText(old, vnode); break
 614 | 					case "<": updateHTML(parent, old, vnode, nextSibling); break
 615 | 					case "[": updateFragment(parent, old, vnode, recycling, hooks, nextSibling, ns); break
 616 | 					default: updateElement(old, vnode, recycling, hooks, ns)
 617 | 				}
 618 | 			}
 619 | 			else updateComponent(parent, old, vnode, hooks, nextSibling, recycling, ns)
 620 | 		}
 621 | 		else {
 622 | 			removeNode(old, null)
 623 | 			createNode(parent, vnode, hooks, ns, nextSibling)
 624 | 		}
 625 | 	}
 626 | 	function updateText(old, vnode) {
 627 | 		if (old.children.toString() !== vnode.children.toString()) {
 628 | 			old.dom.nodeValue = vnode.children
 629 | 		}
 630 | 		vnode.dom = old.dom
 631 | 	}
 632 | 	function updateHTML(parent, old, vnode, nextSibling) {
 633 | 		if (old.children !== vnode.children) {
 634 | 			toFragment(old)
 635 | 			createHTML(parent, vnode, nextSibling)
 636 | 		}
 637 | 		else vnode.dom = old.dom, vnode.domSize = old.domSize
 638 | 	}
 639 | 	function updateFragment(parent, old, vnode, recycling, hooks, nextSibling, ns) {
 640 | 		updateNodes(parent, old.children, vnode.children, recycling, hooks, nextSibling, ns)
 641 | 		var domSize = 0, children = vnode.children
 642 | 		vnode.dom = null
 643 | 		if (children != null) {
 644 | 			for (var i = 0; i < children.length; i++) {
 645 | 				var child = children[i]
 646 | 				if (child != null && child.dom != null) {
 647 | 					if (vnode.dom == null) vnode.dom = child.dom
 648 | 					domSize += child.domSize || 1
 649 | 				}
 650 | 			}
 651 | 			if (domSize !== 1) vnode.domSize = domSize
 652 | 		}
 653 | 	}
 654 | 	function updateElement(old, vnode, recycling, hooks, ns) {
 655 | 		var element = vnode.dom = old.dom
 656 | 		ns = getNameSpace(vnode) || ns
 657 | 		if (vnode.tag === "textarea") {
 658 | 			if (vnode.attrs == null) vnode.attrs = {}
 659 | 			if (vnode.text != null) {
 660 | 				vnode.attrs.value = vnode.text //FIXME handle0 multiple children
 661 | 				vnode.text = undefined
 662 | 			}
 663 | 		}
 664 | 		updateAttrs(vnode, old.attrs, vnode.attrs, ns)
 665 | 		if (vnode.attrs != null && vnode.attrs.contenteditable != null) {
 666 | 			setContentEditable(vnode)
 667 | 		}
 668 | 		else if (old.text != null && vnode.text != null && vnode.text !== "") {
 669 | 			if (old.text.toString() !== vnode.text.toString()) old.dom.firstChild.nodeValue = vnode.text
 670 | 		}
 671 | 		else {
 672 | 			if (old.text != null) old.children = [Vnode("#", undefined, undefined, old.text, undefined, old.dom.firstChild)]
 673 | 			if (vnode.text != null) vnode.children = [Vnode("#", undefined, undefined, vnode.text, undefined, undefined)]
 674 | 			updateNodes(element, old.children, vnode.children, recycling, hooks, null, ns)
 675 | 		}
 676 | 	}
 677 | 	function updateComponent(parent, old, vnode, hooks, nextSibling, recycling, ns) {
 678 | 		if (recycling) {
 679 | 			initComponent(vnode, hooks)
 680 | 		} else {
 681 | 			vnode.instance = Vnode.normalize(vnode._state.view.call(vnode.state, vnode))
 682 | 			if (vnode.instance === vnode) throw Error("A view cannot return the vnode it received as argument")
 683 | 			if (vnode.attrs != null) updateLifecycle(vnode.attrs, vnode, hooks)
 684 | 			updateLifecycle(vnode._state, vnode, hooks)
 685 | 		}
 686 | 		if (vnode.instance != null) {
 687 | 			if (old.instance == null) createNode(parent, vnode.instance, hooks, ns, nextSibling)
 688 | 			else updateNode(parent, old.instance, vnode.instance, hooks, nextSibling, recycling, ns)
 689 | 			vnode.dom = vnode.instance.dom
 690 | 			vnode.domSize = vnode.instance.domSize
 691 | 		}
 692 | 		else if (old.instance != null) {
 693 | 			removeNode(old.instance, null)
 694 | 			vnode.dom = undefined
 695 | 			vnode.domSize = 0
 696 | 		}
 697 | 		else {
 698 | 			vnode.dom = old.dom
 699 | 			vnode.domSize = old.domSize
 700 | 		}
 701 | 	}
 702 | 	function isRecyclable(old, vnodes) {
 703 | 		if (old.pool != null && Math.abs(old.pool.length - vnodes.length) <= Math.abs(old.length - vnodes.length)) {
 704 | 			var oldChildrenLength = old[0] && old[0].children && old[0].children.length || 0
 705 | 			var poolChildrenLength = old.pool[0] && old.pool[0].children && old.pool[0].children.length || 0
 706 | 			var vnodesChildrenLength = vnodes[0] && vnodes[0].children && vnodes[0].children.length || 0
 707 | 			if (Math.abs(poolChildrenLength - vnodesChildrenLength) <= Math.abs(oldChildrenLength - vnodesChildrenLength)) {
 708 | 				return true
 709 | 			}
 710 | 		}
 711 | 		return false
 712 | 	}
 713 | 	function getKeyMap(vnodes, end) {
 714 | 		var map = {}, i = 0
 715 | 		for (var i = 0; i < end; i++) {
 716 | 			var vnode = vnodes[i]
 717 | 			if (vnode != null) {
 718 | 				var key2 = vnode.key
 719 | 				if (key2 != null) map[key2] = i
 720 | 			}
 721 | 		}
 722 | 		return map
 723 | 	}
 724 | 	function toFragment(vnode) {
 725 | 		var count0 = vnode.domSize
 726 | 		if (count0 != null || vnode.dom == null) {
 727 | 			var fragment = $doc.createDocumentFragment()
 728 | 			if (count0 > 0) {
 729 | 				var dom = vnode.dom
 730 | 				while (--count0) fragment.appendChild(dom.nextSibling)
 731 | 				fragment.insertBefore(dom, fragment.firstChild)
 732 | 			}
 733 | 			return fragment
 734 | 		}
 735 | 		else return vnode.dom
 736 | 	}
 737 | 	function getNextSibling(vnodes, i, nextSibling) {
 738 | 		for (; i < vnodes.length; i++) {
 739 | 			if (vnodes[i] != null && vnodes[i].dom != null) return vnodes[i].dom
 740 | 		}
 741 | 		return nextSibling
 742 | 	}
 743 | 	function insertNode(parent, dom, nextSibling) {
 744 | 		if (nextSibling && nextSibling.parentNode) parent.insertBefore(dom, nextSibling)
 745 | 		else parent.appendChild(dom)
 746 | 	}
 747 | 	function setContentEditable(vnode) {
 748 | 		var children = vnode.children
 749 | 		if (children != null && children.length === 1 && children[0].tag === "<") {
 750 | 			var content = children[0].children
 751 | 			if (vnode.dom.innerHTML !== content) vnode.dom.innerHTML = content
 752 | 		}
 753 | 		else if (vnode.text != null || children != null && children.length !== 0) throw new Error("Child node of a contenteditable must be trusted")
 754 | 	}
 755 | 	//remove
 756 | 	function removeNodes(vnodes, start, end, context) {
 757 | 		for (var i = start; i < end; i++) {
 758 | 			var vnode = vnodes[i]
 759 | 			if (vnode != null) {
 760 | 				if (vnode.skip) vnode.skip = false
 761 | 				else removeNode(vnode, context)
 762 | 			}
 763 | 		}
 764 | 	}
 765 | 	function removeNode(vnode, context) {
 766 | 		var expected = 1, called = 0
 767 | 		if (vnode.attrs && typeof vnode.attrs.onbeforeremove === "function") {
 768 | 			var result = vnode.attrs.onbeforeremove.call(vnode.state, vnode)
 769 | 			if (result != null && typeof result.then === "function") {
 770 | 				expected++
 771 | 				result.then(continuation, continuation)
 772 | 			}
 773 | 		}
 774 | 		if (typeof vnode.tag !== "string" && typeof vnode._state.onbeforeremove === "function") {
 775 | 			var result = vnode._state.onbeforeremove.call(vnode.state, vnode)
 776 | 			if (result != null && typeof result.then === "function") {
 777 | 				expected++
 778 | 				result.then(continuation, continuation)
 779 | 			}
 780 | 		}
 781 | 		continuation()
 782 | 		function continuation() {
 783 | 			if (++called === expected) {
 784 | 				onremove(vnode)
 785 | 				if (vnode.dom) {
 786 | 					var count0 = vnode.domSize || 1
 787 | 					if (count0 > 1) {
 788 | 						var dom = vnode.dom
 789 | 						while (--count0) {
 790 | 							removeNodeFromDOM(dom.nextSibling)
 791 | 						}
 792 | 					}
 793 | 					removeNodeFromDOM(vnode.dom)
 794 | 					if (context != null && vnode.domSize == null && !hasIntegrationMethods(vnode.attrs) && typeof vnode.tag === "string") { //TODO test custom elements
 795 | 						if (!context.pool) context.pool = [vnode]
 796 | 						else context.pool.push(vnode)
 797 | 					}
 798 | 				}
 799 | 			}
 800 | 		}
 801 | 	}
 802 | 	function removeNodeFromDOM(node) {
 803 | 		var parent = node.parentNode
 804 | 		if (parent != null) parent.removeChild(node)
 805 | 	}
 806 | 	function onremove(vnode) {
 807 | 		if (vnode.attrs && typeof vnode.attrs.onremove === "function") vnode.attrs.onremove.call(vnode.state, vnode)
 808 | 		if (typeof vnode.tag !== "string" && typeof vnode._state.onremove === "function") vnode._state.onremove.call(vnode.state, vnode)
 809 | 		if (vnode.instance != null) onremove(vnode.instance)
 810 | 		else {
 811 | 			var children = vnode.children
 812 | 			if (Array.isArray(children)) {
 813 | 				for (var i = 0; i < children.length; i++) {
 814 | 					var child = children[i]
 815 | 					if (child != null) onremove(child)
 816 | 				}
 817 | 			}
 818 | 		}
 819 | 	}
 820 | 	//attrs2
 821 | 	function setAttrs(vnode, attrs2, ns) {
 822 | 		for (var key2 in attrs2) {
 823 | 			setAttr(vnode, key2, null, attrs2[key2], ns)
 824 | 		}
 825 | 	}
 826 | 	function setAttr(vnode, key2, old, value, ns) {
 827 | 		var element = vnode.dom
 828 | 		if (key2 === "key" || key2 === "is" || (old === value && !isFormAttribute(vnode, key2)) && typeof value !== "object" || typeof value === "undefined" || isLifecycleMethod(key2)) return
 829 | 		var nsLastIndex = key2.indexOf(":")
 830 | 		if (nsLastIndex > -1 && key2.substr(0, nsLastIndex) === "xlink") {
 831 | 			element.setAttributeNS("http://www.w3.org/1999/xlink", key2.slice(nsLastIndex + 1), value)
 832 | 		}
 833 | 		else if (key2[0] === "o" && key2[1] === "n" && typeof value === "function") updateEvent(vnode, key2, value)
 834 | 		else if (key2 === "style") updateStyle(element, old, value)
 835 | 		else if (key2 in element && !isAttribute(key2) && ns === undefined && !isCustomElement(vnode)) {
 836 | 			if (key2 === "value") {
 837 | 				var normalized0 = "" + value // eslint-disable-line no-implicit-coercion
 838 | 				//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
 839 | 				if ((vnode.tag === "input" || vnode.tag === "textarea") && vnode.dom.value === normalized0 && vnode.dom === $doc.activeElement) return
 840 | 				//setting select[value] to same value while having select open blinks select dropdown in Chrome
 841 | 				if (vnode.tag === "select") {
 842 | 					if (value === null) {
 843 | 						if (vnode.dom.selectedIndex === -1 && vnode.dom === $doc.activeElement) return
 844 | 					} else {
 845 | 						if (old !== null && vnode.dom.value === normalized0 && vnode.dom === $doc.activeElement) return
 846 | 					}
 847 | 				}
 848 | 				//setting option[value] to same value while having select open blinks select dropdown in Chrome
 849 | 				if (vnode.tag === "option" && old != null && vnode.dom.value === normalized0) return
 850 | 			}
 851 | 			// If you assign an input type1 that is not supported by IE 11 with an assignment expression, an error0 will occur.
 852 | 			if (vnode.tag === "input" && key2 === "type") {
 853 | 				element.setAttribute(key2, value)
 854 | 				return
 855 | 			}
 856 | 			element[key2] = value
 857 | 		}
 858 | 		else {
 859 | 			if (typeof value === "boolean") {
 860 | 				if (value) element.setAttribute(key2, "")
 861 | 				else element.removeAttribute(key2)
 862 | 			}
 863 | 			else element.setAttribute(key2 === "className" ? "class" : key2, value)
 864 | 		}
 865 | 	}
 866 | 	function setLateAttrs(vnode) {
 867 | 		var attrs2 = vnode.attrs
 868 | 		if (vnode.tag === "select" && attrs2 != null) {
 869 | 			if ("value" in attrs2) setAttr(vnode, "value", null, attrs2.value, undefined)
 870 | 			if ("selectedIndex" in attrs2) setAttr(vnode, "selectedIndex", null, attrs2.selectedIndex, undefined)
 871 | 		}
 872 | 	}
 873 | 	function updateAttrs(vnode, old, attrs2, ns) {
 874 | 		if (attrs2 != null) {
 875 | 			for (var key2 in attrs2) {
 876 | 				setAttr(vnode, key2, old && old[key2], attrs2[key2], ns)
 877 | 			}
 878 | 		}
 879 | 		if (old != null) {
 880 | 			for (var key2 in old) {
 881 | 				if (attrs2 == null || !(key2 in attrs2)) {
 882 | 					if (key2 === "className") key2 = "class"
 883 | 					if (key2[0] === "o" && key2[1] === "n" && !isLifecycleMethod(key2)) updateEvent(vnode, key2, undefined)
 884 | 					else if (key2 !== "key") vnode.dom.removeAttribute(key2)
 885 | 				}
 886 | 			}
 887 | 		}
 888 | 	}
 889 | 	function isFormAttribute(vnode, attr) {
 890 | 		return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === $doc.activeElement
 891 | 	}
 892 | 	function isLifecycleMethod(attr) {
 893 | 		return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "onbeforeupdate"
 894 | 	}
 895 | 	function isAttribute(attr) {
 896 | 		return attr === "href" || attr === "list" || attr === "form" || attr === "width" || attr === "height"// || attr === "type"
 897 | 	}
 898 | 	function isCustomElement(vnode){
 899 | 		return vnode.attrs.is || vnode.tag.indexOf("-") > -1
 900 | 	}
 901 | 	function hasIntegrationMethods(source) {
 902 | 		return source != null && (source.oncreate || source.onupdate || source.onbeforeremove || source.onremove)
 903 | 	}
 904 | 	//style
 905 | 	function updateStyle(element, old, style) {
 906 | 		if (old === style) element.style.cssText = "", old = null
 907 | 		if (style == null) element.style.cssText = ""
 908 | 		else if (typeof style === "string") element.style.cssText = style
 909 | 		else {
 910 | 			if (typeof old === "string") element.style.cssText = ""
 911 | 			for (var key2 in style) {
 912 | 				element.style[key2] = style[key2]
 913 | 			}
 914 | 			if (old != null && typeof old !== "string") {
 915 | 				for (var key2 in old) {
 916 | 					if (!(key2 in style)) element.style[key2] = ""
 917 | 				}
 918 | 			}
 919 | 		}
 920 | 	}
 921 | 	//event
 922 | 	function updateEvent(vnode, key2, value) {
 923 | 		var element = vnode.dom
 924 | 		var callback = typeof onevent !== "function" ? value : function(e) {
 925 | 			var result = value.call(element, e)
 926 | 			onevent.call(element, e)
 927 | 			return result
 928 | 		}
 929 | 		if (key2 in element) element[key2] = typeof value === "function" ? callback : null
 930 | 		else {
 931 | 			var eventName = key2.slice(2)
 932 | 			if (vnode.events === undefined) vnode.events = {}
 933 | 			if (vnode.events[key2] === callback) return
 934 | 			if (vnode.events[key2] != null) element.removeEventListener(eventName, vnode.events[key2], false)
 935 | 			if (typeof value === "function") {
 936 | 				vnode.events[key2] = callback
 937 | 				element.addEventListener(eventName, vnode.events[key2], false)
 938 | 			}
 939 | 		}
 940 | 	}
 941 | 	//lifecycle
 942 | 	function initLifecycle(source, vnode, hooks) {
 943 | 		if (typeof source.oninit === "function") source.oninit.call(vnode.state, vnode)
 944 | 		if (typeof source.oncreate === "function") hooks.push(source.oncreate.bind(vnode.state, vnode))
 945 | 	}
 946 | 	function updateLifecycle(source, vnode, hooks) {
 947 | 		if (typeof source.onupdate === "function") hooks.push(source.onupdate.bind(vnode.state, vnode))
 948 | 	}
 949 | 	function shouldNotUpdate(vnode, old) {
 950 | 		var forceVnodeUpdate, forceComponentUpdate
 951 | 		if (vnode.attrs != null && typeof vnode.attrs.onbeforeupdate === "function") forceVnodeUpdate = vnode.attrs.onbeforeupdate.call(vnode.state, vnode, old)
 952 | 		if (typeof vnode.tag !== "string" && typeof vnode._state.onbeforeupdate === "function") forceComponentUpdate = vnode._state.onbeforeupdate.call(vnode.state, vnode, old)
 953 | 		if (!(forceVnodeUpdate === undefined && forceComponentUpdate === undefined) && !forceVnodeUpdate && !forceComponentUpdate) {
 954 | 			vnode.dom = old.dom
 955 | 			vnode.domSize = old.domSize
 956 | 			vnode.instance = old.instance
 957 | 			return true
 958 | 		}
 959 | 		return false
 960 | 	}
 961 | 	function render(dom, vnodes) {
 962 | 		if (!dom) throw new Error("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.")
 963 | 		var hooks = []
 964 | 		var active = $doc.activeElement
 965 | 		var namespace = dom.namespaceURI
 966 | 		// First time0 rendering into a node clears it out
 967 | 		if (dom.vnodes == null) dom.textContent = ""
 968 | 		if (!Array.isArray(vnodes)) vnodes = [vnodes]
 969 | 		updateNodes(dom, dom.vnodes, Vnode.normalizeChildren(vnodes), false, hooks, null, namespace === "http://www.w3.org/1999/xhtml" ? undefined : namespace)
 970 | 		dom.vnodes = vnodes
 971 | 		for (var i = 0; i < hooks.length; i++) hooks[i]()
 972 | 		if ($doc.activeElement !== active) active.focus()
 973 | 	}
 974 | 	return {render: render, setEventCallback: setEventCallback}
 975 | }
 976 | function throttle(callback) {
 977 | 	//60fps translates to 16.6ms, round it down since setTimeout requires int
 978 | 	var time = 16
 979 | 	var last = 0, pending = null
 980 | 	var timeout = typeof requestAnimationFrame === "function" ? requestAnimationFrame : setTimeout
 981 | 	return function() {
 982 | 		var now = Date.now()
 983 | 		if (last === 0 || now - last >= time) {
 984 | 			last = now
 985 | 			callback()
 986 | 		}
 987 | 		else if (pending === null) {
 988 | 			pending = timeout(function() {
 989 | 				pending = null
 990 | 				callback()
 991 | 				last = Date.now()
 992 | 			}, time - (now - last))
 993 | 		}
 994 | 	}
 995 | }
 996 | var _11 = function($window) {
 997 | 	var renderService = coreRenderer($window)
 998 | 	renderService.setEventCallback(function(e) {
 999 | 		if (e.redraw === false) e.redraw = undefined
1000 | 		else redraw()
1001 | 	})
1002 | 	var callbacks = []
1003 | 	function subscribe(key1, callback) {
1004 | 		unsubscribe(key1)
1005 | 		callbacks.push(key1, throttle(callback))
1006 | 	}
1007 | 	function unsubscribe(key1) {
1008 | 		var index = callbacks.indexOf(key1)
1009 | 		if (index > -1) callbacks.splice(index, 2)
1010 | 	}
1011 | 	function redraw() {
1012 | 		for (var i = 1; i < callbacks.length; i += 2) {
1013 | 			callbacks[i]()
1014 | 		}
1015 | 	}
1016 | 	return {subscribe: subscribe, unsubscribe: unsubscribe, redraw: redraw, render: renderService.render}
1017 | }
1018 | var redrawService = _11(window)
1019 | requestService.setCompletionCallback(redrawService.redraw)
1020 | var _16 = function(redrawService0) {
1021 | 	return function(root, component) {
1022 | 		if (component === null) {
1023 | 			redrawService0.render(root, [])
1024 | 			redrawService0.unsubscribe(root)
1025 | 			return
1026 | 		}
1027 | 		
1028 | 		if (component.view == null && typeof component !== "function") throw new Error("m.mount(element, component) expects a component, not a vnode")
1029 | 		
1030 | 		var run0 = function() {
1031 | 			redrawService0.render(root, Vnode(component))
1032 | 		}
1033 | 		redrawService0.subscribe(root, run0)
1034 | 		redrawService0.redraw()
1035 | 	}
1036 | }
1037 | m.mount = _16(redrawService)
1038 | var Promise = PromisePolyfill
1039 | var parseQueryString = function(string) {
1040 | 	if (string === "" || string == null) return {}
1041 | 	if (string.charAt(0) === "?") string = string.slice(1)
1042 | 	var entries = string.split("&"), data0 = {}, counters = {}
1043 | 	for (var i = 0; i < entries.length; i++) {
1044 | 		var entry = entries[i].split("=")
1045 | 		var key5 = decodeURIComponent(entry[0])
1046 | 		var value = entry.length === 2 ? decodeURIComponent(entry[1]) : ""
1047 | 		if (value === "true") value = true
1048 | 		else if (value === "false") value = false
1049 | 		var levels = key5.split(/\]\[?|\[/)
1050 | 		var cursor = data0
1051 | 		if (key5.indexOf("[") > -1) levels.pop()
1052 | 		for (var j = 0; j < levels.length; j++) {
1053 | 			var level = levels[j], nextLevel = levels[j + 1]
1054 | 			var isNumber = nextLevel == "" || !isNaN(parseInt(nextLevel, 10))
1055 | 			var isValue = j === levels.length - 1
1056 | 			if (level === "") {
1057 | 				var key5 = levels.slice(0, j).join()
1058 | 				if (counters[key5] == null) counters[key5] = 0
1059 | 				level = counters[key5]++
1060 | 			}
1061 | 			if (cursor[level] == null) {
1062 | 				cursor[level] = isValue ? value : isNumber ? [] : {}
1063 | 			}
1064 | 			cursor = cursor[level]
1065 | 		}
1066 | 	}
1067 | 	return data0
1068 | }
1069 | var coreRouter = function($window) {
1070 | 	var supportsPushState = typeof $window.history.pushState === "function"
1071 | 	var callAsync0 = typeof setImmediate === "function" ? setImmediate : setTimeout
1072 | 	function normalize1(fragment0) {
1073 | 		var data = $window.location[fragment0].replace(/(?:%[a-f89][a-f0-9])+/gim, decodeURIComponent)
1074 | 		if (fragment0 === "pathname" && data[0] !== "/") data = "/" + data
1075 | 		return data
1076 | 	}
1077 | 	var asyncId
1078 | 	function debounceAsync(callback0) {
1079 | 		return function() {
1080 | 			if (asyncId != null) return
1081 | 			asyncId = callAsync0(function() {
1082 | 				asyncId = null
1083 | 				callback0()
1084 | 			})
1085 | 		}
1086 | 	}
1087 | 	function parsePath(path, queryData, hashData) {
1088 | 		var queryIndex = path.indexOf("?")
1089 | 		var hashIndex = path.indexOf("#")
1090 | 		var pathEnd = queryIndex > -1 ? queryIndex : hashIndex > -1 ? hashIndex : path.length
1091 | 		if (queryIndex > -1) {
1092 | 			var queryEnd = hashIndex > -1 ? hashIndex : path.length
1093 | 			var queryParams = parseQueryString(path.slice(queryIndex + 1, queryEnd))
1094 | 			for (var key4 in queryParams) queryData[key4] = queryParams[key4]
1095 | 		}
1096 | 		if (hashIndex > -1) {
1097 | 			var hashParams = parseQueryString(path.slice(hashIndex + 1))
1098 | 			for (var key4 in hashParams) hashData[key4] = hashParams[key4]
1099 | 		}
1100 | 		return path.slice(0, pathEnd)
1101 | 	}
1102 | 	var router = {prefix: "#!"}
1103 | 	router.getPath = function() {
1104 | 		var type2 = router.prefix.charAt(0)
1105 | 		switch (type2) {
1106 | 			case "#": return normalize1("hash").slice(router.prefix.length)
1107 | 			case "?": return normalize1("search").slice(router.prefix.length) + normalize1("hash")
1108 | 			default: return normalize1("pathname").slice(router.prefix.length) + normalize1("search") + normalize1("hash")
1109 | 		}
1110 | 	}
1111 | 	router.setPath = function(path, data, options) {
1112 | 		var queryData = {}, hashData = {}
1113 | 		path = parsePath(path, queryData, hashData)
1114 | 		if (data != null) {
1115 | 			for (var key4 in data) queryData[key4] = data[key4]
1116 | 			path = path.replace(/:([^\/]+)/g, function(match2, token) {
1117 | 				delete queryData[token]
1118 | 				return data[token]
1119 | 			})
1120 | 		}
1121 | 		var query = buildQueryString(queryData)
1122 | 		if (query) path += "?" + query
1123 | 		var hash = buildQueryString(hashData)
1124 | 		if (hash) path += "#" + hash
1125 | 		if (supportsPushState) {
1126 | 			var state = options ? options.state : null
1127 | 			var title = options ? options.title : null
1128 | 			$window.onpopstate()
1129 | 			if (options && options.replace) $window.history.replaceState(state, title, router.prefix + path)
1130 | 			else $window.history.pushState(state, title, router.prefix + path)
1131 | 		}
1132 | 		else $window.location.href = router.prefix + path
1133 | 	}
1134 | 	router.defineRoutes = function(routes, resolve, reject) {
1135 | 		function resolveRoute() {
1136 | 			var path = router.getPath()
1137 | 			var params = {}
1138 | 			var pathname = parsePath(path, params, params)
1139 | 			var state = $window.history.state
1140 | 			if (state != null) {
1141 | 				for (var k in state) params[k] = state[k]
1142 | 			}
1143 | 			for (var route0 in routes) {
1144 | 				var matcher = new RegExp("^" + route0.replace(/:[^\/]+?\.{3}/g, "(.*?)").replace(/:[^\/]+/g, "([^\\/]+)") + "\/?$")
1145 | 				if (matcher.test(pathname)) {
1146 | 					pathname.replace(matcher, function() {
1147 | 						var keys = route0.match(/:[^\/]+/g) || []
1148 | 						var values = [].slice.call(arguments, 1, -2)
1149 | 						for (var i = 0; i < keys.length; i++) {
1150 | 							params[keys[i].replace(/:|\./g, "")] = decodeURIComponent(values[i])
1151 | 						}
1152 | 						resolve(routes[route0], params, path, route0)
1153 | 					})
1154 | 					return
1155 | 				}
1156 | 			}
1157 | 			reject(path, params)
1158 | 		}
1159 | 		if (supportsPushState) $window.onpopstate = debounceAsync(resolveRoute)
1160 | 		else if (router.prefix.charAt(0) === "#") $window.onhashchange = resolveRoute
1161 | 		resolveRoute()
1162 | 	}
1163 | 	return router
1164 | }
1165 | var _20 = function($window, redrawService0) {
1166 | 	var routeService = coreRouter($window)
1167 | 	var identity = function(v) {return v}
1168 | 	var render1, component, attrs3, currentPath, lastUpdate
1169 | 	var route = function(root, defaultRoute, routes) {
1170 | 		if (root == null) throw new Error("Ensure the DOM element that was passed to `m.route` is not undefined")
1171 | 		var run1 = function() {
1172 | 			if (render1 != null) redrawService0.render(root, render1(Vnode(component, attrs3.key, attrs3)))
1173 | 		}
1174 | 		var bail = function(path) {
1175 | 			if (path !== defaultRoute) routeService.setPath(defaultRoute, null, {replace: true})
1176 | 			else throw new Error("Could not resolve default route " + defaultRoute)
1177 | 		}
1178 | 		routeService.defineRoutes(routes, function(payload, params, path) {
1179 | 			var update = lastUpdate = function(routeResolver, comp) {
1180 | 				if (update !== lastUpdate) return
1181 | 				component = comp != null && (typeof comp.view === "function" || typeof comp === "function")? comp : "div"
1182 | 				attrs3 = params, currentPath = path, lastUpdate = null
1183 | 				render1 = (routeResolver.render || identity).bind(routeResolver)
1184 | 				run1()
1185 | 			}
1186 | 			if (payload.view || typeof payload === "function") update({}, payload)
1187 | 			else {
1188 | 				if (payload.onmatch) {
1189 | 					Promise.resolve(payload.onmatch(params, path)).then(function(resolved) {
1190 | 						update(payload, resolved)
1191 | 					}, bail)
1192 | 				}
1193 | 				else update(payload, "div")
1194 | 			}
1195 | 		}, bail)
1196 | 		redrawService0.subscribe(root, run1)
1197 | 	}
1198 | 	route.set = function(path, data, options) {
1199 | 		if (lastUpdate != null) {
1200 | 			options = options || {}
1201 | 			options.replace = true
1202 | 		}
1203 | 		lastUpdate = null
1204 | 		routeService.setPath(path, data, options)
1205 | 	}
1206 | 	route.get = function() {return currentPath}
1207 | 	route.prefix = function(prefix0) {routeService.prefix = prefix0}
1208 | 	route.link = function(vnode1) {
1209 | 		vnode1.dom.setAttribute("href", routeService.prefix + vnode1.attrs.href)
1210 | 		vnode1.dom.onclick = function(e) {
1211 | 			if (e.ctrlKey || e.metaKey || e.shiftKey || e.which === 2) return
1212 | 			e.preventDefault()
1213 | 			e.redraw = false
1214 | 			var href = this.getAttribute("href")
1215 | 			if (href.indexOf(routeService.prefix) === 0) href = href.slice(routeService.prefix.length)
1216 | 			route.set(href, undefined, undefined)
1217 | 		}
1218 | 	}
1219 | 	route.param = function(key3) {
1220 | 		if(typeof attrs3 !== "undefined" && typeof key3 !== "undefined") return attrs3[key3]
1221 | 		return attrs3
1222 | 	}
1223 | 	return route
1224 | }
1225 | m.route = _20(window, redrawService)
1226 | m.withAttr = function(attrName, callback1, context) {
1227 | 	return function(e) {
1228 | 		callback1.call(context || this, attrName in e.currentTarget ? e.currentTarget[attrName] : e.currentTarget.getAttribute(attrName))
1229 | 	}
1230 | }
1231 | var _28 = coreRenderer(window)
1232 | m.render = _28.render
1233 | m.redraw = redrawService.redraw
1234 | m.request = requestService.request
1235 | m.jsonp = requestService.jsonp
1236 | m.parseQueryString = parseQueryString
1237 | m.buildQueryString = buildQueryString
1238 | m.version = "1.1.3"
1239 | m.vnode = Vnode
1240 | if (typeof module !== "undefined") module["exports"] = m
1241 | else window.m = m
1242 | }());


--------------------------------------------------------------------------------
/examples/pickle.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jsguy/mithril.animate/7810d79e9c24cb89d6052dde31c68ccafd35f970/examples/pickle.jpg


--------------------------------------------------------------------------------
/examples/timed.htm:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 | 	<title></title>
 4 | 	<script src="mithril.js"></script>
 5 | 	<script src="../node_modules/mithril.bindings/dist/mithril.bindings.js"></script>
 6 | 	<script src="../src/mithril.animate.js"></script>
 7 | 	<script src="../src/mithril.animate.bindings.js"></script>
 8 | 	<link rel="stylesheet" type="text/css" href="examplestyle.css">
 9 | </head>
10 | <body>
11 | <h1>Mithril.animate - timed animations</h1>
12 | <p>
13 | 	 Basic example that toggles an animation every 2 seconds
14 | </p>
15 | 
16 | <div id="content"></div>
17 | 
18 | <script>
19 |   var timedExample = {
20 |   	model: function() {
21 |   		this.down = m.p(0);
22 |   	  this.opacity = m.p(1);
23 |   	},
24 |   	controller: function() {
25 |   		var me = this;
26 |   		me.model = new timedExample.model();
27 | 
28 |       setInterval(function(){
29 |         var isDown = me.model.opacity() === "0";
30 |         me.model.down(isDown? "0": "6em");
31 |         me.model.opacity(isDown? "1": "0");
32 |       }, 2000);
33 |   	},
34 |   	view: function(c) {
35 |   		var o = c.model;
36 |   		return [
37 |   			m.e("div.exampleBox", [
38 |   				m.e("h3", "Opacity down"),
39 |           //  This works because we're using m.e and custom animation bindings
40 |   				m.e("div.eBox", { translatey: o.down, opacity: o.opacity })
41 |   			])
42 |   		];
43 |   	}
44 |   };
45 | 
46 | 	//initialize
47 | 	m.module(document.getElementById('content'), timedExample);
48 | </script>
49 | 
50 | </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "mithril.animate",
 3 | 	"version": "0.1.1",
 4 | 	"description": "Mithril animate - bind CSS3 animations to properties on your Mithril elements.",
 5 | 	"repository": {
 6 | 		"type": "git",
 7 | 		"url": "https://github.com/jsguy/mithril.animate.git"
 8 | 	},
 9 | 	"dependencies": {
10 | 		"mithril.bindings": "git://github.com/jsguy/mithril.bindings#master"
11 | 	},
12 | 	"devDependencies": {
13 | 		"grunt":  "0.4.x",
14 | 		"grunt-cli":  "0.1.9",
15 | 		"grunt-contrib-uglify":  "0.2.x",
16 | 		"grunt-contrib-jshint":  "0.6.x",
17 | 		"grunt-contrib-qunit":  "0.2.x",
18 | 		"grunt-contrib-watch":  "0.4.x",
19 | 		"grunt-contrib-concat":  "0.3.x"
20 | 	},
21 | 	"license": "MIT"
22 | }
23 | 


--------------------------------------------------------------------------------
/src/_mithril.animate.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	mithril.animate - Copyright 2014 jsguy
  3 | 	MIT Licensed.
  4 | */
  5 | (function (m) {
  6 | 	//	Known prefiex
  7 | 	var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
  8 | 	transitionProps = ['TransitionProperty', 'TransitionTimingFunction', 'TransitionDelay', 'TransitionDuration', 'TransitionEnd'],
  9 | 	transformProps = ['rotate', 'rotatex', 'rotatey', 'scale', 'skew', 'translate', 'translatex', 'translatey', 'matrix'],
 10 | 
 11 | 	defaultDuration = 400,
 12 | 	
 13 | 	//	Capitalise		
 14 | 	cap = function(str){
 15 | 		return str.charAt(0).toUpperCase() + str.substr(1);
 16 | 	},
 17 | 
 18 | 	//	For checking what vendor prefixes are native
 19 | 	div = document.createElement('div'),
 20 | 
 21 | 	//	vendor prefix, ie: transitionDuration becomes MozTransitionDuration
 22 | 	vp = function (prop) {
 23 | 		var pf;
 24 | 		//	Handle unprefixed
 25 | 		if (prop in div.style) {
 26 | 			return prop;
 27 | 		}
 28 | 
 29 | 		//	Handle keyframes
 30 | 		if(prop == "@keyframes") {
 31 | 			for (var i = 0; i < prefixes.length; i += 1) {
 32 | 				pf = prefixes[i] + "Transition";
 33 | 				if (pf in div.style) {
 34 | 					return "@-" + prefixes[i].toLowerCase() + "-keyframes";
 35 | 				}
 36 | 			}
 37 | 			return prop;
 38 | 		}
 39 | 
 40 | 		for (var i = 0; i < prefixes.length; i += 1) {
 41 | 			pf = prefixes[i] + cap(prop);
 42 | 			if (pf in div.style) {
 43 | 				return pf;
 44 | 			}
 45 | 		}
 46 | 		//	Can't find it - return original property.
 47 | 		return prop;
 48 | 	},
 49 | 
 50 | 	//	See if we can use native transitions
 51 | 	supportsTransitions = function() {
 52 | 		var b = document.body || document.documentElement,
 53 | 			s = b.style,
 54 | 			p = 'transition';
 55 | 
 56 | 		if (typeof s[p] == 'string') { return true; }
 57 | 
 58 | 		// Tests for vendor specific prop
 59 | 		p = p.charAt(0).toUpperCase() + p.substr(1);
 60 | 
 61 | 		for (var i=0; i<prefixes.length; i++) {
 62 | 			if (typeof s[prefixes[i] + p] == 'string') { return true; }
 63 | 		}
 64 | 
 65 | 		return false;
 66 | 	},
 67 | 
 68 | 	//	Converts CSS transition times to MS
 69 | 	getTimeinMS = function(str) {
 70 | 		var result = 0, tmp;
 71 | 		str += "";
 72 | 		str = str.toLowerCase();
 73 | 		if(str.indexOf("ms") !== -1) {
 74 | 			tmp = str.split("ms");
 75 | 			result = Number(tmp[0]);
 76 | 		} else if(str.indexOf("s") !== -1) {
 77 | 			//	s
 78 | 			tmp = str.split("s");
 79 | 			result = Number(tmp[0]) * 1000;
 80 | 		} else {
 81 | 			result = Number(str);
 82 | 		}
 83 | 
 84 | 		return Math.round(result);
 85 | 	},
 86 | 
 87 | 	//	Set style properties
 88 | 	setStyleProps = function(obj, props){
 89 | 		for(var i in props) {if(props.hasOwnProperty(i)) {
 90 | 			obj.style[vp(i)] = props[i];
 91 | 		}}
 92 | 	},
 93 | 
 94 | 	//	Set props for transitions and transforms with basic defaults
 95 | 	defaultProps = function(args){
 96 | 		// var props = {
 97 | 		// 		//	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) initial, inherit
 98 | 		// 		TransitionTimingFunction: "ease",
 99 | 		// 		TransitionDuration: defaultDuration + "ms",
100 | 		// 		TransitionProperty: "all"
101 | 		// 	},
102 | 		var props = {},
103 | 			p, i, tmp, tmp2, found;
104 | 
105 | 		//	Set any allowed properties 
106 | 		for(p in args) { if(args.hasOwnProperty(p)) {
107 | 			tmp = 'Transition' + cap(p);
108 | 			tmp2 = p.toLowerCase();
109 | 			found = false;
110 | 
111 | 			//	Look at transition props
112 | 			for(i = 0; i < transitionProps.length; i += 1) {
113 | 				if(tmp == transitionProps[i]) {
114 | 					props[transitionProps[i]] = args[p];
115 | 					found = true;
116 | 					break;
117 | 				}
118 | 			}
119 | 
120 | 			//	Look at transform props
121 | 			for(i = 0; i < transformProps.length; i += 1) {
122 | 				if(tmp2 == transformProps[i]) {
123 | 					props[vp("transform")] = props[vp("transform")] || "";
124 | 					props[vp("transform")] += " " +p + "(" + args[p] + ")";
125 | 					found = true;
126 | 					break;
127 | 				}
128 | 			}
129 | 
130 | 			if(!found) {
131 | 				props[p] = args[p];
132 | 			}
133 | 		}}
134 | 		return props;
135 | 	},
136 | 
137 | 	//	If an object is empty
138 | 	isEmpty = function(obj) {
139 | 		for(var i in obj) {if(obj.hasOwnProperty(i)) {
140 | 			return false;
141 | 		}}
142 | 		return true; 
143 | 	},
144 | 
145 | 	//	See if we can use transitions
146 | 	canTrans = supportsTransitions();
147 | 
148 | 	//	Animate an element
149 | 	m.animate = function(el, args, cb){
150 | 		el.style = el.style || {};
151 | 		var props = defaultProps(args), time;
152 | 
153 | 		if(!canTrans || cb) {
154 | 			time = getTimeinMS(props.TransitionDuration) || 0;
155 | 		}
156 | 
157 | 		//	See if we support transitions
158 | 		if(canTrans) {
159 | 			setStyleProps(el, props);
160 | 		} else {
161 | 			//	Try and fall back to jQuery
162 | 			if(typeof $ !== 'undefined' && $.fn && $.fn.animate) {
163 | 				$(el).animate(props, time);
164 | 			}
165 | 		}
166 | 
167 | 		if(cb){
168 | 			setTimeout(cb, time+1);
169 | 		}
170 | 	};
171 | 
172 | 	//	Animate using faked "keyframes"
173 | 	m.animateKeyframe = function(prop, self, keyFrames, duration, animateOnload, cb) {
174 | 		duration = (typeof duration == 'undefined')? defaultDuration: duration;
175 | 		animateOnload = animateOnload || false;
176 | 		var oldConfig = self.config;
177 | 
178 | 		//	Use the prop to trigger the animation
179 | 		if(prop() || animateOnload) {
180 | 			//	Maybe get a refernce to the el and use it?
181 | 			self.config = function(el, isInit){
182 | 				var elapsedTime = 0, idx, first;
183 | 
184 | 				//	On first load only - ie: when something changed.
185 | 				if(!isInit) {
186 | 					//	Run old config method, if one were supplied
187 | 					if(oldConfig) {
188 | 						setTimeout(function(){
189 | 							oldConfig.apply(self, arguments);
190 | 						}, duration);
191 | 					}
192 | 
193 | 					//	Run cb config method, if one were supplied
194 | 					if(cb) {
195 | 						setTimeout(function(){
196 | 							cb();
197 | 						}, duration + 1);
198 | 					}
199 | 
200 | 					for(idx in keyFrames) {
201 | 						first = keyFrames[idx];
202 | 						break;
203 | 					}
204 | 
205 | 					//	Need to animate to first step immediately on first load
206 | 					m.animate(el, first);
207 | 
208 | 					//	Get our item
209 | 					for(idx in keyFrames) {
210 | 						var time = duration * (idx.replace('%', '') / 100) - elapsedTime,
211 | 							val = keyFrames[idx];
212 | 
213 | 						val.duration = time + "ms";
214 | 						setTimeout(function(el, val){
215 | 							return function(){
216 | 								m.animate(el, val);
217 | 							}
218 | 						}(el, val), elapsedTime);
219 | 						elapsedTime += time;
220 | 					}
221 | 				}
222 | 			};
223 | 		}
224 | 	};
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 	//	Just run the keyframes
243 | 	//	TODO: Remove ALL previous properties for each frame
244 | 	//		- it is inconsistent for chrome/FF
245 | 	m.doAnimateKeyframe = function(el, keyFrames, duration, cb) {
246 | 		duration = (typeof duration == 'undefined')? defaultDuration: duration;
247 | 		var elapsedTime = 0, idx;
248 | 
249 | 		//	Run old config method, if one were supplied
250 | 		//	Run cb config method, if one were supplied
251 | 		if(cb) {
252 | 			setTimeout(function(){
253 | 				cb();
254 | 			}, duration + 1);
255 | 		}
256 | 
257 | 		//	Need to animate to first step immediately?
258 | 		//m.animate(el, first);
259 | 
260 | 		//	Get our item
261 | 		for(idx in keyFrames) {
262 | 			var time = duration * (idx.replace('%', '') / 100) - elapsedTime,
263 | 				val = keyFrames[idx];
264 | 
265 | 			val.duration = time + "ms";
266 | 			setTimeout(function(el, val){
267 | 				return function(){
268 | 					m.animate(el, val);
269 | 				}
270 | 			}(el, val), elapsedTime);
271 | 			elapsedTime += time;
272 | 		}
273 | 	};
274 | 
275 | 
276 | 
277 | 
278 | 
279 | 
280 | 
281 | 
282 | 
283 | 
284 | 
285 | 
286 | 
287 | 	//	Fix animatiuon properties
288 | 	//	Normalises transforms, eg: rotate, scale, etc...
289 | 	var defAniProps = function(args){
290 | 		var props = {},
291 | 			tmpProp,
292 | 			p, i, found,
293 | 			normal = function(props, p, value){
294 | 				var tmp = p.toLowerCase(),
295 | 					found = false, i;
296 | 
297 | 				//	Look at transform props
298 | 				for(i = 0; i < transformProps.length; i += 1) {
299 | 					if(tmp == transformProps[i]) {
300 | 						props[vp("transform")] = props[vp("transform")] || "";
301 | 						props[vp("transform")] += " " +p + "(" + value + ")";
302 | 						found = true;
303 | 						break;
304 | 					}
305 | 				}
306 | 
307 | 				if(!found) {
308 | 					props[p] = value;
309 | 				} else {
310 | 					//	Remove transform property
311 | 					delete props[p];
312 | 				}
313 | 			};
314 | 
315 | 		//	Set any allowed properties 
316 | 		for(p in args) { if(args.hasOwnProperty(p)) {
317 | 			//	If we have a percentage, we have a key frame
318 | 			if(p.indexOf("%") !== -1) {
319 | 				for(i in args[p]) { if(args[p].hasOwnProperty(i)) {
320 | 					normal(args[p], i, args[p][i]);
321 | 				}}
322 | 				props[p] = args[p];
323 | 			} else {
324 | 				normal(props, p, args[p]);
325 | 			}
326 | 		}}
327 | 
328 | 		console.log(props);
329 | 		return props;
330 | 	};
331 | 
332 | 	//	Creates a hashed name for the animation
333 | 	var aniName = function(props){
334 | 		return "a" + JSON.stringify(props).split(/[{},%":]/).join("");
335 | 	};
336 | 
337 | 	//	IE10+ http://caniuse.com/#search=css-animations
338 | 	m.anik = function(el, props, duration, cb) {
339 | 		var aniId = aniName(props),
340 | 			kf,
341 | 			hasAni = document.getElementById(aniId);
342 | 
343 | 		//	Only inset once
344 | 		if(!hasAni) {
345 | 			defAniProps(props);
346 | 
347 | 			//  Dodgy as - can generate seperately in proper thingy...
348 | 			kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
349 | 				.split("\"").join("")
350 | 				.split("},").join("}\n")
351 | 				.split(",").join(";")
352 | 				.split("%:").join("% ");
353 | 
354 | 			var s = document.createElement('style');
355 | 			s.setAttribute('id', aniId);
356 | 			s.id = aniId;
357 | 			s.textContent = kf;
358 | 			//  Might not have head?
359 | 			document.head.appendChild(s);
360 | 		}
361 | 
362 | 		el.style = el.style || {};
363 | 		el.style[vp("animationName")] = "";
364 | 		el.style[vp("animationDuration")] = "";
365 | 
366 | 		//	Must use two request animation frame calls, for FF to work properly.
367 | 		requestAnimationFrame(function(){
368 | 			requestAnimationFrame(function(){
369 | 				el.style[vp("animationName")] = aniId;
370 | 				el.style[vp("animationDuration")] = duration + 'ms';
371 | 			});
372 | 		});
373 | 		// el.style.animationDirection = 'alternate';
374 | 		// el.style.webkitAnimationDirection = 'alternate';
375 | 		// el.style.animationIterationCount = 'infinite';
376 | 		// el.style.webkitAnimationIterationCount = 'infinite';
377 | 	};
378 | 
379 | 
380 | 	//	Create an animation for later use
381 | 	var animations = {};
382 | 	m.addAnimation = function(name, props, duration){
383 | 		var aniId = aniName(props), kf,
384 | 			hasAni = document.getElementById(aniId);
385 | 
386 | 		//	Only inset once
387 | 		if(!hasAni) {
388 | 			defAniProps(props);
389 | 			//  Create keyframes
390 | 			kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
391 | 				.split("\"").join("")
392 | 				.split("},").join("}\n")
393 | 				.split(",").join(";")
394 | 				.split("%:").join("% ");
395 | 
396 | 			var s = document.createElement('style');
397 | 			s.setAttribute('id', aniId);
398 | 			s.id = aniId;
399 | 			s.textContent = kf;
400 | 			//  Might not have head?
401 | 			document.head.appendChild(s);
402 | 		}
403 | 		animations[name] = { name: aniId, duration: duration };
404 | 
405 | 		//	Add bindings for it
406 | 		m.addBinding(name, function(prop){
407 | 			console.log('bind', name, this);
408 | 			m.bindAnimation(name, this, duration, prop);
409 | 		}, true);
410 | 
411 | 
412 | 	};
413 | 
414 | 
415 | 
416 | 	m.doAnimate = function(name, el, duration, cb){
417 | 		duration = duration || animations[name].duration || 500;
418 | 		aniName = animations[name].name;
419 | 		if(!aniName) {
420 | 			throw "Animation " + name + " not found.";
421 | 		}
422 | 
423 | 		el.style = el.style || {};
424 | 		el.style[vp("animationName")] = "";
425 | 		el.style[vp("animationDuration")] = "";
426 | 
427 | 		//	Must use two request animation frame calls, for FF to work properly.
428 | 		requestAnimationFrame(function(){
429 | 			requestAnimationFrame(function(){
430 | 				el.style[vp("animationName")] = aniName;
431 | 				el.style[vp("animationDuration")] = duration + 'ms';
432 | 			});
433 | 		});
434 | 		// el.style.animationDirection = 'alternate';
435 | 		// el.style.animationIterationCount = 'infinite';
436 | 
437 | 		//TODO: cb
438 | 	};
439 | 
440 | 	m.triggerAnimation = function(name, duration, cb){
441 | 		return function(){
442 | 			m.doAnimate(name, this, duration, cb);
443 | 		}
444 | 	};
445 | 
446 | 
447 | 	m.bindAnimation = function(name, el, duration, prop) {
448 | 		var oldConfig = el.config;
449 | 		if(prop()) {
450 | 			el.config = function(el, isInit){
451 | 				//	Only when it has already been initialised
452 | 				//	TODO: Same probelm as before - animation always fires...
453 | 				if(!isInit) {
454 | 					m.doAnimate(name, el, duration);
455 | 				}
456 | 				if(oldConfig) {
457 | 					console.log('oldConfig', oldConfig);
458 | 				}
459 | 			};
460 | 		}
461 | 	};
462 | 
463 | 
464 | 
465 | }(window.m || {}));


--------------------------------------------------------------------------------
/src/mithril.animate.bindings.js:
--------------------------------------------------------------------------------
 1 | /* Default transform2d bindings */
 2 | (function (m) {
 3 | 	var basicBindings = ['scale', 'scalex', 'scaley', 'translate', 'translatex', 'translatey', 
 4 | 		'matrix', 'backgroundColor', 'backgroundPosition', 'borderBottomColor', 
 5 | 		'borderBottomWidth', 'borderLeftColor', 'borderLeftWidth', 'borderRightColor', 
 6 | 		'borderRightWidth', 'borderSpacing', 'borderTopColor', 'borderTopWidth', 'bottom', 
 7 | 		'clip', 'color', 'fontSize', 'fontWeight', 'height', 'left', 'letterSpacing', 
 8 | 		'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 
 9 | 		'maxWidth', 'minHeight', 'minWidth', 'opacity', 'outlineColor', 'outlineWidth', 
10 | 		'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'right', 'textIndent', 
11 | 		'textShadow', 'top', 'verticalAlign', 'visibility', 'width', 'wordSpacing', 'zIndex'],
12 | 		degBindings = ['rotate', 'rotatex', 'rotatey', 'skewx', 'skewy'], i;
13 | 
14 | 	//	Basic bindings where we pass the prop straight through
15 | 	for(i = 0; i < basicBindings.length; i += 1) {
16 | 		(function(name){
17 | 			m.addAnimation(name, function(prop){
18 | 				var options = {};
19 | 				options[name] = prop();
20 | 				return options;
21 | 			});
22 | 		}(basicBindings[i]));
23 | 	}
24 | 	
25 | 	//	Degree based bindings - conditionally postfix with "deg"
26 | 	for(i = 0; i < degBindings.length; i += 1) {
27 | 		(function(name){
28 | 			m.addAnimation(name, function(prop){
29 | 				var options = {}, value = prop();
30 | 				options[name] = isNaN(value)? value: value + "deg";
31 | 				return options;
32 | 			});
33 | 		}(degBindings[i]));
34 | 	}
35 | 
36 | 	//	Attributes that require more than one prop
37 | 	m.addAnimation("skew", function(prop){
38 | 		var value = prop();
39 | 		return {
40 | 			skew: [
41 | 				value[0] + (isNaN(value[0])? "":"deg"), 
42 | 				value[1] + (isNaN(value[1])? "":"deg")
43 | 			]
44 | 		};
45 | 	});
46 | }(window.m));


--------------------------------------------------------------------------------
/src/mithril.animate.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	mithril.animate - Copyright 2014 jsguy
  3 | 	MIT Licensed.
  4 | */
  5 | (function (m) {
  6 | 	//	Known prefiex
  7 | 	var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
  8 | 	transitionProps = ['TransitionProperty', 'TransitionTimingFunction', 'TransitionDelay', 'TransitionDuration', 'TransitionEnd'],
  9 | 	transformProps = ['rotate', 'rotatex', 'rotatey', 'scale', 'skew', 'translate', 'translatex', 'translatey', 'matrix'],
 10 | 
 11 | 	defaultDuration = 400,
 12 | 
 13 | 	err = function(msg){
 14 | 		window.console && console.error && console.error(msg);
 15 | 	},
 16 | 	
 17 | 	//	Capitalise		
 18 | 	cap = function(str){
 19 | 		return str.charAt(0).toUpperCase() + str.substr(1);
 20 | 	},
 21 | 
 22 | 	//	For checking what vendor prefixes are native
 23 | 	div = document.createElement('div'),
 24 | 
 25 | 	//	vendor prefix, ie: transitionDuration becomes MozTransitionDuration
 26 | 	vp = function (prop, dashed) {
 27 | 		var pf;
 28 | 		//	Handle unprefixed
 29 | 		if (prop in div.style) {
 30 | 			return prop;
 31 | 		}
 32 | 
 33 | 		//	Handle keyframes
 34 | 		if(prop == "@keyframes") {
 35 | 			for (var i = 0; i < prefixes.length; i += 1) {
 36 | 				//	Testing using transition
 37 | 				pf = prefixes[i] + "Transition";
 38 | 				if (pf in div.style) {
 39 | 					return "@-" + prefixes[i].toLowerCase() + "-keyframes";
 40 | 				}
 41 | 			}
 42 | 			return prop;
 43 | 		}
 44 | 
 45 | 		for (var i = 0; i < prefixes.length; i += 1) {
 46 | 			if(dashed) {
 47 | 				pf = "-" +(prefixes[i] + "-" + prop).toLowerCase();
 48 | 			} else {
 49 | 				pf = prefixes[i] + cap(prop);
 50 | 			}
 51 | 			if (pf in div.style) {
 52 | 				return pf;
 53 | 			}
 54 | 		}
 55 | 		//	Can't find it - return original property.
 56 | 		return prop;
 57 | 	},
 58 | 
 59 | 	//	See if we can use native transitions
 60 | 	supportsTransitions = function() {
 61 | 		var b = document.body || document.documentElement,
 62 | 			s = b.style,
 63 | 			p = 'transition';
 64 | 
 65 | 		if (typeof s[p] == 'string') { return true; }
 66 | 
 67 | 		// Tests for vendor specific prop
 68 | 		p = p.charAt(0).toUpperCase() + p.substr(1);
 69 | 
 70 | 		for (var i=0; i<prefixes.length; i++) {
 71 | 			if (typeof s[prefixes[i] + p] == 'string') { return true; }
 72 | 		}
 73 | 
 74 | 		return false;
 75 | 	},
 76 | 
 77 | 	//	Converts CSS transition times to MS
 78 | 	getTimeinMS = function(str) {
 79 | 		var result = 0, tmp;
 80 | 		str += "";
 81 | 		str = str.toLowerCase();
 82 | 		if(str.indexOf("ms") !== -1) {
 83 | 			tmp = str.split("ms");
 84 | 			result = Number(tmp[0]);
 85 | 		} else if(str.indexOf("s") !== -1) {
 86 | 			//	s
 87 | 			tmp = str.split("s");
 88 | 			result = Number(tmp[0]) * 1000;
 89 | 		} else {
 90 | 			result = Number(str);
 91 | 		}
 92 | 
 93 | 		return Math.round(result);
 94 | 	},
 95 | 
 96 | 	//	Set style properties
 97 | 	setStyleProps = function(obj, props){
 98 | 		for(var i in props) {if(props.hasOwnProperty(i)) {
 99 | 			obj.style[vp(i)] = props[i];
100 | 		}}
101 | 	},
102 | 
103 | 	//	Set props for transitions and transforms with basic defaults
104 | 	setTransitionProps = function(args){
105 | 		var props = {
106 | 				//	ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n) initial, inherit
107 | 				TransitionTimingFunction: "ease",
108 | 				TransitionDuration: defaultDuration + "ms",
109 | 				TransitionProperty: "all"
110 | 			},
111 | 			p, i, tmp, tmp2, found;
112 | 
113 | 		//	Set any allowed properties 
114 | 		for(p in args) { if(args.hasOwnProperty(p)) {
115 | 			tmp = 'Transition' + cap(p);
116 | 			tmp2 = p.toLowerCase();
117 | 			found = false;
118 | 
119 | 			//	Look at transition props
120 | 			for(i = 0; i < transitionProps.length; i += 1) {
121 | 				if(tmp == transitionProps[i]) {
122 | 					props[transitionProps[i]] = args[p];
123 | 					found = true;
124 | 					break;
125 | 				}
126 | 			}
127 | 
128 | 			//	Look at transform props
129 | 			for(i = 0; i < transformProps.length; i += 1) {
130 | 				if(tmp2 == transformProps[i]) {
131 | 					props[vp("transform")] = props[vp("transform")] || "";
132 | 					props[vp("transform")] += " " +p + "(" + args[p] + ")";
133 | 					found = true;
134 | 					break;
135 | 				}
136 | 			}
137 | 
138 | 			if(!found) {
139 | 				props[p] = args[p];
140 | 			}
141 | 		}}
142 | 		return props;
143 | 	},
144 | 
145 | 	//	Fix animatiuon properties
146 | 	//	Normalises transforms, eg: rotate, scale, etc...
147 | 	normaliseTransformProps = function(args){
148 | 		var props = {},
149 | 			tmpProp,
150 | 			p, i, found,
151 | 			normal = function(props, p, value){
152 | 				var tmp = p.toLowerCase(),
153 | 					found = false, i;
154 | 
155 | 				//	Look at transform props
156 | 				for(i = 0; i < transformProps.length; i += 1) {
157 | 					if(tmp == transformProps[i]) {
158 | 						props[vp("transform", true)] = props[vp("transform", true)] || "";
159 | 						props[vp("transform", true)] += " " +p + "(" + value + ")";
160 | 						found = true;
161 | 						break;
162 | 					}
163 | 				}
164 | 
165 | 				if(!found) {
166 | 					props[p] = value;
167 | 				} else {
168 | 					//	Remove transform property
169 | 					delete props[p];
170 | 				}
171 | 			};
172 | 
173 | 		//	Set any allowed properties 
174 | 		for(p in args) { if(args.hasOwnProperty(p)) {
175 | 			//	If we have a percentage, we have a key frame
176 | 			if(p.indexOf("%") !== -1) {
177 | 				for(i in args[p]) { if(args[p].hasOwnProperty(i)) {
178 | 					normal(args[p], i, args[p][i]);
179 | 				}}
180 | 				props[p] = args[p];
181 | 			} else {
182 | 				normal(props, p, args[p]);
183 | 			}
184 | 		}}
185 | 
186 | 		return props;
187 | 	},
188 | 
189 | 
190 | 	//	If an object is empty
191 | 	isEmpty = function(obj) {
192 | 		for(var i in obj) {if(obj.hasOwnProperty(i)) {
193 | 			return false;
194 | 		}}
195 | 		return true; 
196 | 	},
197 | 	//	Creates a hashed name for the animation
198 | 	//	Use to create a unique keyframe animation style rule
199 | 	aniName = function(props){
200 | 		return "ani" + JSON.stringify(props).split(/[{},%":]/).join("");
201 | 	},
202 | 	animations = {},
203 | 
204 | 	//	See if we can use transitions
205 | 	canTrans = supportsTransitions();
206 | 
207 | 	//	IE10+ http://caniuse.com/#search=css-animations
208 | 	m.animateProperties = function(el, args, cb){
209 | 		el.style = el.style || {};
210 | 		var props = setTransitionProps(args), time;
211 | 
212 | 		if(typeof props.TransitionDuration !== 'undefined') {
213 | 			props.TransitionDuration = getTimeinMS(props.TransitionDuration) + "ms";
214 | 		} else {
215 | 			props.TransitionDuration = defaultDuration + "ms";
216 | 		}
217 | 
218 | 		time = getTimeinMS(props.TransitionDuration) || 0;
219 | 
220 | 		//	See if we support transitions
221 | 		if(canTrans) {
222 | 			setStyleProps(el, props);
223 | 		} else {
224 | 			//	Try and fall back to jQuery
225 | 			//	TODO: Switch to use velocity, it is better suited.
226 | 			if(typeof $ !== 'undefined' && $.fn && $.fn.animate) {
227 | 				$(el).animate(props, time);
228 | 			}
229 | 		}
230 | 
231 | 		if(cb){
232 | 			setTimeout(cb, time+1);
233 | 		}
234 | 	};
235 | 
236 | 	//	Trigger a transition animation
237 | 	m.trigger = function(name, value, options, cb){
238 | 		options = options || {};
239 | 		var ani = animations[name];
240 | 		if(!ani) {
241 | 			return err("Animation " + name + " not found.");
242 | 		}
243 | 
244 | 		return function(e){
245 | 			var args = ani.fn(function(){
246 | 				return typeof value == 'function'? value(): value;
247 | 			});
248 | 
249 | 			//	Allow override via options
250 | 			for(i in options) if(options.hasOwnProperty(i)) {{
251 | 				args[i] = options[i];
252 | 			}}
253 | 
254 | 			m.animateProperties(e.target, args, cb);
255 | 		};
256 | 	};
257 | 
258 | 	//	Adds an animation for bindings and so on.
259 | 	m.addAnimation = function(name, fn, options){
260 | 		options = options || {};
261 | 
262 | 		if(animations[name]) {
263 | 			return err("Animation " + name + " already defined.");
264 | 		} else if(typeof fn !== "function") {
265 | 			return err("Animation " + name + " is being added as a transition based animation, and must use a function.");
266 | 		}
267 | 
268 | 		options.duration = options.duration || defaultDuration;
269 | 
270 | 		animations[name] = {
271 | 			options: options,
272 | 			fn: fn
273 | 		};
274 | 
275 | 		//	Add a default binding for the name
276 | 		m.addBinding(name, function(prop){
277 | 			m.bindAnimation(name, this, fn, prop);
278 | 		}, true);
279 | 	};
280 | 
281 | 	m.addKFAnimation = function(name, arg, options){
282 | 		options = options || {};
283 | 
284 | 		if(animations[name]) {
285 | 			return err("Animation " + name + " already defined.");
286 | 		}
287 | 
288 | 		var init = function(props) {
289 | 			var aniId = aniName(props),
290 | 				hasAni = document.getElementById(aniId),
291 | 				kf;
292 | 
293 | 			//	Only insert once
294 | 			if(!hasAni) {
295 | 				animations[name].id = aniId;
296 | 
297 | 				props = normaliseTransformProps(props);
298 | 				//  Create keyframes
299 | 				kf = vp("@keyframes") + " " + aniId + " " + JSON.stringify(props)
300 | 					.split("\"").join("")
301 | 					.split("},").join("}\n")
302 | 					.split(",").join(";")
303 | 					.split("%:").join("% ");
304 | 
305 | 				var s = document.createElement('style');
306 | 				s.setAttribute('id', aniId);
307 | 				s.id = aniId;
308 | 				s.textContent = kf;
309 | 				//  Might not have head?
310 | 				document.head.appendChild(s);
311 | 			}
312 | 
313 | 			animations[name].isInitialised = true;
314 | 			animations[name].options.animateImmediately = true;
315 | 		};
316 | 
317 | 		options.duration = options.duration || defaultDuration;
318 | 		options.animateImmediately = options.animateImmediately || false;
319 | 
320 | 		animations[name] = {
321 | 			init: init,
322 | 			options: options,
323 | 			arg: arg
324 | 		};
325 | 
326 | 		//	Add a default binding for the name
327 | 		m.addBinding(name, function(prop){
328 | 			m.bindAnimation(name, this, arg, prop);
329 | 		}, true);
330 | 	};
331 | 
332 | 
333 | 	/*	Options - defaults - what it does:
334 | 
335 | 		Delay - unedefined - delays the animation
336 | 		Direction - 
337 | 		Duration
338 | 		FillMode - "forward" makes sure it sticks: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
339 | 		IterationCount, 
340 | 		Name, PlayState, TimingFunction
341 | 	
342 | 	*/
343 | 
344 | 	//	Useful to know, 'to' and 'from': http://lea.verou.me/2012/12/animations-with-one-keyframe/
345 | 	m.animateKF = function(name, el, options, cb){
346 | 		options = options || {};
347 | 		var ani = animations[name], i, props = {};
348 | 		if(!ani) {
349 | 			return err("Animation " + name + " not found.");
350 | 		}
351 | 
352 | 		//	Allow override via options
353 | 		ani.options = ani.options || {};
354 | 		for(i in options) if(options.hasOwnProperty(i)) {{
355 | 			ani.options[i] = options[i];
356 | 		}}
357 | 
358 | 		if(!ani.isInitialised && ani.init) {
359 | 			ani.init(ani.arg);
360 | 		}
361 | 
362 | 		//	Allow animate overrides
363 | 		for(i in ani.options) if(ani.options.hasOwnProperty(i)) {{
364 | 			props[vp("animation" + cap(i))] = ani.options[i];
365 | 		}}
366 | 
367 | 		//	Set required items and default values for props
368 | 		props[vp("animationName")] = ani.id;
369 | 		props[vp("animationDuration")] = (props[vp("animationDuration")]? props[vp("animationDuration")]: defaultDuration) + "ms";
370 | 		props[vp("animationDelay")] = props[vp("animationDelay")]? props[vp("animationDuration")] + "ms": undefined;
371 | 		props[vp("animationFillMode")] = props[vp("animationFillMode")] || "forwards";
372 | 
373 | 		el.style = el.style || {};
374 | 
375 | 		//	Use for callback
376 | 		var endAni = function(){
377 | 			//	Remove listener
378 | 			el.removeEventListener("animationend", endAni, false);
379 | 			if(cb){
380 | 				cb(el);
381 | 			}
382 | 		};
383 | 
384 | 		//	Remove animation if any
385 | 		el.style[vp("animation")] = "";
386 | 		el.style[vp("animationName")] = "";
387 | 
388 | 		//	Must use two request animation frame calls, for FF to
389 | 		//	work properly, does not seem to have any adverse effects
390 | 		requestAnimationFrame(function(){
391 | 			requestAnimationFrame(function(){
392 | 				//	Apply props
393 | 				for(i in props) if(props.hasOwnProperty(i)) {{
394 | 					el.style[i] = props[i];
395 | 				}}
396 | 
397 | 				el.addEventListener("animationend", endAni, false);
398 | 			});
399 | 		});
400 | 	};
401 | 
402 | 	m.triggerKF = function(name, options){
403 | 		return function(){
404 | 			m.animateKF(name, this, options);
405 | 		};
406 | 	};
407 | 
408 | 	m.bindAnimation = function(name, el, options, prop) {
409 | 		var ani = animations[name];
410 | 
411 | 		if(!ani && !ani.name) {
412 | 			return err("Animation " + name + " not found.");
413 | 		}
414 | 
415 | 		if(ani.fn) {
416 | 			m.animateProperties(el, ani.fn(prop));
417 | 		} else {
418 | 			var oldConfig = el.config;
419 | 			el.config = function(el, isInit){
420 | 				if(!ani.isInitialised && ani.init) {
421 | 					ani.init(options);
422 | 				}
423 | 				if(prop() && isInit) {
424 | 					m.animateKF(name, el, options);
425 | 				}
426 | 				if(oldConfig) {
427 | 					oldConfig.apply(el, arguments);
428 | 				}
429 | 			};
430 | 		}
431 | 	};
432 | 
433 | }(window.m || {}));


--------------------------------------------------------------------------------