From 1bdd3090132d82ed4317d7ca2c23b49e68e72d74 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 7 Jan 2009 16:07:23 +0000 Subject: [PATCH] effects: improved syntax, arguments, fixes #3674 --- ui/effects.core.js | 112 ++++++++++++++++++++++++++++----------------- 1 file changed, 69 insertions(+), 43 deletions(-) diff --git a/ui/effects.core.js b/ui/effects.core.js index f31c2970e..cefc47667 100644 --- a/ui/effects.core.js +++ b/ui/effects.core.js @@ -13,20 +13,26 @@ $.effects = $.effects || {}; //Add the 'effects' scope $.extend($.effects, { version: "@VERSION", - save: function(el, set) { - for(var i=0;i'); - var wrapper = el.parent(); - if (el.css('position') == 'static'){ - wrapper.css({position: 'relative'}); - el.css({position: 'relative'}); + + // Wraps the element around a wrapper that copies position properties + createWrapper: function(element) { + + //if the element is already wrapped, return it + if (element.parent().is('.ui-effects-wrapper')) + return element.parent(); + + //Cache width,height and float properties of the element, and create a wrapper around it + var props = { width: element.outerWidth(true), height: element.outerHeight(true), 'float': element.css('float') }; + element.wrap('
'); + var wrapper = element.parent(); + + //Transfer the positioning of the element to the wrapper + if (element.css('position') == 'static') { + wrapper.css({ position: 'relative' }); + element.css({ position: 'relative'} ); } else { - var top = el.css('top'); if(isNaN(parseInt(top))) top = 'auto'; - var left = el.css('left'); if(isNaN(parseInt(left))) left = 'auto'; - wrapper.css({ position: el.css('position'), top: top, left: left, zIndex: el.css('z-index') }).show(); - el.css({position: 'relative', top:0, left:0}); + var top = element.css('top'); if(isNaN(parseInt(top,10))) top = 'auto'; + var left = element.css('left'); if(isNaN(parseInt(left,10))) left = 'auto'; + wrapper.css({ position: element.css('position'), top: top, left: left, zIndex: element.css('z-index') }).show(); + element.css({position: 'relative', top: 0, left: 0 }); } + wrapper.css(props); return wrapper; }, - removeWrapper: function(el) { - if (el.parent().attr('id') == 'fxWrapper') - return el.parent().replaceWith(el); - return el; + + removeWrapper: function(element) { + if (element.parent().is('.ui-effects-wrapper')) + return element.parent().replaceWith(element); + return element; }, - setTransition: function(el, list, factor, val) { - val = val || {}; - $.each(list,function(i, x){ - unit = el.cssUnit(x); - if (unit[0] > 0) val[x] = unit[0] * factor + unit[1]; + + setTransition: function(element, list, factor, value) { + value = value || {}; + $.each(list, function(i, x){ + unit = element.cssUnit(x); + if (unit[0] > 0) value[x] = unit[0] * factor + unit[1]; }); - return val; + return value; }, + + //Base function to animate from one class to another in a seamless transition animateClass: function(value, duration, easing, callback) { var cb = (typeof easing == "function" ? easing : (callback ? callback : null)); - var ea = (typeof easing == "object" ? easing : null); + var ea = (typeof easing == "string" ? easing : null); return this.each(function() { @@ -115,6 +134,7 @@ $.extend($.effects, { //Extend the methods of jQuery $.fn.extend({ + //Save old methods _show: $.fn.show, _hide: $.fn.hide, @@ -122,35 +142,40 @@ $.fn.extend({ _addClass: $.fn.addClass, _removeClass: $.fn.removeClass, _toggleClass: $.fn.toggleClass, - // New ec methods - effect: function(fx,o,speed,callback) { - return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options: o || {}, duration: speed, callback: callback }) : null; + + // New effect methods + effect: function(fx, options, speed, callback) { + return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options: options || {}, duration: speed, callback: callback }) : null; }, + show: function() { - if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|fast)/.test(arguments[0]))) + if(!arguments[0] || (arguments[0].constructor == Number || (/(slow|normal|fast)/).test(arguments[0]))) return this._show.apply(this, arguments); else { var o = arguments[1] || {}; o['mode'] = 'show'; return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]); } }, + hide: function() { - if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|fast)/.test(arguments[0]))) + if(!arguments[0] || (arguments[0].constructor == Number || (/(slow|normal|fast)/).test(arguments[0]))) return this._hide.apply(this, arguments); else { var o = arguments[1] || {}; o['mode'] = 'hide'; return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]); } }, + toggle: function(){ - if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|fast)/.test(arguments[0])) || (arguments[0].constructor == Function)) + if(!arguments[0] || (arguments[0].constructor == Number || (/(slow|normal|fast)/).test(arguments[0])) || (arguments[0].constructor == Function)) return this.__toggle.apply(this, arguments); else { var o = arguments[1] || {}; o['mode'] = 'toggle'; return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]); } }, - addClass: function(classNames,speed,easing,callback) { + + addClass: function(classNames, speed, easing, callback) { return speed ? $.effects.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames); }, removeClass: function(classNames,speed,easing,callback) { @@ -165,6 +190,7 @@ $.fn.extend({ switchClass: function() { return this.morph.apply(this, arguments); }, + // helper functions cssUnit: function(key) { var style = this.css(key), val = []; @@ -184,18 +210,18 @@ $.fn.extend({ // We override the animation for all of these color styles $.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){ - $.fx.step[attr] = function(fx){ + $.fx.step[attr] = function(fx) { if ( fx.state == 0 ) { fx.start = getColor( fx.elem, attr ); fx.end = getRGB( fx.end ); } fx.elem.style[attr] = "rgb(" + [ - Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0), - Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0), - Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0) + Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0],10), 255), 0), + Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1],10), 255), 0), + Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2],10), 255), 0) ].join(",") + ")"; - } + }; }); // Color Conversion functions from highlightFade @@ -212,7 +238,7 @@ function getRGB(color) { // Look for rgb(num,num,num) if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color)) - return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])]; + return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)]; // Look for rgb(num%,num%,num%) if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color)) -- 2.39.5