jQuery Forum

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. 

The following hooks are made available.

• $.cssHooks.boxShadow
• $.cssHooks.boxShadowColor
• $.cssHooks.boxShadowRed
• $.cssHooks.boxShadowGreen
  
• $.cssHooks.boxShadowBlue
• $.cssHooks.boxShadowAlpha
• $.cssHooks.boxShadowX
• $.cssHooks.boxShadowY
• $.cssHooks.boxShadowBlur
• $.cssHooks.boxShadowSpread
  

Here is the code

1. ;(function($, d, undefined){
2.   var prop = "BoxShadow", hooks = {}, ws = /\s/, strip = /rgb(a)?|\(|\)/g, rgba = /^rgba/, support = $.support.boxShadow = $.cssHooks && (function(){
3.    var j = d.createElement("div"), Q = j.style, u = "Moz Ms Webkit O ".split(ws), e = 0, r, y;
4.    while(r = u[e++] + prop, y = Q[r] === "", !y && e < u.length);
5.    j = null;
6.    return y && r;
7.   }());
8.   if(support && support !== prop){
9.    prop  = prop.substr(0, 1).toLowerCase() + prop.substr(1); // sheer laziness here
10.    function normalize(input){ // helper to normalize input
11.     return {
12.      values: input.replace(strip, "").split(ws),
13.      isAlpha: rgba.test(input) ? 1 : 0,
14.      set: function(pos, value){
15.       this.values[pos] = value;
16.      },
17.      build: function(override){
18.       this.values.splice(override || this.isAlpha ? 4 : 3, 0, ")"); // add the ) in the right spot
19.       this.values.unshift(override || this.isAlpha ?  "rgba(" : "rgb("); // add rgba( or rgb( to the front
20.       return this.values.join(" ").replace(/,\s,/, ", ").replace(/,\)/, ")"); // replace instances of ", ," with ", " and ",)" with ")", i probably should do something different here
21.      }
22.     };
23.    }
24.    hooks[prop] = { // $.cssHooks.boxShadow
25.     get: function(elem, computed, extra){
26.      return $.css(elem, support);
27.     },
28.     set: function(elem, value){
29.      elem.style[support] = value;
30.     }
31.    };
32.    hooks[prop + "Color"] = { // $.cssHooks.boxShadowColor
33.     get: function(elem, computed, extra){
34.      return $.css(elem, support).split(")")[0] + ")";
35.     },
36.     set: function(elem, value){
37.      elem.style[support] = value + " " + $.css(elem, support).split(")")[1];
38.     }
39.    };
40.    $.each(["Red","Green","Blue"], function(i, hook){ // $.cssHooks.boxShadowRed, $.cssHooks.boxShadowBlue, $.cssHooks.boxShadowGreen
41.     hooks[prop + hook] = {
42.      get: function(elem, computed, extra){
43.       return parseInt(normalize($.css(elem, support)).values[i]); // parseInt because normal.values is "XX," to strip comma
44.      },
45.      set: function(elem, value){
46.       var normal = normalize($.css(elem, support));
47.       value = parseInt(value) || 0;
48.       normal.set(i, (value < 0 ? 0 : value > 255 ? 255 : value) + ","); // ensure the value we are setting is between 0-255
49.       elem.style[support] = normal.build();
50.      }
51.     };
52.    });
53.    hooks[prop + "Alpha"] = { // $.cssHooks.boxShadowAlpha
54.     get: function(elem, computed, extra){
55.      var normal = normalize($.css(elem, support));
56.      return normal.isAlpha ? normal.values[3] : 1; // check if it is rgba if not return 1
57.     },
58.     set: function(elem, value) {
59.      var normal = normalize($.css(elem, support)), isFloat = /^\./;
60.      value = parseFloat(value) || 1; // ensure it is NaN
61.      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
62.      !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
63.      elem.style[support] = normal.build(true);
64.     }
65.    };
66.    $.each(["X","Y","Blur","Spread"], function(i, hook){ // $.cssHooks.boxShadowX, $.cssHooks.boxShadowY, $.cssHooks.boxShadowBlur, $.cssHooks.boxShadowSpread
67.      hooks[prop + hook] = {
68.       get: function(elem, computed, extra){
69.        var normal = normalize($.css(elem, support));
70.        return normal.values[3 + normal.isAlpha + i]; // start at 3 because the first 3 values are RGB + add the alpha position + increment by i
71.       },
72.       set: function(elem, value){
73.        var normal = normalize($.css(elem, support));
74.        normal.set(3 + normal.isAlpha + i, value); // start at 3 because the first 3 values are RGB + add the alpha position + increment by i
75.        elem.style[support] = normal.build();
76.       }
77.      };
78.    });
79.    $.extend($.cssHooks, hooks); // add hooks to $.cssHooks
80.    $.each(["Red","Green","Blue","Alpha","X","Y","Blur","Spread"], function(i, hook){ // add hooks to fx
81.     $.fx.step[prop + hook] = function(fx){
82.      $.cssHooks[prop + hook].set(fx.elem, fx.now + fx.unit);
83.     };
84.    });
85.   }
86.  })(jQuery, document);