1 /**

     2  * Interface Elements for jQuery

     3  * FX - scale/grow/shrink/puff

     4  * 

     5  * http://interface.eyecon.ro

     6  * 

     7  * Copyright (c) 2006 Stefan Petre

     8  * Dual licensed under the MIT (MIT-LICENSE.txt) 

     9  * and GPL (GPL-LICENSE.txt) licenses.

    10  *   

    11  *

    12  */

    13 /**

    14  * Applies a scallign animation to element

    15  */

    16 jQuery.fn.extend(

    17 	{

    18 		/**

    19 		 * @name Grow

    20 		 * @description scales the element from 0 to intitial size

    21 		 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']

    22 		 * @param Function callback (optional) A function to be executed whenever the animation completes.

    23 		 * @param String easing (optional) The name of the easing effect that you want to use.

    24 		 * @type jQuery

    25 		 * @cat Plugins/Interface

    26 		 * @author Stefan Petre

    27 		 */

    28 		Grow : function(speed, callback, easing) {

    29 			return this.queue('interfaceFX',function(){

    30 				new jQuery.fx.Scale(this, speed, 1, 100, true, callback, 'grow', easing);

    31 			});

    32 		},

    33 		

    34 		/**

    35 		 * @name Shrink

    36 		 * @description scales the element from intitial size to 0

    37 		 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']

    38 		 * @param Function callback (optional) A function to be executed whenever the animation completes.

    39 		 * @param String easing (optional) The name of the easing effect that you want to use.

    40 		 * @type jQuery

    41 		 * @cat Plugins/Interface

    42 		 * @author Stefan Petre

    43 		 */

    44 		Shrink : function(speed, callback, easing) {

    45 			return this.queue('interfaceFX',function(){

    46 				new jQuery.fx.Scale(this, speed, 100, 1, true, callback, 'shrink', easing);

    47 			});

    48 		},

    49 		

    50 		/**

    51 		 * @name Puff

    52 		 * @description makes element to dispear by scalling to 150% and fading it out

    53 		 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']

    54 		 * @param Function callback (optional) A function to be executed whenever the animation completes.

    55 		 * @param String easing (optional) The name of the easing effect that you want to use.

    56 		 * @type jQuery

    57 		 * @cat Plugins/Interface

    58 		 * @author Stefan Petre

    59 		 */

    60 		Puff : function(speed, callback, easing) {

    61 			return this.queue('interfaceFX',function(){

    62 				var easing = easing || 'easeout';

    63 				new jQuery.fx.Scale(this, speed, 100, 150, true, callback, 'puff', easing);

    64 			});

    65 		},

    66 		

    67 		/**

    68 		 * @name Scale

    69 		 * @description scales the element

    70 		 * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']

    71 		 * @param Integer from initial scalling procentage

    72 		 * @param Integer to final scalling procentage

    73 		 * @param Boolean reastore whatever to restore the initital scalling procentage when animation ends

    74 		 * @param Function callback (optional) A function to be executed whenever the animation completes.

    75 		 * @param String easing (optional) The name of the easing effect that you want to use.

    76 		 * @type jQuery

    77 		 * @cat Plugins/Interface

    78 		 * @author Stefan Petre

    79 		 */

    80 		Scale : function(speed, from, to, restore, callback, easing) {

    81 			return this.queue('interfaceFX',function(){

    82 				new jQuery.fx.Scale(this, speed, from, to, restore, callback, 'Scale', easing);

    83 			});

    84 		}

    85 	}

    86 );

    87 

    88 jQuery.fx.Scale = function (e, speed, from, to, restore, callback, type, easing)

    89 {

    90 	if (!jQuery.fxCheckTag(e)) {

    91 		jQuery.dequeue(e, 'interfaceFX');

    92 		return false;

    93 	}

    94 	var z = this;

    95 	z.el = jQuery(e);

    96 	z.from = parseInt(from) || 100;

    97 	z.to = parseInt(to) || 100;

    98 	z.easing = typeof callback == 'string' ? callback : easing||null;

    99 	z.callback = typeof callback == 'function' ? callback : null;

   100 	z.duration = jQuery.speed(speed).duration;

   101 	z.restore = restore|| null;

   102 	z.oldP = jQuery.iUtil.getSize(e);

   103 	z.oldStyle = {

   104 		width: z.el.css('width'),

   105 		height: z.el.css('height'),

   106 		fontSize: z.el.css('fontSize')||'100%',

   107 		position : z.el.css('position'),

   108 		display : z.el.css('display'),

   109 		top : z.el.css('top'),

   110 		left : z.el.css('left'),

   111 		overflow : z.el.css('overflow'),

   112 		borderTopWidth : z.el.css('borderTopWidth'),

   113 		borderRightWidth : z.el.css('borderRightWidth'),

   114 		borderBottomWidth : z.el.css('borderBottomWidth'),

   115 		borderLeftWidth : z.el.css('borderLeftWidth'),

   116 		paddingTop : z.el.css('paddingTop'),

   117 		paddingRight : z.el.css('paddingRight'),

   118 		paddingBottom : z.el.css('paddingBottom'),

   119 		paddingLeft : z.el.css('paddingLeft')

   120 	};

   121 	z.width = parseInt(z.oldStyle.width)||e.offsetWidth||0;

   122 	z.height = parseInt(z.oldStyle.height)||e.offsetHeight||0;

   123 	z.top = parseInt(z.oldStyle.top)||0;

   124 	z.left = parseInt(z.oldStyle.left)||0;

   125 	sizes = ['em','px','pt','%'];

   126 	for(i in sizes) {

   127 		if (z.oldStyle.fontSize.indexOf(sizes[i])>0) {

   128 			z.fontUnit = sizes[i];

   129 			z.fontSize = parseFloat(z.oldStyle.fontSize);

   130 		}

   131 		if (z.oldStyle.borderTopWidth.indexOf(sizes[i])>0) {

   132 			z.borderTopUnit = sizes[i];

   133 			z.borderTopSize = parseFloat(z.oldStyle.borderTopWidth)||0;

   134 		}

   135 		if (z.oldStyle.borderRightWidth.indexOf(sizes[i])>0) {

   136 			z.borderRightUnit = sizes[i];

   137 			z.borderRightSize = parseFloat(z.oldStyle.borderRightWidth)||0;

   138 		}

   139 		if (z.oldStyle.borderBottomWidth.indexOf(sizes[i])>0) {

   140 			z.borderBottomUnit = sizes[i];

   141 			z.borderBottomSize = parseFloat(z.oldStyle.borderBottomWidth)||0;

   142 		}

   143 		if (z.oldStyle.borderLeftWidth.indexOf(sizes[i])>0) {

   144 			z.borderLeftUnit = sizes[i];

   145 			z.borderLeftSize = parseFloat(z.oldStyle.borderLeftWidth)||0;

   146 		}

   147 		if (z.oldStyle.paddingTop.indexOf(sizes[i])>0) {

   148 			z.paddingTopUnit = sizes[i];

   149 			z.paddingTopSize = parseFloat(z.oldStyle.paddingTop)||0;

   150 		}

   151 		if (z.oldStyle.paddingRight.indexOf(sizes[i])>0) {

   152 			z.paddingRightUnit = sizes[i];

   153 			z.paddingRightSize = parseFloat(z.oldStyle.paddingRight)||0;

   154 		}

   155 		if (z.oldStyle.paddingBottom.indexOf(sizes[i])>0) {

   156 			z.paddingBottomUnit = sizes[i];

   157 			z.paddingBottomSize = parseFloat(z.oldStyle.paddingBottom)||0;

   158 		}

   159 		if (z.oldStyle.paddingLeft.indexOf(sizes[i])>0) {

   160 			z.paddingLeftUnit = sizes[i];

   161 			z.paddingLeftSize = parseFloat(z.oldStyle.paddingLeft)||0;

   162 		}

   163 	}

   164 	

   165 	

   166 	if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {

   167 		z.el.css('position', 'relative');

   168 	}

   169 	z.el.css('overflow', 'hidden');

   170 	z.type = type;

   171 	switch(z.type)

   172 	{

   173 		case 'grow':

   174 			z.startTop = z.top + z.oldP.h/2;

   175 			z.endTop = z.top;

   176 			z.startLeft = z.left + z.oldP.w/2;

   177 			z.endLeft = z.left;

   178 			break;

   179 		case 'shrink':

   180 			z.endTop = z.top + z.oldP.h/2;

   181 			z.startTop = z.top;

   182 			z.endLeft = z.left + z.oldP.w/2;

   183 			z.startLeft = z.left;

   184 			break;

   185 		case 'puff':

   186 			z.endTop = z.top - z.oldP.h/4;

   187 			z.startTop = z.top;

   188 			z.endLeft = z.left - z.oldP.w/4;

   189 			z.startLeft = z.left;

   190 			break;

   191 	}

   192 	z.firstStep = false;

   193 	z.t=(new Date).getTime();

   194 	z.clear = function(){clearInterval(z.timer);z.timer=null;};

   195 	z.step = function(){

   196 		if (z.firstStep == false) {

   197 			z.el.show();

   198 			z.firstStep = true;

   199 		}

   200 		var t = (new Date).getTime();

   201 		var n = t - z.t;

   202 		var p = n / z.duration;

   203 		if (t >= z.duration+z.t) {

   204 			setTimeout(

   205 				function(){

   206 						o = 1;	

   207 					if (z.type) {

   208 						t = z.endTop;

   209 						l = z.endLeft;

   210 						if (z.type == 'puff')

   211 							o = 0;

   212 					}

   213 					z.zoom(z.to, l, t, true, o);

   214 				},

   215 				13

   216 			);

   217 			z.clear();

   218 		} else {

   219 			o = 1;

   220 			if (!jQuery.easing || !jQuery.easing[z.easing]) {

   221 				s = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.to-z.from) + z.from;

   222 			} else {

   223 				s = jQuery.easing[z.easing](p, n, z.from, (z.to-z.from), z.duration);

   224 			}

   225 			if (z.type) {

   226 				if (!jQuery.easing || !jQuery.easing[z.easing]) {

   227 					t = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.endTop-z.startTop) + z.startTop;

   228 					l = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.endLeft-z.startLeft) + z.startLeft;

   229 					if (z.type == 'puff')

   230 						o = ((-Math.cos(p*Math.PI)/2) + 0.5) * (-0.9999) + 0.9999;

   231 				} else {

   232 					t = jQuery.easing[z.easing](p, n, z.startTop, (z.endTop-z.startTop), z.duration);

   233 					l = jQuery.easing[z.easing](p, n, z.startLeft, (z.endLeft-z.startLeft), z.duration);

   234 					if (z.type == 'puff')

   235 						o = jQuery.easing[z.easing](p, n, 0.9999, -0.9999, z.duration);

   236 				}

   237 			}

   238 			z.zoom(s, l, t, false, o);

   239 		}

   240 	};

   241 	z.timer=setInterval(function(){z.step();},13);

   242 	z.zoom = function(percent, left, top, finish, opacity)

   243 	{

   244 		z.el

   245 			.css('height', z.height * percent/100 + 'px')

   246 			.css('width', z.width * percent/100 + 'px')

   247 			.css('left', left + 'px')

   248 			.css('top', top + 'px')

   249 			.css('fontSize', z.fontSize * percent /100 + z.fontUnit);

   250 		if (z.borderTopSize)

   251 			z.el.css('borderTopWidth', z.borderTopSize * percent /100 + z.borderTopUnit);

   252 		if (z.borderRightSize)

   253 			z.el.css('borderRightWidth', z.borderRightSize * percent /100 + z.borderRightUnit);

   254 		if (z.borderBottomSize)

   255 			z.el.css('borderBottomWidth', z.borderBottomSize * percent /100 + z.borderBottomUnit);

   256 		if (z.borderLeftSize)

   257 			z.el.css('borderLeftWidth', z.borderLeftSize * percent /100 + z.borderLeftUnit);

   258 		if (z.paddingTopSize)

   259 			z.el.css('paddingTop', z.paddingTopSize * percent /100 + z.paddingTopUnit);

   260 		if (z.paddingRightSize)

   261 			z.el.css('paddingRight', z.paddingRightSize * percent /100 + z.paddingRightUnit);

   262 		if (z.paddingBottomSize)

   263 			z.el.css('paddingBottom', z.paddingBottomSize * percent /100 + z.paddingBottomUnit);

   264 		if (z.paddingLeftSize)

   265 			z.el.css('paddingLeft', z.paddingLeftSize * percent /100 + z.paddingLeftUnit);

   266 		if (z.type == 'puff') {

   267 			if (window.ActiveXObject)

   268 				z.el.get(0).style.filter = "alpha(opacity=" + opacity*100 + ")";

   269 			z.el.get(0).style.opacity = opacity;

   270 		}

   271 		if (finish){

   272 			if (z.restore){

   273 				z.el.css(z.oldStyle);

   274 			}

   275 			if (z.type == 'shrink' || z.type == 'puff'){

   276 				z.el.css('display', 'none');

   277 				if (z.type == 'puff') {

   278 					if (window.ActiveXObject)

   279 						z.el.get(0).style.filter = "alpha(opacity=" + 100 + ")";

   280 					z.el.get(0).style.opacity = 1;

   281 				}

   282 			}else 

   283 				z.el.css('display', 'block');

   284 			if (z.callback)

   285 				z.callback.apply(z.el.get(0));

   286 			

   287 			jQuery.dequeue(z.el.get(0), 'interfaceFX');

   288 		}

   289 	};

   290 };