[Sommaire] [Imprimer]

   1  /*
   2   * FCKeditor - The text editor for internet
   3   * Copyright (C) 2003-2006 Frederico Caldeira Knabben
   4   * 
   5   * Licensed under the terms of the GNU Lesser General Public License:
   6   *         http://www.opensource.org/licenses/lgpl-license.php
   7   * 
   8   * For further information visit:
   9   *         http://www.fckeditor.net/
  10   * 
  11   * "Support Open Source software. What about a donation today?"
  12   * 
  13   * File Name: fckspecialcombo.js
  14   *     FCKSpecialCombo Class: represents a special combo.
  15   * 
  16   * File Authors:
  17   *         Frederico Caldeira Knabben (fredck@fckeditor.net)
  18   */
  19  
  20  var FCKSpecialCombo = function( caption, fieldWidth, panelWidth, panelMaxHeight, parentWindow )
  21  {
  22      // Default properties values.
  23      this.FieldWidth        = fieldWidth || 100 ;
  24      this.PanelWidth        = panelWidth || 150 ;
  25      this.PanelMaxHeight    = panelMaxHeight || 150 ;
  26      this.Label            = ' ' ;
  27      this.Caption        = caption ;
  28      this.Tooltip        = caption ;
  29      this.Style            = FCK_TOOLBARITEM_ICONTEXT ;
  30  
  31      this.Enabled = true ;
  32      
  33      this.Items = new Object() ;
  34      
  35      this._Panel = new FCKPanel( parentWindow || window, true ) ;
  36      this._Panel.AppendStyleSheet( FCKConfig.SkinPath + 'fck_editor.css' ) ;
  37      this._PanelBox = this._Panel.MainNode.appendChild( this._Panel.Document.createElement( 'DIV' ) ) ;
  38      this._PanelBox.className = 'SC_Panel' ;
  39      this._PanelBox.style.width = this.PanelWidth + 'px' ;
  40  
  41      this._PanelBox.innerHTML = '<table cellpadding="0" cellspacing="0" width="100%" style="TABLE-LAYOUT: fixed"><tr><td nowrap></td></tr></table>' ;
  42      
  43      this._ItemsHolderEl = this._PanelBox.getElementsByTagName('TD')[0] ;
  44  
  45      if ( FCK.IECleanup )
  46          FCK.IECleanup.AddItem( this, FCKSpecialCombo_Cleanup ) ;
  47  
  48  //    this._Panel.StyleSheet = FCKConfig.SkinPath + 'fck_contextmenu.css' ;
  49  //    this._Panel.Create() ;
  50  //    this._Panel.PanelDiv.className += ' SC_Panel' ;
  51  //    this._Panel.PanelDiv.innerHTML = '<table cellpadding="0" cellspacing="0" width="100%" style="TABLE-LAYOUT: fixed"><tr><td nowrap></td></tr></table>' ;
  52  //    this._ItemsHolderEl = this._Panel.PanelDiv.getElementsByTagName('TD')[0] ;
  53  }
  54  
  55  function FCKSpecialCombo_ItemOnMouseOver()
  56  {
  57      this.className += ' SC_ItemOver' ;
  58  }
  59  
  60  function FCKSpecialCombo_ItemOnMouseOut()
  61  {
  62      this.className = this.originalClass ;
  63  }
  64  
  65  function FCKSpecialCombo_ItemOnClick()
  66  {
  67      this.className = this.originalClass ;
  68  
  69      this.FCKSpecialCombo._Panel.Hide() ;
  70  
  71      this.FCKSpecialCombo.SetLabel( this.FCKItemLabel ) ;
  72  
  73      if ( typeof( this.FCKSpecialCombo.OnSelect ) == 'function' )
  74          this.FCKSpecialCombo.OnSelect( this.FCKItemID, this ) ;
  75  }
  76  
  77  FCKSpecialCombo.prototype.AddItem = function( id, html, label, bgColor )
  78  {
  79      // <div class="SC_Item" onmouseover="this.className='SC_Item SC_ItemOver';" onmouseout="this.className='SC_Item';"><b>Bold 1</b></div>
  80      var oDiv = this._ItemsHolderEl.appendChild( this._Panel.Document.createElement( 'DIV' ) ) ;
  81      oDiv.className = oDiv.originalClass = 'SC_Item' ;
  82      oDiv.innerHTML = html ;
  83      oDiv.FCKItemID = id ;
  84      oDiv.FCKItemLabel = label || id ;
  85      oDiv.FCKSpecialCombo = this ;
  86      oDiv.Selected = false ;
  87  
  88      // In IE, the width must be set so the borders are shown correctly when the content overflows.
  89      if ( FCKBrowserInfo.IsIE )
  90          oDiv.style.width = '100%' ;
  91      
  92      if ( bgColor )
  93          oDiv.style.backgroundColor = bgColor ;
  94  
  95      oDiv.onmouseover    = FCKSpecialCombo_ItemOnMouseOver ;
  96      oDiv.onmouseout        = FCKSpecialCombo_ItemOnMouseOut ;
  97      oDiv.onclick        = FCKSpecialCombo_ItemOnClick ;
  98      
  99      this.Items[ id.toString().toLowerCase() ] = oDiv ;
 100      
 101      return oDiv ;
 102  }
 103  
 104  FCKSpecialCombo.prototype.SelectItem = function( itemId )
 105  {
 106      itemId = itemId ? itemId.toString().toLowerCase() : '' ;
 107      
 108      var oDiv = this.Items[ itemId ] ;
 109      if ( oDiv )
 110      {
 111          oDiv.className = oDiv.originalClass = 'SC_ItemSelected' ;
 112          oDiv.Selected = true ;
 113      }
 114  }
 115  
 116  FCKSpecialCombo.prototype.SelectItemByLabel = function( itemLabel, setLabel )
 117  {
 118      for ( var id in this.Items )
 119      {
 120          var oDiv = this.Items[id] ;
 121  
 122          if ( oDiv.FCKItemLabel == itemLabel )
 123          {
 124              oDiv.className = oDiv.originalClass = 'SC_ItemSelected' ;
 125              oDiv.Selected = true ;
 126              
 127              if ( setLabel )
 128                  this.SetLabel( itemLabel ) ;
 129          }
 130      }
 131  }
 132  
 133  FCKSpecialCombo.prototype.DeselectAll = function( clearLabel )
 134  {
 135      for ( var i in this.Items )
 136      {
 137          this.Items[i].className = this.Items[i].originalClass = 'SC_Item' ;
 138          this.Items[i].Selected = false ;
 139      }
 140      
 141      if ( clearLabel )
 142          this.SetLabel( '' ) ;
 143  }
 144  
 145  FCKSpecialCombo.prototype.SetLabelById = function( id )
 146  {
 147      id = id ? id.toString().toLowerCase() : '' ;
 148      
 149      var oDiv = this.Items[ id ] ;
 150      this.SetLabel( oDiv ? oDiv.FCKItemLabel : '' ) ;
 151  }
 152  
 153  FCKSpecialCombo.prototype.SetLabel = function( text )
 154  {
 155      this.Label = text.length == 0 ? '&nbsp;' : text ;
 156  
 157      if ( this._LabelEl )
 158          this._LabelEl.innerHTML = this.Label ;
 159  }
 160  
 161  FCKSpecialCombo.prototype.SetEnabled = function( isEnabled )
 162  {
 163      this.Enabled = isEnabled ;
 164      
 165      this._OuterTable.className = isEnabled ? '' : 'SC_FieldDisabled' ;
 166  }
 167  
 168  FCKSpecialCombo.prototype.Create = function( targetElement )
 169  {
 170      var oDoc = FCKTools.GetElementDocument( targetElement ) ;
 171      var eOuterTable = this._OuterTable = targetElement.appendChild( oDoc.createElement( 'TABLE' ) ) ;
 172      eOuterTable.cellPadding = 0 ;
 173      eOuterTable.cellSpacing = 0 ;
 174      
 175      eOuterTable.insertRow(-1) ;
 176      
 177      var sClass ;
 178      var bShowLabel ;
 179      
 180      switch ( this.Style )
 181      {
 182          case FCK_TOOLBARITEM_ONLYICON :
 183              sClass = 'TB_ButtonType_Icon' ;
 184              bShowLabel = false;
 185              break ;
 186          case FCK_TOOLBARITEM_ONLYTEXT :
 187              sClass = 'TB_ButtonType_Text' ;
 188              bShowLabel = false;
 189              break ;
 190          case FCK_TOOLBARITEM_ICONTEXT :
 191              bShowLabel = true;
 192              break ;
 193      }
 194  
 195      if ( this.Caption && this.Caption.length > 0 && bShowLabel )
 196      {
 197          var oCaptionCell = eOuterTable.rows[0].insertCell(-1) ;
 198          oCaptionCell.innerHTML = this.Caption ;
 199          oCaptionCell.className = 'SC_FieldCaption' ;
 200      }
 201      
 202      // Create the main DIV element.
 203      var oField = FCKTools.AppendElement( eOuterTable.rows[0].insertCell(-1), 'div' ) ;
 204      if ( bShowLabel )
 205      {
 206          oField.className = 'SC_Field' ;
 207          oField.style.width = this.FieldWidth + 'px' ;
 208          oField.innerHTML = '<table width="100%" cellpadding="0" cellspacing="0" style="TABLE-LAYOUT: fixed;"><tbody><tr><td class="SC_FieldLabel"><label>&nbsp;</label></td><td class="SC_FieldButton">&nbsp;</td></tr></tbody></table>' ;
 209  
 210          this._LabelEl = oField.getElementsByTagName('label')[0] ;        // Memory Leak
 211          this._LabelEl.innerHTML = this.Label ;
 212      }
 213      else
 214      {
 215          oField.className = 'TB_Button_Off' ;
 216          //oField.innerHTML = '<span className="SC_FieldCaption">' + this.Caption + '<table cellpadding="0" cellspacing="0" style="TABLE-LAYOUT: fixed;"><tbody><tr><td class="SC_FieldButton" style="border-left: none;">&nbsp;</td></tr></tbody></table>' ;
 217          //oField.innerHTML = '<table cellpadding="0" cellspacing="0" style="TABLE-LAYOUT: fixed;"><tbody><tr><td class="SC_FieldButton" style="border-left: none;">&nbsp;</td></tr></tbody></table>' ;
 218          
 219          // Gets the correct CSS class to use for the specified style (param).
 220          oField.innerHTML = '<table title="' + this.Tooltip + '" class="' + sClass + '" cellspacing="0" cellpadding="0" border="0">' +
 221                  '<tr>' +
 222                      //'<td class="TB_Icon"><img src="' + FCKConfig.SkinPath + 'toolbar/' + this.Command.Name.toLowerCase() + '.gif" width="21" height="21"></td>' +
 223                      '<td><img class="TB_Button_Padding" src="' + FCK_SPACER_PATH + '" /></td>' +
 224                      '<td class="TB_Text">' + this.Caption + '</td>' +
 225                      '<td><img class="TB_Button_Padding" src="' + FCK_SPACER_PATH + '" /></td>' +
 226                      '<td class="TB_ButtonArrow"><img src="' + FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif" width="5" height="3"></td>' +
 227                      '<td><img class="TB_Button_Padding" src="' + FCK_SPACER_PATH + '" /></td>' +
 228                  '</tr>' +
 229              '</table>' ;
 230      }
 231  
 232  
 233      // Events Handlers
 234  
 235      oField.SpecialCombo = this ;
 236      
 237      oField.onmouseover    = FCKSpecialCombo_OnMouseOver ;
 238      oField.onmouseout    = FCKSpecialCombo_OnMouseOut ;
 239      oField.onclick        = FCKSpecialCombo_OnClick ;
 240      
 241      FCKTools.DisableSelection( this._Panel.Document.body ) ;
 242  }
 243  
 244  function FCKSpecialCombo_Cleanup()
 245  {
 246      this._LabelEl = null ;
 247      this._OuterTable = null ;
 248      this._ItemsHolderEl = null ;
 249      this._PanelBox = null ;
 250      
 251      if ( this.Items )
 252      {
 253          for ( var key in this.Items )
 254              this.Items[key] = null ;
 255      }
 256  }    
 257  
 258  function FCKSpecialCombo_OnMouseOver()
 259  {
 260      if ( this.SpecialCombo.Enabled )
 261      {
 262          switch ( this.SpecialCombo.Style )
 263          {
 264          case FCK_TOOLBARITEM_ONLYICON :
 265              this.className = 'TB_Button_On_Over';
 266              break ;
 267          case FCK_TOOLBARITEM_ONLYTEXT :
 268              this.className = 'TB_Button_On_Over';
 269              break ;
 270          case FCK_TOOLBARITEM_ICONTEXT :
 271              this.className = 'SC_Field SC_FieldOver' ;
 272              break ;
 273          }
 274      }
 275  }
 276      
 277  function FCKSpecialCombo_OnMouseOut()
 278  {
 279      switch ( this.SpecialCombo.Style )
 280      {
 281          case FCK_TOOLBARITEM_ONLYICON :
 282              this.className = 'TB_Button_Off';
 283              break ;
 284          case FCK_TOOLBARITEM_ONLYTEXT :
 285              this.className = 'TB_Button_Off';
 286              break ;
 287          case FCK_TOOLBARITEM_ICONTEXT :
 288              this.className='SC_Field' ;
 289              break ;
 290      }
 291  }
 292      
 293  function FCKSpecialCombo_OnClick( e )
 294  {
 295      // For Mozilla we must stop the event propagation to avoid it hiding 
 296      // the panel because of a click outside of it.
 297  //    if ( e )
 298  //    {
 299  //        e.stopPropagation() ;
 300  //        FCKPanelEventHandlers.OnDocumentClick( e ) ;
 301  //    }
 302      
 303      var oSpecialCombo = this.SpecialCombo ;
 304  
 305      if ( oSpecialCombo.Enabled )
 306      {
 307          var oPanel            = oSpecialCombo._Panel ;
 308          var oPanelBox        = oSpecialCombo._PanelBox ;
 309          var oItemsHolder    = oSpecialCombo._ItemsHolderEl ;
 310          var iMaxHeight        = oSpecialCombo.PanelMaxHeight ;
 311          
 312          if ( oSpecialCombo.OnBeforeClick )
 313              oSpecialCombo.OnBeforeClick( oSpecialCombo ) ;
 314  
 315          // This is a tricky thing. We must call the "Load" function, otherwise
 316          // it will not be possible to retrieve "oItemsHolder.offsetHeight" (IE only).
 317          if ( FCKBrowserInfo.IsIE )
 318              oPanel.Preload( 0, this.offsetHeight, this ) ;
 319  
 320          if ( oItemsHolder.offsetHeight > iMaxHeight )
 321  //        {
 322              oPanelBox.style.height = iMaxHeight + 'px' ;
 323  
 324  //            if ( FCKBrowserInfo.IsGecko )
 325  //                oPanelBox.style.overflow = '-moz-scrollbars-vertical' ;
 326  //        }
 327          else
 328              oPanelBox.style.height = '' ;
 329              
 330  //        oPanel.PanelDiv.style.width = oSpecialCombo.PanelWidth + 'px' ;
 331  
 332          oPanel.Show( 0, this.offsetHeight, this ) ;
 333      }
 334  
 335  //    return false ;
 336  }
 337  
 338  /* 
 339  Sample Combo Field HTML output:
 340  
 341  <div class="SC_Field" style="width: 80px;">
 342      <table width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
 343          <tbody>
 344              <tr>
 345                  <td class="SC_FieldLabel"><label>&nbsp;</label></td>
 346                  <td class="SC_FieldButton">&nbsp;</td>
 347              </tr>
 348          </tbody>
 349      </table>
 350  </div>
 351  */