Ticket #2281: rgba.diff

---

File rgba.diff, 3.4 KB (added by mdawaffe, February 13, 2008 05:28AM UTC)

RGBA support for jquery.color

Index: jquery.color.js
===================================================================
--- jquery.color.js	(revision 4747)
+++ jquery.color.js	(working copy)
@@ -12,13 +12,19 @@
             if ( fx.state == 0 ) {
                 fx.start = getColor( fx.elem, attr );
                 fx.end = getRGB( fx.end );
+                if ( fx.start[3] || fx.end[3] ) { // if one is rgba, make sure both are
+                    fx.start[3] = fx.start[3] || 1;
+                    fx.end[3] = fx.end[3] || 1;
+                }
             }
 
-            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(",") + ")";
+            fx.elem.style[attr] = ( fx.end[3] ? 'rgba(' : '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) +
+                ( fx.end[3] ? ',' +
+                Math.max(Math.min( parseFloat((fx.pos * (fx.end[3] - fx.start[3])) + fx.start[3]), 1), 0) : '') +
+		')';
         }
     });
 
@@ -50,22 +56,27 @@
         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 rgba(num,num,num,alpha)
+        if (result = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([01]*(?:\.[0-9]+)?)\s*\)/.exec(color))
+            return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3]), parseFloat(result[4])];
 
+        // Look for rgba(num%,num%,num%,alpha)
+        if (result = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([01]*(?:\.[0-9]+)?)\s*\)/.exec(color))
+            return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55, parseFloat(result[4])];
+
         // Otherwise, we're most likely dealing with a named color
-        return colors[jQuery.trim(color).toLowerCase()];
+        return colors[jQuery.trim(color).toLowerCase()] || [255,255,255];
     }
 
     function getColor(elem, attr) {
         var color;
+        var rgba = /rgba\(\s*0,\s*0,\s*0,\s*0\s*\)/; // transparent
 
         do {
             color = jQuery.curCSS(elem, attr);
 
             // Keep going until we find an element that has color, or we hit the body
-            if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
+            if ( color != '' && color != 'transparent' && !color.match(rgba) || jQuery.nodeName(elem, "body") )
                 break;
 
             attr = "backgroundColor";
@@ -121,8 +132,7 @@
         red:[255,0,0],
         silver:[192,192,192],
         white:[255,255,255],
-        yellow:[255,255,0],
-        transparent: [255,255,255]
+        yellow:[255,255,0]
     };
 
 })(jQuery);

Download in other formats:

Original Format