GUI Components JavaScript DHTML




  Select Color



//-------------------------------------------------------
function _GetElByID_ ( _ID_ )
{
  return document.getElementById ? document.getElementById ( _ID_ ) : document.all [ _ID_ ];
}
//-------------------------------------------------------
function _RGB2Hex_ ( _RGBColor_ )
{
  var _r_, _g_, _b_;
  var _i_, _j_, _len_;
  var _HexColor_;
  
  _RGBColor_ = _RGBColor_.toLowerCase ( );
  if ( _RGBColor_.substring ( 0, 3 ) != "rgb" )
    return "";
  _i_ = _RGBColor_.indexOf ( "(" );
  if ( _i_ == -1 )
    return "";
    
  _j_ = _RGBColor_.indexOf ( ",", _i_ + 1 );
  if ( _j_ == -1 )
    return "";
    
  _r_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
  _i_ = _j_;
  _j_ = _RGBColor_.indexOf ( ",", _j_ + 1 );
  if ( _j_ == -1 )
    return "";
    
  _g_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
  _i_ = _j_;
  _j_ = _RGBColor_.indexOf ( ")", _j_ + 1 );
  if ( _j_ == -1 )
    return "";
    
  _b_ = parseInt ( _RGBColor_.substring ( _i_ + 1, _j_ ) );
  
  _rs_ = _r_.toString ( 16 );
  _rs_ = _r_ < 10 ? "0" + _rs_ : _rs_;
  _gs_ = _g_.toString ( 16 );
  _gs_ = _g_ < 10 ? "0" + _gs_ : _gs_;
  _bs_ = _b_.toString ( 16 );
  _bs_ = _b_ < 10 ? "0" + _bs_ : _bs_;
  
  _HexColor_ = "#" + _rs_ + _gs_ + _bs_;
  return _HexColor_.toUpperCase ( );
}
//---------------------------------------------
function SetPalette ( palette )
{
  var tbl = document.getElementById ( "colortbl" );
  var color, sR, sG, sB;
  var r, g, b;
  var i, j;
  var bNoMore;
  
  bNoMore = false;
  
  switch ( palette )
  {
  case 0:
  r = 0xFF;  g = 0xFF;  b = 0xFF;
  for ( i = 0; i < tbl.rows.length; i++ )
    {
      for ( j = 0; j < tbl.rows [i].cells.length; j++ )
        {
          if ( !bNoMore )
            {
              sR = r.toString ( 16 );
              if ( sR.length == 1 )
                sR = "0" + sR;
              sG = g.toString ( 16 );
              if ( sG.length == 1 )
                sG = "0" + sG;
              sB = b.toString ( 16 );
              if ( sB.length == 1 )
                sB = "0" + sB;
              color = "#" + sR + sG + sB;
              tbl.rows [i].cells [j].__c = true;
            }
          
          tbl.rows [i].cells [j].style.backgroundColor = color;
          if ( bNoMore )
            continue;
          
          if ( b > 0 )
            b -= 0x33;
          else
            {
              if ( g > 0 )
                g -= 0x33;
              else
                {
                  if ( r > 0 )
                    r -= 0x33;
                  else
                    {
                      color = "";
                      bNoMore = true;
                      continue;
                    }
                  g = 0xFF;
                }
              b = 0xFF;
            }
        }
    }
    break;
    
  case 1:
  r = 0xFF;  
  for ( i = 0; i < tbl.rows.length; i++ )
    {
      for ( j = 0; j < tbl.rows [i].cells.length; j++ )
        {
          g = b = Math.round ( ( r / 15 ) * ( 15 - j ) );
          
          sR = r.toString ( 16 );
          if ( sR.length == 1 )
            sR = "0" + sR;
          sG = g.toString ( 16 );
          if ( sG.length == 1 )
            sG = "0" + sG;
          sB = b.toString ( 16 );
          if ( sB.length == 1 )
            sB = "0" + sB;
          color = "#" + sR + sG + sB;
          
          tbl.rows [i].cells [j].__c = true;
          tbl.rows [i].cells [j].style.backgroundColor = color;
        }
      r -= 16;
    }
    break;
  case 2:
  g = 0xFF;  
  for ( i = 0; i < tbl.rows.length; i++ )
    {
      for ( j = 0; j < tbl.rows [i].cells.length; j++ )
        {
          r = b = Math.round ( ( g / 15 ) * ( 15 - j ) );
          
          sR = r.toString ( 16 );
          if ( sR.length == 1 )
            sR = "0" + sR;
          sG = g.toString ( 16 );
          if ( sG.length == 1 )
            sG = "0" + sG;
          sB = b.toString ( 16 );
          if ( sB.length == 1 )
            sB = "0" + sB;
          color = "#" + sR + sG + sB;
          
          tbl.rows [i].cells [j].__c = true;
          tbl.rows [i].cells [j].style.backgroundColor = color;
        }
      g -= 16;
    }
    break;
    
  case 3:
  b = 0xFF;  
  for ( i = 0; i < tbl.rows.length; i++ )
    {
      for ( j = 0; j < tbl.rows [i].cells.length; j++ )
        {
          r = g = Math.round ( ( b / 15 ) * ( 15 - j ) );
          
          sR = r.toString ( 16 );
          if ( sR.length == 1 )
            sR = "0" + sR;
          sG = g.toString ( 16 );
          if ( sG.length == 1 )
            sG = "0" + sG;
          sB = b.toString ( 16 );
          if ( sB.length == 1 )
            sB = "0" + sB;
          color = "#" + sR + sG + sB;
          
          tbl.rows [i].cells [j].__c = true;
          tbl.rows [i].cells [j].style.backgroundColor = color;
        }
      b -= 16;
    }
  }
    
}
//-------------------------------------------------------
function FindCookie ( sCookieName )
{
  var iNameLen = sCookieName.length;
  var sCookieData = document.cookie;
  var iCLen = sCookieData.length;
  var i, j;
  var CEnd;
  
  i = 0;
  while ( i < iCLen )
    {
      j = i + iNameLen;
      if ( sCookieData.substring ( i, j ) == sCookieName )
        {
          iCEnd = sCookieData.indexOf ( ";", j );
          if ( iCEnd == -1 )
            iCEnd = sCookieData.length;
          return unescape ( sCookieData.substring ( j + 1, iCEnd ) );
        }
      i++;
    }
  return null;
}
//-------------------------------------------------------
function DownColor ( _evt_ )
{
  _evt_ = _evt_ ? _evt_ : window.event;  
  if ( !_evt_ )
    return;
  _target_el_ = _evt_.target ? _evt_.target : _evt_.srcElement;
  if ( _target_el_.__c )
    {
      _color_ = _target_el_.style.backgroundColor.toUpperCase ( );
      if ( _color_.charAt ( 0 ) == "R" )
        _color_ = _RGB2Hex_ ( _color_ );
      SetColor ( _color_ );
    }
}
//-------------------------------------------------------
function SetColor ( color )
{
  document.getElementById ( "new_col" ).style.backgroundColor = color;
  document.forms [0].r_col.value = parseInt ( color.substring ( 1, 3 ), 16 );
  document.forms [0].g_col.value = parseInt ( color.substring ( 3, 5 ), 16 );
  document.forms [0].b_col.value = parseInt ( color.substring ( 5, 7 ), 16 );
  document.forms [0].html_col.value = color;
  var tbl = document.getElementById ( "recentcolortbl" );
  var color;
  
  for ( i = 0; i < tbl.rows [0].cells.length; i++ )
    if ( tbl.rows [0].cells [i].style.backgroundColor == "" ||
         tbl.rows [0].cells [i].style.backgroundColor == "transparent" )
      {
        tbl.rows [0].cells [i].style.backgroundColor = color;
        tbl.rows [0].cells [i].__c = true;
        return;
      }
    
  for ( i = 0; i < tbl.rows [0].cells.length - 1; i++ )
    tbl.rows [0].cells [i].style.backgroundColor = tbl.rows [0].cells [i + 1].style.backgroundColor;
    
  tbl.rows [0].cells [7].style.backgroundColor = color;
  tbl.rows [0].cells [7].cells [i].__c = true;
}
//-------------------------------------------------------
function LoadRecentColors ( )
{
  var tbl = document.getElementById ( "recentcolortbl" );
  var color;
  
  for ( i = 0; i < tbl.rows [0].cells.length; i++ )
    {
      if ( color = FindCookie ( "__CPRC" + i ) )
        tbl.rows [0].cells [i].__c = true;
      else
        color = "";
      tbl.rows [0].cells [i].style.backgroundColor = color;
    }
}
//-------------------------------------------------------
function PlaceCookie ( name, value )
{
  var exp = new Date ( );
  var iExpT = exp.getTime ( ) + 31536000000;
  exp.setTime ( iExpT );
  document.cookie = name + "=" + value + "; expires=" + exp.toGMTString();
}
//-------------------------------------------------------
function SaveRecentColors ( )
{
  var tbl = document.getElementById ( "recentcolortbl" );
  var color;
  
  for ( i = 0; i < tbl.rows [0].cells.length; i++ )
    {
      color = tbl.rows [0].cells [i].currentStyle.backgroundColor;
      if ( color == "" )
        break;
        
      PlaceCookie ( "__CPRC" + i, color )
    }
}
//-------------------------------------------------------
function SetColorOnExit ( )
{
  opener.c_colorpick_callback ( _GetElByID_ ( "new_col" ).style.backgroundColor );
}
//-------------------------------------------------------
document.write ( "" );
document.write ( "" );
document.write ( "Browser Safe Palette

" );
document.write ( "" );
for ( i = 0; i < 16; i++ )
  {
    document.write ( "" );
    for ( j = 0; j < 16; j++ )
      document.write ( "" );
  }
document.write ( "" );
document.write ( "" );
document.write ( "" );
document.write ( "Original:
New:
Red:
Green:
Blue:
HTML:" );
document.write ( "







" );
document.write ( "" );
  
document.write ( "" );
document.write ( "Recent Colors:
" );
document.write ( "" );
for ( i = 0; i < 8; i++ )
  document.write ( "" );
document.write ( "" );
document.write ( "" );
document.write ( "" );
document.write ( " " );
document.write ( " " );
document.write ( "" );
document.write ( " " );
document.write ( "" );
document.write ( "" );
document.write ( "" );
SetPalette ( 0 );
LoadRecentColors ( );
document.onmousedown = DownColor;
_color_ = opener.c_colorpick_oldcolor;
_color_ = _color_.toUpperCase ( );
if ( _color_.charAt ( 0 ) == "R" )
  _color_ = _RGB2Hex_ ( _color_ );
  
document.getElementById ( "orig_col" ).style.backgroundColor = _color_;
document.getElementById ( "new_col" ).style.backgroundColor = _color_;
document.forms [0].html_col.value = _color_;