I was interested in learning a little more about $.cssHooks so I wrote a hook for box shadow. I just wanted to see what people thought about it and see if there were any suggestions about how it could have been implemented better.
I have attached the boxshadow.js and a demo.htm in case anyone wants to try it out.
var j = d.createElement("div"), Q = j.style, u = "Moz Ms Webkit O ".split(ws), e = 0, r, y;
while(r = u[e++] + prop, y = Q[r] === "", !y && e < u.length);
j = null;
return y && r;
}());
if(support && support !== prop){
prop = prop.substr(0, 1).toLowerCase() + prop.substr(1); // sheer laziness here
function normalize(input){ // helper to normalize input
return {
values: input.replace(strip, "").split(ws),
isAlpha: rgba.test(input) ? 1 : 0,
set: function(pos, value){
this.values[pos] = value;
},
build: function(override){
this.values.splice(override || this.isAlpha ? 4 : 3, 0, ")"); // add the ) in the right spot
this.values.unshift(override || this.isAlpha ? "rgba(" : "rgb("); // add rgba( or rgb( to the front
return this.values.join(" ").replace(/,\s,/, ", ").replace(/,\)/, ")"); // replace instances of ", ," with ", " and ",)" with ")", i probably should do something different here
return normal.isAlpha ? normal.values[3] : 1; // check if it is rgba if not return 1
},
set: function(elem, value) {
var normal = normalize($.css(elem, support)), isFloat = /^\./;
value = parseFloat(value) || 1; // ensure it is NaN
value = value > 99 ? 1 : value > 1 ? value * .01 : value < 0 ? 0 : value; // ensure values between 0 and 100 are used and convert anything > 1 to value * .01
!normal.isAlpha ? normal.values.splice(3, 0, "," + value) : normal.set(3, "," + value); // incase someone is setting the alpha but the current color is just rgb and not rgba