rounded.js

   1 // Contributors \r
   2 // Ilkka Huotari at http://www.editsite.net\r
   3 // Mathieu 'p01' HENRI at http://www.p01.org/\r
   4 // http://seky.nahory.net/2005/04/rounded-corners/\r
   5 // Steven Wittens at http://www.acko.net/anti-aliased-nifty-corners\r
   6 // Original Nifty Corners by Alessandro Fulciniti at http://pro.html.it/esempio/nifty/\r
   7 function NiftyCheck() {\r
   8   if(!document.getElementById || !document.createElement) {\r
   9     return false;\r
  10   }\r
  11   var b = navigator.userAgent.toLowerCase();\r
  12   if (b.indexOf("msie 5") > 0 && b.indexOf("opera") == -1) {\r
  13     return false;\r
  14   }\r
  15   return true;\r
  16 }\r
  17 \r
  18 function Rounded(className, sizex, sizey, sizex_b, sizey_b) {\r
  19         var bk;\r
  20         if (!NiftyCheck()) return;\r
  21         if (typeof(sizex_b) == 'undefined')\r
  22                 sizex_b = sizex;\r
  23         if (typeof(sizey_b) == 'undefined')\r
  24                 sizey_b = sizey;\r
  25         var v = getElements(className);\r
  26         var l = v.length;\r
  27         for (var i = 0; i < l; i++) {\r
  28                 color = get_current_style(v[i],"background-color","transparent");\r
  29                 bk = get_current_style(v[i].parentNode,"background-color","transparent");\r
  30                 AddRounded(v[i], bk, color, sizex, sizey, true);\r
  31                 AddRounded(v[i], bk, color, sizex_b, sizey_b, false);\r
  32         }\r
  33 }\r
  34 \r
  35 Math.sqr = function (x) {\r
  36   return x*x;\r
  37 };\r
  38 \r
  39 function Blend(a, b, alpha) {\r
  40 \r
  41   var ca = Array(\r
  42     parseInt('0x' + a.substring(1, 3)), \r
  43     parseInt('0x' + a.substring(3, 5)), \r
  44     parseInt('0x' + a.substring(5, 7))\r
  45   );\r
  46   var cb = Array(\r
  47     parseInt('0x' + b.substring(1, 3)), \r
  48     parseInt('0x' + b.substring(3, 5)), \r
  49     parseInt('0x' + b.substring(5, 7))\r
  50   );\r
  51   return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)\r
  52              + ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)\r
  53              + ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);\r
  54 \r
  55   return '#' + ('0'+Math.round(ca[0] + (cb[0] - ca[0])*alpha).toString(16)).slice(-2).toString(16)\r
  56              + ('0'+Math.round(ca[1] + (cb[1] - ca[1])*alpha).toString(16)).slice(-2).toString(16)\r
  57              + ('0'+Math.round(ca[2] + (cb[2] - ca[2])*alpha).toString(16)).slice(-2).toString(16);\r
  58 }\r
  59 \r
  60 function AddRounded(el, bk, color, sizex, sizey, top) {\r
  61   if (!sizex && !sizey)\r
  62         return;\r
  63   var i, j;\r
  64   var d = document.createElement("div");\r
  65   d.style.backgroundColor = bk;\r
  66   var lastarc = 0;\r
  67   for (i = 1; i <= sizey; i++) {\r
  68     var coverage, arc2, arc3;\r
  69     // Find intersection of arc with bottom of pixel row\r
  70     arc = Math.sqrt(1.0 - Math.sqr(1.0 - i / sizey)) * sizex;\r
  71     // Calculate how many pixels are bg, fg and blended.\r
  72     var n_bg = sizex - Math.ceil(arc);\r
  73     var n_fg = Math.floor(lastarc);\r
  74     var n_aa = sizex - n_bg - n_fg;\r
  75     // Create pixel row wrapper\r
  76     var x = document.createElement("div");\r
  77     var y = d;\r
  78     x.style.margin = "0px " + n_bg + "px";\r
  79         x.style.height='1px';\r
  80         x.style.overflow='hidden';\r
  81     // Make a wrapper per anti-aliased pixel (at least one)\r
  82     for (j = 1; j <= n_aa; j++) {\r
  83       // Calculate coverage per pixel\r
  84       // (approximates circle by a line within the pixel)\r
  85       if (j == 1) {\r
  86         if (j == n_aa) {\r
  87           // Single pixel\r
  88           coverage = ((arc + lastarc) * .5) - n_fg;\r
  89         }\r
  90         else {\r
  91           // First in a run\r
  92           arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;\r
  93           coverage = (arc2 - (sizey - i)) * (arc - n_fg - n_aa + 1) * .5;\r
  94           // Coverage is incorrect. Why?\r
  95           coverage = 0;\r
  96         }\r
  97       }\r
  98       else if (j == n_aa) {\r
  99         // Last in a run\r
 100         arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;\r
 101         coverage = 1.0 - (1.0 - (arc2 - (sizey - i))) * (1.0 - (lastarc - n_fg)) * .5;\r
 102       }\r
 103       else {\r
 104         // Middle of a run\r
 105         arc3 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j) / sizex)) * sizey;\r
 106         arc2 = Math.sqrt(1.0 - Math.sqr((sizex - n_bg - j + 1) / sizex)) * sizey;\r
 107         coverage = ((arc2 + arc3) * .5) - (sizey - i);\r
 108       }\r
 109       \r
 110       x.style.backgroundColor = Blend(bk, color, coverage);\r
 111           if (top)\r
 112               y.appendChild(x);\r
 113       else\r
 114               y.insertBefore(x, y.firstChild);\r
 115       y = x;\r
 116       var x = document.createElement("div");\r
 117                 x.style.height='1px';\r
 118                 x.style.overflow='hidden';\r
 119       x.style.margin = "0px 1px";\r
 120     }\r
 121     x.style.backgroundColor = color;\r
 122     if (top)\r
 123             y.appendChild(x);\r
 124     else\r
 125                 y.insertBefore(x, y.firstChild);\r
 126     lastarc = arc;\r
 127   }\r
 128   if (top)\r
 129           el.insertBefore(d, el.firstChild);\r
 130   else\r
 131           el.appendChild(d);\r
 132 }\r
 133 \r
 134 function getElements(className) {\r
 135         var elements = [];\r
 136         var el = document.getElementsByTagName('DIV');  \r
 137         var regexp=new RegExp("\\b"+className+"\\b");\r
 138         for (var i = 0; i < el.length; i++) \r
 139         {\r
 140                 if (regexp.test(el[i].className)) \r
 141                         elements.push(el[i]);\r
 142         }\r
 143         return elements;\r
 144 }\r
 145 \r
 146 function get_current_style(element,property,not_accepted)\r
 147 {\r
 148   var ee,i,val,apr;\r
 149   try\r
 150   {\r
 151     var cs=document.defaultView.getComputedStyle(element,'');\r
 152     val=cs.getPropertyValue(property);\r
 153   }\r
 154   catch(ee)\r
 155   {\r
 156     if(element.currentStyle)\r
 157         {\r
 158             apr=property.split("-");\r
 159             for(i=1;i<apr.length;i++) apr[i]=apr[i].toUpperCase();\r
 160             apr=apr.join("");\r
 161             val=element.currentStyle.getAttribute(apr);\r
 162    }\r
 163   }\r
 164   if((val.indexOf("rgba") > -1 || val==not_accepted) && element.parentNode)\r
 165   {\r
 166          if(element.parentNode != document) \r
 167                  val=get_current_style(element.parentNode,property,not_accepted);\r
 168          else\r
 169                  val = '#FFFFFF';\r
 170   }\r
 171   if (val.indexOf("rgb") > -1 && val.indexOf("rgba") == -1)\r
 172           val = rgb2hex(val);\r
 173   if (val.length == 4)\r
 174           val = '#'+val.substring(1,1)+val.substring(1,1)+val.substring(2,1)+val.substring(2,1)+val.substring(3,1)+val.substring(3,1);\r
 175   return val;\r
 176 }\r
 177 \r
 178 function rgb2hex(value)\r
 179 {\r
 180         var x = 255;\r
 181         var hex = '';\r
 182         var i;\r
 183         var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;\r
 184         var array=regexp.exec(value);\r
 185         for(i=1;i<4;i++) hex += ('0'+parseInt(array[i]).toString(16)).slice(-2);\r
 186         return '#'+hex;\r
 187 }\r