Base class for Sencha Animator animations in Sencha Tocuh 2

AN.AbstractAnimation.js

Ext.define('AN.AbstractAnimation', {
	extend: 'Ext.Component'

	,config: {
		scenes: null
		,autoStartScene: 0
		,scale: false
		,clickEvents: []
		,useOrmma: false
	}
	
	,constructor: function() {
		this.callParent(arguments);
		
		this.runningAnimationCount = 0;
		this.browser = 'webkit';
		this.currentSceneID = -1;
	}

	,initialize: function() {
		this.callParent(arguments);
		
		this.olElement = this.element.down('ol');
		
		// reapply scenes with olElement set
		if(!this.scenesInitialized)
			this.setScenes(this.getScenes());

		this.on('painted', function() {
			
			if(this.getScale())
			{
				// scale based on size of first scene after painted
				var animWidth = this.scenesArray[0].dimensions.width
					,animHeight = this.scenesArray[0].dimensions.height
					,stageWidth = this.element.getWidth()
					,stageHeight = this.element.getHeight()
					,scale = Math.min(stageWidth / animWidth, stageHeight / animHeight);
					
				this.olElement.setStyle({
					webkitTransformOrigin: '0 0'
					,webkitTransform: 'scale3d('+scale+','+scale+',1)'
				});
				
				this.element.setStyle('paddingLeft', (stageWidth-animWidth*scale)/2 + 'px');
			}
			
			// start scene 0
			var autoStartScene = this.getAutoStartScene();
			if(autoStartScene !== false)
				this.startSceneByID(autoStartScene);
		}, this);
		
	}
	
	,applyScenes: function(scenes) {
//		console.log('applyScenes(%o)', scenes);

		if(!scenes || !this.olElement)
			return scenes;
			
		var scene
			,mappedScenes = {}
			,liElements = this.olElement.dom.children;
			
		for (var i=0; i < scenes.length; i++)
		{
			scene = scenes[i];
			scene.element = Ext.get(liElements[i]);
			mappedScenes[scene.id] = scene;
		}
		
		this.scenesInitialized = true;
		
		return mappedScenes;
	}
	
	,updateScenes: function(scenes) {
//		console.log('updateScenes(%o)', scenes);
		
		if(this.scenesInitialized)
		{
			this.scenesArray = Ext.Object.getValues(scenes);
			this.setupListeners();	
		}
	}
	
	,setupListeners: function() {
		var eventName = "webkitAnimationEnd";

		if(document.body.style.MozAnimationName !== undefined)
		{
			eventName = "animationend";
			this.browser = "moz";
		}

		this.olElement.on(eventName, function() {
			this.onAnimationEnd();
		}, this);

		// add mouse move events
		Ext.each(this.scenesArray, function(scene) {
			if (scene.mousemoveAction)
			{
				scene.element.on('mousemove', function(event){
					scene.mousemoveAction(this, event);
				}, this);
			}			
		}, this);
		
		// add click events
		var element;
		Ext.each(this.getClickEvents(), function(clickEvent) {
			Ext.get(clickEvent.id).on('click', clickEvent.handler, this);
		}, this);
		
	}
	

	,onAnimationEnd: function() {
		
		this.runningAnimationCount--;
		
		if (this.runningAnimationCount === 0)
		{
			this.onSceneFinish();
		}
		
	}
	
	,startSceneByID: function(sceneID) {
		var me = this
			,scenes = this.getScenes();

		// restart current scene without flicker
		if (sceneID === this.currentSceneID)
		{
			scenes[sceneID].element.addCls('run restart');
			
			setTimeout(function(){

				me.runningAnimationCount = scenes[sceneID].animationCount;
				scenes[sceneID].element.removeCls('restart');
				
				if (scenes[sceneID].startAction) {
					scenes[sceneID].startAction(me);
				}
				if (scenes[sceneID].animationCount === 0 ) {
					me.onSceneFinish();
				}
				
				},0);
			return;
		}
		else if (this.currentSceneID !== -1)
		{
			scenes[this.currentSceneID].element.removeCls('run');
		}

		this.runningAnimationCount = scenes[sceneID].animationCount;
		
		this.currentSceneID = sceneID;
		var nextScene = scenes[sceneID];
		
		if (this.browser === 'moz')
		{
			nextScene.element.addCls('restart run');
			var unused = nextScene.element.offsetHeight;
			nextScene.element.removeCls('restart');	  
		}
		else
		{
			nextScene.element.addCls('run');
		}
		
		if (this.getUseOrmma())
		{	
		   this.ormmaNextScene(nextScene);
		}
		
		
		if (nextScene.startAction)
		{
			nextScene.startAction(this);
		}
		
		if (nextScene.animationCount === 0 )
		{
			this.onSceneFinish();
		}
	}
	
	,replayScene: function() {
		this.startSceneByID(this.currentSceneID);
	}
	
	,onSceneFinish: function() {
		var scenes = this.getScenes();
		
		if (scenes[this.currentSceneID].endAction) {
			scenes[this.currentSceneID].endAction(this);
		}
		
	}
	
	,goToNextScene: function() {
		var scenes = this.getScenes()
			,nextScene
			,nextIndex = this.scenesArray.indexOf(scenes[this.currentSceneID]) + 1;

		if (nextScene = this.scenesArray[nextIndex])
		{
			this.startSceneByID(nextScene.id);
		}
	}
	
	,goToURL: function(aURL) {
		document.location.href = aURL;
	}
	
	,ormmaNextScene: function(nextScene) {
		var currentState = ormma.getState();
			
		if (nextScene.dimensions.expanded)
		{
			//expanded state
			//check if we're expanded
			var maxSize = ormma.getMaxSize()
			if (currentState !== 'expanded')
			{
				ormma.expand({
					x:0
					,y:0
					,width: maxSize.width
					,height: maxSize.height
				})
			}
			
			var transform = "";
			var elementHeight = nextScene.element.offsetHeight;
			var elementWidth = nextScene.element.offsetWidth;
			var y = (maxSize.height - elementHeight) / 2;
			var x = (maxSize.width - elementWidth) / 2;
			transform += " translate3d("+Math.round(x)+"px,"+Math.round(y)+"px,0)";	  
			
			
			if (nextScene.dimensions.fit)
			{
				var scaleFactor = Math.min(maxSize.width/elementWidth, maxSize.height/elementHeight);					 
				transform += " scale3d("+scaleFactor+","+scaleFactor+",1)";
			}
			nextScene.element.style.webkitTransform = transform;
			
		}
		else
		{
			
			if (currentState === 'expanded')
			{
				ormma.close();
			}
			
			ormma.resize(nextScene.dimensions.width, nextScene.dimensions.height);
		}

	}
});