]> source.dussan.org Git - jquery-ui.git/commitdiff
Effects core: Reorganized code, no actual changes.
authorScott González <scott.gonzalez@gmail.com>
Tue, 10 Nov 2009 15:55:41 +0000 (15:55 +0000)
committerScott González <scott.gonzalez@gmail.com>
Tue, 10 Nov 2009 15:55:41 +0000 (15:55 +0000)
ui/jquery.effects.core.js

index 71a959c34ff0b2cc0666864261923546b737d901..96eb44a4c7f5c72b242e9a2435ffdb9efce7f654 100644 (file)
  */
 ;jQuery.effects || (function($) {
 
-$.effects = {
-       version: "@VERSION",
+$.effects = {};
 
-       // Saves a set of properties in a data storage
-       save: function(element, set) {
-               for(var i=0; i < set.length; i++) {
-                       if(set[i] !== null) element.data("ec.storage."+set[i], element[0].style[set[i]]);
-               }
-       },
 
-       // Restores a set of previously saved properties from a data storage
-       restore: function(element, set) {
-               for(var i=0; i < set.length; i++) {
-                       if(set[i] !== null) element.css(set[i], element.data("ec.storage."+set[i]));
+
+/******************************************************************************/
+/****************************** COLOR ANIMATIONS ******************************/
+/******************************************************************************/
+
+// override the animation for color styles
+$.each(['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor',
+       'borderRightColor', 'borderTopColor', 'color', 'outlineColor'],
+function(i, attr) {
+       $.fx.step[attr] = function(fx) {
+               if (!fx.colorInit) {
+                       fx.start = getColor(fx.elem, attr);
+                       fx.end = getRGB(fx.end);
+                       fx.colorInit = true;
                }
-       },
 
-       setMode: function(el, mode) {
-               if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle
-               return mode;
-       },
+               fx.elem.style[attr] = 'rgb(' +
+                       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) + ')';
+       };
+});
 
-       getBaseline: function(origin, original) { // Translates a [top,left] array into a baseline value
-               // this should be a little more flexible in the future to handle a string & hash
-               var y, x;
-               switch (origin[0]) {
-                       case 'top': y = 0; break;
-                       case 'middle': y = 0.5; break;
-                       case 'bottom': y = 1; break;
-                       default: y = origin[0] / original.height;
-               };
-               switch (origin[1]) {
-                       case 'left': x = 0; break;
-                       case 'center': x = 0.5; break;
-                       case 'right': x = 1; break;
-                       default: x = origin[1] / original.width;
-               };
-               return {x: x, y: y};
-       },
+// Color Conversion functions from highlightFade
+// By Blair Mitchelmore
+// http://jquery.offput.ca/highlightFade/
 
-       // Wraps the element around a wrapper that copies position properties
-       createWrapper: function(element) {
+// Parse strings looking for color tuples [255,255,255]
+function getRGB(color) {
+               var result;
 
-               //if the element is already wrapped, return it
-               if (element.parent().is('.ui-effects-wrapper'))
-                       return element.parent();
+               // Check if we're already dealing with an array of colors
+               if ( color && color.constructor == Array && color.length == 3 )
+                               return color;
 
-               //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('<div class="ui-effects-wrapper" style="font-size:100%;background:transparent;border:none;margin:0;padding:0"></div>');
-               var wrapper = element.parent();
+               // 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],10), parseInt(result[2],10), parseInt(result[3],10)];
 
-               //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 = 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 });
-               }
+               // 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))
+                               return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
 
-               wrapper.css(props);
-               return wrapper;
-       },
+               // Look for #a0b1c2
+               if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
+                               return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
 
-       removeWrapper: function(element) {
-               if (element.parent().is('.ui-effects-wrapper'))
-                       return element.parent().replaceWith(element);
-               return element;
-       },
+               // Look for #fff
+               if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
+                               return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
 
-       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 value;
-       },
+               // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
+               if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
+                               return colors['transparent'];
 
-       //Base function to animate from one class to another in a seamless transition
-       animateClass: function(value, duration, easing, callback) {
-               if ($.isFunction(easing)) {
-                       callback = easing;
-                       easing = null;
-               }
+               // Otherwise, we're most likely dealing with a named color
+               return colors[$.trim(color).toLowerCase()];
+}
 
-               return this.each(function() {
+function getColor(elem, attr) {
+               var color;
 
-                       var that = $(this),
-                               originalStyleAttr = that.attr('style') || ' ',
-                               originalStyle = filterStyles(getElementStyles.call(this)),
-                               newStyle,
-                               className = that.attr('className');
+               do {
+                               color = $.curCSS(elem, attr);
 
-                       $.each(classAnimationActions, function(i, action) {
-                               if (value[action]) {
-                                       that[action + 'Class'](value[action]);
-                               }
-                       });
-                       newStyle = filterStyles(getElementStyles.call(this));
-                       that.attr('className', className);
+                               // Keep going until we find an element that has color, or we hit the body
+                               if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
+                                               break;
 
-                       that.animate(styleDifference(originalStyle, newStyle), duration, easing, function() {
-                               $.each(classAnimationActions, function(i, action) {
-                                       if (value[action]) { that[action + 'Class'](value[action]); }
-                               });
-                               // work around bug in IE by clearing the cssText before setting it
-                               if (typeof that.attr('style') == 'object') {
-                                       that.attr('style').cssText = '';
-                                       that.attr('style').cssText = originalStyleAttr;
-                               } else {
-                                       that.attr('style', originalStyleAttr);
-                               }
-                               if (callback) { callback.apply(this, arguments); }
-                       });
-               });
-       }
+                               attr = "backgroundColor";
+               } while ( elem = elem.parentNode );
+
+               return getRGB(color);
 };
 
-// start class animations
+// Some named colors to work with
+// From Interface by Stefan Petre
+// http://interface.eyecon.ro/
+
+var colors = {
+       aqua:[0,255,255],
+       azure:[240,255,255],
+       beige:[245,245,220],
+       black:[0,0,0],
+       blue:[0,0,255],
+       brown:[165,42,42],
+       cyan:[0,255,255],
+       darkblue:[0,0,139],
+       darkcyan:[0,139,139],
+       darkgrey:[169,169,169],
+       darkgreen:[0,100,0],
+       darkkhaki:[189,183,107],
+       darkmagenta:[139,0,139],
+       darkolivegreen:[85,107,47],
+       darkorange:[255,140,0],
+       darkorchid:[153,50,204],
+       darkred:[139,0,0],
+       darksalmon:[233,150,122],
+       darkviolet:[148,0,211],
+       fuchsia:[255,0,255],
+       gold:[255,215,0],
+       green:[0,128,0],
+       indigo:[75,0,130],
+       khaki:[240,230,140],
+       lightblue:[173,216,230],
+       lightcyan:[224,255,255],
+       lightgreen:[144,238,144],
+       lightgrey:[211,211,211],
+       lightpink:[255,182,193],
+       lightyellow:[255,255,224],
+       lime:[0,255,0],
+       magenta:[255,0,255],
+       maroon:[128,0,0],
+       navy:[0,0,128],
+       olive:[128,128,0],
+       orange:[255,165,0],
+       pink:[255,192,203],
+       purple:[128,0,128],
+       violet:[128,0,128],
+       red:[255,0,0],
+       silver:[192,192,192],
+       white:[255,255,255],
+       yellow:[255,255,0],
+       transparent: [255,255,255]
+};
+
+
+
+/******************************************************************************/
+/****************************** CLASS ANIMATIONS ******************************/
+/******************************************************************************/
 
 var classAnimationActions = ['add', 'remove', 'toggle'];
 
@@ -202,7 +213,164 @@ function styleDifference(oldStyle, newStyle) {
        return diff;
 }
 
-// end class animations
+$.effects.animateClass = function(value, duration, easing, callback) {
+       if ($.isFunction(easing)) {
+               callback = easing;
+               easing = null;
+       }
+
+       return this.each(function() {
+
+               var that = $(this),
+                       originalStyleAttr = that.attr('style') || ' ',
+                       originalStyle = filterStyles(getElementStyles.call(this)),
+                       newStyle,
+                       className = that.attr('className');
+
+               $.each(classAnimationActions, function(i, action) {
+                       if (value[action]) {
+                               that[action + 'Class'](value[action]);
+                       }
+               });
+               newStyle = filterStyles(getElementStyles.call(this));
+               that.attr('className', className);
+
+               that.animate(styleDifference(originalStyle, newStyle), duration, easing, function() {
+                       $.each(classAnimationActions, function(i, action) {
+                               if (value[action]) { that[action + 'Class'](value[action]); }
+                       });
+                       // work around bug in IE by clearing the cssText before setting it
+                       if (typeof that.attr('style') == 'object') {
+                               that.attr('style').cssText = '';
+                               that.attr('style').cssText = originalStyleAttr;
+                       } else {
+                               that.attr('style', originalStyleAttr);
+                       }
+                       if (callback) { callback.apply(this, arguments); }
+               });
+       });
+};
+
+$.fn.extend({
+       _addClass: $.fn.addClass,
+       addClass: function(classNames, speed, easing, callback) {
+               return speed ? $.effects.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
+       },
+
+       _removeClass: $.fn.removeClass,
+       removeClass: function(classNames,speed,easing,callback) {
+               return speed ? $.effects.animateClass.apply(this, [{ remove: classNames },speed,easing,callback]) : this._removeClass(classNames);
+       },
+
+       _toggleClass: $.fn.toggleClass,
+       toggleClass: function(classNames, force, speed, easing, callback) {
+               if ( typeof force == "boolean" || force === undefined ) {
+                       if ( !speed ) {
+                               // without speed parameter;
+                               return this._toggleClass(classNames, force);
+                       } else {
+                               return $.effects.animateClass.apply(this, [(force?{add:classNames}:{remove:classNames}),speed,easing,callback]);
+                       }
+               } else {
+                       // without switch parameter;
+                       return $.effects.animateClass.apply(this, [{ toggle: classNames },force,speed,easing]);
+               }
+       },
+
+       switchClass: function(remove,add,speed,easing,callback) {
+               return $.effects.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
+       },
+});
+
+
+
+/******************************************************************************/
+/*********************************** EFFECTS **********************************/
+/******************************************************************************/
+
+$.extend($.effects, {
+       version: "@VERSION",
+
+       // Saves a set of properties in a data storage
+       save: function(element, set) {
+               for(var i=0; i < set.length; i++) {
+                       if(set[i] !== null) element.data("ec.storage."+set[i], element[0].style[set[i]]);
+               }
+       },
+
+       // Restores a set of previously saved properties from a data storage
+       restore: function(element, set) {
+               for(var i=0; i < set.length; i++) {
+                       if(set[i] !== null) element.css(set[i], element.data("ec.storage."+set[i]));
+               }
+       },
+
+       setMode: function(el, mode) {
+               if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle
+               return mode;
+       },
+
+       getBaseline: function(origin, original) { // Translates a [top,left] array into a baseline value
+               // this should be a little more flexible in the future to handle a string & hash
+               var y, x;
+               switch (origin[0]) {
+                       case 'top': y = 0; break;
+                       case 'middle': y = 0.5; break;
+                       case 'bottom': y = 1; break;
+                       default: y = origin[0] / original.height;
+               };
+               switch (origin[1]) {
+                       case 'left': x = 0; break;
+                       case 'center': x = 0.5; break;
+                       case 'right': x = 1; break;
+                       default: x = origin[1] / original.width;
+               };
+               return {x: x, y: y};
+       },
+
+       // 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('<div class="ui-effects-wrapper" style="font-size:100%;background:transparent;border:none;margin:0;padding:0"></div>');
+               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 = 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(element) {
+               if (element.parent().is('.ui-effects-wrapper'))
+                       return element.parent().replaceWith(element);
+               return element;
+       },
+
+       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 value;
+       }
+});
+
 
 function _normalizeArguments(effect, options, speed, callback) {
        // shift params for method overloading
@@ -283,35 +451,6 @@ $.fn.extend({
                }
        },
 
-       _addClass: $.fn.addClass,
-       addClass: function(classNames, speed, easing, callback) {
-               return speed ? $.effects.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
-       },
-
-       _removeClass: $.fn.removeClass,
-       removeClass: function(classNames,speed,easing,callback) {
-               return speed ? $.effects.animateClass.apply(this, [{ remove: classNames },speed,easing,callback]) : this._removeClass(classNames);
-       },
-
-       _toggleClass: $.fn.toggleClass,
-       toggleClass: function(classNames, force, speed, easing, callback) {
-               if ( typeof force == "boolean" || force === undefined ) {
-                       if ( !speed ) {
-                               // without speed parameter;
-                               return this._toggleClass(classNames, force);
-                       } else {
-                               return $.effects.animateClass.apply(this, [(force?{add:classNames}:{remove:classNames}),speed,easing,callback]);
-                       }
-               } else {
-                       // without switch parameter;
-                       return $.effects.animateClass.apply(this, [{ toggle: classNames },force,speed,easing]);
-               }
-       },
-
-       switchClass: function(remove,add,speed,easing,callback) {
-               return $.effects.animateClass.apply(this, [{ add: add, remove: remove },speed,easing,callback]);
-       },
-
        // helper functions
        cssUnit: function(key) {
                var style = this.css(key), val = [];
@@ -324,126 +463,10 @@ $.fn.extend({
 });
 
 
-// override the animation for color styles
-$.each(['backgroundColor', 'borderColor', 'borderBottomColor', 'borderLeftColor',
-       'borderRightColor', 'borderTopColor', 'color', 'outlineColor'],
-function(i, attr) {
-       $.fx.step[attr] = function(fx) {
-               if (!fx.colorInit) {
-                       fx.start = getColor(fx.elem, attr);
-                       fx.end = getRGB(fx.end);
-                       fx.colorInit = true;
-               }
-
-               fx.elem.style[attr] = 'rgb(' +
-                       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) + ')';
-       };
-});
-
-// Color Conversion functions from highlightFade
-// By Blair Mitchelmore
-// http://jquery.offput.ca/highlightFade/
-
-// Parse strings looking for color tuples [255,255,255]
-function getRGB(color) {
-               var result;
-
-               // Check if we're already dealing with an array of colors
-               if ( color && color.constructor == Array && color.length == 3 )
-                               return 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],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))
-                               return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
-
-               // Look for #a0b1c2
-               if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
-                               return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
 
