1 

     2 

     3 function SlidingScreenTransition(oldView, newView, direction, callback)

     4 {

     5 	/* DOM element to be "pushed out" */

     6 	this.currentScreen = oldView.rootElement;

     7  

     8 	/* DOM element to be "pulled in" */

     9 	this.nextScreen = newView.rootElement;

    10  

    11 	/* direction of the sliding transition */

    12 	this.direction = direction;

    13 	

    14 	// callback when done

    15 	this.callback = callback;

    16 }

    17 

    18 /* constant value for right-to-left transitions */

    19 SlidingScreenTransition.DIRECTION_LEFT = 1;

    20  

    21 /* constant value for left-to-right transitions */

    22 SlidingScreenTransition.DIRECTION_RIGHT = -1;

    23  

    24 /* total number of steps of the sliding transition */

    25 SlidingScreenTransition.TRANSITION_STEPS = 10;

    26 

    27 

    28 SlidingScreenTransition.prototype.start = function()

    29 {

    30 	var self = this;

    31 	

    32 	this.nextScreen.style.top = '0px';

    33 	this.nextScreen.style.left = (this.direction * screen.availWidth) + 'px';

    34 	

    35 	this.transitionStep = 0;

    36 	

    37 	this.transitionInterval = setInterval(

    38 		function()

    39 		{

    40 			self.doTransitionStep();

    41 		},

    42 		100

    43 	);

    44 }

    45 

    46 SlidingScreenTransition.prototype.stop	 = function() {

    47 	clearInterval ( this.transitionInterval );

    48 	if (this.callback) {

    49 		this.callback.call();

    50 	}

    51 }

    52 

    53 

    54 SlidingScreenTransition.prototype.doTransitionStep = function()

    55 {

    56 	this.transitionStep++;

    57 	

    58 	if(this.transitionStep <= SlidingScreenTransition.TRANSITION_STEPS)

    59 	{

    60 		this.nextScreen.style.left = 

    61 			(screen.availWidth * 

    62 			(SlidingScreenTransition.TRANSITION_STEPS - this.transitionStep) * 

    63 			this.direction / SlidingScreenTransition.TRANSITION_STEPS)

    64 			 + 'px';

    65 		

    66 		this.currentScreen.style.left = 

    67 			(- screen.availWidth * this.transitionStep * this.direction / 

    68 			SlidingScreenTransition.TRANSITION_STEPS) 

    69 			+ 'px';

    70 	}

    71 	else

    72 	{

    73 		this.stop();

    74 	}

    75 }