Skip to content

Commit

Permalink
Added RGBA support.
Browse files Browse the repository at this point in the history 
See demo: http://pioupioum.fr/sandbox/jquery-color/
  • Loading branch information
@piouPiouM
piouPiouM committed Feb 17, 2010
1 parent a17222c commit 92ee455
Showing 1 changed file with 85 additions and 23 deletions.
108 changes: 85 additions & 23 deletions jquery.color.js
View file
Expand Up @@ -2,58 +2,104 @@
* jQuery Color Animations
* Copyright 2007 John Resig
* Released under the MIT and GPL licenses.
*
* RGBA support by Mehdi Kabab <http://pioupioum.fr>
*/

(function(jQuery){
jQuery.extend(jQuery.support, {
"rgba": supportsRGBA()
});

// We override the animation for all of these color styles
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
jQuery.fx.step[attr] = function(fx){
var tuples = [];
if ( !fx.colorInit ) {
fx.start = getColor( fx.elem, attr );
fx.end = getRGB( fx.end );
fx.alphavalue = {
start: 4 === fx.start.length,
end: 4 === fx.end.length
};
if ( !fx.alphavalue.start ) {
fx.start.push( 1 );
}
if ( !fx.alphavalue.end ) {
fx.end.push( 1 );
}
if ( jQuery.support.rgba &&
(!fx.alphavalue.start && fx.alphavalue.end) || // RGB => RGBA
(fx.alphavalue.start && fx.alphavalue.end) || // RGBA => RGBA
(fx.alphavalue.start && !fx.alphavalue.end) // RGBA => RGB
) {
fx.colorModel = 'rgba';
} else {
fx.colorModel = 'rgb';
}
fx.colorInit = true;
}

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)
].join(",") + ")";
}
tuples.push( Math.max(Math.min( parseInt( (fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0) ); // R
tuples.push( Math.max(Math.min( parseInt( (fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0) ); // G
tuples.push( Math.max(Math.min( parseInt( (fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0) ); // B

if ( fx.colorModel == 'rgba' ) {
// Alpha
tuples.push( Math.max(Math.min( parseFloat((fx.pos * (fx.end[3] - fx.start[3])) + fx.start[3]), 1), 0).toFixed(2) );
}

fx.elem.style[attr] = fx.colorModel + "(" + tuples.join(",") + ")";
};
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
// Parse strings looking for color tuples [255,255,255[,1]]
function getRGB(color) {
var result;
var result, ret,
ralpha = '(?:,\\s*((?:1|0)(?:\\.0+)?|(?:0?\\.[0-9]+))\\s*)?\\)',
rrgbdecimal = new RegExp( 'rgb(a)?\\(\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*,\\s*([0-9]{1,3})\\s*' + ralpha ),
rrgbpercent = new RegExp( 'rgb(a)?\\(\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*,\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*,\\s*([0-9]+(?:\\.[0-9]+)?)\\%\\s*' + ralpha );

// Check if we're already dealing with an array of colors
if ( color && color.constructor == Array && color.length == 3 )
if ( color && color.constructor == Array && color.length >= 3 && color.length <= 4 ) {
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]), parseInt(result[2]), parseInt(result[3])];

// 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))
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))
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'];
// Look for rgb[a](num,num,num[,num])
if (result = rrgbdecimal.exec(color)) {
ret = [parseInt(result[2]), parseInt(result[3]), parseInt(result[4])];
// is rgba?
if (result[1] && result[5]) {
ret.push(parseFloat(result[5]));
}

return ret;
}

// Look for rgb[a](num%,num%,num%[,num])
if (result = rrgbpercent.exec(color)) {
ret = [parseFloat(result[2]) * 2.55, parseFloat(result[3]) * 2.55, parseFloat(result[4]) * 2.55];
// is rgba?
if (result[1] && result[5]) {
ret.push(parseFloat(result[5]));
}

return ret;
}

// Otherwise, we're most likely dealing with a named color
return colors[jQuery.trim(color).toLowerCase()];
Expand All @@ -75,6 +121,22 @@
return getRGB(color);
};

function supportsRGBA() {
var $script = jQuery('script:first'),
color = $script.css('color'),
result = false;
if (/^rgba/.test(color)) {
result = true;
} else {
try {
result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
$script.css('color', color);
} catch (e) {};
}

return result;
};

// Some named colors to work with
// From Interface by Stefan Petre
// http://interface.eyecon.ro/
Expand Down Expand Up @@ -123,7 +185,7 @@
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0],
transparent: [255,255,255]
transparent: ( jQuery.support.rgba ) ? [0,0,0,0] : [255,255,255]
};

})(jQuery);

0 comments on commit 92ee455

Please sign in to comment.