-               // Look for #fff
-               if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
-                               return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
-
-               // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
-               if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
-                               return colors['transparent'];
-
-               // Otherwise, we're most likely dealing with a named color
-               return colors[$.trim(color).toLowerCase()];
-}
-
-function getColor(elem, attr) {
-               var color;
-
-               do {
-                               color = $.curCSS(elem, attr);
-
-                               // Keep going until we find an element that has color, or we hit the body
-                               if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
-                                               break;
-
-                               attr = "backgroundColor";
-               } while ( elem = elem.parentNode );
-
-               return getRGB(color);
-};
-
-// Some named colors to work with
-// From Interface by Stefan Petre
-// http://interface.eyecon.ro/
-
-var colors = {
-       aqua:[0,255,255],
-       azure:[240,255,255],
-       beige:[245,245,220],
-       black:[0,0,0],
-       blue:[0,0,255],
-       brown:[165,42,42],
-       cyan:[0,255,255],
-       darkblue:[0,0,139],
-       darkcyan:[0,139,139],
-       darkgrey:[169,169,169],
-       darkgreen:[0,100,0],
-       darkkhaki:[189,183,107],
-       darkmagenta:[139,0,139],
-       darkolivegreen:[85,107,47],
-       darkorange:[255,140,0],
-       darkorchid:[153,50,204],
-       darkred:[139,0,0],
-       darksalmon:[233,150,122],
-       darkviolet:[148,0,211],
-       fuchsia:[255,0,255],
-       gold:[255,215,0],
-       green:[0,128,0],
-       indigo:[75,0,130],
-       khaki:[240,230,140],
-       lightblue:[173,216,230],
-       lightcyan:[224,255,255],
-       lightgreen:[144,238,144],
-       lightgrey:[211,211,211],
-       lightpink:[255,182,193],
-       lightyellow:[255,255,224],
-       lime:[0,255,0],
-       magenta:[255,0,255],
-       maroon:[128,0,0],
-       navy:[0,0,128],
-       olive:[128,128,0],
-       orange:[255,165,0],
-       pink:[255,192,203],
-       purple:[128,0,128],
-       violet:[128,0,128],
-       red:[255,0,0],
-       silver:[192,192,192],
-       white:[255,255,255],
-       yellow:[255,255,0],
-       transparent: [255,255,255]
-};
+/******************************************************************************/
+/*********************************** EASING ***********************************/
+/******************************************************************************/
 
 /*
  * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/