[Sommaire] [Imprimer]

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