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

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * FX - drop\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 /**\r
  15  * Applies a dropping effect to element\r
  16  */\r
  17 jQuery.fn.extend(\r
  18         {\r
  19                 /**\r
  20                  * @name DropOutDown\r
  21                  * @description drops the element out down\r
  22                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  23                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  24                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  25                  * @type jQuery\r
  26                  * @cat Plugins/Interface\r
  27                  * @author Stefan Petre\r
  28                  */\r
  29                 DropOutDown : function (speed, callback, easing) {\r
  30                         return this.queue('interfaceFX',function(){\r
  31                                 new jQuery.fx.DropOutDirectiont(this, speed, callback, 'down', 'out', easing);\r
  32                         });\r
  33                 },\r
  34                 \r
  35                 /**\r
  36                  * @name DropInDown\r
  37                  * @description drops the element in down\r
  38                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  39                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  40                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  41                  * @type jQuery\r
  42                  * @cat Plugins/Interface\r
  43                  * @author Stefan Petre\r
  44                  */\r
  45                 DropInDown : function (speed, callback, easing) {\r
  46                         return this.queue('interfaceFX',function(){\r
  47                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'down', 'in', easing);\r
  48                         });\r
  49                 },\r
  50                 \r
  51                 /**\r
  52                  * @name DropToggleDown\r
  53                  * @description drops the element in/out down\r
  54                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  55                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  56                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  57                  * @type jQuery\r
  58                  * @cat Plugins/Interface\r
  59                  * @author Stefan Petre\r
  60                  */\r
  61                 DropToggleDown : function (speed, callback, easing) {\r
  62                         return this.queue('interfaceFX',function(){\r
  63                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'down', 'toggle', easing);\r
  64                         });\r
  65                 },\r
  66                 \r
  67                 /**\r
  68                  * @name DropOutUp\r
  69                  * @description drops the element out up\r
  70                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  71                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  72                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  73                  * @type jQuery\r
  74                  * @cat Plugins/Interface\r
  75                  * @author Stefan Petre\r
  76                  */\r
  77                 DropOutUp : function (speed, callback, easing) {\r
  78                         return this.queue('interfaceFX',function(){\r
  79                                 new jQuery.fx.DropOutDirectiont(this, speed, callback, 'up', 'out', easing);\r
  80                         });\r
  81                 },\r
  82                 \r
  83                 /**\r
  84                  * @name DropInUp\r
  85                  * @description drops the element in up\r
  86                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  87                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  88                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  89                  * @type jQuery\r
  90                  * @cat Plugins/Interface\r
  91                  * @author Stefan Petre\r
  92                  */\r
  93                 DropInUp : function (speed, callback, easing) {\r
  94                         return this.queue('interfaceFX',function(){\r
  95                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'up', 'in', easing);\r
  96                         });\r
  97                 },\r
  98                 \r
  99                 /**\r
 100                  * @name DropToggleUp\r
 101                  * @description drops the element in/out up\r
 102                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 103                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 104                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 105                  * @type jQuery\r
 106                  * @cat Plugins/Interface\r
 107                  * @author Stefan Petre\r
 108                  */\r
 109                 DropToggleUp : function (speed, callback, easing) {\r
 110                         return this.queue('interfaceFX',function(){\r
 111                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'up', 'toggle', easing);\r
 112                         });\r
 113                 },\r
 114                 \r
 115                 /**\r
 116                  * @name DropOutLeft\r
 117                  * @description drops the element out left\r
 118                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 119                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 120                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 121                  * @type jQuery\r
 122                  * @cat Plugins/Interface\r
 123                  * @author Stefan Petre\r
 124                  */\r
 125                 DropOutLeft : function (speed, callback, easing) {\r
 126                         return this.queue('interfaceFX',function(){\r
 127                                 new jQuery.fx.DropOutDirectiont(this, speed, callback, 'left', 'out', easing);\r
 128                         });\r
 129                 },\r
 130                 \r
 131                 /**\r
 132                  * @name DropInLeft\r
 133                  * @description drops the element in left\r
 134                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 135                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 136                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 137                  * @type jQuery\r
 138                  * @cat Plugins/Interface\r
 139                  * @author Stefan Petre\r
 140                  */\r
 141                 DropInLeft : function (speed, callback, easing) {\r
 142                         return this.queue('interfaceFX',function(){\r
 143                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'left', 'in', easing);\r
 144                         });\r
 145                 },\r
 146                 \r
 147                 /**\r
 148                  * @name DropToggleLeft\r
 149                  * @description drops the element in/out left\r
 150                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 151                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 152                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 153                  * @type jQuery\r
 154                  * @cat Plugins/Interface\r
 155                  * @author Stefan Petre\r
 156                  */\r
 157                 DropToggleLeft : function (speed, callback, easing) {\r
 158                         return this.queue('interfaceFX',function(){\r
 159                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'left', 'toggle', easing);\r
 160                         });\r
 161                 },\r
 162                 \r
 163                 /**\r
 164                  * @name DropOutRight\r
 165                  * @description drops the element out right\r
 166                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 167                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 168                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 169                  * @type jQuery\r
 170                  * @cat Plugins/Interface\r
 171                  * @author Stefan Petre\r
 172                  */\r
 173                 DropOutRight : function (speed, callback, easing) {\r
 174                         return this.queue('interfaceFX',function(){\r
 175                                 new jQuery.fx.DropOutDirectiont(this, speed, callback, 'right', 'out', easing);\r
 176                         });\r
 177                 },\r
 178                 \r
 179                 /**\r
 180                  * @name DropInRight\r
 181                  * @description drops the element in right\r
 182                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 183                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 184                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 185                  * @type jQuery\r
 186                  * @cat Plugins/Interface\r
 187                  * @author Stefan Petre\r
 188                  */\r
 189                 DropInRight : function (speed, callback, easing) {\r
 190                         return this.queue('interfaceFX',function(){\r
 191                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'right', 'in', easing);\r
 192                         });\r
 193                 },\r
 194                 \r
 195                 /**\r
 196                  * @name DropToggleRight\r
 197                  * @description drops the element in/out right\r
 198                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 199                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 200                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 201                  * @type jQuery\r
 202                  * @cat Plugins/Interface\r
 203                  * @author Stefan Petre\r
 204                  */\r
 205                 DropToggleRight : function (speed, callback, easing) {\r
 206                         return this.queue('interfaceFX',function(){\r
 207                                 new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'right', 'toggle', easing);\r
 208                         });\r
 209                 }\r
 210         }\r
 211 );\r
 212 \r
 213 jQuery.fx.DropOutDirectiont = function (e, speed, callback, direction, type, easing)\r
 214 {\r
 215         if (!jQuery.fxCheckTag(e)) {\r
 216                 jQuery.dequeue(e, 'interfaceFX');\r
 217                 return false;\r
 218         }\r
 219         var z = this;\r
 220         z.el = jQuery(e);\r
 221         z.easing = typeof callback == 'string' ? callback : easing||null;\r
 222         z.oldStyle = {};\r
 223         z.oldStyle.position = z.el.css('position');\r
 224         z.oldStyle.top = z.el.css('top');\r
 225         z.oldStyle.left = z.el.css('left');\r
 226         if (!e.ifxFirstDisplay)\r
 227                 e.ifxFirstDisplay = z.el.css('display');\r
 228         if ( type == 'toggle') {\r
 229                 type = z.el.css('display') == 'none' ? 'in' : 'out';\r
 230         }\r
 231         z.el.show();\r
 232         \r
 233         if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {\r
 234                 z.el.css('position', 'relative');\r
 235         }\r
 236         z.type = type;\r
 237         callback = typeof callback == 'function' ? callback : null;\r
 238         /*sizes = ['em','px','pt','%'];\r
 239         for(i in sizes) {\r
 240                 if (z.oldStyle.top.indexOf(sizes[i])>0) {\r
 241                         z.topUnit = sizes[1];\r
 242                         z.topSize = parseFloat(z.oldStyle.top)||0;\r
 243                 }\r
 244                 if (z.oldStyle.left.indexOf(sizes[i])>0) {\r
 245                         z.leftUnit = sizes[1];\r
 246                         z.leftSize = parseFloat(z.oldStyle.left)||0;\r
 247                 }\r
 248         }*/\r
 249         \r
 250         directionIncrement = 1;\r
 251         switch (direction){\r
 252                 case 'up':\r
 253                         z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'top');\r
 254                         z.point = parseFloat(z.oldStyle.top)||0;\r
 255                         z.unit = z.topUnit;\r
 256                         directionIncrement = -1;\r
 257                 break;\r
 258                 case 'down':\r
 259                         z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'top');\r
 260                         z.point = parseFloat(z.oldStyle.top)||0;\r
 261                         z.unit = z.topUnit;\r
 262                 break;\r
 263                 case 'right':\r
 264                         z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'left');\r
 265                         z.point = parseFloat(z.oldStyle.left)||0;\r
 266                         z.unit = z.leftUnit;\r
 267                 break;\r
 268                 case 'left':\r
 269                         z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'left');\r
 270                         z.point = parseFloat(z.oldStyle.left)||0;\r
 271                         z.unit = z.leftUnit;\r
 272                         directionIncrement = -1;\r
 273                 break;\r
 274         }\r
 275         z.e2 = new jQuery.fx(\r
 276                 z.el.get(0),\r
 277                 jQuery.speed\r
 278                 (\r
 279                         speed, z.easing,\r
 280                         function()\r
 281                         {\r
 282                                 z.el.css(z.oldStyle);\r
 283                                 if (z.type == 'out') {\r
 284                                         z.el.css('display', 'none');\r
 285                                 } else \r
 286                                         z.el.css('display', z.el.get(0).ifxFirstDisplay == 'none' ? 'block' : z.el.get(0).ifxFirstDisplay);\r
 287                                 \r
 288                                 jQuery.dequeue(z.el.get(0), 'interfaceFX');\r
 289                         }\r
 290                  ),\r
 291                 'opacity'\r
 292         );\r
 293         if (type == 'in') {\r
 294                 z.e.custom(z.point+ 100*directionIncrement, z.point);\r
 295                 z.e2.custom(0,1);\r
 296         } else {\r
 297                 z.e.custom(z.point, z.point + 100*directionIncrement);\r
 298                 z.e2.custom(1,0);\r
 299         }\r
 300 };