includes/clientside/static/flyin.js
changeset 1227 bdac73ed481e
parent 1125 367768040a61
equal deleted inserted replaced
1226:de56132c008d 1227:bdac73ed481e
    18  * License: Modified BSD license <http://www.robertpenner.com/easing_terms_of_use.html>
    18  * License: Modified BSD license <http://www.robertpenner.com/easing_terms_of_use.html>
    19  */
    19  */
    20 
    20 
    21 // Effects code - don't bother changing these formulas
    21 // Effects code - don't bother changing these formulas
    22 var Back = {
    22 var Back = {
    23   easeOut: function(t, b, c, d, s)
    23 	easeOut: function(t, b, c, d, s)
    24   {
    24 	{
    25     if (s == undefined) s = 1.70158;
    25 		if (s == undefined) s = 1.70158;
    26     return c * ( ( t=t/d-1 ) * t * ( ( s + 1 ) * t + s) + 1) + b;
    26 		return c * ( ( t=t/d-1 ) * t * ( ( s + 1 ) * t + s) + 1) + b;
    27   },
    27 	},
    28   easeIn: function (t, b, c, d, s)
    28 	easeIn: function (t, b, c, d, s)
    29   {
    29 	{
    30     if (s == undefined) s = 1.70158;
    30 		if (s == undefined) s = 1.70158;
    31     return c * ( t/=d ) * t * ( ( s + 1 ) * t - s) + b;
    31 		return c * ( t/=d ) * t * ( ( s + 1 ) * t - s) + b;
    32   },
    32 	},
    33   easeInOut: function (t, b, c, d, s)
    33 	easeInOut: function (t, b, c, d, s)
    34   {
    34 	{
    35     if (s == undefined) s = 1.70158; 
    35 		if (s == undefined) s = 1.70158; 
    36     if ((t /= d/2) < 1) 
    36 		if ((t /= d/2) < 1) 
    37     {
    37 		{
    38       return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    38 			return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    39     }
    39 		}
    40     return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    40 		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    41   }
    41 	}
    42 }
    42 }
    43 
    43 
    44 // This should be set to the class name of the effect you want.
    44 // This should be set to the class name of the effect you want.
    45 var GlideEffect = Back;
    45 var GlideEffect = Back;
    46 
    46 
    47 // Placeholder functions, to make organization a little easier :-)
    47 // Placeholder functions, to make organization a little easier :-)
    48 
    48 
    49 function fly_in_top(element, nofade, height_taken_care_of)
    49 function fly_in_top(element, nofade, height_taken_care_of)
    50 {
    50 {
    51   return fly_core(element, nofade, FI_TOP, FI_IN, height_taken_care_of);
    51 	return fly_core(element, nofade, FI_TOP, FI_IN, height_taken_care_of);
    52 }
    52 }
    53 
    53 
    54 function fly_in_bottom(element, nofade, height_taken_care_of)
    54 function fly_in_bottom(element, nofade, height_taken_care_of)
    55 {
    55 {
    56   return fly_core(element, nofade, FI_BOTTOM, FI_IN, height_taken_care_of);
    56 	return fly_core(element, nofade, FI_BOTTOM, FI_IN, height_taken_care_of);
    57 }
    57 }
    58 
    58 
    59 function fly_out_top(element, nofade, height_taken_care_of)
    59 function fly_out_top(element, nofade, height_taken_care_of)
    60 {
    60 {
    61   return fly_core(element, nofade, FI_TOP, FI_OUT, height_taken_care_of);
    61 	return fly_core(element, nofade, FI_TOP, FI_OUT, height_taken_care_of);
    62 }
    62 }
    63 
    63 
    64 function fly_out_bottom(element, nofade, height_taken_care_of)
    64 function fly_out_bottom(element, nofade, height_taken_care_of)
    65 {
    65 {
    66   return fly_core(element, nofade, FI_BOTTOM, FI_OUT, height_taken_care_of);
    66 	return fly_core(element, nofade, FI_BOTTOM, FI_OUT, height_taken_care_of);
    67 }
    67 }
    68 
    68 
    69 function fly_core(element, nofade, origin, direction, height_taken_care_of)
    69 function fly_core(element, nofade, origin, direction, height_taken_care_of)
    70 {
    70 {
    71   if ( !element || typeof(element) != 'object' )
    71 	if ( !element || typeof(element) != 'object' )
    72     return false;
    72 		return false;
    73   
    73 	
    74   // force to array
    74 	// force to array
    75   if ( !element.length )
    75 	if ( !element.length )
    76     element = [ element ];
    76 		element = [ element ];
    77   
    77 	
    78   // target dimensions
    78 	// target dimensions
    79   var top, left;
    79 	var top, left;
    80   // initial dimensions
    80 	// initial dimensions
    81   var topi, lefti;
    81 	var topi, lefti;
    82   // current dimensions
    82 	// current dimensions
    83   var topc, leftc;
    83 	var topc, leftc;
    84   // screen dimensions
    84 	// screen dimensions
    85   var w = getWidth();
    85 	var w = getWidth();
    86   var h = getHeight();
    86 	var h = getHeight();
    87   var y = parseInt ( getScrollOffset() );
    87 	var y = parseInt ( getScrollOffset() );
    88   // temp vars
    88 	// temp vars
    89   var dim, off, diff, dist, ratio, opac_factor;
    89 	var dim, off, diff, dist, ratio, opac_factor;
    90   // setup element
    90 	// setup element
    91   for ( var i = 0; i < element.length; i++ )
    91 	for ( var i = 0; i < element.length; i++ )
    92     element[i].style.position = 'absolute';
    92 		element[i].style.position = 'absolute';
    93   
    93 	
    94   dim = [ $dynano(element[0]).Height(), $dynano(element[0]).Width() ];
    94 	dim = [ $dynano(element[0]).Height(), $dynano(element[0]).Width() ];
    95   off = [ $dynano(element[0]).Top(), $dynano(element[0]).Left() ];
    95 	off = [ $dynano(element[0]).Top(), $dynano(element[0]).Left() ];
    96   
    96 	
    97   if ( height_taken_care_of )
    97 	if ( height_taken_care_of )
    98   {
    98 	{
    99     top = off[0];
    99 		top = off[0];
   100     left = off[1];
   100 		left = off[1];
   101   }
   101 	}
   102   else
   102 	else
   103   {
   103 	{
   104     top  = Math.round(( h / 2 ) - ( dim[0] / 2 )) + y; // - ( h / 4 ));
   104 		top  = Math.round(( h / 2 ) - ( dim[0] / 2 )) + y; // - ( h / 4 ));
   105     left = Math.round(( w / 2 ) - ( dim[1] / 2 ));
   105 		left = Math.round(( w / 2 ) - ( dim[1] / 2 ));
   106   }
   106 	}
   107   
   107 	
   108   // you can change this around to get it to fly in from corners or be on the left/right side
   108 	// you can change this around to get it to fly in from corners or be on the left/right side
   109   lefti = left;
   109 	lefti = left;
   110   
   110 	
   111   // calculate first frame Y position
   111 	// calculate first frame Y position
   112   if ( origin == FI_TOP && direction == FI_IN )
   112 	if ( origin == FI_TOP && direction == FI_IN )
   113   {
   113 	{
   114     topi = 0 - dim[0] + y;
   114 		topi = 0 - dim[0] + y;
   115   }
   115 	}
   116   else if ( origin == FI_TOP && direction == FI_OUT )
   116 	else if ( origin == FI_TOP && direction == FI_OUT )
   117   {
   117 	{
   118     topi = top;
   118 		topi = top;
   119     top = 0 - dim[0] + y;
   119 		top = 0 - dim[0] + y;
   120   }
   120 	}
   121   else if ( origin == FI_BOTTOM && direction == FI_IN )
   121 	else if ( origin == FI_BOTTOM && direction == FI_IN )
   122   {
   122 	{
   123     topi = h + y;
   123 		topi = h + y;
   124   }
   124 	}
   125   else if ( origin == FI_BOTTOM && direction == FI_OUT )
   125 	else if ( origin == FI_BOTTOM && direction == FI_OUT )
   126   {
   126 	{
   127     topi = top;
   127 		topi = top;
   128     top = h + y;
   128 		top = h + y;
   129   }
   129 	}
   130   
   130 	
   131   var abs_dir = ( ( origin == FI_TOP && direction == FI_IN ) || ( origin == FI_BOTTOM && direction == FI_OUT ) ) ? FI_DOWN : FI_UP;
   131 	var abs_dir = ( ( origin == FI_TOP && direction == FI_IN ) || ( origin == FI_BOTTOM && direction == FI_OUT ) ) ? FI_DOWN : FI_UP;
   132   
   132 	
   133   var diff_top = top - topi;
   133 	var diff_top = top - topi;
   134   var diff_left = left - lefti;
   134 	var diff_left = left - lefti;
   135   
   135 	
   136   var frames = 100;
   136 	var frames = 100;
   137   var timeout = 0;
   137 	var timeout = 0;
   138   var timerstep = 8 * FI_MULTIPLIER;
   138 	var timerstep = 8 * FI_MULTIPLIER;
   139   
   139 	
   140   // cache element so it can be changed from within setTimeout()
   140 	// cache element so it can be changed from within setTimeout()
   141   var rand_seed = Math.floor(Math.random() * 1000000);
   141 	var rand_seed = Math.floor(Math.random() * 1000000);
   142   fly_in_cache[rand_seed] = element;
   142 	fly_in_cache[rand_seed] = element;
   143   
   143 	
   144   for ( var i = 0; i < frames; i++ )
   144 	for ( var i = 0; i < frames; i++ )
   145   {
   145 	{
   146     topc = GlideEffect.easeInOut(i, topi, diff_top, frames);
   146 		topc = GlideEffect.easeInOut(i, topi, diff_top, frames);
   147     leftc = GlideEffect.easeInOut(i, lefti, diff_left, frames);
   147 		leftc = GlideEffect.easeInOut(i, lefti, diff_left, frames);
   148     
   148 		
   149     var code = 'var element = fly_in_cache[' + rand_seed + '];' + "\n";
   149 		var code = 'var element = fly_in_cache[' + rand_seed + '];' + "\n";
   150     code +=    'for ( var i = 0; i < element.length; i++ )' + "\n";
   150 		code +=    'for ( var i = 0; i < element.length; i++ )' + "\n";
   151     code +=    '{' + "\n";
   151 		code +=    '{' + "\n";
   152     code +=    '  element[i].style.top = "' + topc + 'px";' + "\n";
   152 		code +=    '  element[i].style.top = "' + topc + 'px";' + "\n";
   153     if ( !height_taken_care_of )
   153 		if ( !height_taken_care_of )
   154       code +=  '  element[i].style.left = "' + leftc + 'px";' + "\n";
   154 			code +=  '  element[i].style.left = "' + leftc + 'px";' + "\n";
   155     code +=    '}';
   155 		code +=    '}';
   156     
   156 		
   157     setTimeout(code, timeout);
   157 		setTimeout(code, timeout);
   158     
   158 		
   159     timeout += timerstep;
   159 		timeout += timerstep;
   160     
   160 		
   161     var ratio = i / frames;
   161 		var ratio = i / frames;
   162     
   162 		
   163     if ( !nofade )
   163 		if ( !nofade )
   164     {
   164 		{
   165       // handle fade
   165 			// handle fade
   166       var opac_factor = ratio * 100;
   166 			var opac_factor = ratio * 100;
   167       if ( direction == FI_OUT )
   167 			if ( direction == FI_OUT )
   168         opac_factor = 100 - opac_factor;
   168 				opac_factor = 100 - opac_factor;
   169       
   169 			
   170       var code = 'var element = fly_in_cache[' + rand_seed + '];' + "\n";
   170 			var code = 'var element = fly_in_cache[' + rand_seed + '];' + "\n";
   171       code +=    'for ( var i = 0; i < element.length; i++ )' + "\n";
   171 			code +=    'for ( var i = 0; i < element.length; i++ )' + "\n";
   172       code +=    '{' + "\n";
   172 			code +=    '{' + "\n";
   173       code +=    '  domObjChangeOpac(' + opac_factor + ', element[i]);' + "\n";
   173 			code +=    '  domObjChangeOpac(' + opac_factor + ', element[i]);' + "\n";
   174       code +=    '}';
   174 			code +=    '}';
   175       
   175 			
   176       setTimeout(code, timeout);
   176 			setTimeout(code, timeout);
   177     }
   177 		}
   178     
   178 		
   179   }
   179 	}
   180   
   180 	
   181   // old framestepper code removed from here in Loch Ness
   181 	// old framestepper code removed from here in Loch Ness
   182   
   182 	
   183   timeout += timerstep;
   183 	timeout += timerstep;
   184   return timeout;
   184 	return timeout;
   185 }
   185 }
   186 
   186 
   187 function abs(i)
   187 function abs(i)
   188 {
   188 {
   189   if ( isNaN(i) )
   189 	if ( isNaN(i) )
   190     return i;
   190 		return i;
   191   return ( i < 0 ) ? ( 0 - i ) : i;
   191 	return ( i < 0 ) ? ( 0 - i ) : i;
   192 }
   192 }
   193 
   193