[Sommaire] [Imprimer]

   1  Prado.WebUI.TColorPicker = Class.create();
   2  
   3  Object.extend(Prado.WebUI.TColorPicker,
   4  {
   5      palettes: 
   6      {
   7          Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],
   8                  ["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],
   9                  ["c0c0c0", "f00", "f90", "fc6", "ff0", "3f3", "6cc", "3cf", "66c", "c6c"],
  10                  ["999", "c00", "f60", "fc3", "fc0", "3c0", "0cc", "36f", "63f", "c3c"],
  11                  ["666", "900", "c60", "c93", "990", "090", "399", "33f", "60c", "939"],
  12                  ["333", "600", "930", "963", "660", "060", "366", "009", "339", "636"],
  13                  ["000", "300", "630", "633", "330", "030", "033", "006", "309", "303"]],
  14  
  15          Tiny : [["ffffff"/*white*/, "00ff00"/*lime*/, "008000"/*green*/, "0000ff"/*blue*/],
  16                  ["c0c0c0"/*silver*/, "ffff00"/*yellow*/, "ff00ff"/*fuchsia*/, "000080"/*navy*/],
  17                  ["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]
  18      },
  19  
  20      UIImages : 
  21      {
  22          'button.gif' : 'button.gif',
  23  //        'target_black.gif' : 'target_black.gif',
  24  //        'target_white.gif' : 'target_white.gif',
  25          'background.png' : 'background.png'
  26  //        'slider.gif' : 'slider.gif',
  27  //        'hue.gif' : 'hue.gif'
  28      }
  29  });
  30  
  31  Object.extend(Prado.WebUI.TColorPicker.prototype, 
  32  {
  33      initialize : function(options)
  34      {
  35          var basics = 
  36          {
  37              Palette : 'Small',
  38              ClassName : 'TColorPicker',
  39              Mode : 'Basic',
  40              OKButtonText : 'OK',
  41              CancelButtonText : 'Cancel',
  42              ShowColorPicker : true
  43          }
  44          
  45          this.element = null;
  46          this.showing = false;
  47  
  48          options = Object.extend(basics, options);
  49          this.options = options;
  50          this.input = $(options['ID']);
  51          this.button = $(options['ID']+'_button');
  52          this._buttonOnClick = this.buttonOnClick.bind(this);
  53          if(options['ShowColorPicker'])
  54              Event.observe(this.button, "click", this._buttonOnClick);
  55          Event.observe(this.input, "change", this.updatePicker.bind(this));
  56      },
  57  
  58      updatePicker : function(e)
  59      {
  60          var color = Rico.Color.createFromHex(this.input.value);    
  61          this.button.style.backgroundColor = color.toString();
  62      },
  63      
  64      buttonOnClick : function(event)
  65      {
  66          var mode = this.options['Mode'];
  67          if(this.element == null)
  68          {
  69              var constructor = mode == "Basic" ? "getBasicPickerContainer": "getFullPickerContainer"
  70              this.element = this[constructor](this.options['ID'], this.options['Palette'])
  71              this.input.parentNode.appendChild(this.element);
  72              this.element.style.display = "none";
  73  
  74              if(Prado.Browser().ie)
  75              {
  76                  this.iePopUp = document.createElement('iframe');
  77                  this.iePopUp.src = Prado.WebUI.TColorPicker.UIImages['button.gif'];
  78                  this.iePopUp.style.position = "absolute"
  79                  this.iePopUp.scrolling="no"
  80                  this.iePopUp.frameBorder="0"
  81                  this.input.parentNode.appendChild(this.iePopUp);
  82              }
  83              if(mode == "Full")
  84                  this.initializeFullPicker();
  85          }
  86          this.show(mode);
  87      },        
  88  
  89      show : function(type)
  90      {
  91          if(!this.showing)
  92          {
  93              var pos = Position.positionedOffset(this.input);
  94              pos[1] += this.input.offsetHeight;
  95  
  96              this.element.style.top = (pos[1]-1) + "px";
  97              this.element.style.left = pos[0] + "px";
  98              this.element.style.display = "block";
  99              
 100              this.ieHack(type);
 101  
 102              //observe for clicks on the document body
 103              this._documentClickEvent = this.hideOnClick.bindEvent(this, type);
 104              this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type);
 105              Event.observe(document.body, "click", this._documentClickEvent);
 106              Event.observe(document,"keydown", this._documentKeyDownEvent); 
 107              this.showing = true;
 108  
 109              if(type == "Full")
 110              {
 111                  this.observeMouseMovement();
 112                  var color = Rico.Color.createFromHex(this.input.value);
 113                  this.inputs.oldColor.style.backgroundColor = color.asHex();
 114                  this.setColor(color,true);
 115              }
 116          }
 117      },
 118      
 119      hide : function(event)
 120      {
 121          if(this.showing)
 122          {
 123              if(this.iePopUp)
 124                  this.iePopUp.style.display = "none";
 125  
 126              this.element.style.display = "none";
 127              this.showing = false;
 128              Event.stopObserving(document.body, "click", this._documentClickEvent);
 129              Event.stopObserving(document,"keydown", this._documentKeyDownEvent); 
 130              
 131              if(this._observingMouseMove)
 132              {            
 133                  Event.stopObserving(document.body, "mousemove", this._onMouseMove);    
 134                  this._observingMouseMove = false;
 135              }
 136          }
 137      },
 138  
 139      keyPressed : function(event,type)
 140      {
 141          if(Event.keyCode(event) == Event.KEY_ESC)
 142              this.hide(event,type);
 143      },
 144  
 145      hideOnClick : function(ev)
 146      {
 147          if(!this.showing) return;
 148          var el = Event.element(ev);
 149          var within = false;
 150          do
 151          {    within = within || String(el.className).indexOf('FullColorPicker') > -1
 152              within = within || el == this.button;
 153              within = within || el == this.input;
 154              if(within) break;
 155              el = el.parentNode;            
 156          }
 157          while(el);
 158          if(!within) this.hide(ev);
 159      },
 160  
 161      ieHack : function() 
 162      {
 163          // IE hack
 164          if(this.iePopUp) 
 165          {
 166              this.iePopUp.style.display = "block";
 167              this.iePopUp.style.top = (this.element.offsetTop) + "px";
 168              this.iePopUp.style.left = (this.element.offsetLeft)+ "px";
 169              this.iePopUp.style.width = Math.abs(this.element.offsetWidth)+ "px";
 170              this.iePopUp.style.height = (this.element.offsetHeight + 1)+ "px";
 171          }
 172      },
 173  
 174      getBasicPickerContainer : function(pickerID, palette)
 175      {
 176          var table = TABLE({className:'basic_colors palette_'+palette},TBODY());
 177          var colors = Prado.WebUI.TColorPicker.palettes[palette];
 178          var pickerOnClick = this.cellOnClick.bind(this);
 179          colors.each(function(color)
 180          {
 181              var row = document.createElement("tr");
 182              color.each(function(c)
 183              {
 184                  var td = document.createElement("td");
 185                  var img = IMG({src:Prado.WebUI.TColorPicker.UIImages['button.gif'],width:16,height:16});
 186                  img.style.backgroundColor = "#"+c;
 187                  Event.observe(img,"click", pickerOnClick);
 188                  Event.observe(img,"mouseover", function(e)
 189                  {
 190                      Element.addClassName(Event.element(e), "pickerhover");
 191                  });
 192                  Event.observe(img,"mouseout", function(e)
 193                  {
 194                      Element.removeClassName(Event.element(e), "pickerhover");
 195                  });
 196                  td.appendChild(img);
 197                  row.appendChild(td);
 198              });
 199              table.childNodes[0].appendChild(row);
 200          });
 201          return DIV({className:this.options['ClassName']+" BasicColorPicker",
 202                      id:pickerID+"_picker"}, table);
 203      },
 204  
 205      cellOnClick : function(e)
 206      {
 207          var el = Event.element(e); 
 208          if(el.tagName.toLowerCase() != "img")
 209              return;
 210          var color = Rico.Color.createColorFromBackground(el);
 211          this.updateColor(color);
 212      },
 213  
 214      updateColor : function(color)
 215      {
 216          this.input.value = color.toString().toUpperCase();
 217          this.button.style.backgroundColor = color.toString();
 218          if(typeof(this.onChange) == "function")
 219              this.onChange(color);
 220      },
 221  
 222      getFullPickerContainer : function(pickerID)
 223      {            
 224          //create the 3 buttons
 225          this.buttons = 
 226          {
 227              //Less   : INPUT({value:'Less Colors', className:'button', type:'button'}),
 228              OK       : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}),
 229              Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})
 230          };
 231          
 232          //create the 6 inputs
 233          var inputs = {};
 234          ['H','S','V','R','G','B'].each(function(type)
 235          {
 236              inputs[type] = INPUT({type:'text',size:'3',maxlength:'3'});
 237          });
 238  
 239          //create the HEX input
 240          inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});
 241          this.inputs = inputs;
 242          
 243          var images = Prado.WebUI.TColorPicker.UIImages;
 244  
 245          this.inputs['currentColor'] = SPAN({className:'currentColor'});
 246          this.inputs['oldColor'] = SPAN({className:'oldColor'});
 247  
 248          var inputsTable = 
 249              TABLE({className:'inputs'}, TBODY(null,
 250                  TR(null,
 251                      TD({className:'currentcolor',colSpan:2},
 252                          this.inputs['currentColor'], this.inputs['oldColor'])),
 253  
 254                  TR(null,
 255                      TD(null,'H:'),
 256                      TD(null,this.inputs['H'], '??')),
 257  
 258                  TR(null,
 259                      TD(null,'S:'),
 260                      TD(null,this.inputs['S'], '%')),
 261                  
 262                  TR(null, 
 263                      TD(null,'V:'),
 264                      TD(null,this.inputs['V'], '%')),
 265                  
 266                  TR(null, 
 267                      TD({className:'gap'},'R:'),
 268                      TD({className:'gap'},this.inputs['R'])),
 269                  
 270                  TR(null, 
 271                      TD(null,'G:'),
 272                      TD(null, this.inputs['G'])),
 273  
 274                  TR(null, 
 275                      TD(null,'B:'),
 276                      TD(null, this.inputs['B'])),
 277  
 278                  TR(null, 
 279                      TD({className:'gap'},'#'),
 280                      TD({className:'gap'},this.inputs['HEX']))
 281              ));
 282  
 283          var UIimages = 
 284          {        
 285              selector : SPAN({className:'selector'}),
 286              background : SPAN({className:'colorpanel'}),
 287              slider : SPAN({className:'slider'}),
 288              hue : SPAN({className:'strip'})
 289          }
 290  
 291          //png alpha channels for IE
 292          if(Prado.Browser().ie)
 293          {
 294              var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
 295              UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"})
 296          }
 297          
 298          this.inputs = Object.extend(this.inputs, UIimages);
 299  
 300          var pickerTable = 
 301              TABLE(null,TBODY(null,
 302                  TR({className:'selection'},
 303                      TD({className:'colors'},UIimages['selector'],UIimages['background']),
 304                      TD({className:'hue'},UIimages['slider'],UIimages['hue']),
 305                      TD({className:'inputs'}, inputsTable)
 306                  ),
 307                  TR({className:'options'}, 
 308                      TD({colSpan:3}, 
 309                          this.buttons['OK'], 
 310                          this.buttons['Cancel'])
 311                  )
 312              ));
 313          
 314          return DIV({className:this.options['ClassName']+" FullColorPicker",
 315                          id:pickerID+"_picker"},pickerTable);
 316      },
 317  
 318      initializeFullPicker : function()
 319      {
 320          var color = Rico.Color.createFromHex(this.input.value);
 321          this.inputs.oldColor.style.backgroundColor = color.asHex();
 322          this.setColor(color,true);
 323  
 324          var i = 0; 
 325          for(var type in this.inputs)
 326          {
 327              Event.observe(this.inputs[type], "change", 
 328                  this.onInputChanged.bindEvent(this,type));
 329              i++;
 330  
 331              if(i > 6) break;
 332          }
 333      
 334          this.isMouseDownOnColor = false;
 335          this.isMouseDownOnHue = false;
 336  
 337          this._onColorMouseDown = this.onColorMouseDown.bind(this);
 338          this._onHueMouseDown = this.onHueMouseDown.bind(this);
 339          this._onMouseUp = this.onMouseUp.bind(this);
 340          this._onMouseMove = this.onMouseMove.bind(this);
 341  
 342          Event.observe(this.inputs.background, "mousedown", this._onColorMouseDown);
 343          Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);
 344          Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);
 345          Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);
 346          
 347          Event.observe(document.body, "mouseup", this._onMouseUp);
 348          
 349          this.observeMouseMovement();
 350  
 351          Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode']));
 352          Event.observe(this.buttons.OK, "click", this.onOKClicked.bind(this));
 353      },
 354  
 355      observeMouseMovement : function()
 356      {
 357          if(!this._observingMouseMove)
 358          {
 359              Event.observe(document.body, "mousemove", this._onMouseMove);
 360              this._observingMouseMove = true;
 361          }        
 362      },
 363  
 364      onColorMouseDown : function(ev)
 365      {
 366          this.isMouseDownOnColor = true;
 367          this.onMouseMove(ev);
 368          Event.stop(ev);
 369      },
 370  
 371      onHueMouseDown : function(ev)
 372      {
 373          this.isMouseDownOnHue = true;
 374          this.onMouseMove(ev);
 375          Event.stop(ev);
 376      },
 377  
 378      onMouseUp : function(ev)
 379      {
 380          this.isMouseDownOnColor = false;
 381          this.isMouseDownOnHue = false;
 382          Event.stop(ev);
 383      },
 384  
 385      onMouseMove : function(ev)
 386      {
 387          if(this.isMouseDownOnColor)
 388              this.changeSV(ev);
 389          if(this.isMouseDownOnHue)
 390              this.changeH(ev);
 391          Event.stop(ev);
 392      },    
 393  
 394      changeSV : function(ev)
 395      {
 396          var px = Event.pointerX(ev);
 397          var py = Event.pointerY(ev);
 398          var pos = Position.cumulativeOffset(this.inputs.background);
 399          
 400          var x = this.truncate(px - pos[0],0,255); 
 401          var y = this.truncate(py - pos[1],0,255);
 402  
 403  
 404          var s = x/255;
 405          var b = (255-y)/255;
 406  
 407          var current_s = parseInt(this.inputs.S.value);
 408          var current_b = parseInt(this.inputs.V.value);
 409          
 410          if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return;
 411  
 412          var h = this.truncate(this.inputs.H.value,0,360)/360;
 413  
 414          var color = new Rico.Color();
 415          color.rgb = Rico.Color.HSBtoRGB(h,s,b);
 416  
 417  
 418          this.inputs.selector.style.left = x+"px";
 419          this.inputs.selector.style.top = y+"px";
 420          
 421          this.inputs.currentColor.style.backgroundColor = color.asHex();
 422  
 423          return this.setColor(color);
 424      },
 425  
 426      changeH : function(ev)
 427      {
 428          var py = Event.pointerY(ev);
 429          var pos = Position.cumulativeOffset(this.inputs.background);
 430          var y = this.truncate(py - pos[1],0,255);
 431          
 432          var h = (255-y)/255;
 433          var current_h = this.truncate(this.inputs.H.value,0,360);
 434          current_h = current_h == 0 ? 360 : current_h;
 435          if(current_h == parseInt(h*360)) return;
 436  
 437          var s = parseInt(this.inputs.S.value)/100;
 438          var b = parseInt(this.inputs.V.value)/100;
 439          var color = new Rico.Color();
 440          color.rgb = Rico.Color.HSBtoRGB(h,s,b);
 441  
 442          var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);
 443          hue.setSaturation(1); hue.setBrightness(1);
 444  
 445          this.inputs.background.style.backgroundColor = hue.asHex();
 446          this.inputs.currentColor.style.backgroundColor = color.asHex();
 447  
 448          this.inputs.slider.style.top = this.truncate(y,0,255)+"px";
 449          return this.setColor(color);
 450  
 451      },
 452  
 453      onOKClicked : function(ev)
 454      {
 455          var r = this.truncate(this.inputs.R.value,0,255);///255;
 456          var g = this.truncate(this.inputs.G.value,0,255);///255;
 457          var b = this.truncate(this.inputs.B.value,0,255);///255;
 458          var color = new Rico.Color(r,g,b);
 459          this.updateColor(color);
 460          this.inputs.oldColor.style.backgroundColor = color.asHex();
 461          this.hide(ev);
 462      },
 463  
 464      onInputChanged : function(ev, type)
 465      {
 466          if(this.isMouseDownOnColor || isMouseDownOnHue)
 467              return;
 468  
 469  
 470          switch(type)
 471          {
 472              case "H": case "S": case "V":
 473                  var h = this.truncate(this.inputs.H.value,0,360)/360;
 474                  var s = this.truncate(this.inputs.S.value,0,100)/100;
 475                  var b = this.truncate(this.inputs.V.value,0,100)/100;
 476                  var color = new Rico.Color();
 477                  color.rgb = Rico.Color.HSBtoRGB(h,s,b);
 478                  return this.setColor(color,true);
 479              case "R": case "G": case "B":
 480                  var r = this.truncate(this.inputs.R.value,0,255);///255;
 481                  var g = this.truncate(this.inputs.G.value,0,255);///255;
 482                  var b = this.truncate(this.inputs.B.value,0,255);///255;
 483                  var color = new Rico.Color(r,g,b);
 484                  return this.setColor(color,true);
 485              case "HEX":
 486                  var color = Rico.Color.createFromHex(this.inputs.HEX.value);
 487                  return this.setColor(color,true);
 488          }
 489      },
 490  
 491      setColor : function(color, update)
 492      {
 493          var hsb = color.asHSB();
 494  
 495          this.inputs.H.value = parseInt(hsb.h*360);
 496          this.inputs.S.value = parseInt(hsb.s*100);
 497          this.inputs.V.value = parseInt(hsb.b*100);
 498          this.inputs.R.value = color.rgb.r;
 499          this.inputs.G.value = color.rgb.g;
 500          this.inputs.B.value = color.rgb.b;
 501          this.inputs.HEX.value = color.asHex().substring(1).toUpperCase();
 502          
 503          var images = Prado.WebUI.TColorPicker.UIImages;
 504  
 505          var changeCss = color.isBright() ? 'removeClassName' : 'addClassName';
 506          Element[changeCss](this.inputs.selector, 'target_white');
 507          
 508          if(update)
 509              this.updateSelectors(color);
 510      },
 511  
 512      updateSelectors : function(color)
 513      {
 514          var hsb = color.asHSB();
 515          var pos = [hsb.s*255, hsb.b*255, hsb.h*255];
 516          
 517          this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px";
 518          this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px";
 519          this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px";
 520          
 521          var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);
 522          hue.setSaturation(1); hue.setBrightness(1);
 523          this.inputs.background.style.backgroundColor = hue.asHex();
 524          this.inputs.currentColor.style.backgroundColor = color.asHex();
 525      },
 526  
 527      truncate : function(value, min, max)
 528      {
 529          value = parseInt(value);
 530          return value < min ? min : value > max ? max : value;
 531      }
 532  });