NP_TrackBack/branches/DOM-branch/trackback/js/rico/ricoStyles.js

   1 /**
   2   *
   3   *  Copyright 2005 Sabre Airline Solutions
   4   *
   5   *  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
   6   *  file except in compliance with the License. You may obtain a copy of the License at
   7   *
   8   *         http://www.apache.org/licenses/LICENSE-2.0
   9   *
  10   *  Unless required by applicable law or agreed to in writing, software distributed under the
  11   *  License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
  12   *  either express or implied. See the License for the specific language governing permissions
  13   *  and limitations under the License.
  14   **/
  15
  16 //-------------------- ricoColor.js
  17 Rico.Color = Class.create();
  18
  19 Rico.Color.prototype = {
  20
  21    initialize: function(red, green, blue) {
  22       this.rgb = { r: red, g : green, b : blue };
  23    },
  24
  25    setRed: function(r) {
  26       this.rgb.r = r;
  27    },
  28
  29    setGreen: function(g) {
  30       this.rgb.g = g;
  31    },
  32
  33    setBlue: function(b) {
  34       this.rgb.b = b;
  35    },
  36
  37    setHue: function(h) {
  38
  39       // get an HSB model, and set the new hue...
  40       var hsb = this.asHSB();
  41       hsb.h = h;
  42
  43       // convert back to RGB...
  44       this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
  45    },
  46
  47    setSaturation: function(s) {
  48       // get an HSB model, and set the new hue...
  49       var hsb = this.asHSB();
  50       hsb.s = s;
  51
  52       // convert back to RGB and set values...
  53       this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
  54    },
  55
  56    setBrightness: function(b) {
  57       // get an HSB model, and set the new hue...
  58       var hsb = this.asHSB();
  59       hsb.b = b;
  60
  61       // convert back to RGB and set values...
  62       this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );
  63    },
  64
  65    darken: function(percent) {
  66       var hsb  = this.asHSB();
  67       this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));
  68    },
  69
  70    brighten: function(percent) {
  71       var hsb  = this.asHSB();
  72       this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));
  73    },
  74
  75    blend: function(other) {
  76       this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);
  77       this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);
  78       this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);
  79    },
  80
  81    isBright: function() {
  82       var hsb = this.asHSB();
  83       return this.asHSB().b > 0.5;
  84    },
  85
  86    isDark: function() {
  87       return ! this.isBright();
  88    },
  89
  90    asRGB: function() {
  91       return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";
  92    },
  93
  94    asHex: function() {
  95       return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();
  96    },
  97
  98    asHSB: function() {
  99       return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);
 100    },
 101
 102    toString: function() {
 103       return this.asHex();
 104    }
 105
 106 };
 107
 108 Rico.Color.createFromHex = function(hexCode) {
 109   if(hexCode.length==4) {
 110     var shortHexCode = hexCode;
 111     var hexCode = '#';
 112     for(var i=1;i<4;i++)
 113       hexCode += (shortHexCode.charAt(i) + shortHexCode.charAt(i));
 114   }
 115   if ( hexCode.indexOf('#') == 0 )
 116     hexCode = hexCode.substring(1);
 117   var red   = hexCode.substring(0,2);
 118   var green = hexCode.substring(2,4);
 119   var blue  = hexCode.substring(4,6);
 120   return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );
 121 }
 122
 123 /**
 124  * Factory method for creating a color from the background of
 125  * an HTML element.
 126  */
 127 Rico.Color.createColorFromBackground = function(elem) {
 128
 129    var actualColor = Element.getStyle(elem, "background-color");
 130
 131    // if color is tranparent, check parent
 132    // Safari returns "rgba(0, 0, 0, 0)", which means transparent
 133    if ( actualColor.match(/^(transparent|rgba\(0,\s*0,\s*0,\s*0\))$/i) && elem.parentNode )
 134       return Rico.Color.createColorFromBackground(elem.parentNode);
 135
 136    if ( actualColor == null )
 137       return new Rico.Color(255,255,255);
 138
 139    if ( actualColor.indexOf("rgb(") == 0 ) {
 140       var colors = actualColor.substring(4, actualColor.length - 1 );
 141       var colorArray = colors.split(",");
 142       return new Rico.Color( parseInt( colorArray[0] ),
 143                             parseInt( colorArray[1] ),
 144                             parseInt( colorArray[2] )  );
 145
 146    }
 147    else if ( actualColor.indexOf("#") == 0 ) {
 148       return Rico.Color.createFromHex(actualColor);
 149    }
 150    else
 151       return new Rico.Color(255,255,255);
 152 }
 153
 154 Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {
 155
 156    var red   = 0;
 157         var green = 0;
 158         var blue  = 0;
 159
 160    if (saturation == 0) {
 161       red = parseInt(brightness * 255.0 + 0.5);
 162            green = red;
 163            blue = red;
 164         }
 165         else {
 166       var h = (hue - Math.floor(hue)) * 6.0;
 167       var f = h - Math.floor(h);
 168       var p = brightness * (1.0 - saturation);
 169       var q = brightness * (1.0 - saturation * f);
 170       var t = brightness * (1.0 - (saturation * (1.0 - f)));
 171
 172       switch (parseInt(h)) {
 173          case 0:
 174             red   = (brightness * 255.0 + 0.5);
 175             green = (t * 255.0 + 0.5);
 176             blue  = (p * 255.0 + 0.5);
 177             break;
 178          case 1:
 179             red   = (q * 255.0 + 0.5);
 180             green = (brightness * 255.0 + 0.5);
 181             blue  = (p * 255.0 + 0.5);
 182             break;
 183          case 2:
 184             red   = (p * 255.0 + 0.5);
 185             green = (brightness * 255.0 + 0.5);
 186             blue  = (t * 255.0 + 0.5);
 187             break;
 188          case 3:
 189             red   = (p * 255.0 + 0.5);
 190             green = (q * 255.0 + 0.5);
 191             blue  = (brightness * 255.0 + 0.5);
 192             break;
 193          case 4:
 194             red   = (t * 255.0 + 0.5);
 195             green = (p * 255.0 + 0.5);
 196             blue  = (brightness * 255.0 + 0.5);
 197             break;
 198           case 5:
 199             red   = (brightness * 255.0 + 0.5);
 200             green = (p * 255.0 + 0.5);
 201             blue  = (q * 255.0 + 0.5);
 202             break;
 203             }
 204         }
 205
 206    return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };
 207 }
 208
 209 Rico.Color.RGBtoHSB = function(r, g, b) {
 210
 211    var hue;
 212    var saturation;
 213    var brightness;
 214
 215    var cmax = (r > g) ? r : g;
 216    if (b > cmax)
 217       cmax = b;
 218
 219    var cmin = (r < g) ? r : g;
 220    if (b < cmin)
 221       cmin = b;
 222
 223    brightness = cmax / 255.0;
 224    if (cmax != 0)
 225       saturation = (cmax - cmin)/cmax;
 226    else
 227       saturation = 0;
 228
 229    if (saturation == 0)
 230       hue = 0;
 231    else {
 232       var redc   = (cmax - r)/(cmax - cmin);
 233         var greenc = (cmax - g)/(cmax - cmin);
 234         var bluec  = (cmax - b)/(cmax - cmin);
 235
 236         if (r == cmax)
 237            hue = bluec - greenc;
 238         else if (g == cmax)
 239            hue = 2.0 + redc - bluec;
 240       else
 241            hue = 4.0 + greenc - redc;
 242
 243         hue = hue / 6.0;
 244         if (hue < 0)
 245            hue = hue + 1.0;
 246    }
 247
 248    return { h : hue, s : saturation, b : brightness };
 249 }
 250
 251 //-------------------- ricoCorner.js
 252 Rico.Corner = {
 253
 254    round: function(e, options) {
 255       var e = $(e);
 256       this._setOptions(options);
 257       var color = this.options.color == "fromElement" ? this._background(e) : this.options.color;
 258       var bgColor = this.options.bgColor == "fromParent" ? this._background(e.parentNode) : this.options.bgColor;
 259       this._roundCornersImpl(e, color, bgColor);
 260    },
 261
 262    _roundCornersImpl: function(e, color, bgColor) {
 263       if(this.options.border)
 264          this._renderBorder(e,bgColor);
 265       if(this._isTopRounded())
 266          this._roundTopCorners(e,color,bgColor);
 267       if(this._isBottomRounded())
 268          this._roundBottomCorners(e,color,bgColor);
 269    },
 270
 271    _renderBorder: function(el,bgColor) {
 272       var borderValue = "1px solid " + this._borderColor(bgColor);
 273       var borderL = "border-left: "  + borderValue;
 274       var borderR = "border-right: " + borderValue;
 275       var style   = "style='" + borderL + ";" + borderR +  "'";
 276       el.innerHTML = "<div " + style + ">" + el.innerHTML + "</div>"
 277    },
 278
 279    _roundTopCorners: function(el, color, bgColor) {
 280       var corner = this._createCorner(bgColor);
 281       for(var i=0 ; i < this.options.numSlices ; i++ )
 282          corner.appendChild(this._createCornerSlice(color,bgColor,i,"top"));
 283       el.style.paddingTop = '0px';
 284       el.insertBefore(corner,el.firstChild);
 285    },
 286
 287    _roundBottomCorners: function(el, color, bgColor) {
 288       var corner = this._createCorner(bgColor);
 289       for(var i=(this.options.numSlices-1) ; i >= 0 ; i-- )
 290          corner.appendChild(this._createCornerSlice(color,bgColor,i,"bottom"));
 291       el.style.paddingBottom = 0;
 292       el.appendChild(corner);
 293    },
 294
 295    _createCorner: function(bgColor) {
 296       var corner = document.createElement("div");
 297       corner.style.backgroundColor = (this._isTransparent() ? "transparent" : bgColor);
 298       return corner;
 299    },
 300
 301    _createCornerSlice: function(color,bgColor, n, position) {
 302       var slice = document.createElement("span");
 303
 304       var inStyle = slice.style;
 305       inStyle.backgroundColor = color;
 306       inStyle.display  = "block";
 307       inStyle.height   = "1px";
 308       inStyle.overflow = "hidden";
 309       inStyle.fontSize = "1px";
 310
 311       var borderColor = this._borderColor(color,bgColor);
 312       if ( this.options.border && n == 0 ) {
 313          inStyle.borderTopStyle    = "solid";
 314          inStyle.borderTopWidth    = "1px";
 315          inStyle.borderLeftWidth   = "0px";
 316          inStyle.borderRightWidth  = "0px";
 317          inStyle.borderBottomWidth = "0px";
 318          inStyle.height            = "0px"; // assumes css compliant box model
 319          inStyle.borderColor       = borderColor;
 320       }
 321       else if(borderColor) {
 322          inStyle.borderColor = borderColor;
 323          inStyle.borderStyle = "solid";
 324          inStyle.borderWidth = "0px 1px";
 325       }
 326
 327       if ( !this.options.compact && (n == (this.options.numSlices-1)) )
 328          inStyle.height = "2px";
 329
 330       this._setMargin(slice, n, position);
 331       this._setBorder(slice, n, position);
 332       return slice;
 333    },
 334
 335    _setOptions: function(options) {
 336       this.options = {
 337          corners : "all",
 338          color   : "fromElement",
 339          bgColor : "fromParent",
 340          blend   : true,
 341          border  : false,
 342          compact : false
 343       }
 344       Object.extend(this.options, options || {});
 345
 346       this.options.numSlices = this.options.compact ? 2 : 4;
 347       if ( this._isTransparent() )
 348          this.options.blend = false;
 349    },
 350
 351    _whichSideTop: function() {
 352       if ( this._hasString(this.options.corners, "all", "top") )
 353          return "";
 354
 355       if ( this.options.corners.indexOf("tl") >= 0 && this.options.corners.indexOf("tr") >= 0 )
 356          return "";
 357
 358       if (this.options.corners.indexOf("tl") >= 0)
 359          return "left";
 360       else if (this.options.corners.indexOf("tr") >= 0)
 361           return "right";
 362       return "";
 363    },
 364
 365    _whichSideBottom: function() {
 366       if ( this._hasString(this.options.corners, "all", "bottom") )
 367          return "";
 368
 369       if ( this.options.corners.indexOf("bl")>=0 && this.options.corners.indexOf("br")>=0 )
 370          return "";
 371
 372       if(this.options.corners.indexOf("bl") >=0)
 373          return "left";
 374       else if(this.options.corners.indexOf("br")>=0)
 375          return "right";
 376       return "";
 377    },
 378
 379    _borderColor : function(color,bgColor) {
 380       if ( color == "transparent" )
 381          return bgColor;
 382       else if ( this.options.border )
 383          return this.options.border;
 384       else if ( this.options.blend )
 385          return this._blend( bgColor, color );
 386       else
 387          return "";
 388    },
 389
 390
 391    _setMargin: function(el, n, corners) {
 392       var marginSize = this._marginSize(n);
 393       var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom();
 394
 395       if ( whichSide == "left" ) {
 396          el.style.marginLeft = marginSize + "px"; el.style.marginRight = "0px";
 397       }
 398       else if ( whichSide == "right" ) {
 399          el.style.marginRight = marginSize + "px"; el.style.marginLeft  = "0px";
 400       }
 401       else {
 402          el.style.marginLeft = marginSize + "px"; el.style.marginRight = marginSize + "px";
 403       }
 404    },
 405
 406    _setBorder: function(el,n,corners) {
 407       var borderSize = this._borderSize(n);
 408       var whichSide = corners == "top" ? this._whichSideTop() : this._whichSideBottom();
 409       if ( whichSide == "left" ) {
 410          el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = "0px";
 411       }
 412       else if ( whichSide == "right" ) {
 413          el.style.borderRightWidth = borderSize + "px"; el.style.borderLeftWidth  = "0px";
 414       }
 415       else {
 416          el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px";
 417       }
 418       if (this.options.border != false)
 419         el.style.borderLeftWidth = borderSize + "px"; el.style.borderRightWidth = borderSize + "px";
 420    },
 421
 422    _marginSize: function(n) {
 423       if ( this._isTransparent() )
 424          return 0;
 425
 426       var marginSizes          = [ 5, 3, 2, 1 ];
 427       var blendedMarginSizes   = [ 3, 2, 1, 0 ];
 428       var compactMarginSizes   = [ 2, 1 ];
 429       var smBlendedMarginSizes = [ 1, 0 ];
 430
 431       if ( this.options.compact && this.options.blend )
 432          return smBlendedMarginSizes[n];
 433       else if ( this.options.compact )
 434          return compactMarginSizes[n];
 435       else if ( this.options.blend )
 436          return blendedMarginSizes[n];
 437       else
 438          return marginSizes[n];
 439    },
 440
 441    _borderSize: function(n) {
 442       var transparentBorderSizes = [ 5, 3, 2, 1 ];
 443       var blendedBorderSizes     = [ 2, 1, 1, 1 ];
 444       var compactBorderSizes     = [ 1, 0 ];
 445       var actualBorderSizes      = [ 0, 2, 0, 0 ];
 446
 447       if ( this.options.compact && (this.options.blend || this._isTransparent()) )
 448          return 1;
 449       else if ( this.options.compact )
 450          return compactBorderSizes[n];
 451       else if ( this.options.blend )
 452          return blendedBorderSizes[n];
 453       else if ( this.options.border )
 454          return actualBorderSizes[n];
 455       else if ( this._isTransparent() )
 456          return transparentBorderSizes[n];
 457       return 0;
 458    },
 459
 460    _hasString: function(str) { for(var i=1 ; i<arguments.length ; i++) if (str.indexOf(arguments[i]) >= 0) return true; return false; },
 461    _blend: function(c1, c2) { var cc1 = Rico.Color.createFromHex(c1); cc1.blend(Rico.Color.createFromHex(c2)); return cc1; },
 462    _background: function(el) { try { return Rico.Color.createColorFromBackground(el).asHex(); } catch(err) { return "#ffffff"; } },
 463    _isTransparent: function() { return this.options.color == "transparent"; },
 464    _isTopRounded: function() { return this._hasString(this.options.corners, "all", "top", "tl", "tr"); },
 465    _isBottomRounded: function() { return this._hasString(this.options.corners, "all", "bottom", "bl", "br"); },
 466    _hasSingleTextChild: function(el) { return el.childNodes.length == 1 && el.childNodes[0].nodeType == 3; }
 467 }
 468
 469 Rico.includeLoaded('ricoStyles.js');