ecomp-sdk-app/src/main/webapp/static/fusion/raptor/js/rounded-corners.js

   1 /************************************************************************************************************<br>
   2 <br>
   3         @fileoverview
   4         Rounded corners class<br>
   5         (C) www.dhtmlgoodies.com, September 2006<br>
   6         <br>
   7         This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.       <br>
   8         <br>
   9         Terms of use:<br>
  10         Look at the terms of use at http://www.dhtmlgoodies.com/index.html?page=termsOfUse<br>
  11         <br>
  12         Thank you!<br>
  13         <br>
  14         www.dhtmlgoodies.com<br>
  15         Alf Magne Kalleland<br>
  16 <br>
  17 ************************************************************************************************************/
  18
  19 // {{{ Constructor
  20 function DHTMLgoodies_roundedCorners()
  21 {
  22         var roundedCornerTargets;
  23
  24         this.roundedCornerTargets = new Array();
  25
  26 }
  27         var string = '';
  28 // }}}
  29 DHTMLgoodies_roundedCorners.prototype = {
  30
  31         // {{{ addTarget()
  32     /**
  33      *
  34          *
  35      *  Add rounded corners to an element
  36      *
  37      *  @param String divId = Id of element on page. Example "leftColumn" for &lt;div id="leftColumn">
  38      *  @param Int xRadius = Y radius of rounded corners, example 10
  39      *  @param Int yRadius = Y radius of rounded corners, example 10
  40      *  @param String color = Background color of element, example #FFF or #AABBCC
  41      *  @param String color = backgroundColor color of element "behind", example #FFF or #AABBCC
  42      *  @param Int padding = Padding of content - This will be added as left and right padding(not top and bottom)
  43      *  @param String heightOfContent = Optional argument. You can specify a fixed height of your content. example "15" which means pixels, or "50%".
  44      *  @param String whichCorners = Optional argument. Commaseparated list of corners, example "top_left,top_right,bottom_left"
  45      *
  46      * @public
  47      */
  48     addTarget : function(divId,xRadius,yRadius,color,backgroundColor,padding,heightOfContent,whichCorners)
  49     {
  50         var index = this.roundedCornerTargets.length;
  51         this.roundedCornerTargets[index] = new Array();
  52         this.roundedCornerTargets[index]['divId'] = divId;
  53         this.roundedCornerTargets[index]['xRadius'] = xRadius;
  54         this.roundedCornerTargets[index]['yRadius'] = yRadius;
  55         this.roundedCornerTargets[index]['color'] = color;
  56         this.roundedCornerTargets[index]['backgroundColor'] = backgroundColor;
  57         this.roundedCornerTargets[index]['padding'] = padding;
  58         this.roundedCornerTargets[index]['heightOfContent'] = heightOfContent;
  59         this.roundedCornerTargets[index]['whichCorners'] = whichCorners;
  60
  61     }
  62     // }}}
  63     ,
  64         // {{{ init()
  65     /**
  66      *
  67          *
  68      *  Initializes the script
  69      *
  70      *
  71      * @public
  72      */
  73         init : function()
  74         {
  75
  76                 for(var targetCounter=0;targetCounter < this.roundedCornerTargets.length;targetCounter++){
  77
  78                         // Creating local variables of each option
  79                         whichCorners = this.roundedCornerTargets[targetCounter]['whichCorners'];
  80                         divId = this.roundedCornerTargets[targetCounter]['divId'];
  81                         xRadius = this.roundedCornerTargets[targetCounter]['xRadius'];
  82                         yRadius = this.roundedCornerTargets[targetCounter]['yRadius'];
  83                         color = this.roundedCornerTargets[targetCounter]['color'];
  84                         backgroundColor = this.roundedCornerTargets[targetCounter]['backgroundColor'];
  85                         padding = this.roundedCornerTargets[targetCounter]['padding'];
  86                         heightOfContent = this.roundedCornerTargets[targetCounter]['heightOfContent'];
  87                         whichCorners = this.roundedCornerTargets[targetCounter]['whichCorners'];
  88
  89                         // Which corners should we add rounded corners to?
  90                         var cornerArray = new Array();
  91                         if(!whichCorners || whichCorners=='all'){
  92                                 cornerArray['top_left'] = true;
  93                                 cornerArray['top_right'] = true;
  94                                 cornerArray['bottom_left'] = true;
  95                                 cornerArray['bottom_right'] = true;
  96                         }else{
  97                                 cornerArray = whichCorners.split(/,/gi);
  98                                 for(var prop in cornerArray)cornerArray[cornerArray[prop]] = true;
  99                         }
 100
 101
 102                         var factorX = xRadius/yRadius;  // How big is x radius compared to y radius
 103
 104                         var obj = document.getElementById(divId);       // Creating reference to element
 105                         obj.style.backgroundColor=null; // Setting background color blank
 106                         obj.style.backgroundColor='transparent';
 107                         var content = obj.innerHTML;    // Saving HTML content of this element
 108                         obj.innerHTML = '';     // Setting HTML content of element blank-
 109
 110
 111
 112
 113                         // Adding top corner div.
 114
 115                         if(cornerArray['top_left'] || cornerArray['top_right']){
 116                                 var topBar_container = document.createElement('DIV');
 117                                 topBar_container.style.height = yRadius + 'px';
 118                                 topBar_container.style.overflow = 'hidden';
 119
 120                                 obj.appendChild(topBar_container);
 121                                 var currentAntialiasSize = 0;
 122                                 var savedRestValue = 0;
 123
 124                                 for(no=1;no<=yRadius;no++){
 125                                         var marginSize = (xRadius - (this.getY((yRadius - no),yRadius,factorX)));
 126                                         var marginSize_decimals = (xRadius - (this.getY_withDecimals((yRadius - no),yRadius,factorX)));
 127                                         var restValue = xRadius - marginSize_decimals;
 128                                         var antialiasSize = xRadius - marginSize - Math.floor(savedRestValue)
 129                                         var foregroundSize = xRadius - (marginSize + antialiasSize);
 130
 131                                         var el = document.createElement('DIV');
 132                                         el.style.overflow='hidden';
 133                                         el.style.height = '1px';
 134                                         if(cornerArray['top_left'])el.style.marginLeft = marginSize + 'px';
 135                                         if(cornerArray['top_right'])el.style.marginRight = marginSize + 'px';
 136                                         topBar_container.appendChild(el);
 137                                         var y = topBar_container;
 138
 139                                         for(var no2=1;no2<=antialiasSize;no2++){
 140                                                 switch(no2){
 141                                                         case 1:
 142                                                                 if (no2 == antialiasSize)
 143                                                                         blendMode = ((restValue + savedRestValue) /2) - foregroundSize;
 144                                                                 else {
 145                                                                   var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
 146                                                                   blendMode = (restValue - foregroundSize - antialiasSize + 1) * (tmpValue - (yRadius - no)) /2;
 147                                                                 }
 148                                                                 break;
 149                                                         case antialiasSize:
 150                                                                 var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
 151                                                                 blendMode = 1 - (1 - (tmpValue - (yRadius - no))) * (1 - (savedRestValue - foregroundSize)) /2;
 152                                                                 break;
 153                                                         default:
 154                                                                 var tmpValue2 = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
 155                                                                 var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
 156                                                                 blendMode = ((tmpValue + tmpValue2) / 2) - (yRadius - no);
 157                                                 }
 158
 159                                                 el.style.backgroundColor = this.__blendColors(backgroundColor,color,blendMode);
 160                                                 y.appendChild(el);
 161                                                 y = el;
 162                                                 var el = document.createElement('DIV');
 163                                                 el.style.height = '1px';
 164                                                 el.style.overflow='hidden';
 165                                                 if(cornerArray['top_left'])el.style.marginLeft = '1px';
 166                                                 if(cornerArray['top_right'])el.style.marginRight = '1px';
 167                                                 el.style.backgroundColor=color;
 168                                         }
 169
 170                                         y.appendChild(el);
 171                                         savedRestValue = restValue;
 172                                 }
 173                         }
 174
 175                         // Add content
 176                         var contentDiv = document.createElement('DIV');
 177                         contentDiv.className = obj.className;
 178                         contentDiv.style.border='1px solid ' + color;
 179                         contentDiv.innerHTML = content;
 180                         contentDiv.style.backgroundColor=color;
 181                         contentDiv.style.paddingLeft = padding + 'px';
 182                         contentDiv.style.paddingRight = padding + 'px';
 183
 184                         if(!heightOfContent)heightOfContent = '';
 185                         heightOfContent = heightOfContent + '';
 186                         if(heightOfContent.length>0 && heightOfContent.indexOf('%')==-1)heightOfContent = heightOfContent + 'px';
 187                         if(heightOfContent.length>0)contentDiv.style.height = heightOfContent;
 188
 189                         obj.appendChild(contentDiv);
 190
 191
 192                         if(cornerArray['bottom_left'] || cornerArray['bottom_right']){
 193                                 var bottomBar_container = document.createElement('DIV');
 194                                 bottomBar_container.style.height = yRadius + 'px';
 195                                 bottomBar_container.style.overflow = 'hidden';
 196
 197                                 obj.appendChild(bottomBar_container);
 198                                 var currentAntialiasSize = 0;
 199                                 var savedRestValue = 0;
 200
 201                                 var errorOccured = false;
 202                                 var arrayOfDivs = new Array();
 203                                 for(no=1;no<=yRadius;no++){
 204
 205                                         var marginSize = (xRadius - (this.getY((yRadius - no),yRadius,factorX)));
 206                                         var marginSize_decimals = (xRadius - (this.getY_withDecimals((yRadius - no),yRadius,factorX)));
 207
 208                                         var restValue = (xRadius - marginSize_decimals);
 209                                         var antialiasSize = xRadius - marginSize - Math.floor(savedRestValue)
 210                                         var foregroundSize = xRadius - (marginSize + antialiasSize);
 211
 212                                         var el = document.createElement('DIV');
 213                                         el.style.overflow='hidden';
 214                                         el.style.height = '1px';
 215                                         if(cornerArray['bottom_left'])el.style.marginLeft = marginSize + 'px';
 216                                         if(cornerArray['bottom_right'])el.style.marginRight = marginSize + 'px';
 217                                         bottomBar_container.insertBefore(el,bottomBar_container.firstChild);
 218
 219                                         var y = bottomBar_container;
 220
 221                                         for(var no2=1;no2<=antialiasSize;no2++){
 222                                                 switch(no2){
 223                                                         case 1:
 224                                                                 if (no2 == antialiasSize)
 225                                                                         blendMode = ((restValue + savedRestValue) /2) - foregroundSize;
 226                                                                 else {
 227                                                                   var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
 228                                                                   blendMode = (restValue - foregroundSize - antialiasSize + 1) * (tmpValue - (yRadius - no)) /2;
 229                                                                 }
 230                                                                 break;
 231                                                         case antialiasSize:
 232                                                                 var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
 233                                                                 blendMode = 1 - (1 - (tmpValue - (yRadius - no))) * (1 - (savedRestValue - foregroundSize)) /2;
 234                                                                 break;
 235                                                         default:
 236                                                                 var tmpValue2 = this.getY_withDecimals((xRadius - marginSize - no2),xRadius,1/factorX);
 237                                                                 var tmpValue = this.getY_withDecimals((xRadius - marginSize - no2 + 1),xRadius,1/factorX);
 238                                                                 blendMode = ((tmpValue + tmpValue2) / 2) - (yRadius - no);
 239                                                 }
 240
 241                                                 el.style.backgroundColor = this.__blendColors(backgroundColor,color,blendMode);
 242
 243                                                 if(y==bottomBar_container)arrayOfDivs[arrayOfDivs.length] = el;
 244
 245                                                 try{    // Need to look closer at this problem which occures in Opera.
 246                                                         var firstChild = y.getElementsByTagName('DIV')[0];
 247                                                         y.insertBefore(el,y.firstChild);
 248                                                 }catch(e){
 249                                                         y.appendChild(el);
 250                                                         errorOccured = true;
 251                                                 }
 252                                                 y = el;
 253
 254                                                 var el = document.createElement('DIV');
 255                                                 el.style.height = '1px';
 256                                                 el.style.overflow='hidden';
 257                                                 if(cornerArray['bottom_left'])el.style.marginLeft = '1px';
 258                                                 if(cornerArray['bottom_right'])el.style.marginRight = '1px';
 259
 260                                         }
 261
 262                                         if(errorOccured){       // Opera fix
 263                                                 for(var divCounter=arrayOfDivs.length-1;divCounter>=0;divCounter--){
 264                                                         bottomBar_container.appendChild(arrayOfDivs[divCounter]);
 265                                                 }
 266                                         }
 267
 268                                         el.style.backgroundColor=color;
 269                                         y.appendChild(el);
 270                                         savedRestValue = restValue;
 271                                 }
 272
 273                         }
 274                 }
 275         }
 276         // }}}
 277         ,
 278         // {{{ getY()
 279     /**
 280      *
 281          *
 282      *  Add rounded corners to an element
 283      *
 284      *  @param Int x = x Coordinate
 285      *  @param Int maxX = Size of rounded corners
 286          *
 287      *
 288      * @private
 289      */
 290         getY : function(x,maxX,factorX){
 291                 // y = sqrt(100 - x^2)
 292                 // Y = 0.5 * ((100 - x^2)^0.5);
 293                 return Math.max(0,Math.ceil(factorX * Math.sqrt( (maxX * maxX) - (x*x)) ));
 294
 295         }
 296         // }}}
 297         ,
 298         // {{{ getY_withDecimals()
 299     /**
 300      *
 301          *
 302      *  Add rounded corners to an element
 303      *
 304      *  @param Int x = x Coordinate
 305      *  @param Int maxX = Size of rounded corners
 306          *
 307      *
 308      * @private
 309      */
 310         getY_withDecimals : function(x,maxX,factorX){
 311                 // y = sqrt(100 - x^2)
 312                 // Y = 0.5 * ((100 - x^2)^0.5);
 313                 return Math.max(0,factorX * Math.sqrt( (maxX * maxX) - (x*x)) );
 314
 315         }
 316
 317
 318         ,
 319
 320         // {{{ __blendColors()
 321     /**
 322      *
 323          *
 324      *  Simply blending two colors by extracting red, green and blue and subtracting difference between colors from them.
 325      *  Finally, we multiply it with the blendMode value
 326      *
 327      *  @param String colorA = RGB color
 328      *  @param String colorB = RGB color
 329      *  @param Float blendMode
 330          *
 331      *
 332      * @private
 333      */
 334         __blendColors : function (colorA, colorB, blendMode) {
 335                 if(colorA.length=='4'){ // In case we are dealing with colors like #FFF
 336                         colorA = '#' + colorA.substring(1,1) + colorA.substring(1,1) + colorA.substring(2,1) + colorA.substring(2,1) + colorA.substring(3,1) + colorA.substring(3,1);
 337                 }
 338                 if(colorB.length=='4'){ // In case we are dealing with colors like #FFF
 339                         colorB = '#' + colorB.substring(1,1) + colorB.substring(1,1) + colorB.substring(2,1) + colorB.substring(2,1) + colorB.substring(3,1) + colorB.substring(3,1);
 340                 }
 341                 var colorArrayA = [parseInt('0x' + colorA.substring(1,3)), parseInt('0x' + colorA.substring(3, 5)), parseInt('0x' + colorA.substring(5, 7))];   // Create array of Red, Green and Blue ( 0-255)
 342                 var colorArrayB = [parseInt('0x' + colorB.substring(1,3)), parseInt('0x' + colorB.substring(3, 5)), parseInt('0x' + colorB.substring(5, 7))];   // Create array of Red, Green and Blue ( 0-255)
 343                 var red = Math.round(colorArrayA[0] + (colorArrayB[0] - colorArrayA[0])*blendMode).toString(16);        // Create new Red color ( Hex )
 344                 var green = Math.round(colorArrayA[1] + (colorArrayB[1] - colorArrayA[1])*blendMode).toString(16);      // Create new Green color ( Hex )
 345                 var blue = Math.round(colorArrayA[2] + (colorArrayB[2] - colorArrayA[2])*blendMode).toString(16);       // Create new Blue color ( Hex )
 346
 347                 if(red.length==1)red = '0' + red;
 348                 if(green.length==1)green = '0' + green;
 349                 if(blue.length==1)blue = '0' + blue;
 350
 351                 return '#' + red + green+ blue; // Return new RGB color
 352         }
 353 }