chicago/src/events/animation.js

A front-end JavaScript library for user-interface developers.

// @name: Chicago.events.animation
// @description: Triggers an event and executes callback functions at certain points during the CSS animation (using the `animation` property) of a DOM object
// @since: 1.0.0-beta
// @todo: Add `properties` as a default option to list of values
// @todo: Value would be array of animation-properties (as strings) to listen for.

animation : {
	defaults : {
		start : function( name ) {},
		iteration : function( name, iterationCount ) {},
		complete : function( name, elapsedTime ) {},
	},
	setup: function( data, namespaces, eventHandle ) {

		var uid = _c.utils.uid( 'animation' ),
			ele = _c.$(this),
			keys = {
				uid : 'chicago.event.animation.uid',
				base : 'chicago.event.' + uid,
				iterations : 'chicago.event.' + uid + '.iterations',
				event : 'chicago.event.' + uid + '.event',
			},
			intervalCount = 15;

		data = _c.$.extend( {}, _c.$.event.special.animation.defaults, data );

		// Set UID
		ele.data( keys.uid, uid );

		if( ! ele.data( keys.event ) ) {

			function iterationHandler(e) {
				var name = e.originalEvent.animationName,
					count = ele.data( keys.iterations );
				count++;
				ele.data( keys.iterations, count );
				data.iteration.call( ele, name, count );
			}

			ele.data(keys.event, {

				// Bind start listener
				start : ele.on(_c.support.animation.start, function(e) {
					data.start.call( ele, e.originalEvent.animationName );
					ele.data( keys.iterations, 0 );
				}),

				// Bind iteration listener
				iteration : ele.on(_c.support.animation.iteration, iterationHandler),

				// Bind end listener
				end : ele.on(_c.support.animation.end, function(e) {
					iterationHandler(e);

					var name = e.originalEvent.animationName;
					var time = _c.utils.stringToMilliseconds( e.originalEvent.elapsedTime );
					data.complete.call( ele, name, time );
					ele.trigger( 'animation' );
				})
			});
		}
		return true;
	},
	teardown: function() {
		var uid = _c.$(this).data( 'chicago.event.animation.uid' ),
			keys = {
				uid : 'chicago.event.animation.uid',
				base : 'chicago.event.' + uid,
				iterations : 'chicago.event.' + uid + '.iterations',
				event : 'chicago.event.' + uid + '.event',
			};

		for( var k in keys ) {
			var key = keys[ k ],
				value = _c.$(this).data( key );

			// Remove all data
			if( value ) {
				_c.$(this).removeData( key );
			}
		}
	}
},