]> git.sur5r.net Git - contagged/blobdiff - scripts/interface/ifxdrop.js
JavaScript updates (migration to JQuery + Interface)
[contagged] / scripts / interface / ifxdrop.js
diff --git a/scripts/interface/ifxdrop.js b/scripts/interface/ifxdrop.js
new file mode 100644 (file)
index 0000000..c51e317
--- /dev/null
@@ -0,0 +1,300 @@
+/**\r
+ * Interface Elements for jQuery\r
+ * FX - drop\r
+ * \r
+ * http://interface.eyecon.ro\r
+ * \r
+ * Copyright (c) 2006 Stefan Petre\r
+ * Dual licensed under the MIT (MIT-LICENSE.txt) \r
+ * and GPL (GPL-LICENSE.txt) licenses.\r
+ *   \r
+ *\r
+ */\r
+\r
+/**\r
+ * Applies a dropping effect to element\r
+ */\r
+jQuery.fn.extend(\r
+       {\r
+               /**\r
+                * @name DropOutDown\r
+                * @description drops the element out down\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropOutDown : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this, speed, callback, 'down', 'out', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropInDown\r
+                * @description drops the element in down\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropInDown : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'down', 'in', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropToggleDown\r
+                * @description drops the element in/out down\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropToggleDown : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'down', 'toggle', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropOutUp\r
+                * @description drops the element out up\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropOutUp : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this, speed, callback, 'up', 'out', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropInUp\r
+                * @description drops the element in up\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropInUp : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'up', 'in', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropToggleUp\r
+                * @description drops the element in/out up\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropToggleUp : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'up', 'toggle', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropOutLeft\r
+                * @description drops the element out left\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropOutLeft : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this, speed, callback, 'left', 'out', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropInLeft\r
+                * @description drops the element in left\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropInLeft : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'left', 'in', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropToggleLeft\r
+                * @description drops the element in/out left\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropToggleLeft : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'left', 'toggle', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropOutRight\r
+                * @description drops the element out right\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropOutRight : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this, speed, callback, 'right', 'out', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropInRight\r
+                * @description drops the element in right\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropInRight : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'right', 'in', easing);\r
+                       });\r
+               },\r
+               \r
+               /**\r
+                * @name DropToggleRight\r
+                * @description drops the element in/out right\r
+                * @param Mixed speed animation speed, integer for miliseconds, string ['slow' | 'normal' | 'fast']\r
+                * @param Function callback (optional) A function to be executed whenever the animation completes.\r
+                * @param String easing (optional) The name of the easing effect that you want to use.\r
+                * @type jQuery\r
+                * @cat Plugins/Interface\r
+                * @author Stefan Petre\r
+                */\r
+               DropToggleRight : function (speed, callback, easing) {\r
+                       return this.queue('interfaceFX',function(){\r
+                               new jQuery.fx.DropOutDirectiont(this,  speed, callback, 'right', 'toggle', easing);\r
+                       });\r
+               }\r
+       }\r
+);\r
+\r
+jQuery.fx.DropOutDirectiont = function (e, speed, callback, direction, type, easing)\r
+{\r
+       if (!jQuery.fxCheckTag(e)) {\r
+               jQuery.dequeue(e, 'interfaceFX');\r
+               return false;\r
+       }\r
+       var z = this;\r
+       z.el = jQuery(e);\r
+       z.easing = typeof callback == 'string' ? callback : easing||null;\r
+       z.oldStyle = {};\r
+       z.oldStyle.position = z.el.css('position');\r
+       z.oldStyle.top = z.el.css('top');\r
+       z.oldStyle.left = z.el.css('left');\r
+       if (!e.ifxFirstDisplay)\r
+               e.ifxFirstDisplay = z.el.css('display');\r
+       if ( type == 'toggle') {\r
+               type = z.el.css('display') == 'none' ? 'in' : 'out';\r
+       }\r
+       z.el.show();\r
+       \r
+       if (z.oldStyle.position != 'relative' && z.oldStyle.position != 'absolute') {\r
+               z.el.css('position', 'relative');\r
+       }\r
+       z.type = type;\r
+       callback = typeof callback == 'function' ? callback : null;\r
+       /*sizes = ['em','px','pt','%'];\r
+       for(i in sizes) {\r
+               if (z.oldStyle.top.indexOf(sizes[i])>0) {\r
+                       z.topUnit = sizes[1];\r
+                       z.topSize = parseFloat(z.oldStyle.top)||0;\r
+               }\r
+               if (z.oldStyle.left.indexOf(sizes[i])>0) {\r
+                       z.leftUnit = sizes[1];\r
+                       z.leftSize = parseFloat(z.oldStyle.left)||0;\r
+               }\r
+       }*/\r
+       \r
+       directionIncrement = 1;\r
+       switch (direction){\r
+               case 'up':\r
+                       z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'top');\r
+                       z.point = parseFloat(z.oldStyle.top)||0;\r
+                       z.unit = z.topUnit;\r
+                       directionIncrement = -1;\r
+               break;\r
+               case 'down':\r
+                       z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'top');\r
+                       z.point = parseFloat(z.oldStyle.top)||0;\r
+                       z.unit = z.topUnit;\r
+               break;\r
+               case 'right':\r
+                       z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'left');\r
+                       z.point = parseFloat(z.oldStyle.left)||0;\r
+                       z.unit = z.leftUnit;\r
+               break;\r
+               case 'left':\r
+                       z.e = new jQuery.fx(z.el.get(0), jQuery.speed(speed - 15, z.easing,callback), 'left');\r
+                       z.point = parseFloat(z.oldStyle.left)||0;\r
+                       z.unit = z.leftUnit;\r
+                       directionIncrement = -1;\r
+               break;\r
+       }\r
+       z.e2 = new jQuery.fx(\r
+               z.el.get(0),\r
+               jQuery.speed\r
+               (\r
+                       speed, z.easing,\r
+                       function()\r
+                       {\r
+                               z.el.css(z.oldStyle);\r
+                               if (z.type == 'out') {\r
+                                       z.el.css('display', 'none');\r
+                               } else \r
+                                       z.el.css('display', z.el.get(0).ifxFirstDisplay == 'none' ? 'block' : z.el.get(0).ifxFirstDisplay);\r
+                               \r
+                               jQuery.dequeue(z.el.get(0), 'interfaceFX');\r
+                       }\r
+                ),\r
+               'opacity'\r
+       );\r
+       if (type == 'in') {\r
+               z.e.custom(z.point+ 100*directionIncrement, z.point);\r
+               z.e2.custom(0,1);\r
+       } else {\r
+               z.e.custom(z.point, z.point + 100*directionIncrement);\r
+               z.e2.custom(1,0);\r
+       }\r
+};
\ No newline at end of file