git.sur5r.net Git - contagged/blob - scripts/interface/ifxscale.js

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * FX - scale/grow/shrink/puff\r
   4  * \r
   5  * http://interface.eyecon.ro\r
   6  * \r
   7  * Copyright (c) 2006 Stefan Petre\r
   8  * Dual licensed under the MIT (MIT-LICENSE.txt) \r
   9  * and GPL (GPL-LICENSE.txt) licenses.\r
  10  *   \r
  11  *\r
  12  */\r
  13 /**\r
  14  * Applies a scallign animation to element\r
  15  */\r
  16 jQuery.fn.extend(\r
  17         {\r
  18                 /**\r
  19                  * @name Grow\r
  20                  * @description scales the element from 0 to intitial size\r
  21                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  22                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  23                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  24                  * @type jQuery\r
  25                  * @cat Plugins/Interface\r
  26                  * @author Stefan Petre\r
  27                  */\r
  28                 Grow : function(speed, callback, easing) {\r
  29                         return this.queue('interfaceFX',function(){\r
  30                                 new jQuery.fx.Scale(this, speed, 1, 100, true, callback, 'grow', easing);\r
  31                         });\r
  32                 },\r
  33                 \r
  34                 /**\r
  35                  * @name Shrink\r
  36                  * @description scales the element from intitial size to 0\r
  37                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  38                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  39                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  40                  * @type jQuery\r
  41                  * @cat Plugins/Interface\r
  42                  * @author Stefan Petre\r
  43                  */\r
  44                 Shrink : function(speed, callback, easing) {\r
  45                         return this.queue('interfaceFX',function(){\r
  46                                 new jQuery.fx.Scale(this, speed, 100, 1, true, callback, 'shrink', easing);\r
  47                         });\r
  48                 },\r
  49                 \r
  50                 /**\r
  51                  * @name Puff\r
  52                  * @description makes element to dispear by scalling to 150% and fading it out\r
  53                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  54                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  55                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  56                  * @type jQuery\r
  57                  * @cat Plugins/Interface\r
  58                  * @author Stefan Petre\r
  59                  */\r
  60                 Puff : function(speed, callback, easing) {\r
  61                         return this.queue('interfaceFX',function(){\r
  62                                 var easing = easing || 'easeout';\r
  63                                 new jQuery.fx.Scale(this, speed, 100, 150, true, callback, 'puff', easing);\r
  64                         });\r
  65                 },\r
  66                 \r
  67                 /**\r
  68                  * @name Scale\r
  69                  * @description scales the element\r
  70                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  71                  * @param Integer from initial scalling procentage\r
  72                  * @param Integer to final scalling procentage\r
  73                  * @param Boolean reastore whatever to restore the initital scalling procentage when animation ends\r
  74                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  75                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  76                  * @type jQuery\r
  77                  * @cat Plugins/Interface\r
  78                  * @author Stefan Petre\r
  79                  */\r
  80                 Scale : function(speed, from, to, restore, callback, easing) {\r
  81                         return this.queue('interfaceFX',function(){\r
  82                                 new jQuery.fx.Scale(this, speed, from, to, restore, callback, 'Scale', easing);\r
  83                         });\r
  84                 }\r
  85         }\r
  86 );\r
  87 \r
  88 jQuery.fx.Scale = function (e, speed, from, to, restore, callback, type, easing)\r
  89 {\r
  90         if (!jQuery.fxCheckTag(e)) {\r
  91                 jQuery.dequeue(e, 'interfaceFX');\r
  92                 return false;\r
  93         }\r
  94         var z = this;\r
  95         z.el = jQuery(e);\r
  96         z.from = parseInt(from) || 100;\r
  97         z.to = parseInt(to) || 100;\r
  98         z.easing = typeof callback == 'string' ? callback : easing||null;\r
  99         z.callback = typeof callback == 'function' ? callback : null;\r
 100         z.duration = jQuery.speed(speed).duration;\r
 101         z.restore = restore|| null;\r
 102         z.oldP = jQuery.iUtil.getSize(e);\r
 103         z.oldStyle = {\r
 104                 width: z.el.css('width'),\r
 105                 height: z.el.css('height'),\r
 106                 fontSize: z.el.css('fontSize')||'100%',\r
 107                 position : z.el.css('position'),\r
 108                 display : z.el.css('display'),\r
 109                 top : z.el.css('top'),\r
 110                 left : z.el.css('left'),\r
 111                 overflow : z.el.css('overflow'),\r
 112                 borderTopWidth : z.el.css('borderTopWidth'),\r
 113                 borderRightWidth : z.el.css('borderRightWidth'),\r
 114                 borderBottomWidth : z.el.css('borderBottomWidth'),\r
 115                 borderLeftWidth : z.el.css('borderLeftWidth'),\r
 116                 paddingTop : z.el.css('paddingTop'),\r
 117                 paddingRight : z.el.css('paddingRight'),\r
 118                 paddingBottom : z.el.css('paddingBottom'),\r
 119                 paddingLeft : z.el.css('paddingLeft')\r
 120         };\r
 121         z.width = parseInt(z.oldStyle.width)||e.offsetWidth||0;\r
 122         z.height = parseInt(z.oldStyle.height)||e.offsetHeight||0;\r
 123         z.top = parseInt(z.oldStyle.top)||0;\r
 124         z.left = parseInt(z.oldStyle.left)||0;\r
 125         sizes = ['em','px','pt','%'];\r
 126         for(i in sizes) {\r
 127                 if (z.oldStyle.fontSize.indexOf(sizes[i])>0) {\r
 128                         z.fontUnit = sizes[i];\r
 129                         z.fontSize = parseFloat(z.oldStyle.fontSize);\r
 130                 }\r
 131                 if (z.oldStyle.borderTopWidth.indexOf(sizes[i])>0) {\r
 132                         z.borderTopUnit = sizes[i];\r
 133                         z.borderTopSize = parseFloat(z.oldStyle.borderTopWidth)||0;\r
 134                 }\r
 135                 if (z.oldStyle.borderRightWidth.indexOf(sizes[i])>0) {\r
 136                         z.borderRightUnit = sizes[i];\r
 137                         z.borderRightSize = parseFloat(z.oldStyle.borderRightWidth)||0;\r
 138                 }\r
 139                 if (z.oldStyle.borderBottomWidth.indexOf(sizes[i])>0) {\r
 140                         z.borderBottomUnit = sizes[i];\r
 141                         z.borderBottomSize = parseFloat(z.oldStyle.borderBottomWidth)||0;\r
 142                 }\r
 143                 if (z.oldStyle.borderLeftWidth.indexOf(sizes[i])>0) {\r
 144                         z.borderLeftUnit = sizes[i];\r
 145                         z.borderLeftSize = parseFloat(z.oldStyle.borderLeftWidth)||0;\r
 146                 }\r
 147                 if (z.oldStyle.paddingTop.indexOf(sizes[i])>0) {\r
 148                         z.paddingTopUnit = sizes[i];\r
 149                         z.paddingTopSize = parseFloat(z.oldStyle.paddingTop)||0;\r
 150                 }\r
 151                 if (z.oldStyle.paddingRight.indexOf(sizes[i])>0) {\r
 152                         z.paddingRightUnit = sizes[i];\r
 153                         z.paddingRightSize = parseFloat(z.oldStyle.paddingRight)||0;\r
 154                 }\r
 155                 if (z.oldStyle.paddingBottom.indexOf(sizes[i])>0) {\r
 156                         z.paddingBottomUnit = sizes[i];\r
 157                         z.paddingBottomSize = parseFloat(z.oldStyle.paddingBottom)||0;\r
 158                 }\r
 159                 if (z.oldStyle.paddingLeft.indexOf(sizes[i])>0) {\r
 160                         z.paddingLeftUnit = sizes[i];\r
 161                         z.paddingLeftSize = parseFloat(z.oldStyle.paddingLeft)||0;\r
 162                 }\r
 163         }\r
 164         \r
 165         \r
 166         if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {\r
 167                 z.el.css('position', 'relative');\r
 168         }\r
 169         z.el.css('overflow', 'hidden');\r
 170         z.type = type;\r
 171         switch(z.type)\r
 172         {\r
 173                 case 'grow':\r
 174                         z.startTop = z.top + z.oldP.h/2;\r
 175                         z.endTop = z.top;\r
 176                         z.startLeft = z.left + z.oldP.w/2;\r
 177                         z.endLeft = z.left;\r
 178                         break;\r
 179                 case 'shrink':\r
 180                         z.endTop = z.top + z.oldP.h/2;\r
 181                         z.startTop = z.top;\r
 182                         z.endLeft = z.left + z.oldP.w/2;\r
 183                         z.startLeft = z.left;\r
 184                         break;\r
 185                 case 'puff':\r
 186                         z.endTop = z.top - z.oldP.h/4;\r
 187                         z.startTop = z.top;\r
 188                         z.endLeft = z.left - z.oldP.w/4;\r
 189                         z.startLeft = z.left;\r
 190                         break;\r
 191         }\r
 192         z.firstStep = false;\r
 193         z.t=(new Date).getTime();\r
 194         z.clear = function(){clearInterval(z.timer);z.timer=null;};\r
 195         z.step = function(){\r
 196                 if (z.firstStep == false) {\r
 197                         z.el.show();\r
 198                         z.firstStep = true;\r
 199                 }\r
 200                 var t = (new Date).getTime();\r
 201                 var n = t - z.t;\r
 202                 var p = n / z.duration;\r
 203                 if (t >= z.duration+z.t) {\r
 204                         setTimeout(\r
 205                                 function(){\r
 206                                                 o = 1;  \r
 207                                         if (z.type) {\r
 208                                                 t = z.endTop;\r
 209                                                 l = z.endLeft;\r
 210                                                 if (z.type == 'puff')\r
 211                                                         o = 0;\r
 212                                         }\r
 213                                         z.zoom(z.to, l, t, true, o);\r
 214                                 },\r
 215                                 13\r
 216                         );\r
 217                         z.clear();\r
 218                 } else {\r
 219                         o = 1;\r
 220                         if (!jQuery.easing || !jQuery.easing[z.easing]) {\r
 221                                 s = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.to-z.from) + z.from;\r
 222                         } else {\r
 223                                 s = jQuery.easing[z.easing](p, n, z.from, (z.to-z.from), z.duration);\r
 224                         }\r
 225                         if (z.type) {\r
 226                                 if (!jQuery.easing || !jQuery.easing[z.easing]) {\r
 227                                         t = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.endTop-z.startTop) + z.startTop;\r
 228                                         l = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.endLeft-z.startLeft) + z.startLeft;\r
 229                                         if (z.type == 'puff')\r
 230                                                 o = ((-Math.cos(p*Math.PI)/2) + 0.5) * (-0.9999) + 0.9999;\r
 231                                 } else {\r
 232                                         t = jQuery.easing[z.easing](p, n, z.startTop, (z.endTop-z.startTop), z.duration);\r
 233                                         l = jQuery.easing[z.easing](p, n, z.startLeft, (z.endLeft-z.startLeft), z.duration);\r
 234                                         if (z.type == 'puff')\r
 235                                                 o = jQuery.easing[z.easing](p, n, 0.9999, -0.9999, z.duration);\r
 236                                 }\r
 237                         }\r
 238                         z.zoom(s, l, t, false, o);\r
 239                 }\r
 240         };\r
 241         z.timer=setInterval(function(){z.step();},13);\r
 242         z.zoom = function(percent, left, top, finish, opacity)\r
 243         {\r
 244                 z.el\r
 245                         .css('height', z.height * percent/100 + 'px')\r
 246                         .css('width', z.width * percent/100 + 'px')\r
 247                         .css('left', left + 'px')\r
 248                         .css('top', top + 'px')\r
 249                         .css('fontSize', z.fontSize * percent /100 + z.fontUnit);\r
 250                 if (z.borderTopSize)\r
 251                         z.el.css('borderTopWidth', z.borderTopSize * percent /100 + z.borderTopUnit);\r
 252                 if (z.borderRightSize)\r
 253                         z.el.css('borderRightWidth', z.borderRightSize * percent /100 + z.borderRightUnit);\r
 254                 if (z.borderBottomSize)\r
 255                         z.el.css('borderBottomWidth', z.borderBottomSize * percent /100 + z.borderBottomUnit);\r
 256                 if (z.borderLeftSize)\r
 257                         z.el.css('borderLeftWidth', z.borderLeftSize * percent /100 + z.borderLeftUnit);\r
 258                 if (z.paddingTopSize)\r
 259                         z.el.css('paddingTop', z.paddingTopSize * percent /100 + z.paddingTopUnit);\r
 260                 if (z.paddingRightSize)\r
 261                         z.el.css('paddingRight', z.paddingRightSize * percent /100 + z.paddingRightUnit);\r
 262                 if (z.paddingBottomSize)\r
 263                         z.el.css('paddingBottom', z.paddingBottomSize * percent /100 + z.paddingBottomUnit);\r
 264                 if (z.paddingLeftSize)\r
 265                         z.el.css('paddingLeft', z.paddingLeftSize * percent /100 + z.paddingLeftUnit);\r
 266                 if (z.type == 'puff') {\r
 267                         if (window.ActiveXObject)\r
 268                                 z.el.get(0).style.filter = "alpha(opacity=" + opacity*100 + ")";\r
 269                         z.el.get(0).style.opacity = opacity;\r
 270                 }\r
 271                 if (finish){\r
 272                         if (z.restore){\r
 273                                 z.el.css(z.oldStyle);\r
 274                         }\r
 275                         if (z.type == 'shrink' || z.type == 'puff'){\r
 276                                 z.el.css('display', 'none');\r
 277                                 if (z.type == 'puff') {\r
 278                                         if (window.ActiveXObject)\r
 279                                                 z.el.get(0).style.filter = "alpha(opacity=" + 100 + ")";\r
 280                                         z.el.get(0).style.opacity = 1;\r
 281                                 }\r
 282                         }else \r
 283                                 z.el.css('display', 'block');\r
 284                         if (z.callback)\r
 285                                 z.callback.apply(z.el.get(0));\r
 286                         \r
 287                         jQuery.dequeue(z.el.get(0), 'interfaceFX');\r
 288                 }\r
 289         };\r
 290 };