[Sommaire] [Imprimer]

   1  /*
   2   * FCKeditor - The text editor for internet
   3   * Copyright (C) 2003-2005 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 ) ;
  36      this._Panel.AppendStyleSheet( FCKConfig.SkinPath + 'fck_contextmenu.css' ) ;
  37      this._PanelBox = this._Panel.PanelDiv.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  //    this._Panel.StyleSheet = FCKConfig.SkinPath + 'fck_contextmenu.css' ;
  46  //    this._Panel.Create() ;
  47  //    this._Panel.PanelDiv.className += ' SC_Panel' ;
  48  //    this._Panel.PanelDiv.innerHTML = '<table cellpadding="0" cellspacing="0" width="100%" style="TABLE-LAYOUT: fixed"><tr><td nowrap></td></tr></table>' ;
  49  //    this._ItemsHolderEl = this._Panel.PanelDiv.getElementsByTagName('TD')[0] ;
  50  }
  51  
  52  function FCKSpecialCombo_ItemOnMouseOver()
  53  {
  54      this.className += ' SC_ItemOver' ;
  55  }
  56  
  57  function FCKSpecialCombo_ItemOnMouseOut()
  58  {
  59      this.className = this.originalClass ;
  60  }
  61  
  62  function FCKSpecialCombo_ItemOnClick()
  63  {
  64      this.FCKSpecialCombo._Panel.Hide() ;
  65  
  66      this.FCKSpecialCombo.SetLabel( this.FCKItemLabel ) ;
  67  
  68      if ( typeof( this.FCKSpecialCombo.OnSelect ) == 'function' )
  69          this.FCKSpecialCombo.OnSelect( this.FCKItemID, this ) ;
  70  }
  71  
  72  FCKSpecialCombo.prototype.AddItem = function( id, html, label )
  73  {
  74      // <div class="SC_Item" onmouseover="this.className='SC_Item SC_ItemOver';" onmouseout="this.className='SC_Item';"><b>Bold 1</b></div>
  75      var oDiv = this._ItemsHolderEl.appendChild( this._Panel.Document.createElement( 'DIV' ) ) ;
  76      oDiv.className = oDiv.originalClass = 'SC_Item' ;
  77      oDiv.innerHTML = html ;
  78      oDiv.FCKItemID = id ;
  79      oDiv.FCKItemLabel = label ? label : id ;
  80      oDiv.FCKSpecialCombo = this ;
  81      oDiv.Selected = false ;
  82  
  83      oDiv.onmouseover    = FCKSpecialCombo_ItemOnMouseOver ;
  84      oDiv.onmouseout        = FCKSpecialCombo_ItemOnMouseOut ;
  85      oDiv.onclick        = FCKSpecialCombo_ItemOnClick ;
  86      
  87      this.Items[ id.toString().toLowerCase() ] = oDiv ;
  88      
  89      return oDiv ;
  90  }
  91  
  92  FCKSpecialCombo.prototype.SelectItem = function( itemId )
  93  {
  94      itemId = itemId ? itemId.toString().toLowerCase() : '' ;
  95      
  96      var oDiv = this.Items[ itemId ] ;
  97      if ( oDiv )
  98      {
  99          oDiv.className = oDiv.originalClass = 'SC_ItemSelected' ;
 100          oDiv.Selected = true ;
 101      }
 102  }
 103  
 104  FCKSpecialCombo.prototype.SelectItemByLabel = function( itemLabel, setLabel )
 105  {
 106      for ( var id in this.Items )
 107      {
 108          var oDiv = this.Items[id] ;
 109  
 110          if ( oDiv.FCKItemLabel == itemLabel )
 111          {
 112              oDiv.className = oDiv.originalClass = 'SC_ItemSelected' ;
 113              oDiv.Selected = true ;
 114              
 115              if ( setLabel )
 116                  this.SetLabel( itemLabel ) ;
 117          }
 118      }
 119  }
 120  
 121  FCKSpecialCombo.prototype.DeselectAll = function( clearLabel )
 122  {
 123      for ( var i in this.Items )
 124      {
 125          this.Items[i].className = this.Items[i].originalClass = 'SC_Item' ;
 126          this.Items[i].Selected = false ;
 127      }
 128      
 129      if ( clearLabel )
 130          this.SetLabel( '' ) ;
 131  }
 132  
 133  FCKSpecialCombo.prototype.SetLabelById = function( id )
 134  {
 135      id = id ? id.toString().toLowerCase() : '' ;
 136      
 137      var oDiv = this.Items[ id ] ;
 138      this.SetLabel( oDiv ? oDiv.FCKItemLabel : '' ) ;
 139  }
 140  
 141  FCKSpecialCombo.prototype.SetLabel = function( text )
 142  {
 143      this.Label = text.length == 0 ? '&nbsp;' : text ;
 144  
 145      if ( this._LabelEl )
 146          this._LabelEl.innerHTML = this.Label ;
 147  }
 148  
 149  FCKSpecialCombo.prototype.SetEnabled = function( isEnabled )
 150  {
 151      this.Enabled = isEnabled ;
 152      
 153      this._OuterTable.className = isEnabled ? '' : 'SC_FieldDisabled' ;
 154  }
 155  
 156  FCKSpecialCombo.prototype.Create = function( targetElement )
 157  {
 158      this._OuterTable = targetElement.appendChild( document.createElement( 'TABLE' ) ) ;
 159      this._OuterTable.cellPadding = 0 ;
 160      this._OuterTable.cellSpacing = 0 ;
 161      
 162      this._OuterTable.insertRow(-1) ;
 163      
 164      var sClass ;
 165      var bShowLabel ;
 166      
 167      switch ( this.Style )
 168      {
 169          case FCK_TOOLBARITEM_ONLYICON :
 170              sClass = 'TB_ButtonType_Icon' ;
 171              bShowLabel = false;
 172              break ;
 173          case FCK_TOOLBARITEM_ONLYTEXT :
 174              sClass = 'TB_ButtonType_Text' ;
 175              bShowLabel = false;
 176              break ;
 177          case FCK_TOOLBARITEM_ICONTEXT :
 178              bShowLabel = true;
 179              break ;
 180      }
 181  
 182      if ( this.Caption && this.Caption.length > 0 && bShowLabel )
 183      {
 184          var oCaptionCell = this._OuterTable.rows[0].insertCell(-1) ;
 185          oCaptionCell.innerHTML = this.Caption ;
 186          oCaptionCell.className = 'SC_FieldCaption' ;
 187      }
 188      
 189      // Create the main DIV element.
 190      var oField = this._OuterTable.rows[0].insertCell(-1).appendChild( document.createElement( 'DIV' ) ) ;
 191      if ( bShowLabel )
 192      {
 193          oField.className = 'SC_Field' ;
 194          oField.style.width = this.FieldWidth + 'px' ;
 195          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>' ;
 196  
 197          this._LabelEl = oField.getElementsByTagName('label')[0] ;
 198          this._LabelEl.innerHTML = this.Label ;
 199      }
 200      else
 201      {
 202          oField.className = 'TB_Button_Off' ;
 203          //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>' ;
 204          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>' ;
 205          
 206          // Gets the correct CSS class to use for the specified style (param).
 207          oField.innerHTML ='<table title="' + this.Tooltip + '" class="' + sClass + '" cellspacing="0" cellpadding="0" border="0">' +
 208                  '<tr>' +
 209                      //'<td class="TB_Icon"><img src="' + FCKConfig.SkinPath + 'toolbar/' + this.Command.Name.toLowerCase() + '.gif" width="21" height="21"></td>' +
 210                      '<td class="TB_Text">' + this.Caption + '</td>' +
 211                      '<td class="TB_ButtonArrow"><img src="' + FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif" width="5" height="3"></td>' +
 212                  '</tr>' +
 213              '</table>' ;
 214      }
 215  
 216  
 217      // Events Handlers
 218  
 219      oField.SpecialCombo = this ;
 220      
 221      oField.onmouseover    = FCKSpecialCombo_OnMouseOver ;
 222      oField.onmouseout    = FCKSpecialCombo_OnMouseOut ;
 223      oField.onclick        = FCKSpecialCombo_OnClick ;
 224      
 225      FCKTools.DisableSelection( this._Panel.Document.body ) ;
 226  }
 227  
 228  function FCKSpecialCombo_OnMouseOver()
 229  {
 230      if ( this.SpecialCombo.Enabled )
 231      {
 232          switch ( this.SpecialCombo.Style )
 233          {
 234          case FCK_TOOLBARITEM_ONLYICON :
 235              this.className = 'TB_Button_On';
 236              break ;
 237          case FCK_TOOLBARITEM_ONLYTEXT :
 238              this.className = 'TB_Button_On';
 239              break ;
 240          case FCK_TOOLBARITEM_ICONTEXT :
 241              this.className = 'SC_Field SC_FieldOver' ;
 242              break ;
 243          }
 244      }
 245  }
 246      
 247  function FCKSpecialCombo_OnMouseOut()
 248  {
 249      switch ( this.SpecialCombo.Style )
 250      {
 251          case FCK_TOOLBARITEM_ONLYICON :
 252              this.className = 'TB_Button_Off';
 253              break ;
 254          case FCK_TOOLBARITEM_ONLYTEXT :
 255              this.className = 'TB_Button_Off';
 256              break ;
 257          case FCK_TOOLBARITEM_ICONTEXT :
 258              this.className='SC_Field' ;
 259              break ;
 260      }
 261  }
 262      
 263  function FCKSpecialCombo_OnClick( e )
 264  {
 265      // For Mozilla we must stop the event propagation to avoid it hiding 
 266      // the panel because of a click outside of it.
 267  //    if ( e )
 268  //    {
 269  //        e.stopPropagation() ;
 270  //        FCKPanelEventHandlers.OnDocumentClick( e ) ;
 271  //    }
 272      
 273      var oSpecialCombo = this.SpecialCombo ;
 274  
 275      if ( oSpecialCombo.Enabled )
 276      {
 277          var oPanel            = oSpecialCombo._Panel ;
 278          var oPanelBox        = oSpecialCombo._PanelBox ;
 279          var oItemsHolder    = oSpecialCombo._ItemsHolderEl ;
 280          var iMaxHeight        = oSpecialCombo.PanelMaxHeight ;
 281          
 282          if ( oSpecialCombo.OnBeforeClick )
 283              oSpecialCombo.OnBeforeClick( oSpecialCombo ) ;
 284  
 285          // This is a tricky thing. We must call the "Load" function, otherwise
 286          // it will not be possible to retrieve "oItemsHolder.offsetHeight".
 287          oPanel.Load( 0, this.offsetHeight, this ) ;
 288  
 289          if ( oItemsHolder.offsetHeight > iMaxHeight )
 290              oPanelBox.style.height = iMaxHeight + 'px' ;
 291          else
 292              oPanelBox.style.height = oItemsHolder.offsetHeight + 'px' ;
 293              
 294  //        oPanel.PanelDiv.style.width = oSpecialCombo.PanelWidth + 'px' ;
 295          
 296          if ( FCKBrowserInfo.IsGecko )
 297              oPanelBox.style.overflow = '-moz-scrollbars-vertical' ;
 298  
 299          oPanel.Show( 0, this.offsetHeight, this ) ;
 300      }
 301  
 302      return false ;
 303  }
 304  
 305  /* 
 306  Sample Combo Field HTML output:
 307  
 308  <div class="SC_Field" style="width: 80px;">
 309      <table width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
 310          <tbody>
 311              <tr>
 312                  <td class="SC_FieldLabel"><label>&nbsp;</label></td>
 313                  <td class="SC_FieldButton">&nbsp;</td>
 314              </tr>
 315          </tbody>
 316      </table>
 317  </div>
 318  */