https://www.shakeout.org/js/jquery.corners.js

1/*!
2 * jQuery Corners 0.3
3 * Copyright (c) 2008 David Turnbull, Steven Wittens
4 * Dual licensed under the MIT (MIT-LICENSE.txt)
5 * and GPL (GPL-LICENSE.txt) licenses.
6 */
7
8jQuery.fn.corners = function(options) {
9  var doneClass = 'rounded_by_jQuery_corners'; /* To prevent double rounding */
10  var settings = parseOptions(options);
11  var webkitAvailable = false;
12  try {
13    webkitAvailable = (document.body.style.WebkitBorderRadius !== undefined);
14    /* Google Chrome corners look awful */
15    var versionIndex = navigator.userAgent.indexOf('Chrome');
16    if (versionIndex >= 0) webkitAvailable = false;
17  } catch(err) {}
18  var mozillaAvailable = false;
19  try {
20    mozillaAvailable = (document.body.style.MozBorderRadius !== undefined);
21    /* Firefox 2 corners look worse */
22    var versionIndex = navigator.userAgent.indexOf('Firefox');
23    if (versionIndex >= 0 && parseInt(navigator.userAgent.substring(versionIndex+8)) < 3) mozillaAvailable = false;
24  } catch(err) {}
25  return this.each(function(i,e){
26    $e = jQuery(e);
27    if ($e.hasClass(doneClass)) return;
28    $e.addClass(doneClass);
29    var classScan = /{(.*)}/.exec(e.className);
30    var s = classScan ? parseOptions(classScan[1], settings) : settings;
31    var nodeName = e.nodeName.toLowerCase();
32    if (nodeName=='input') e = changeInput(e);
33    if (webkitAvailable && s.webkit) roundWebkit(e, s);
34    else if(mozillaAvailable && s.mozilla && (s.sizex == s.sizey)) roundMozilla(e, s);
35    else {
36      var bgColor = backgroundColor(e.parentNode);
37      var fgColor = backgroundColor(e);
38      switch (nodeName) {
39        case 'a':
40        case 'input':
41          roundLink(e, s, bgColor, fgColor);
42          break;
43        default:
44          roundDiv(e, s, bgColor, fgColor);
45          break;
46      }
47    }
48  });
49  
50  function roundWebkit(e, s) {
51    var radius = '' + s.sizex + 'px ' + s.sizey + 'px';
52    var $e = jQuery(e);
53    if (s.tl) $e.css('WebkitBorderTopLeftRadius', radius);
54    if (s.tr) $e.css('WebkitBorderTopRightRadius', radius);
55    if (s.bl) $e.css('WebkitBorderBottomLeftRadius', radius);
56    if (s.br) $e.css('WebkitBorderBottomRightRadius', radius);
57  }
58  
59  function roundMozilla(e, s)
60  {  
61    var radius = '' + s.sizex + 'px';
62    var $e = jQuery(e);
63    if (s.tl) $e.css('-moz-border-radius-topleft', radius);
64    if (s.tr) $e.css('-moz-border-radius-topright', radius);
65    if (s.bl) $e.css('-moz-border-radius-bottomleft', radius);
66    if (s.br) $e.css('-moz-border-radius-bottomright', radius);  
67  }
68  
69  function roundLink(e, s, bgColor, fgColor) {
70    var table = tableElement("table");
71    var tbody = tableElement("tbody");
72    table.appendChild(tbody);
73    var tr1 = tableElement("tr");
74    var td1 = tableElement("td", "top");
75    tr1.appendChild(td1);
76    var tr2 = tableElement("tr");
77    var td2 = relocateContent(e, s, tableElement("td"));
78    tr2.appendChild(td2);
79    var tr3 = tableElement("tr");
80    var td3 = tableElement("td", "bottom");
81    tr3.appendChild(td3);
82    if (s.tl||s.tr) {
83      tbody.appendChild(tr1);
84      addCorners(td1, s, bgColor, fgColor, true);
85    }
86    tbody.appendChild(tr2);
87    if (s.bl||s.br) {
88      tbody.appendChild(tr3);
89      addCorners(td3, s, bgColor, fgColor, false);
90    }
91    e.appendChild(table);
92    /* Clicking on $('a>table') in IE will trigger onclick but not the href  */
93    if (jQuery.browser.msie) table.onclick = ieLinkBypass;
94    /* Firefox 2 will render garbage unless we hide the overflow here */
95    e.style.overflow = 'hidden';
96  }
97  
98  function ieLinkBypass() {
99    if (!this.parentNode.onclick) this.parentNode.click();
100  }
101  
102  function changeInput(e) {
103    var a1 = document.createElement("a");
104    a1.id = e.id;
105    a1.className = e.className;
106    if (e.onclick) {
107      a1.href = 'javascript:'
108      a1.onclick = e.onclick;
109    } else {
110      jQuery(e).parent('form').each(function() {a1.href = this.action;});
111      a1.onclick = submitForm;
112    }
113    var a2 = document.createTextNode(e.value);
114    a1.appendChild(a2);
115    e.parentNode.replaceChild(a1, e);
116    return a1;
117  }
118
119  function submitForm() {
120    jQuery(this).parent('form').each(function() {this.submit()});
121    return false;

122  }
123
124  function roundDiv(e, s, bgColor, fgColor) {
125    var div = relocateContent(e, s, document.createElement('div'));
126    e.appendChild(div);
127    if (s.tl||s.tr) addCorners(e, s, bgColor, fgColor, true);
128    if (s.bl||s.br) addCorners(e, s, bgColor, fgColor, false);
129  }
130  
131  function relocateContent(e, s, d) {
132    var $e = jQuery(e);
133    var c;
134    while(c=e.firstChild) d.appendChild(c);
135    if (e.style.height) {
136      var h = parseInt($e.css('height'));
137      d.style.height = h + 'px';
138      h += parseInt($e.css('padding-top')) + parseInt($e.css('padding-bottom'));
139      e.style.height = h + 'px';
140    }
141    if (e.style.width) {
142      var w = parseInt($e.css('width'));
143      d.style.width = w + 'px';
144      w += parseInt($e.css('padding-left')) + parseInt($e.css('padding-right'));
145      e.style.width = w + 'px';
146    }
147    d.style.paddingLeft = $e.css('padding-left');
148    d.style.paddingRight = $e.css('padding-right');
149    if (s.tl||s.tr) {
150      d.style.paddingTop = adjustedPadding(e, s, $e.css('padding-top'), true);
151    } else {
152      d.style.paddingTop = $e.css('padding-top');
153    }
154    if (s.bl||s.br) {
155      d.style.paddingBottom = adjustedPadding(e, s, $e.css('padding-bottom'), false);
156    } else {
157      d.style.paddingBottom = $e.css('padding-bottom');
158    }
159    e.style.padding = 0;
160    return d;
161  }
162  
163  function adjustedPadding(e, s, pad, top) {
164    if (pad.indexOf("px") < 0) {
165      try {
166        //TODO Make this check work otherwise remove it
167        console.error('%s padding not in pixels', (top ? 'top' : 'bottom'), e);
168      }
169      catch(err) {}
170      pad = s.sizey + 'px';
171    }
172    pad = parseInt(pad);
173    if (pad - s.sizey < 0) {
174      try {
175        console.error('%s padding is %ipx for %ipx corner:', (top ? 'top' : 'bottom'), pad, s.sizey, e);
176      }
177      catch(err) {}
178      pad = s.sizey;
179    }
180    return pad - s.sizey + 'px';
181  }
182
183  function tableElement(kind, valign) {
184    var e = document.createElement(kind)
185    e.style.border = 'none';
186    e.style.borderCollapse = 'collapse';
187    e.style.borderSpacing = 0;
188    e.style.padding = 0;
189    e.style.margin = 0;
190    if (valign) e.style.verticalAlign = valign;
191    return e;
192  }
193  
194  function backgroundColor(e) {
195    try {
196      var c = jQuery.css(e, "background-color");
197      if ( c.match(/^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/i) && e.parentNode )
198         return backgroundColor(e.parentNode);
199      if (c==null)
200        return "#ffffff";
201      if (c.indexOf("rgb") > -1)
202    	  c = rgb2hex(c);
203      if (c.length == 4)
204  	    c = hexShort2hex(c);
205      return c;
206    } catch(err) {
207      return "#ffffff";
208    }
209  }
210  
211  function hexShort2hex(c) {
212    return '#' +
213    c.substring(1,2) +
214    c.substring(1,2) +
215    c.substring(2,3) +
216    c.substring(2,3) +
217    c.substring(3,4) +
218    c.substring(3,4);
219  }
220
221  function rgb2hex(c) {
222  	var x = 255;
223  	var hex = '';
224  	var i;
225  	var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
226  	var array=regexp.exec(c);
227  	for(i=1;i<4;i++) hex += ('0'+parseInt(array[i]).toString(16)).slice(-2);
228  	return '#'+hex;
229  }
230  
231  function parseOptions(options, settings) {
232    var options = options || '';
233    var s = {sizex:5, sizey:5, tl: false, tr: false, bl: false, br: false, webkit:true, mozilla: true, transparent:false};
234    if (settings) {
235      s.sizex = settings.sizex;
236      s.sizey = settings.sizey;
237      s.webkit = settings.webkit;
238      s.transparent = settings.transparent;
239      s.mozilla = settings.mozilla;
240    }
241    var sizex_set = false;
242    var corner_set = false;
243    jQuery.each(options.split(' '), function(idx, option) {
244      option = option.toLowerCase();
245      var i = parseInt(option);
246      if (i > 0 && option == i + 'px') {
247        s.sizey = i;
248        if (!sizex_set) s.sizex = i;
249        sizex_set = true;
250      } else switch (option) {
251        case 'no-native': s.webkit = s.mozilla = false; break;
252        case 'webkit': s.webkit = true; break;
253        case 'no-webkit': s.webkit = false; break;
254        case 'mozilla': s.mozilla = true; break;
255        case 'no-mozilla': s.mozilla = false; break;

256        case 'anti-alias': s.transparent = false; break;
257        case 'transparent': s.transparent = true; break;
258        case 'top': corner_set = s.tl = s.tr = true; break;
259        case 'right': corner_set = s.tr = s.br = true; break;
260        case 'bottom': corner_set = s.bl = s.br = true; break;
261        case 'left': corner_set = s.tl = s.bl = true; break;
262        case 'top-left': corner_set = s.tl = true; break;
263        case 'top-right': corner_set = s.tr = true; break;
264        case 'bottom-left': corner_set = s.bl = true; break;
265        case 'bottom-right': corner_set = s.br = true; break;
266      }
267    });
268    if (!corner_set) {
269      if (!settings) {
270        s.tl = s.tr = s.bl = s.br = true;
271      } else {
272        s.tl = settings.tl;
273        s.tr = settings.tr;
274        s.bl = settings.bl;
275        s.br = settings.br;
276      }
277    }
278    return s;
279  }
280  
281  function alphaBlend(a, b, alpha) {
282    var ca = Array(
283      parseInt('0x' + a.substring(1, 3)),
284      parseInt('0x' + a.substring(3, 5)),
285      parseInt('0x' + a.substring(5, 7))
286    );
287    var cb = Array(
288      parseInt('0x' + b.substring(1, 3)),
289      parseInt('0x' + b.substring(3, 5)),
290      parseInt('0x' + b.substring(5, 7))
291    );
292    r = '0' + Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16);
293    g = '0' + Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16);
294    b = '0' + Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16);
295    return '#'
296      + r.substring(r.length - 2)
297      + g.substring(g.length - 2)
298      + b.substring(b.length - 2);
299  }
300
301  function addCorners(e, s, bgColor, fgColor, top) {
302    if (s.transparent) addTransparentCorners(e, s, bgColor, top);
303    else addAntiAliasedCorners(e, s, bgColor, fgColor, top);
304  }
305  
306  function addAntiAliasedCorners(e, s, bgColor, fgColor, top) {
307    var i, j;
308    var d = document.createElement("div");
309    d.style.fontSize = '1px';
310    d.style.backgroundColor = bgColor;
311    var lastarc = 0;
312    for (i = 1; i <= s.sizey; i++) {
313      var coverage, arc2, arc3;
314      // Find intersection of arc with bottom of pixel row
315      arc = Math.sqrt(1.0 - Math.pow(1.0 - i / s.sizey, 2)) * s.sizex;
316      // Calculate how many pixels are bg, fg and blended.
317      var n_bg = s.sizex - Math.ceil(arc);
318      var n_fg = Math.floor(lastarc);
319      var n_aa = s.sizex - n_bg - n_fg;
320      // Create pixel row wrapper
321      var x = document.createElement("div");
322      var y = d;
323      x.style.margin = "0px " + n_bg + "px";
324      x.style.height = '1px';
325      x.style.overflow = 'hidden';
326      // Create the pixel divs for a row (at least one)
327      for (j = 1; j <= n_aa; j++) {
328        // Calculate coverage per pixel (approximates arc within the pixel)
329        if (j == 1) {
330          if (j == n_aa) {
331            // Single pixel
332            coverage = ((arc + lastarc) * .5) - n_fg;
333          }
334          else {
335            // First in a run
336            arc2 = Math.sqrt(1.0 - Math.pow(1.0 - (n_bg + 1) / s.sizex, 2)) * s.sizey;
337            coverage = (arc2 - (s.sizey - i)) * (arc - n_fg - n_aa + 1) * .5;
338          }
339        }
340        else if (j == n_aa) {
341          // Last in a run
342          arc2 = Math.sqrt(1.0 - Math.pow((s.sizex - n_bg - j + 1) / s.sizex, 2)) * s.sizey;
343          coverage = 1.0 - (1.0 - (arc2 - (s.sizey - i))) * (1.0 - (lastarc - n_fg)) * .5;
344        }
345        else {
346          // Middle of a run
347          arc3 = Math.sqrt(1.0 - Math.pow((s.sizex - n_bg - j) / s.sizex, 2)) * s.sizey;
348          arc2 = Math.sqrt(1.0 - Math.pow((s.sizex - n_bg - j + 1) / s.sizex, 2)) * s.sizey;
349          coverage = ((arc2 + arc3) * .5) - (s.sizey - i);
350        }
351        
352        addCornerDiv(s, x, y, top, alphaBlend(bgColor, fgColor, coverage));
353        y = x;
354        var x = y.cloneNode(false);
355        x.style.margin = "0px 1px";
356      }
357      addCornerDiv(s, x, y, top, fgColor);
358      lastarc = arc;
359    }
360    if (top)
361      e.insertBefore(d, e.firstChild);
362    else
363      e.appendChild(d);
364  }
365  
366  function addCornerDiv(s, x, y, top, color) {
367    if (top && !s.tl) x.style.marginLeft = 0;
368    if (top && !s.tr) x.style.marginRight = 0;
369    if (!top && !s.bl) x.style.marginLeft = 0;
370    if (!top && !s.br) x.style.marginRight = 0;
371    x.style.backgroundColor = color;
372    if (top)
373      y.appendChild(x);
374    else
375      y.insertBefore(x, y.firstChild);
376  }
377
378  function addTransparentCorners(e, s, bgColor, top) {
379    var d = document.createElement("div");
380    d.style.fontSize = '1px';
381    var strip = document.createElement('div');
382    strip.style.overflow = 'hidden';
383    strip.style.height = '1px';
384    strip.style.borderColor = bgColor;
385    strip.style.borderStyle = 'none solid';
386    var sizex = s.sizex-1;
387    var sizey = s.sizey-1;
388    if (!sizey) sizey = 1; /* hint for 1x1 */
389    for (var i=0; i < s.sizey; i++) {
390      var w = sizex - Math.floor(Math.sqrt(1.0 - Math.pow(1.0 - i / sizey, 2)) * sizex);
391      if (i==2 && s.sizex==6 && s.sizey==6) w = 2; /* hint for 6x6 */
392      var x = strip.cloneNode(false);
393      x.style.borderWidth = '0 '+ w +'px';
394      if (top) x.style.borderWidth = '0 '+(s.tr?w:0)+'px 0 '+(s.tl?w:0)+'px';
395      else x.style.borderWidth = '0 '+(s.br?w:0)+'px 0 '+(s.bl?w:0)+'px';
396      top ? d.appendChild(x) : d.insertBefore(x, d.firstChild);
397    } 
398    if (top)
399      e.insertBefore(d, e.firstChild);
400    else
401      e.appendChild(d);
402  }
403
404
405}