Changeset 600


Ignore:
Timestamp:
10/18/06 17:03:30 (8 years ago)
Author:
wymsy
Message:

Enhanced color picker widget. Numerous improvements by mokhet and wymsy, see ticket #85 for details.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/htmlarea.js

    r599 r600  
    368368  // position of color picker from toolbar button 
    369369  this.colorPickerPosition = 'bottom,right'; 
     370  // set to true to show websafe checkbox in picker 
     371  this.colorPickerWebSafe = false; 
     372  // number of recent colors to remember 
     373  this.colorPickerSaveColors = 20; 
    370374 
    371375  /** CUSTOMIZING THE TOOLBAR 
     
    42664270  var editor = this;    // for nested functions 
    42674271  var btn = editor._toolbarObjects[cmdID].element; 
     4272  var initcolor; 
    42684273  if ( cmdID == 'hilitecolor' ) 
    42694274  { 
     
    42714276    { 
    42724277      cmdID = 'backcolor'; 
     4278      initcolor = HTMLArea._colorToRgb(editor._doc.queryCommandValue("backcolor")); 
     4279    } 
     4280    else 
     4281    { 
     4282      initcolor = HTMLArea._colorToRgb(editor._doc.queryCommandValue("hilitecolor")); 
    42734283    } 
    42744284    // @todo : useCSS is deprecated, see ticket #619 
    4275     if ( HTMLArea.is_gecko ) 
     4285    //[wymsy]: mozilla bug #279330 has been fixed, I don't think we need this any more 
     4286  /*  if ( HTMLArea.is_gecko ) 
    42764287    { 
    42774288      try 
    42784289      { 
    4279         editor._doc.execCommand('useCSS', false, false); //switch on useCSS (mozilla bug #279330) 
     4290     //   editor._doc.execCommand('useCSS', false, false); //switch on useCSS (mozilla bug #279330) 
    42804291      } catch (ex) {} 
    4281     } 
     4292    }*/ 
     4293  } 
     4294  else 
     4295  { 
     4296        initcolor = HTMLArea._colorToRgb(editor._doc.queryCommandValue("forecolor")); 
    42824297  } 
    42834298  var cback = function(color) { editor._doc.execCommand(cmdID, false, color); }; 
     
    42914306    }; 
    42924307  } 
    4293   var picker = new colorPicker({cellsize:editor.config.colorPickerCellSize,callback:cback,granularity:editor.config.colorPickerGranularity}); 
    4294   picker.open(editor.config.colorPickerPosition, btn); 
     4308  var picker = new colorPicker( 
     4309  { 
     4310        cellsize:editor.config.colorPickerCellSize, 
     4311        callback:cback, 
     4312        granularity:editor.config.colorPickerGranularity, 
     4313        websafe:editor.config.colorPickerWebSafe, 
     4314        savecolors:editor.config.colorPickerSaveColors 
     4315  }); 
     4316  picker.open(editor.config.colorPickerPosition, btn, initcolor); 
    42954317}; 
    42964318 
  • trunk/popups/color_picker.js

    r376 r600  
    4848   *              // displays quickly, but doesn't show as many different colors. 
    4949   *              // Experiement with it, 18 seems like a good number. 
    50    *            granularity: 18 
     50   *            granularity: 18, 
     51   *              // Websafe specifies whether or not to include the Web Safe checkbox 
     52   *            websafe: false, 
     53   *              // Savecolors specifies the number of recently-selected colors to remember 
     54   *            savecolors: 20 
    5155   *           } 
    5256   *        ); 
     
    5458   *      // And now hookup the button to open the picker, 
    5559   *      //  the function to do that is myPicker.open() 
    56    *      //  it accepts two parameters, the "anchorage" and the element to anchor to 
    57    *      //  to anchor to. 
     60   *      //  it accepts two parameters, the "anchorage" and the element to anchor to, 
     61   *      //  and an optional third parameter, an initial color code to show in  
     62   *      //  the text box and sample. 
    5863   *      // 
    5964   *      //  anchorage is made up of two of the keywords bottom,top,left and right 
     
    6671   *        function() 
    6772   *        {              // anchorage   , element to anchor to 
    68    *          myPicker.open('bottom,right', myPicker) 
     73   *          myPicker.open('bottom,right', myButton, initcolor) 
    6974   *        }; 
    7075   *    } 
     
    7580  function colorPicker(params) 
    7681  { 
     82    // if the savedColors is empty, try to read the savedColors from cookie 
     83    if ( colorPicker.savedColors.length === 0 ) 
     84    { 
     85      colorPicker.loadColors(); 
     86    } 
    7787    var picker = this; 
    78     this.callback = params.callback?params.callback:function(color){alert('You picked ' + color )}; 
    79  
    80     this.cellsize = params.cellsize?params.cellsize:'10px'; 
     88    var enablepick = false; 
     89    var enablevalue = false; 
     90    var pickrow = 0; 
     91    var pickcol = 0; 
     92    this.callback = params.callback?params.callback:function(color){alert('You picked ' + color );}; 
     93    this.websafe  = params.websafe?params.websafe:false; 
     94    this.savecolors = params.savecolors? params.savecolors: 20; 
     95 
     96    this.cellsize = parseInt(params.cellsize?params.cellsize:'10px', 10); 
    8197    this.side     = params.granularity?params.granularity:18; 
     98    var valuecol = this.side + 1; 
     99    var valuerow = this.side - 1; 
    82100 
    83101    this.value = 1; 
     
    85103    this.table = document.createElement('table'); 
    86104    this.table.cellSpacing = this.table.cellPadding = 0; 
     105    this.table.onmouseup = function() 
     106    { 
     107         enablepick = false; 
     108         enablevalue = false; 
     109    }; 
    87110    this.tbody = document.createElement('tbody'); 
    88111    this.table.appendChild(this.tbody); 
    89112    this.table.style.border = '1px solid WindowFrame'; 
    90     this.table.style.backgroundColor = 'Window'; 
     113    this.table.style.backgroundColor = '#fff'; 
    91114    // Add a title bar and close button 
    92115    var tr = document.createElement('tr'); 
     116     
    93117    var td = document.createElement('td'); 
    94     var but = document.createElement('button'); 
    95     but.onclick = function() { picker.close(); } 
    96     but.appendChild(document.createTextNode('x')); 
    97     td.appendChild(but); 
    98     td.style.position = 'relative'; 
    99     td.style.verticalAlign = 'middle'; 
    100     but.style.cssFloat = 'right'; 
    101     but.style.styleFloat = 'right'; 
    102  
    103  
    104     td.colSpan = this.side + 3; 
    105     td.style.backgroundColor = 'ActiveCaption'; 
    106     td.style.color = 'CaptionText'; 
     118    td.colSpan = this.side; 
     119    td.style.backgroundColor = '#ccc'; 
     120    td.style.color = '#000'; 
    107121    td.style.fontFamily = 'small-caption,caption,sans-serif'; 
    108122    td.style.fontSize = 'x-small'; 
    109123    td.appendChild(document.createTextNode('Click a color...')); 
    110124    td.style.borderBottom = '1px solid WindowFrame'; 
    111  
    112125    tr.appendChild(td); 
     126    td = null; 
     127 
     128    var td = document.createElement('td'); 
     129    td.colSpan = 2; 
     130    td.style.backgroundColor = '#ccc'; //'ActiveCaption'; 
     131    td.style.borderBottom = '1px solid WindowFrame'; 
     132    tr.appendChild(td); 
     133 
     134    var but = document.createElement('div'); 
     135    but.style.height = '12px'; 
     136    but.style.width = '12px'; 
     137    but.style.border = '2px outset'; 
     138    but.style.cursor = 'pointer'; 
     139    but.onclick = function() { picker.close(); }; 
     140    but.appendChild(document.createTextNode('\u00D7')); 
     141    but.align = 'center'; 
     142    but.style.verticalAlign = 'top'; 
     143    but.style.position = 'relative'; 
     144    but.style.cssFloat = 'right'; 
     145    but.style.styleFloat = 'right'; 
     146    but.style.backgroundColor = '#eee'; 
     147    td.appendChild(but); 
     148 
    113149    this.tbody.appendChild(tr); 
    114150    but = tr = td = null; 
     
    117153    this.constrain_cb.type = 'checkbox'; 
    118154 
    119     this.chosenColor     = document.createElement('input'); 
     155    this.chosenColor = document.createElement('input'); 
    120156    this.chosenColor.type = 'text'; 
    121     this.chosenColor.size = '7'; 
    122  
    123     this.backSample     = document.createElement('div'); 
     157    this.chosenColor.maxLength = 7; 
     158    this.chosenColor.style.width = '56px'; 
     159    this.chosenColor.onchange = function() 
     160      { 
     161        if(/#[0-9a-f]{6,6}/i.test(this.value)) 
     162        { 
     163              picker.backSample.style.backgroundColor = this.value; 
     164          picker.foreSample.style.color = this.value; 
     165        } 
     166      }; 
     167 
     168    this.backSample = document.createElement('div'); 
    124169    this.backSample.appendChild(document.createTextNode('\u00A0')); 
    125170    this.backSample.style.fontWeight = 'bold'; 
     
    127172    this.backSample.fontSize = 'x-small'; 
    128173 
    129     this.foreSample     = document.createElement('div'); 
     174    this.foreSample = document.createElement('div'); 
    130175    this.foreSample.appendChild(document.createTextNode('Sample')); 
    131176    this.foreSample.style.fontWeight = 'bold'; 
     
    142187    { 
    143188      var h = dec.toString(16); 
    144       if(h.length < 2) h = '0' + h; 
     189      if(h.length < 2) { h = '0' + h; } 
    145190      return h; 
    146191    } 
     
    211256    { 
    212257      var colors; 
    213       if(s == 0) 
     258      if(s === 0) 
    214259      { 
    215260        // GREY 
    216         colors = {red:v,green:v,blue:v} 
     261        colors = {red:v,green:v,blue:v}; 
    217262      } 
    218263      else 
     
    231276          case 3: colors =  {red:p, green:q, blue:v}; break; 
    232277          case 4: colors =  {red:t, green:p, blue:v}; break; 
    233           case 5: 
    234278          default:colors =  {red:v, green:p, blue:q}; break; 
    235279        } 
     
    252296     */ 
    253297 
    254     this.open = function(anchorage,element) 
     298    this.open = function(anchorage,element,initcolor) 
    255299    { 
    256300      this.table.style.display = ''; 
    257301 
    258302      this.pick_color(); 
     303      if(initcolor && /#[0-9a-f]{6,6}/i.test(initcolor)) 
     304      { 
     305        this.chosenColor.value = initcolor; 
     306            this.backSample.style.backgroundColor = initcolor; 
     307        this.foreSample.style.color = initcolor; 
     308      } 
    259309 
    260310      // Find position of the element 
     
    269319        e = e.offsetParent; 
    270320      } 
    271       while(e) 
     321      while(e); 
    272322 
    273323      var x, y; 
    274324      if(/top/.test(anchorage)) 
    275325      { 
    276         this.table.style.top = (top - this.table.offsetHeight) + 'px'; 
     326        if(top - this.table.offsetHeight > 0) 
     327        { 
     328          this.table.style.top = (top - this.table.offsetHeight) + 'px'; 
     329        }  
     330        else 
     331        { 
     332                  this.table.style.top = 0; 
     333        } 
    277334      } 
    278335      else 
     
    287344      else 
    288345      { 
    289         this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px'; 
    290       } 
     346        if(left - (this.table.offsetWidth - element.offsetWidth) > 0) 
     347        { 
     348          this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px'; 
     349        } 
     350        else 
     351        { 
     352                  this.table.style.left = 0; 
     353        } 
     354      } 
     355     // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker 
     356      /*@cc_on 
     357      this.iframe.style.top = this.table.style.top; 
     358      this.iframe.style.left = this.table.style.left; 
     359      @*/ 
    291360    }; 
    292361 
     362    function pickCell(cell) 
     363    { 
     364        picker.chosenColor.value = cell.colorCode; 
     365        picker.backSample.style.backgroundColor = cell.colorCode; 
     366        picker.foreSample.style.color = cell.colorCode; 
     367        if((cell.hue >= 195  && cell.saturation > 0.5) ||  
     368                        (cell.hue === 0 && cell.saturation === 0 && cell.value < 0.5) ||  
     369                        (cell.hue !== 0 && picker.value < 0.75)) 
     370        { 
     371          cell.style.borderColor = '#fff'; 
     372        } 
     373        else 
     374        { 
     375          cell.style.borderColor = '#000'; 
     376        } 
     377        pickrow = cell.thisrow; 
     378        pickcol = cell.thiscol; 
     379     } 
     380     
     381    function pickValue(cell) 
     382    { 
     383   //     cell.style.borderWidth = '1px'; 
     384   //     cell.style.borderStyle = 'solid'; 
     385        if(picker.value < 0.5) 
     386        { 
     387           cell.style.borderColor = '#fff'; 
     388        } 
     389        else 
     390        { 
     391                  cell.style.borderColor = '#000'; 
     392        } 
     393        valuerow = cell.thisrow; 
     394        valuecol = cell.thiscol; 
     395        picker.chosenColor.value = picker.saved_cells[pickrow][pickcol].colorCode; 
     396        picker.backSample.style.backgroundColor = picker.saved_cells[pickrow][pickcol].colorCode; 
     397        picker.foreSample.style.color = picker.saved_cells[pickrow][pickcol].colorCode; 
     398    } 
     399     
     400    function unpickCell(row,col) 
     401    { 
     402          picker.saved_cells[row][col].style.borderColor = picker.saved_cells[row][col].colorCode; 
     403    } 
     404     
    293405    /** Draw the color picker. */ 
    294406    this.pick_color = function() 
     
    296408      var rows, cols; 
    297409      var picker = this; 
    298       var huestep = 359/this.side; 
    299       var saturstep = 1/this.side; 
    300       var valustep  = 1/this.side; 
     410      var huestep = 359/(this.side); 
     411      var saturstep = 1/(this.side - 1); 
     412      var valustep  = 1/(this.side - 1); 
    301413      var constrain = this.constrain_cb.checked; 
    302  
    303       if(this.saved_cells == null) 
    304       { 
    305         this.saved_cells = new Array(); 
    306  
    307         for(var row = 0; row <= this.side; row++) 
     414       
     415 
     416      if(this.saved_cells === null) 
     417      { 
     418        this.saved_cells = []; 
     419 
     420        for(var row = 0; row < this.side; row++) 
    308421        { 
    309422          var tr = document.createElement('tr'); 
    310           this.saved_cells[row] = new Array(); 
    311           for(var col = 0; col <= this.side; col++) 
     423          this.saved_cells[row] = []; 
     424          for(var col = 0; col < this.side; col++) 
    312425          { 
    313426            var td = document.createElement('td'); 
     
    321434            } 
    322435            this.saved_cells[row][col] = td; 
    323             td.style.height = td.style.width = this.cellsize; 
     436            td.style.height = this.cellsize + 'px'; 
     437            td.style.width = this.cellsize -2 +'px'; 
     438            td.style.borderWidth = '1px'; 
     439            td.style.borderStyle = 'solid'; 
     440            td.style.borderColor = td.colorCode; 
    324441            td.style.backgroundColor = td.colorCode; 
     442            if(row == pickrow && col == pickcol) 
     443            { 
     444              td.style.borderColor = '#000'; 
     445              this.chosenColor.value = td.colorCode; 
     446              this.backSample.style.backgroundColor = td.colorCode; 
     447              this.foreSample.style.color = td.colorCode; 
     448            } 
    325449            td.hue = huestep * row; 
    326450            td.saturation = saturstep*col; 
     451            td.thisrow = row; 
     452            td.thiscol = col; 
     453            td.onmousedown = function() 
     454            { 
     455              enablepick = true; 
     456//               unpickCell(pickrow,pickcol); 
     457              picker.saved_cells[pickrow][pickcol].style.borderColor = picker.saved_cells[pickrow][pickcol].colorCode; 
     458              pickCell(this); 
     459            }; 
    327460            td.onmouseover = function() 
    328461            { 
    329               picker.chosenColor.value = this.colorCode; 
    330               picker.backSample.style.backgroundColor = this.colorCode; 
    331               picker.foreSample.style.color = this.colorCode; 
    332               if((this.hue >= 195  && this.saturation > 0.25) || picker.value < 0.75) 
    333               { 
    334                 picker.backSample.style.color = 'white'; 
    335               } 
    336               else 
    337               { 
    338                 picker.backSample.style.color = 'black'; 
    339               } 
    340             } 
    341             td.onclick = function() { picker.callback(this.colorCode); picker.close(); } 
     462                 if(enablepick) 
     463                 { 
     464                        pickCell(this); 
     465                 } 
     466            }; 
     467            td.onmouseout = function() 
     468            { 
     469                 if(enablepick) 
     470                 { 
     471    //            this.style.borderColor = picker.saved_cells[this.thisrow][this.thiscol].colorCode; 
     472                this.style.borderColor = this.colorCode; 
     473                 } 
     474            }; 
     475            td.ondblclick = function() { colorPicker.remember(this.colorCode, picker.savecolors); picker.callback(this.colorCode); picker.close(); }; 
    342476            td.appendChild(document.createTextNode(' ')); 
    343477            td.style.cursor = 'pointer'; 
     
    346480          } 
    347481 
    348           // Add a blank and thena value column 
     482          // Add a blank and then a value column 
    349483          var td = document.createElement('td'); 
    350484          td.appendChild(document.createTextNode(' ')); 
    351           td.style.width = this.cellsize; 
     485          td.style.width = this.cellsize + 'px'; 
    352486          tr.appendChild(td); 
    353487          td = null; 
    354488 
    355489          var td = document.createElement('td'); 
     490          this.saved_cells[row][col+1] = td; 
    356491          td.appendChild(document.createTextNode(' ')); 
    357           td.style.width  = this.cellsize; 
    358           td.style.height = this.cellsize; 
     492          td.style.width  = this.cellsize -2 + 'px'; 
     493          td.style.height = this.cellsize + 'px'; 
    359494          td.constrainedColorCode  = tupleToColor(rgbToWebsafe(hsvToRGB(0,0,valustep*row))); 
    360495          td.style.backgroundColor = td.colorCode = tupleToColor(hsvToRGB(0,0,valustep*row)); 
     496          td.style.borderWidth = '1px'; 
     497          td.style.borderStyle = 'solid'; 
     498//          td.style.borderColor = td.style.backgroundColor; 
     499          td.style.borderColor = td.colorCode; 
     500          if(row == valuerow) 
     501          { 
     502            td.style.borderColor = 'black'; 
     503          } 
    361504          td.hue = huestep * row; 
    362505          td.saturation = saturstep*col; 
    363506          td.hsv_value = valustep*row; 
    364           td.onclick = function() { 
    365             picker.value = this.hsv_value; picker.pick_color(); 
    366             if(picker.constrain_cb.checked) 
    367             { 
    368               picker.chosenColor.value = this.constrainedColorCode; 
     507          td.thisrow = row; 
     508          td.thiscol = col + 1; 
     509          td.onmousedown = function() 
     510          { 
     511            enablevalue = true; 
     512//            unpickCell(valuerow,valuecol); 
     513            picker.saved_cells[valuerow][valuecol].style.borderColor = picker.saved_cells[valuerow][valuecol].colorCode; 
     514            picker.value = this.hsv_value;  
     515            picker.pick_color(); 
     516            pickValue(this); 
     517          }; 
     518          td.onmouseover = function() { 
     519            if(enablevalue) 
     520            { 
     521              picker.value = this.hsv_value;  
     522              picker.pick_color(); 
     523              pickValue(this); 
    369524            } 
    370             else 
    371             { 
    372               picker.chosenColor.value = this.colorCode; 
     525          }; 
     526          td.onmouseout = function() 
     527          { 
     528            if(enablevalue) 
     529            { 
     530       //       this.style.borderWidth = 0; 
     531       //       this.style.borderStyle = 'none'; 
     532              this.style.borderColor = this.colorCode;//''; 
    373533            } 
    374           } 
     534          }; 
    375535          td.style.cursor = 'pointer'; 
    376536          tr.appendChild(td); 
     
    383543        // Add one row of greys 
    384544        var tr = document.createElement('tr'); 
    385         this.saved_cells[row] = new Array(); 
    386         for(var col = 0; col <= this.side; col++) 
     545        this.saved_cells[row] = []; 
     546        for(var col = 0; col < this.side; col++) 
    387547        { 
    388548          var td = document.createElement('td'); 
    389549          if(constrain) 
    390550          { 
    391             td.colorCode = tupleToColor(rgbToWebsafe(hsvToRGB(0, 0, valustep*(this.side-col)))); 
     551            td.colorCode = tupleToColor(rgbToWebsafe(hsvToRGB(0, 0, valustep*(this.side-col-1)))); 
    392552          } 
    393553          else 
    394554          { 
    395             td.colorCode = tupleToColor(hsvToRGB(0, 0, valustep*(this.side-col))); 
     555            td.colorCode = tupleToColor(hsvToRGB(0, 0, valustep*(this.side-col-1))); 
    396556          } 
    397557          this.saved_cells[row][col] = td; 
    398           td.style.height = td.style.width = this.cellsize; 
     558          td.style.height = this.cellsize + 'px'; 
     559          td.style.width = this.cellsize -2 +'px'; 
     560          td.style.borderWidth = '1px'; 
     561          td.style.borderStyle = 'solid'; 
     562          td.style.borderColor = td.colorCode; 
    399563          td.style.backgroundColor = td.colorCode; 
    400564          td.hue = 0; 
    401565          td.saturation = 0; 
     566          td.value = valustep*(this.side-col-1); 
     567          td.thisrow = row; 
     568          td.thiscol = col; 
     569          td.onmousedown = function() 
     570          { 
     571            enablepick = true; 
     572  //          unpickCell(pickrow,pickcol); 
     573            picker.saved_cells[pickrow][pickcol].style.borderColor = picker.saved_cells[pickrow][pickcol].colorCode; 
     574            pickCell(this); 
     575          }; 
    402576          td.onmouseover = function() 
    403577          { 
    404             picker.chosenColor.value = this.colorCode; 
    405             picker.backSample.style.backgroundColor = this.colorCode; 
    406             picker.foreSample.style.color = this.colorCode; 
    407             if((this.hue >= 195  && this.saturation > 0.25) || picker.value < 0.75) 
    408             { 
    409               picker.backSample.style.color = 'white'; 
     578            if(enablepick) 
     579            { 
     580              pickCell(this); 
    410581            } 
    411             else 
    412             { 
    413               picker.backSample.style.color = 'black'; 
    414             } 
    415           } 
    416           td.onclick = function() { picker.callback(this.colorCode); picker.close(); } 
     582          }; 
     583          td.onmouseout = function() 
     584          { 
     585            if(enablepick) 
     586            { 
     587   //           this.style.borderColor = picker.saved_cells[this.thisrow][this.thiscol].colorCode; 
     588              this.style.borderColor = this.colorCode; 
     589                   } 
     590          }; 
     591          td.ondblclick = function() { colorPicker.remember(this.colorCode, picker.savecolors); picker.callback(this.colorCode); picker.close(); }; 
    417592          td.appendChild(document.createTextNode(' ')); 
    418593          td.style.cursor = 'pointer'; 
     
    423598        tr = null; 
    424599 
    425  
    426600        var tr = document.createElement('tr'); 
    427601        var td = document.createElement('td'); 
    428602        tr.appendChild(td); 
    429         td.colSpan = this.side + 3; 
     603        td.colSpan = this.side + 2; 
    430604        td.style.padding = '3px'; 
    431605 
     606        if ( this.websafe ) 
     607        { 
    432608        var div = document.createElement('div'); 
    433609        var label = document.createElement('label'); 
    434610        label.appendChild(document.createTextNode('Web Safe: ')); 
    435611 
    436         this.constrain_cb.onclick = function() { picker.pick_color() }; 
     612        this.constrain_cb.onclick = function() { picker.pick_color(); }; 
    437613        label.appendChild(this.constrain_cb); 
    438614        label.style.fontFamily = 'small-caption,caption,sans-serif'; 
     
    440616        div.appendChild(label); 
    441617        td.appendChild(div); 
     618        div = null; 
     619        } 
    442620 
    443621        var div = document.createElement('div'); 
     
    448626        label.appendChild(this.chosenColor); 
    449627        div.appendChild(label); 
     628        var but = document.createElement('span'); 
     629        but.style.height = '12px'; 
     630        but.style.width = '24px'; 
     631        but.style.border = '2px outset'; 
     632        but.style.backgroundColor = '#eee'; 
     633        but.style.marginLeft = '6px'; 
     634        but.style.cursor = 'pointer'; 
     635        but.onclick = function() { colorPicker.remember(picker.chosenColor.value, picker.savecolors); picker.callback(picker.chosenColor.value); picker.close(); }; 
     636        but.appendChild(document.createTextNode('OK')); 
     637        but.align = 'center'; 
     638        div.appendChild(but); 
    450639        td.appendChild(div); 
    451640 
     
    466655 
    467656        td.appendChild(sampleTable); 
    468  
     657        var savedColors = document.createElement('div'); 
     658        savedColors.style.clear = 'both'; 
     659 
     660        function createSavedColors(color) 
     661        { 
     662          var is_ie = false; 
     663          /*@cc_on is_ie = true; @*/ 
     664          var div = document.createElement('div'); 
     665          div.style.width = picker.cellsize + 'px';//13px'; 
     666          div.style.height = picker.cellsize + 'px';//13px'; 
     667          div.style.margin = '1px'; 
     668          div.style.border = '1px solid black'; 
     669          div.style.cursor = 'pointer'; 
     670          div.style.backgroundColor = color; 
     671          div.style[ is_ie ? 'styleFloat' : 'cssFloat'] = 'left'; 
     672     //     div.onclick = function() { picker.callback(color); picker.close(); }; 
     673          div.ondblclick = function() { picker.callback(color); picker.close(); }; 
     674   //       div.onmouseover = function() 
     675          div.onclick = function() 
     676          { 
     677            picker.chosenColor.value = color; 
     678            picker.backSample.style.backgroundColor = color; 
     679            picker.foreSample.style.color = color; 
     680          }; 
     681          savedColors.appendChild(div); 
     682        } 
     683        for ( var savedCols = 0; savedCols < colorPicker.savedColors.length; savedCols++ ) 
     684        { 
     685          createSavedColors(colorPicker.savedColors[savedCols]); 
     686        } 
     687        td.appendChild(savedColors); 
    469688 
    470689        this.tbody.appendChild(tr); 
    471690        document.body.appendChild(this.table); 
    472  
     691         
     692        //put an iframe behind the table to mask select lists in ie 
     693        // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker 
     694        /*@cc_on 
     695        if ( !this.iframe ) 
     696        { 
     697        this.iframe = document.createElement('iframe'); 
     698        this.iframe.frameBorder = 0; 
     699        this.iframe.src = "javascript:;"; 
     700        this.iframe.style.position = "absolute"; 
     701        this.iframe.style.width = this.table.offsetWidth; 
     702        this.iframe.style.height = this.table.offsetHeight; 
     703        document.body.insertBefore(this.iframe, this.table); 
     704        } 
     705        this.iframe.style.display = ''; 
     706        @*/ 
    473707      } 
    474708      else 
    475709      { 
    476         for(var row = 0; row <= this.side; row++) 
    477         { 
    478           for(var col = 0; col <= this.side; col++) 
     710        for(var row = 0; row < this.side; row++) 
     711        { 
     712          for(var col = 0; col < this.side; col++) 
    479713          { 
    480714            if(constrain) 
     
    487721            } 
    488722            this.saved_cells[row][col].style.backgroundColor = this.saved_cells[row][col].colorCode; 
     723            this.saved_cells[row][col].style.borderColor = this.saved_cells[row][col].colorCode; 
    489724          } 
     725        } 
     726        var pickcell = this.saved_cells[pickrow][pickcol]; 
     727        this.chosenColor.value = pickcell.colorCode; 
     728        this.backSample.style.backgroundColor = pickcell.colorCode; 
     729        this.foreSample.style.color = pickcell.colorCode; 
     730        if((pickcell.hue >= 195  && pickcell.saturation > 0.5) ||  
     731                        (pickcell.hue === 0 && pickcell.saturation === 0 && pickcell.value < 0.5) ||  
     732                        (pickcell.hue !== 0 && picker.value < 0.75)) 
     733        { 
     734           pickcell.style.borderColor = '#fff'; 
     735        } 
     736        else 
     737        { 
     738                  pickcell.style.borderColor = '#000'; 
    490739        } 
    491740      } 
     
    496745    { 
    497746      this.table.style.display = 'none'; 
     747      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker 
     748      /*@cc_on 
     749      if ( this.iframe ) { this.iframe.style.display = 'none'; } 
     750      @*/ 
    498751    }; 
    499752 
    500753  } 
     754 
     755// array of the saved colors 
     756colorPicker.savedColors = []; 
     757 
     758// add the color to the savedColors 
     759colorPicker.remember = function(color, savecolors) 
     760{ 
     761  // check if this color is known 
     762  for ( var i = colorPicker.savedColors.length; i--; ) 
     763  { 
     764    if ( colorPicker.savedColors[i] == color ) 
     765    { 
     766      return false; 
     767    } 
     768  } 
     769  // insert the new color 
     770  colorPicker.savedColors.splice(0, 0, color); 
     771  // limit elements 
     772  colorPicker.savedColors = colorPicker.savedColors.slice(0, savecolors); 
     773  //[mokhet] probably some more parameters to send to the cookie definition 
     774  // like domain, secure and such, especially with https connection i presume 
     775  // save the cookie 
     776  var expdate = new Date(); 
     777  expdate.setMonth(expdate.getMonth() + 1); 
     778 
     779  document.cookie = 'XinhaColorPicker=' + escape (colorPicker.savedColors.join('-')) + ';expires=' + expdate.toGMTString(); 
     780  return true; 
     781}; 
     782 
     783// try to read the colors from the cookie 
     784colorPicker.loadColors = function() 
     785{ 
     786  var index = document.cookie.indexOf('XinhaColorPicker'); 
     787  if ( index != -1 ) 
     788  { 
     789    var begin = (document.cookie.indexOf('=', index) + 1); 
     790    var end = document.cookie.indexOf(';', index); 
     791    if ( end == -1 ) { end = document.cookie.length; } 
     792    colorPicker.savedColors = unescape(document.cookie.substring(begin, end)).split('-'); 
     793  } 
     794}; 
Note: See TracChangeset for help on using the changeset viewer.