scripts/js_color_picker_v2/js_color_picker_v2.js

   1 /************************************************************************************************************
   2 Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland
   3
   4 This library is free software; you can redistribute it and/or
   5 modify it under the terms of the GNU Lesser General Public
   6 License as published by the Free Software Foundation; either
   7 version 2.1 of the License, or (at your option) any later version.
   8
   9 This library is distributed in the hope that it will be useful,
  10 but WITHOUT ANY WARRANTY; without even the implied warranty of
  11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12 Lesser General Public License for more details.
  13
  14 You should have received a copy of the GNU Lesser General Public
  15 License along with this library; if not, write to the Free Software
  16 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  17
  18 Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
  19 written by Alf Magne Kalleland.
  20
  21 Alf Magne Kalleland, 2006
  22 Owner of DHTMLgoodies.com
  23 ************************************************************************************************************/
  24         var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
  25         var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
  26
  27         //var form_widget_amount_slider_handle = 'images/slider_handle.gif';
  28         var form_widget_amount_slider_handle = M3_ROOT_URL + '/scripts/js_color_picker_v2/images/slider_handle.gif';
  29         var slider_handle_image_obj = false;
  30         var sliderObjectArray = new Array();
  31         var slider_counter = 0;
  32         var slideInProgress = false;
  33         var handle_start_x;
  34         var event_start_x;
  35         var currentSliderIndex;
  36         var setColorFunc;                               // カラーを設定したときのコールバック関数 add by naoki
  37
  38         function form_widget_cancel_event()
  39         {
  40                 return false;
  41         }
  42
  43         function getImageSliderHeight(){
  44                 if(!slider_handle_image_obj){
  45                         slider_handle_image_obj = new Image();
  46                         slider_handle_image_obj.src = form_widget_amount_slider_handle;
  47                 }
  48                 if(slider_handle_image_obj.width>0){
  49                         return;
  50                 }else{
  51                         setTimeout('getImageSliderHeight()',50);
  52                 }
  53         }
  54
  55         function positionSliderImage(e,theIndex,inputObj)
  56         {
  57                 if(this)inputObj = this;
  58                 if(!theIndex)theIndex = inputObj.getAttribute('sliderIndex');
  59                 var handleImg = document.getElementById('slider_handle' + theIndex);
  60                 var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
  61                 var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];
  62                 handleImg.style.left = currentValue * ratio + 'px';
  63                 setColorByRGB();
  64         }
  65
  66         function adjustFormValue(theIndex)
  67         {
  68                 var handleImg = document.getElementById('slider_handle' + theIndex);
  69                 var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
  70                 var currentPos = handleImg.style.left.replace('px','');
  71                 sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
  72
  73         }
  74
  75         function initMoveSlider(e)
  76         {
  77
  78                 if(document.all)e = event;
  79                 slideInProgress = true;
  80                 event_start_x = e.clientX;
  81                 handle_start_x = this.style.left.replace('px','');
  82                 currentSliderIndex = this.id.replace(/[^\d]/g,'');
  83                 return false;
  84         }
  85
  86         function startMoveSlider(e)
  87         {
  88                 if(document.all)e = event;
  89                 if(!slideInProgress)return;
  90                 var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
  91                 if(leftPos<0)leftPos = 0;
  92                 if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
  93                 document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
  94                 adjustFormValue(currentSliderIndex);
  95                 if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
  96                         eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
  97                 }
  98         }
  99
 100         function stopMoveSlider()
 101         {
 102                 slideInProgress = false;
 103         }
 104
 105
 106         function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction)
 107         {
 108                 if(!slider_handle_image_obj){
 109                         getImageSliderHeight();
 110                 }
 111
 112                 slider_counter = slider_counter +1;
 113                 sliderObjectArray[slider_counter] = new Array();
 114                 sliderObjectArray[slider_counter] = {"width":width - 9,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
 115
 116                 formTarget.setAttribute('sliderIndex',slider_counter);
 117                 formTarget.onchange = positionSliderImage;
 118                 var parentObj = document.createElement('DIV');
 119                 parentObj.style.width = width + 'px';
 120                 parentObj.style.height = '12px';        // The height of the image
 121                 parentObj.style.position = 'relative';
 122                 parentObj.id = 'slider_container' + slider_counter;
 123                 document.getElementById(targetElId).appendChild(parentObj);
 124
 125                 var obj = document.createElement('DIV');
 126                 obj.className = 'form_widget_amount_slider';
 127                 obj.innerHTML = '<span></span>';
 128                 obj.style.width = width + 'px';
 129                 obj.id = 'slider_slider' + slider_counter;
 130                 obj.style.position = 'absolute';
 131                 obj.style.bottom = '0px';
 132                 parentObj.appendChild(obj);
 133
 134                 var handleImg = document.createElement('IMG');
 135                 handleImg.style.position = 'absolute';
 136                 handleImg.style.left = '0px';
 137                 handleImg.style.zIndex = 5;
 138                 handleImg.src = slider_handle_image_obj.src;
 139                 handleImg.id = 'slider_handle' + slider_counter;
 140                 handleImg.onmousedown = initMoveSlider;
 141                 if(document.body.onmouseup){
 142                         if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
 143                                 alert('You allready have an onmouseup event assigned to the body tag');
 144                         }
 145                 }else{
 146                         document.body.onmouseup = stopMoveSlider;
 147                         document.body.onmousemove = startMoveSlider;
 148                 }
 149                 handleImg.ondragstart = form_widget_cancel_event;
 150                 parentObj.appendChild(handleImg);
 151                 positionSliderImage(false,slider_counter);
 152         }
 153
 154
 155
 156         var namedColors = new Array('AliceBlue','AntiqueWhite','Aqua','Aquamarine','Azure','Beige','Bisque','Black','BlanchedAlmond','Blue','BlueViolet','Brown',
 157         'BurlyWood','CadetBlue','Chartreuse','Chocolate','Coral','CornflowerBlue','Cornsilk','Crimson','Cyan','DarkBlue','DarkCyan','DarkGoldenRod','DarkGray',
 158         'DarkGreen','DarkKhaki','DarkMagenta','DarkOliveGreen','Darkorange','DarkOrchid','DarkRed','DarkSalmon','DarkSeaGreen','DarkSlateBlue','DarkSlateGray',
 159         'DarkTurquoise','DarkViolet','DeepPink','DeepSkyBlue','DimGray','DodgerBlue','Feldspar','FireBrick','FloralWhite','ForestGreen','Fuchsia','Gainsboro',
 160         'GhostWhite','Gold','GoldenRod','Gray','Green','GreenYellow','HoneyDew','HotPink','IndianRed','Indigo','Ivory','Khaki','Lavender','LavenderBlush',
 161         'LawnGreen','LemonChiffon','LightBlue','LightCoral','LightCyan','LightGoldenRodYellow','LightGrey','LightGreen','LightPink','LightSalmon','LightSeaGreen',
 162         'LightSkyBlue','LightSlateBlue','LightSlateGray','LightSteelBlue','LightYellow','Lime','LimeGreen','Linen','Magenta','Maroon','MediumAquaMarine',
 163         'MediumBlue','MediumOrchid','MediumPurple','MediumSeaGreen','MediumSlateBlue','MediumSpringGreen','MediumTurquoise','MediumVioletRed','MidnightBlue',
 164         'MintCream','MistyRose','Moccasin','NavajoWhite','Navy','OldLace','Olive','OliveDrab','Orange','OrangeRed','Orchid','PaleGoldenRod','PaleGreen',
 165         'PaleTurquoise','PaleVioletRed','PapayaWhip','PeachPuff','Peru','Pink','Plum','PowderBlue','Purple','Red','RosyBrown','RoyalBlue','SaddleBrown',
 166         'Salmon','SandyBrown','SeaGreen','SeaShell','Sienna','Silver','SkyBlue','SlateBlue','SlateGray','Snow','SpringGreen','SteelBlue','Tan','Teal','Thistle',
 167         'Tomato','Turquoise','Violet','VioletRed','Wheat','White','WhiteSmoke','Yellow','YellowGreen');
 168
 169          var namedColorRGB = new Array('#F0F8FF','#FAEBD7','#00FFFF','#7FFFD4','#F0FFFF','#F5F5DC','#FFE4C4','#000000','#FFEBCD','#0000FF','#8A2BE2','#A52A2A','#DEB887',
 170         '#5F9EA0','#7FFF00','#D2691E','#FF7F50','#6495ED','#FFF8DC','#DC143C','#00FFFF','#00008B','#008B8B','#B8860B','#A9A9A9','#006400','#BDB76B','#8B008B',
 171         '#556B2F','#FF8C00','#9932CC','#8B0000','#E9967A','#8FBC8F','#483D8B','#2F4F4F','#00CED1','#9400D3','#FF1493','#00BFFF','#696969','#1E90FF','#D19275',
 172         '#B22222','#FFFAF0','#228B22','#FF00FF','#DCDCDC','#F8F8FF','#FFD700','#DAA520','#808080','#008000','#ADFF2F','#F0FFF0','#FF69B4','#CD5C5C','#4B0082',
 173         '#FFFFF0','#F0E68C','#E6E6FA','#FFF0F5','#7CFC00','#FFFACD','#ADD8E6','#F08080','#E0FFFF','#FAFAD2','#D3D3D3','#90EE90','#FFB6C1','#FFA07A','#20B2AA',
 174         '#87CEFA','#8470FF','#778899','#B0C4DE','#FFFFE0','#00FF00','#32CD32','#FAF0E6','#FF00FF','#800000','#66CDAA','#0000CD','#BA55D3','#9370D8','#3CB371',
 175         '#7B68EE','#00FA9A','#48D1CC','#C71585','#191970','#F5FFFA','#FFE4E1','#FFE4B5','#FFDEAD','#000080','#FDF5E6','#808000','#6B8E23','#FFA500','#FF4500',
 176         '#DA70D6','#EEE8AA','#98FB98','#AFEEEE','#D87093','#FFEFD5','#FFDAB9','#CD853F','#FFC0CB','#DDA0DD','#B0E0E6','#800080','#FF0000','#BC8F8F','#4169E1',
 177         '#8B4513','#FA8072','#F4A460','#2E8B57','#FFF5EE','#A0522D','#C0C0C0','#87CEEB','#6A5ACD','#708090','#FFFAFA','#00FF7F','#4682B4','#D2B48C','#008080',
 178         '#D8BFD8','#FF6347','#40E0D0','#EE82EE','#D02090','#F5DEB3','#FFFFFF','#F5F5F5','#FFFF00','#9ACD32');
 179
 180
 181         var color_picker_div = false;
 182         var color_picker_active_tab = false;
 183         var color_picker_form_field = false;
 184         var color_picker_active_input = false;
 185         function baseConverter (number,ob,nb) {
 186                 number = number + "";
 187                 number = number.toUpperCase();
 188                 var list = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 189                 var dec = 0;
 190                 for (var i = 0; i <=  number.length; i++) {
 191                         dec += (list.indexOf(number.charAt(i))) * (Math.pow(ob , (number.length - i - 1)));
 192                 }
 193                 number = "";
 194                 var magnitude = Math.floor((Math.log(dec))/(Math.log(nb)));
 195                 for (var i = magnitude; i >= 0; i--) {
 196                         var amount = Math.floor(dec/Math.pow(nb,i));
 197                         number = number + list.charAt(amount);
 198                         dec -= amount*(Math.pow(nb,i));
 199                 }
 200                 if(number.length==0)number=0;
 201                 return number;
 202         }
 203
 204         function colorPickerGetTopPos(inputObj)
 205         {
 206
 207           var returnValue = inputObj.offsetTop;
 208           while((inputObj = inputObj.offsetParent) != null){
 209                 returnValue += inputObj.offsetTop;
 210           }
 211           return returnValue;
 212         }
 213
 214         function colorPickerGetLeftPos(inputObj)
 215         {
 216           var returnValue = inputObj.offsetLeft;
 217           while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
 218           return returnValue;
 219         }
 220
 221         function cancelColorPickerEvent(){
 222                 return false;
 223         }
 224
 225         function showHideColorOptions(e,inputObj)
 226         {
 227
 228
 229                 var thisObj = this;
 230                 if(inputObj){
 231                         var parentNode = inputObj.parentNode;
 232                         thisObj = inputObj;
 233                 }else var parentNode = this.parentNode;
 234                 var activeColorDiv = false;
 235                 var subDiv = parentNode.getElementsByTagName('DIV')[0];
 236                 counter=0;
 237                 var initZIndex = 10;
 238                 var contentDiv = document.getElementById('color_picker_content').getElementsByTagName('DIV')[0];
 239                 do{
 240                         if(subDiv.tagName=='DIV' && subDiv.className!='colorPickerCloseButton'){
 241                                 if(subDiv==thisObj){
 242                                         thisObj.className='colorPickerTab_active';
 243                                         thisObj.style.zIndex = 50;
 244                                         var img = thisObj.getElementsByTagName('IMG')[0];
 245                                         //img.src = "images/tab_right_active.gif"
 246                                         img.src = M3_ROOT_URL + "/scripts/js_color_picker_v2/images/tab_right_active.gif";
 247                                         img.src = img.src.replace(/inactive/,'active');
 248                                         contentDiv.style.display='block';
 249                                         activeColorDiv = contentDiv;
 250                                 }else{
 251                                         subDiv.className = 'colorPickerTab_inactive';
 252                                         var img = subDiv.getElementsByTagName('IMG')[0];
 253                                         //img.src = "images/tab_right_inactive.gif";
 254                                         img.src = M3_ROOT_URL + "/scripts/js_color_picker_v2/images/tab_right_inactive.gif";
 255                                         if(activeColorDiv)
 256                                                 subDiv.style.zIndex = initZIndex - counter;
 257                                         else
 258                                                 subDiv.style.zIndex = counter;
 259                                         contentDiv.style.display='none';
 260                                 }
 261                                 counter++;
 262                         }
 263                         subDiv = subDiv.nextSibling;
 264                         if(contentDiv.nextSibling)contentDiv = contentDiv.nextSibling;
 265                 }while(subDiv);
 266
 267
 268                 document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
 269
 270
 271         }
 272
 273         function createColorPickerTopRow(inputObj){
 274                 var tabs = ['RGB','Named colors','Color slider'];
 275                 var tabWidths = [37,90,70];
 276                 var div = document.createElement('DIV');
 277                 div.className='colorPicker_topRow';
 278
 279                 inputObj.appendChild(div);
 280                 var currentWidth = 0;
 281                 for(var no=0;no<tabs.length;no++){
 282
 283                         var tabDiv = document.createElement('DIV');
 284                         tabDiv.onselectstart = cancelColorPickerEvent;
 285                         tabDiv.ondragstart = cancelColorPickerEvent;
 286                         if(no==0){
 287                                 suffix = 'active';
 288                                 color_picker_active_tab = this;
 289                         }else suffix = 'inactive';
 290
 291                         tabDiv.id = 'colorPickerTab' + no;
 292                         tabDiv.onclick = showHideColorOptions;
 293                         if(no==0)tabDiv.style.zIndex = 50; else tabDiv.style.zIndex = 1 + (tabs.length-no);
 294                         tabDiv.style.left = currentWidth + 'px';
 295                         tabDiv.style.position = 'absolute';
 296                         tabDiv.className='colorPickerTab_' + suffix;
 297                         var tabSpan = document.createElement('SPAN');
 298                         tabSpan.innerHTML = tabs[no];
 299                         tabDiv.appendChild(tabSpan);
 300                         var tabImg = document.createElement('IMG');
 301                         //tabImg.src = "images/tab_right_" + suffix + ".gif";
 302                         tabImg.src = M3_ROOT_URL + "/scripts/js_color_picker_v2/images/tab_right_" + suffix + ".gif";
 303                         tabDiv.appendChild(tabImg);
 304                         div.appendChild(tabDiv);
 305                         //if(navigatorVersion<6 && MSIE){       /* Lower IE version fix */
 306                         if(navigatorVersion<=6 && MSIE){        /* Lower IE version fix */  // 2007.5.18 fixed by naoki
 307                                 tabSpan.style.position = 'relative';
 308                                 tabImg.style.position = 'relative';
 309                                 tabImg.style.left = '-3px';
 310                                 tabDiv.style.cursor = 'hand';
 311                         }
 312                         currentWidth = currentWidth + tabWidths[no];
 313
 314                 }
 315
 316                 var closeButton = document.createElement('DIV');
 317                 closeButton.className='colorPickerCloseButton';
 318                 closeButton.innerHTML = 'x';
 319                 closeButton.onclick = closeColorPicker;
 320                 closeButton.onmouseover = toggleCloseButton;
 321                 closeButton.onmouseout = toggleOffCloseButton;
 322                 div.appendChild(closeButton);
 323
 324         }
 325
 326         function toggleCloseButton()
 327         {
 328                 this.style.color='#FFF';
 329                 this.style.backgroundColor = '#317082';
 330         }
 331         function toggleOffCloseButton()
 332         {
 333                 this.style.color='';
 334                 this.style.backgroundColor = '';
 335
 336         }
 337         function closeColorPicker()
 338         {
 339
 340                 color_picker_div.style.display='none';
 341         }
 342         function createWebColors(inputObj){
 343                 var webColorDiv = document.createElement('DIV');
 344                 webColorDiv.style.paddingTop = '1px';
 345                 inputObj.appendChild(webColorDiv);
 346                 for(var r=15;r>=0;r-=3){
 347                         for(var g=0;g<=15;g+=3){
 348                                 for(var b=0;b<=15;b+=3){
 349                                         var red = baseConverter(r,10,16) + '';
 350                                         var green = baseConverter(g,10,16) + '';
 351                                         var blue = baseConverter(b,10,16) + '';
 352
 353                                         var color = '#' + red + red + green + green + blue + blue;
 354                                         var div = document.createElement('DIV');
 355                                         div.style.backgroundColor=color;
 356                                         div.innerHTML = '<span></span>';
 357                                         div.className='colorSquare';
 358                                         div.title = color;
 359                                         div.onclick = chooseColor;
 360                                         div.setAttribute('rgbColor',color);
 361                                         div.onmouseover = colorPickerShowStatusBarText;
 362                                         div.onmouseout = colorPickerHideStatusBarText;
 363                                         webColorDiv.appendChild(div);
 364                                 }
 365                         }
 366                 }
 367         }
 368
 369         function createNamedColors(inputObj){
 370                 var namedColorDiv = document.createElement('DIV');
 371                 namedColorDiv.style.paddingTop = '1px';
 372                 namedColorDiv.style.display='none';
 373                 inputObj.appendChild(namedColorDiv);
 374                 for(var no=0;no<namedColors.length;no++){
 375                         var color = namedColorRGB[no];
 376                         var div = document.createElement('DIV');
 377                         div.style.backgroundColor=color;
 378                         div.innerHTML = '<span></span>';
 379                         div.className='colorSquare';
 380                         div.title = namedColors[no];
 381                         div.onclick = chooseColor;
 382                         div.onmouseover = colorPickerShowStatusBarText;
 383                         div.onmouseout = colorPickerHideStatusBarText;
 384                         div.setAttribute('rgbColor',color);
 385                         namedColorDiv.appendChild(div);
 386                 }
 387
 388         }
 389
 390         function colorPickerHideStatusBarText()
 391         {
 392                 document.getElementById('colorPicker_statusBarTxt').innerHTML = '&nbsp;';
 393         }
 394
 395         function colorPickerShowStatusBarText()
 396         {
 397                 var txt = this.getAttribute('rgbColor');
 398                 if(this.title.indexOf('#')<0)txt = txt + " (" + this.title + ")";
 399                 document.getElementById('colorPicker_statusBarTxt').innerHTML = txt;
 400         }
 401
 402         function createAllColorDiv(inputObj){
 403                 var allColorDiv = document.createElement('DIV');
 404                 allColorDiv.style.display='none';
 405                 allColorDiv.className = 'js_color_picker_allColorDiv';
 406                 allColorDiv.style.paddingLeft = '3px';
 407                 allColorDiv.style.paddingTop = '5px';
 408                 allColorDiv.style.paddingBottom = '5px';
 409                 inputObj.appendChild(allColorDiv);
 410
 411                 var labelDiv = document.createElement('DIV');
 412                 labelDiv.className='colorSliderLabel';
 413                 labelDiv.innerHTML = 'R';
 414                 allColorDiv.appendChild(labelDiv);
 415
 416                 var innerDiv = document.createElement('DIV');
 417                 innerDiv.className = 'colorSlider';
 418                 innerDiv.id = 'sliderRedColor';
 419                 allColorDiv.appendChild(innerDiv);
 420
 421                 var innerDivInput = document.createElement('DIV');
 422                 innerDivInput.className='colorInput';
 423
 424                 var input = document.createElement('INPUT');
 425                 input.id = 'js_color_picker_red_color';
 426                 input.maxlength = 3;
 427                 input.style.width = '48px';
 428                 input.style.fontSize = '11px';
 429                 input.name = 'redColor';
 430                 input.value = 0;
 431
 432                 innerDivInput.appendChild(input);
 433                 allColorDiv.appendChild(innerDivInput);
 434
 435                 var labelDiv = document.createElement('DIV');
 436                 labelDiv.className='colorSliderLabel';
 437                 labelDiv.innerHTML = 'G';
 438                 allColorDiv.appendChild(labelDiv);
 439
 440                 var innerDiv = document.createElement('DIV');
 441                 innerDiv.className = 'colorSlider';
 442                 innerDiv.id = 'sliderGreenColor';
 443                 allColorDiv.appendChild(innerDiv);
 444
 445                 var innerDivInput = document.createElement('DIV');
 446                 innerDivInput.className='colorInput';
 447
 448                 var input = document.createElement('INPUT');
 449                 input.id = 'js_color_picker_green_color';
 450                 input.maxlength = 3;
 451                 input.style.width = '48px';
 452                 input.style.fontSize = '11px';
 453                 input.name = 'GreenColor';
 454                 input.value = 0;
 455
 456                 innerDivInput.appendChild(input);
 457                 allColorDiv.appendChild(innerDivInput);
 458
 459                 var labelDiv = document.createElement('DIV');
 460                 labelDiv.className='colorSliderLabel';
 461                 labelDiv.innerHTML = 'B';
 462                 allColorDiv.appendChild(labelDiv);
 463                 var innerDiv = document.createElement('DIV');
 464                 innerDiv.className = 'colorSlider';
 465                 innerDiv.id = 'sliderBlueColor';
 466                 allColorDiv.appendChild(innerDiv);
 467
 468                 var innerDivInput = document.createElement('DIV');
 469                 innerDivInput.className='colorInput';
 470
 471                 var input = document.createElement('INPUT');
 472                 input.id = 'js_color_picker_blue_color';
 473                 input.maxlength = 3;
 474                 input.style.width = '48px';
 475                 input.style.fontSize = '11px';
 476                 input.name = 'BlueColor';
 477                 input.value = 0;
 478
 479                 innerDivInput.appendChild(input);
 480                 allColorDiv.appendChild(innerDivInput);
 481
 482
 483                 var colorPreview = document.createElement('DIV');
 484                 colorPreview.className='colorPreviewDiv';
 485                 colorPreview.id = 'colorPreview';
 486                 colorPreview.style.backgroundColor = '#000000';
 487                 colorPreview.innerHTML = '<span></span>';
 488                 colorPreview.title = 'Click on me to assign color';
 489                 allColorDiv.appendChild(colorPreview);
 490                 colorPreview.onclick = chooseColorSlider;
 491
 492                 var colorCodeDiv = document.createElement('DIV');
 493                 colorCodeDiv.className='colorCodeDiv';
 494                 var input = document.createElement('INPUT');
 495                 input.id = 'js_color_picker_color_code';
 496
 497                 colorCodeDiv.appendChild(input);
 498                 input.maxLength = 7;
 499                 input.style.fontSize = '11px';
 500                 input.style.width = '48px';
 501                 input.value = '#000000';
 502                 input.onchange = setPreviewColorFromTxt;
 503                 input.onblur = setPreviewColorFromTxt;
 504                 allColorDiv.appendChild(colorCodeDiv);
 505
 506                 var clearingDiv = document.createElement('DIV');
 507                 clearingDiv.style.clear = 'both';
 508                 allColorDiv.appendChild(clearingDiv);
 509
 510
 511                 form_widget_amount_slider('sliderRedColor',document.getElementById('js_color_picker_red_color'),170,0,255,"setColorByRGB()");
 512                 form_widget_amount_slider('sliderGreenColor',document.getElementById('js_color_picker_green_color'),170,0,255,"setColorByRGB()");
 513                 form_widget_amount_slider('sliderBlueColor',document.getElementById('js_color_picker_blue_color'),170,0,255,"setColorByRGB()");
 514         }
 515
 516         function setPreviewColorFromTxt()
 517         {
 518                 if(this.value.match(/\#[0-9A-F]{6}/g)){
 519                         document.getElementById('colorPreview').style.backgroundColor=this.value;
 520                         var r = this.value.substr(1,2);
 521                         var g = this.value.substr(3,2);
 522                         var b = this.value.substr(5,2);
 523                         document.getElementById('js_color_picker_red_color').value = baseConverter(r,16,10);
 524                         document.getElementById('js_color_picker_green_color').value = baseConverter(g,16,10);
 525                         document.getElementById('js_color_picker_blue_color').value = baseConverter(b,16,10);
 526
 527                         positionSliderImage(false,1,document.getElementById('js_color_picker_red_color'));
 528                         positionSliderImage(false,2,document.getElementById('js_color_picker_green_color'));
 529                         positionSliderImage(false,3,document.getElementById('js_color_picker_blue_color'));
 530                 }
 531
 532         }
 533         function createStatusBar(inputObj)
 534         {
 535                 var div = document.createElement('DIV');
 536                 div.className='colorPicker_statusBar';
 537                 var innerSpan = document.createElement('SPAN');
 538                 innerSpan.id = 'colorPicker_statusBarTxt';
 539                 div.appendChild(innerSpan);
 540                 inputObj.appendChild(div);
 541         }
 542
 543         function chooseColor()
 544         {
 545                 color_picker_form_field.value = this.getAttribute('rgbColor');
 546                 color_picker_div.style.display='none';
 547
 548                 // カラーを設定のコールバック関数呼び出し
 549                 if (setColorFunc) setColorFunc();
 550         }
 551
 552         function chooseColorSlider()
 553         {
 554                 color_picker_form_field.value = document.getElementById('js_color_picker_color_code').value;
 555                 color_picker_div.style.display='none';
 556
 557                 // カラーを設定のコールバック関数呼び出し
 558                 if (setColorFunc) setColorFunc();
 559         }
 560
 561
 562         function showColorPicker(inputObj,formField,callbackFunc)
 563         {
 564                 if(!color_picker_div){
 565                         color_picker_div = document.createElement('DIV');
 566                         color_picker_div.id = 'dhtmlgoodies_colorPicker';
 567                         color_picker_div.style.display='none';
 568                         document.body.appendChild(color_picker_div);
 569                         createColorPickerTopRow(color_picker_div);
 570                         var contentDiv = document.createElement('DIV');
 571                         contentDiv.id = 'color_picker_content';
 572                         color_picker_div.appendChild(contentDiv);
 573                         createWebColors(contentDiv);
 574                         createNamedColors(contentDiv);
 575                         createAllColorDiv(contentDiv);
 576                         createStatusBar(color_picker_div);
 577                 }
 578                 if(color_picker_div.style.display=='none' || color_picker_active_input!=inputObj)color_picker_div.style.display='block'; else color_picker_div.style.display='none';
 579                 color_picker_div.style.left = colorPickerGetLeftPos(inputObj) + 'px';
 580                 color_picker_div.style.top = colorPickerGetTopPos(inputObj) + inputObj.offsetHeight + 2 + 'px';
 581                 color_picker_form_field = formField;
 582                 color_picker_active_input = inputObj;
 583
 584                 if (callbackFunc) setColorFunc = callbackFunc;                          // カラーを設定したときのコールバック関数
 585         }
 586
 587         function setColorByRGB()
 588         {
 589                 var formObj = document.forms[0];
 590                 var r = document.getElementById('js_color_picker_red_color').value.replace(/[^\d]/,'');
 591                 var g = document.getElementById('js_color_picker_green_color').value.replace(/[^\d]/,'');
 592                 var b = document.getElementById('js_color_picker_blue_color').value.replace(/[^\d]/,'');
 593                 if(r/1>255)r=255;
 594                 if(g/1>255)g=255;
 595                 if(b/1>255)b=255;
 596                 r = baseConverter(r,10,16) + '';
 597                 g = baseConverter(g,10,16) + '';
 598                 b = baseConverter(b,10,16) + '';
 599                 if(r.length==1)r = '0' + r;
 600                 if(g.length==1)g = '0' + g;
 601                 if(b.length==1)b = '0' + b;
 602
 603                 document.getElementById('colorPreview').style.backgroundColor = '#' + r + g + b;
 604                 document.getElementById('js_color_picker_color_code').value = '#' + r + g + b;
 605         }