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

   1 /**\r
   2  * Interface Elements for jQuery\r
   3  * FX - open/close/switch\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 an open/close animation to element\r
  16  */\r
  17 jQuery.fn.extend(\r
  18         {\r
  19                 /**\r
  20                  * @name CloseVertically\r
  21                  * @description closes the element vertically\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                 CloseVertically : function (speed, callback, easing) {\r
  30                         return this.queue('interfaceFX', function(){\r
  31                                 new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'close', easing);\r
  32                         });\r
  33                 },\r
  34                 \r
  35                 /**\r
  36                  * @name CloseHorizontally\r
  37                  * @description closes the element horizontally\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                 CloseHorizontally : function (speed, callback, easing) {\r
  46                         return this.queue('interfaceFX', function(){\r
  47                                 new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'close', easing);\r
  48                         });\r
  49                 },\r
  50                 \r
  51                 /**\r
  52                  * @name SwitchHorizontally\r
  53                  * @description opens/closes the element horizontally\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                 SwitchHorizontally : function (speed, callback, easing) \r
  62                 {\r
  63                         return this.queue('interfaceFX', function(){\r
  64                                 if (jQuery.css(this, 'display') == 'none') {\r
  65                                         new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'open', easing);\r
  66                                 } else {\r
  67                                         new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'close', easing);\r
  68                                 }\r
  69                         });\r
  70                 },\r
  71                 \r
  72                 /**\r
  73                  * @name SwitchVertically\r
  74                  * @description opens/closes the element vertically\r
  75                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  76                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  77                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  78                  * @type jQuery\r
  79                  * @cat Plugins/Interface\r
  80                  * @author Stefan Petre\r
  81                  */\r
  82                 SwitchVertically : function (speed, callback, easing) \r
  83                 {\r
  84                         return this.queue('interfaceFX', function(){\r
  85                                 if (jQuery.css(this, 'display') == 'none') {\r
  86                                         new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'open', easing);\r
  87                                 } else {\r
  88                                         new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'close', easing);\r
  89                                 }\r
  90                         });\r
  91                 },\r
  92                 \r
  93                 /**\r
  94                  * @name OpenVertically\r
  95                  * @description opens the element vertically\r
  96                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
  97                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
  98                  * @param String easing (optional) The name of the easing effect that you want to use.\r
  99                  * @type jQuery\r
 100                  * @cat Plugins/Interface\r
 101                  * @author Stefan Petre\r
 102                  */\r
 103                 OpenVertically : function (speed, callback, easing) {\r
 104                         return this.queue('interfaceFX', function(){\r
 105                                 new jQuery.fx.OpenClose(this, speed, callback, 'vertically', 'open', easing);\r
 106                         });\r
 107                 },\r
 108                 \r
 109                 /**\r
 110                  * @name OpenHorizontally\r
 111                  * @description opens the element horizontally\r
 112                  * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
 113                  * @param Function callback (optional) A function to be executed whenever the animation completes.\r
 114                  * @param String easing (optional) The name of the easing effect that you want to use.\r
 115                  * @type jQuery\r
 116                  * @cat Plugins/Interface\r
 117                  * @author Stefan Petre\r
 118                  */\r
 119                 OpenHorizontally : function (speed, callback, easing) {\r
 120                         return this.queue('interfaceFX', function(){\r
 121                                 new jQuery.fx.OpenClose(this, speed, callback, 'horizontally', 'open', easing);\r
 122                         });\r
 123                 }\r
 124         }\r
 125 );\r
 126 \r
 127 jQuery.fx.OpenClose = function (e, speed, callback, direction, type, easing)\r
 128 {\r
 129         if (!jQuery.fxCheckTag(e)) {\r
 130                 jQuery.dequeue(e, 'interfaceFX');\r
 131                 return false;\r
 132         }\r
 133         var z = this;\r
 134         var restoreStyle = false;\r
 135         z.el = jQuery(e);\r
 136         z.easing = typeof callback == 'string' ? callback : easing||null;\r
 137         z.callback = typeof callback == 'function' ? callback : null;\r
 138         z.type = type;\r
 139         z.speed = speed;\r
 140         z.oldP = jQuery.iUtil.getSize(e);\r
 141         z.oldStyle = {};\r
 142         z.oldStyle.position = z.el.css('position');\r
 143         z.oldStyle.display = z.el.css('display');\r
 144         if (z.oldStyle.display == 'none') {\r
 145                 oldVisibility = z.el.css('visibility');\r
 146                 z.el.show();\r
 147                 restoreStyle = true;\r
 148         }\r
 149         z.oldStyle.top = z.el.css('top');\r
 150         z.oldStyle.left = z.el.css('left');\r
 151         if (restoreStyle) {\r
 152                 z.el.hide();\r
 153                 z.el.css('visibility', oldVisibility);\r
 154         }\r
 155         z.oldStyle.width = z.oldP.w + 'px';\r
 156         z.oldStyle.height = z.oldP.h + 'px';\r
 157         z.oldStyle.overflow = z.el.css('overflow');\r
 158         z.oldP.top = parseInt(z.oldStyle.top)||0;\r
 159         z.oldP.left = parseInt(z.oldStyle.left)||0;\r
 160         //z.el.show();\r
 161         \r
 162         if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {\r
 163                 z.el.css('position', 'relative');\r
 164         }\r
 165         z.el.css('overflow', 'hidden')\r
 166                 .css('height', type == 'open' && direction == 'vertically' ? 1 : z.oldP.h + 'px')\r
 167                 .css('width', type == 'open' && direction == 'horizontally' ? 1 : z.oldP.w + 'px');\r
 168         \r
 169         z.complete = function()\r
 170         {\r
 171                 z.el.css(z.oldStyle);\r
 172                 if (z.type == 'close')\r
 173                         z.el.hide();\r
 174                 else \r
 175                         z.el.show();\r
 176                 jQuery.dequeue(z.el.get(0), 'interfaceFX');\r
 177         };\r
 178         \r
 179         switch (direction) {\r
 180                 case 'vertically':\r
 181                         z.eh = new jQuery.fx(\r
 182                                 z.el.get(0),\r
 183                                 jQuery.speed(speed-15, z.easing, callback),\r
 184                                 'height'\r
 185                         );\r
 186                         z.et = new jQuery.fx(\r
 187                                 z.el.get(0),\r
 188                                 jQuery.speed(\r
 189                                         z.speed,\r
 190                                         z.easing,\r
 191                                         z.complete\r
 192                                 ),\r
 193                                 'top'\r
 194                         );\r
 195                         if (z.type == 'close') {\r
 196                                 z.eh.custom(z.oldP.h,0);\r
 197                                 z.et.custom(z.oldP.top, z.oldP.top + z.oldP.h/2);\r
 198                         } else {\r
 199                                 z.eh.custom(0, z.oldP.h);\r
 200                                 z.et.custom(z.oldP.top + z.oldP.h/2, z.oldP.top);\r
 201                         }\r
 202                 break;\r
 203                 case 'horizontally':\r
 204                         z.eh = new jQuery.fx(\r
 205                                 z.el.get(0),\r
 206                                 jQuery.speed(speed-15, z.easing, callback),\r
 207                                 'width'\r
 208                         );\r
 209                         z.et = new jQuery.fx(\r
 210                                 z.el.get(0),\r
 211                                 jQuery.speed(\r
 212                                         z.speed,\r
 213                                         z.easing,\r
 214                                         z.complete\r
 215                                 ),\r
 216                                 'left'\r
 217                         );\r
 218                         if (z.type == 'close') {\r
 219                                 z.eh.custom(z.oldP.w,0);\r
 220                                 z.et.custom(z.oldP.left, z.oldP.left + z.oldP.w/2);\r
 221                         } else {\r
 222                                 z.eh.custom(0, z.oldP.w);\r
 223                                 z.et.custom(z.oldP.left + z.oldP.w/2, z.oldP.left);\r
 224                         }\r
 225                 break;\r
 226         }\r
 227 };