Changeset 770


Ignore:
Timestamp:
03/12/07 20:25:19 (13 years ago)
Author:
ray
Message:

Ticket #980 ImageManager? color format bug

Location:
trunk
Files:
10 edited

Legend:

Unmodified
Added
Removed
  • trunk/Xinha.css

    r767 r770  
    148148 
    149149.dialog .buttonColor { 
     150  width :1em; 
    150151  padding: 1px; 
    151152  cursor: default; 
    152153  border: 1px solid; 
    153154  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
    154 } 
    155  
    156 .dialog .buttonColor-hilite { 
    157   border-color: #000; 
    158155} 
    159156 
     
    163160  padding: 0px 1em; 
    164161  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
     162} 
     163 
     164.dialog .buttonClick { 
     165  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
     166} 
     167.dialog .buttonColor-hilite { 
     168   border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
    165169} 
    166170 
  • trunk/modules/ColorPicker/ColorPicker.js

    r759 r770  
    132132    this.table.appendChild(this.tbody); 
    133133    this.table.style.border = '1px solid WindowFrame'; 
    134     this.table.style.zIndex = '1000'; 
     134    this.table.style.zIndex = '1050'; 
    135135    // Add a title bar and close button 
    136136    var tr = document.createElement('tr'); 
     
    141141    td.style.fontFamily = 'small-caption,caption,sans-serif'; 
    142142    td.style.fontSize = 'x-small'; 
     143    td.unselectable = "on"; 
     144    td.style.MozUserSelect = "none"; 
     145    td.style.cursor = "default"; 
    143146    td.appendChild(document.createTextNode(Xinha._lc('Click a color...'))); 
    144147    td.style.borderBottom = '1px solid WindowFrame'; 
     
    317320      return colors; 
    318321    } 
    319  
     322    var self = this; 
     323    function closeOnBodyClick (ev) 
     324    { 
     325      ev = ev ? ev : window.event; 
     326      el = ev.target ? ev.target : ev.srcElement; 
     327      do 
     328      { 
     329        if (el == self.table) return; 
     330      } 
     331      while (el = el.parentNode); 
     332      self.close(); 
     333    } 
    320334    /** Open the color picker 
    321335     * 
     
    341355      } 
    342356 
     357      Xinha._addEvent(document.body,'mousedown',closeOnBodyClick); 
     358       
    343359      // Find position of the element 
    344360      this.table.style.position = 'absolute'; 
     
    355371 
    356372      var x, y; 
    357       if(/top/.test(anchorage)) 
     373      if(/top/.test(anchorage) || (top + this.table.offsetHeight > document.body.offsetHeight)) 
    358374      { 
    359375        if(top - this.table.offsetHeight > 0) 
     
    371387      } 
    372388 
    373       if(/left/.test(anchorage)) 
     389      if(/left/.test(anchorage) || (left + this.table.offsetWidth > document.body.offsetWidth)) 
     390      { 
     391        if(left - (this.table.offsetWidth - element.offsetWidth) > 0 ) 
     392        { 
     393          this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px'; 
     394        } 
     395        else 
     396        { 
     397                  this.table.style.left = 0; 
     398        } 
     399      } 
     400      else 
    374401      { 
    375402        this.table.style.left = left + 'px'; 
    376       } 
    377       else 
    378       { 
    379         if(left - (this.table.offsetWidth - element.offsetWidth) > 0) 
    380         { 
    381           this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px'; 
    382         } 
    383         else 
    384         { 
    385                   this.table.style.left = 0; 
    386         } 
    387403      } 
    388404     // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker 
     
    777793    this.close = function() 
    778794    { 
     795      Xinha._removeEvent(document.body,'mousedown',closeOnBodyClick); 
    779796      this.table.style.display = 'none'; 
    780797      // IE ONLY - prevent windowed elements (<SELECT>) to render above the colorpicker 
     
    829846  return Xinha._lc(string); 
    830847} 
     848 
     849 
     850/** Create a neat little box next to an input field 
     851 *    * shows actual color 
     852 *    * opens colorPicker on click 
     853 *    * has a button to clear the color with a click 
     854 * 
     855 *  @param input (DOM element)  
     856 *  @param optional pickerConfig configuration object for Xinha.colorPicker() 
     857 */ 
     858Xinha.colorPicker.InputBinding = function(input,pickerConfig) 
     859{ 
     860  var main = document.createElement('span'); 
     861  main.className = "buttonColor"; 
     862   
     863  var chooser = this.chooser = document.createElement('span'); 
     864  chooser.className = "chooser"; 
     865  if (input.value) chooser.style.backgroundColor = input.value; 
     866  chooser.onmouseover = function() {chooser.className = "chooser buttonColor-hilite";}; 
     867  chooser.onmouseout = function() {chooser.className = "chooser";}; 
     868  chooser.appendChild(document.createTextNode('\u00a0')); 
     869  main.appendChild(chooser); 
     870  var clearColor = document.createElement('span'); 
     871  clearColor.className = "nocolor"; 
     872  clearColor.onmouseover = function() {clearColor.className = "nocolor buttonColor-hilite"; clearColor.style.color='#f00'}; 
     873  clearColor.onmouseout = function() {clearColor.className = "nocolor"; clearColor.style.color='#000'}; 
     874  clearColor.onclick = function() {input.value ='';chooser.style.backgroundColor = ''}; 
     875  clearColor.appendChild(document.createTextNode('\u00d7')); 
     876  main.appendChild(clearColor); 
     877   
     878  input.parentNode.insertBefore(main,input.nextSibling); 
     879   
     880  Xinha._addEvent(input,'change',function() {chooser.style.backgroundColor = this.value;}) 
     881 
     882  pickerConfig = (pickerConfig) ? Xinha.cloneObject(pickerConfig) : { cellsize:'5px' }; 
     883  pickerConfig.callback = (pickerConfig.callback) ? pickerConfig.callback : function(color) {chooser.style.backgroundColor = color;input.value=color}; 
     884 
     885  chooser.onclick = function()  
     886  {  
     887    var colPicker = new Xinha.colorPicker(pickerConfig); 
     888          colPicker.open("",chooser, input.value );  
     889  } 
     890} 
  • trunk/plugins/CharacterMap/character-map.js

    r664 r770  
    121121  }; 
    122122  editor._CharacterMap.appendChild( a ); 
     123  a = null; 
    123124}; 
  • trunk/plugins/ExtendedFileManager/assets/manager.css

    r700 r770  
    2727 
    2828.buttonColor { 
    29   padding: 1px; 
     29  width :1em; 
     30  margin-left: 2px; 
    3031  cursor: default; 
     32} 
     33 
     34.buttonColor .chooser, .buttonColor .nocolor { 
     35  height: 0.6em; 
    3136  border: 1px solid; 
     37  padding: 0px 1em; 
    3238  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
    3339} 
     40 
     41.buttonColor .buttonClick { 
     42  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
     43} 
     44.buttonColor .buttonColor-hilite { 
     45  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
     46} 
     47 
     48.buttonColor .nocolor { padding: 0px; } 
     49.buttonColor .nocolor-hilite { background-color: #fff; color: #f00; } 
  • trunk/plugins/ExtendedFileManager/assets/manager.js

    r740 r770  
    7171     
    7272    var editor = window.dialogArguments.editor; 
    73     if (manager_mode == 'image' && typeof Xinha.colorPicker != "undefined" && document.getElementById('bgCol_pick')) { 
    74         // Hookup color pickers 
    75         var pickerConfig = { 
    76             cellsize:editor.config.colorPickerCellSize, 
    77             granularity:editor.config.colorPickerGranularity, 
    78             websafe:editor.config.colorPickerWebSafe, 
    79             savecolors:editor.config.colorPickerSaveColors 
    80         }; 
    81  
    82         var bgCol_pick = document.getElementById('bgCol_pick'); 
    83         var f_backgroundColor = document.getElementById('f_backgroundColor'); 
    84         pickerConfig.callback = function(color){f_backgroundColor.value=color;}; 
    85         var bgColPicker = new Xinha.colorPicker(pickerConfig); 
    86         bgCol_pick.onclick = function() { bgColPicker.open('top,right', f_backgroundColor ); } 
    87  
    88         var bdCol_pick = document.getElementById('bdCol_pick'); 
    89         var f_borderColor = document.getElementById('f_borderColor'); 
    90         pickerConfig.callback = function(color){f_borderColor.value=color;}; 
    91         var bdColPicker = new Xinha.colorPicker(pickerConfig); 
    92         bdCol_pick.onclick = function() { bdColPicker.open('top,right', f_borderColor ); } 
    93     } 
    9473 
    9574    var param = window.dialogArguments.param; 
     
    238217        target_select.appendChild(opt); 
    239218        target_select.onchange = onTargetChanged; 
     219         
    240220        document.getElementById("f_href").focus(); 
    241221    } 
     
    257237                } 
    258238        } 
     239    } 
     240    if (manager_mode == 'image' && typeof Xinha.colorPicker != "undefined" && document.getElementById('f_backgroundColor')) { 
     241      // Hookup color pickers 
     242 
     243      var pickerConfig = { 
     244        cellsize:editor.config.colorPickerCellSize, 
     245        granularity:editor.config.colorPickerGranularity, 
     246        websafe:editor.config.colorPickerWebSafe, 
     247        savecolors:editor.config.colorPickerSaveColors 
     248      }; 
     249 
     250      new Xinha.colorPicker.InputBinding(document.getElementById('f_backgroundColor'),pickerConfig); 
     251      new Xinha.colorPicker.InputBinding(document.getElementById('f_borderColor'),pickerConfig); 
    259252    } 
    260253} 
  • trunk/plugins/ExtendedFileManager/manager.php

    r740 r770  
    236236                    <td align="left">Color</td> 
    237237                    <td> 
    238                   <input name="f_backgroundColor" type="text" id="f_backgroundColor" size="7" /><input type="button" id="bgCol_pick" value="..." /> 
     238                  <input name="f_backgroundColor" type="text" id="f_backgroundColor" size="7" /> 
    239239                </td> 
    240240                <?php } ?> 
     
    262262                        <?php if($insertMode=='image' && !empty($IMConfig['use_color_pickers']) && $IMConfig['images_enable_styling'] !== false) { ?> 
    263263                <td align="left">Border Color</td> 
    264             <td><input name="f_borderColor" type="text" id="f_borderColor" size="7" /><input type="button" id="bdCol_pick" value="..." /></td> 
     264            <td><input name="f_borderColor" type="text" id="f_borderColor" size="7" /></td> 
    265265            <?php } ?> 
    266266</tr> 
  • trunk/plugins/ImageManager/assets/manager.css

    r700 r770  
    2222table { margin-top:10px; } 
    2323th, td { padding-right:3px; text-align:left; font-family:small-caption,helvetica,sans-serif; } 
     24 
    2425.buttonColor { 
    25   padding: 1px; 
     26  width :1em; 
     27  margin-left: 2px; 
    2628  cursor: default; 
     29} 
     30 
     31.buttonColor .chooser, .buttonColor .nocolor { 
     32  height: 0.6em; 
    2733  border: 1px solid; 
     34  padding: 0px 1em; 
    2835  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; 
    2936} 
     37 
     38.buttonColor .buttonClick { 
     39  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
     40} 
     41.buttonColor .buttonColor-hilite { 
     42  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; 
     43} 
     44 
     45.buttonColor .nocolor { padding: 0px; } 
     46.buttonColor .nocolor-hilite { background-color: #fff; color: #f00; } 
  • trunk/plugins/ImageManager/assets/manager.js

    r704 r770  
    3737        document.getElementById("f_align").selectedIndex = 0; 
    3838         
    39     // Hookup color pickers 
    40     var bgCol_pick = document.getElementById('bgCol_pick'); 
    41     var f_backgroundColor = document.getElementById('f_backgroundColor'); 
    42     var bgColPicker = new Xinha.colorPicker({cellsize:'5px',callback:function(color){f_backgroundColor.value=color;}}); 
    43     bgCol_pick.onclick = function() { bgColPicker.open('top,right', f_backgroundColor ); } 
    44  
    45     var bdCol_pick = document.getElementById('bdCol_pick'); 
    46     var f_borderColor = document.getElementById('f_borderColor'); 
    47     var bdColPicker = new Xinha.colorPicker({cellsize:'5px',callback:function(color){f_borderColor.value=color;}}); 
    48     bdCol_pick.onclick = function() { bdColPicker.open('top,right', f_borderColor ); } 
    49  
    50  
    5139 
    5240                var uploadForm = document.getElementById('uploadForm'); 
     
    10593      document.getElementById('f_preview').src = _backend_url + '__function=thumbs&img=' + param.f_url;       
    10694                } 
     95                 
     96                 // Hookup color pickers 
     97    new Xinha.colorPicker.InputBinding(document.getElementById('f_backgroundColor')); 
     98    new Xinha.colorPicker.InputBinding(document.getElementById('f_borderColor')); 
    10799 
    108100                document.getElementById("f_alt").focus(); 
    109  
    110     // For some reason dialog is not shrinkwrapping correctly in IE so we have to explicitly size it for now. 
    111     // if(HTMLArea.is_ie) window.resizeTo(600, 460); 
    112101        }; 
    113102 
  • trunk/plugins/ImageManager/image-manager.js

    r677 r770  
    134134    outparam.f_padding = shortSize(outparam.f_padding); 
    135135    outparam.f_margin = shortSize(outparam.f_margin); 
     136     
     137    function convertToHex(color) { 
     138 
     139      if (typeof color == "string" && /, /.test.color) 
     140      color = color.replace(/, /, ','); // rgb(a, b) => rgb(a,b) 
     141 
     142      if (typeof color == "string" && / /.test.color) { // multiple values 
     143        var colors = color.split(' '); 
     144        var colorstring = ''; 
     145        for (var i = 0; i < colors.length; i++) { 
     146          colorstring += Xinha._colorToRgb(colors[i]); 
     147          if (i + 1 < colors.length) 
     148          colorstring += " "; 
     149        } 
     150        return colorstring; 
     151      } 
     152 
     153      return Xinha._colorToRgb(color); 
     154    } 
     155     
     156    outparam.f_backgroundColor = convertToHex(outparam.f_backgroundColor); 
     157    outparam.f_borderColor = convertToHex(outparam.f_borderColor); 
    136158 
    137159                } // end of if we selected an image before raising the dialog. 
  • trunk/plugins/ImageManager/manager.php

    r700 r770  
    145145    <td> 
    146146      <input name="f_backgroundColor" type="text" id="f_backgroundColor" size="7" /> 
    147       <input type="button" id="bgCol_pick" value="..." /> 
     147      
    148148    </td> 
    149149  </tr> 
     
    173173    <td> 
    174174      <input name="f_borderColor" type="text" id="f_borderColor" size="7" /> 
    175       <input type="button" id="bdCol_pick" value="..." /> 
     175       
    176176    </td> 
    177177  </tr> 
Note: See TracChangeset for help on using the changeset viewer.