[Summary view] [Print] [Text view]

   1  /*

   2   * FCKeditor - The text editor for Internet - http://www.fckeditor.net

   3   * Copyright (C) 2003-2009 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   * FCKSpecialCombo Class: represents a special combo.

  22   */
  23  
  24  var FCKSpecialCombo = function( caption, fieldWidth, panelWidth, panelMaxHeight, parentWindow )
  25  {
  26      // Default properties values.

  27      this.FieldWidth        = fieldWidth || 100 ;
  28      this.PanelWidth        = panelWidth || 150 ;
  29      this.PanelMaxHeight    = panelMaxHeight || 150 ;
  30      this.Label            = ' ' ;
  31      this.Caption        = caption ;
  32      this.Tooltip        = caption ;
  33      this.Style            = FCK_TOOLBARITEM_ICONTEXT ;
  34  
  35      this.Enabled = true ;
  36  
  37      this.Items = new Object() ;
  38  
  39      this._Panel = new FCKPanel( parentWindow || window ) ;
  40      this._Panel.AppendStyleSheet( FCKConfig.SkinEditorCSS ) ;
  41      this._PanelBox = this._Panel.MainNode.appendChild( this._Panel.Document.createElement( 'DIV' ) ) ;
  42      this._PanelBox.className = 'SC_Panel' ;
  43      this._PanelBox.style.width = this.PanelWidth + 'px' ;
  44  
  45      this._PanelBox.innerHTML = '<table cellpadding="0" cellspacing="0" width="100%" style="TABLE-LAYOUT: fixed"><tr><td nowrap></td></tr></table>' ;
  46  
  47      this._ItemsHolderEl = this._PanelBox.getElementsByTagName('TD')[0] ;
  48  
  49      if ( FCK.IECleanup )
  50          FCK.IECleanup.AddItem( this, FCKSpecialCombo_Cleanup ) ;
  51  
  52  //    this._Panel.StyleSheet = FCKConfig.SkinPath + 'fck_contextmenu.css' ;

  53  //    this._Panel.Create() ;

  54  //    this._Panel.PanelDiv.className += ' SC_Panel' ;

  55  //    this._Panel.PanelDiv.innerHTML = '<table cellpadding="0" cellspacing="0" width="100%" style="TABLE-LAYOUT: fixed"><tr><td nowrap></td></tr></table>' ;

  56  //    this._ItemsHolderEl = this._Panel.PanelDiv.getElementsByTagName('TD')[0] ;

  57  }
  58  
  59  function FCKSpecialCombo_ItemOnMouseOver()
  60  {
  61      this.className += ' SC_ItemOver' ;
  62  }
  63  
  64  function FCKSpecialCombo_ItemOnMouseOut()
  65  {
  66      this.className = this.originalClass ;
  67  }
  68  
  69  function FCKSpecialCombo_ItemOnClick( ev, specialCombo, itemId )
  70  {
  71      this.className = this.originalClass ;
  72  
  73      specialCombo._Panel.Hide() ;
  74  
  75      specialCombo.SetLabel( this.FCKItemLabel ) ;
  76  
  77      if ( typeof( specialCombo.OnSelect ) == 'function' )
  78          specialCombo.OnSelect( itemId, this ) ;
  79  }
  80  
  81  FCKSpecialCombo.prototype.ClearItems = function ()
  82  {
  83      if ( this.Items )
  84          this.Items = {} ;
  85  
  86      var itemsholder = this._ItemsHolderEl ;
  87      while ( itemsholder.firstChild )
  88          itemsholder.removeChild( itemsholder.firstChild ) ;
  89  }
  90  
  91  FCKSpecialCombo.prototype.AddItem = function( id, html, label, bgColor )
  92  {
  93      // <div class="SC_Item" onmouseover="this.className='SC_Item SC_ItemOver';" onmouseout="this.className='SC_Item';"><b>Bold 1</b></div>

  94      var oDiv = this._ItemsHolderEl.appendChild( this._Panel.Document.createElement( 'DIV' ) ) ;
  95      oDiv.className = oDiv.originalClass = 'SC_Item' ;
  96      oDiv.innerHTML = html ;
  97      oDiv.FCKItemLabel = label || id ;
  98      oDiv.Selected = false ;
  99  
 100      // In IE, the width must be set so the borders are shown correctly when the content overflows.

 101      if ( FCKBrowserInfo.IsIE )
 102          oDiv.style.width = '100%' ;
 103  
 104      if ( bgColor )
 105          oDiv.style.backgroundColor = bgColor ;
 106  
 107      FCKTools.AddEventListenerEx( oDiv, 'mouseover', FCKSpecialCombo_ItemOnMouseOver ) ;
 108      FCKTools.AddEventListenerEx( oDiv, 'mouseout', FCKSpecialCombo_ItemOnMouseOut ) ;
 109      FCKTools.AddEventListenerEx( oDiv, 'click', FCKSpecialCombo_ItemOnClick, [ this, id ] ) ;
 110  
 111      this.Items[ id.toString().toLowerCase() ] = oDiv ;
 112  
 113      return oDiv ;
 114  }
 115  
 116  FCKSpecialCombo.prototype.SelectItem = function( item )
 117  {
 118      if ( typeof item == 'string' )
 119          item = this.Items[ item.toString().toLowerCase() ] ;
 120  
 121      if ( item )
 122      {
 123          item.className = item.originalClass = 'SC_ItemSelected' ;
 124          item.Selected = true ;
 125      }
 126  }
 127  
 128  FCKSpecialCombo.prototype.SelectItemByLabel = function( itemLabel, setLabel )
 129  {
 130      for ( var id in this.Items )
 131      {
 132          var oDiv = this.Items[id] ;
 133  
 134          if ( oDiv.FCKItemLabel == itemLabel )
 135          {
 136              oDiv.className = oDiv.originalClass = 'SC_ItemSelected' ;
 137              oDiv.Selected = true ;
 138  
 139              if ( setLabel )
 140                  this.SetLabel( itemLabel ) ;
 141          }
 142      }
 143  }
 144  
 145  FCKSpecialCombo.prototype.DeselectAll = function( clearLabel )
 146  {
 147      for ( var i in this.Items )
 148      {
 149          if ( !this.Items[i] ) continue;
 150          this.Items[i].className = this.Items[i].originalClass = 'SC_Item' ;
 151          this.Items[i].Selected = false ;
 152      }
 153  
 154      if ( clearLabel )
 155          this.SetLabel( '' ) ;
 156  }
 157  
 158  FCKSpecialCombo.prototype.SetLabelById = function( id )
 159  {
 160      id = id ? id.toString().toLowerCase() : '' ;
 161  
 162      var oDiv = this.Items[ id ] ;
 163      this.SetLabel( oDiv ? oDiv.FCKItemLabel : '' ) ;
 164  }
 165  
 166  FCKSpecialCombo.prototype.SetLabel = function( text )
 167  {
 168      text = ( !text || text.length == 0 ) ? '&nbsp;' : text ;
 169  
 170      if ( text == this.Label )
 171          return ;
 172  
 173      this.Label = text ;
 174  
 175      var labelEl = this._LabelEl ;
 176      if ( labelEl )
 177      {
 178          labelEl.innerHTML = text ;
 179  
 180          // It may happen that the label is some HTML, including tags. This

 181          // would be a problem because when the user click on those tags, the

 182          // combo will get the selection from the editing area. So we must

 183          // disable any kind of selection here.

 184          FCKTools.DisableSelection( labelEl ) ;
 185      }
 186  }
 187  
 188  FCKSpecialCombo.prototype.SetEnabled = function( isEnabled )
 189  {
 190      this.Enabled = isEnabled ;
 191  
 192      // In IE it can happen when the page is reloaded that _OuterTable is null, so check its existence

 193      if ( this._OuterTable )
 194          this._OuterTable.className = isEnabled ? '' : 'SC_FieldDisabled' ;
 195  }
 196  
 197  FCKSpecialCombo.prototype.Create = function( targetElement )
 198  {
 199      var oDoc = FCKTools.GetElementDocument( targetElement ) ;
 200      var eOuterTable = this._OuterTable = targetElement.appendChild( oDoc.createElement( 'TABLE' ) ) ;
 201      eOuterTable.cellPadding = 0 ;
 202      eOuterTable.cellSpacing = 0 ;
 203  
 204      eOuterTable.insertRow(-1) ;
 205  
 206      var sClass ;
 207      var bShowLabel ;
 208  
 209      switch ( this.Style )
 210      {
 211          case FCK_TOOLBARITEM_ONLYICON :
 212              sClass = 'TB_ButtonType_Icon' ;
 213              bShowLabel = false;
 214              break ;
 215          case FCK_TOOLBARITEM_ONLYTEXT :
 216              sClass = 'TB_ButtonType_Text' ;
 217              bShowLabel = false;
 218              break ;
 219          case FCK_TOOLBARITEM_ICONTEXT :
 220              bShowLabel = true;
 221              break ;
 222      }
 223  
 224      if ( this.Caption && this.Caption.length > 0 && bShowLabel )
 225      {
 226          var oCaptionCell = eOuterTable.rows[0].insertCell(-1) ;
 227          oCaptionCell.innerHTML = this.Caption ;
 228          oCaptionCell.className = 'SC_FieldCaption' ;
 229      }
 230  
 231      // Create the main DIV element.

 232      var oField = FCKTools.AppendElement( eOuterTable.rows[0].insertCell(-1), 'div' ) ;
 233      if ( bShowLabel )
 234      {
 235          oField.className = 'SC_Field' ;
 236          oField.style.width = this.FieldWidth + 'px' ;
 237          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>' ;
 238  
 239          this._LabelEl = oField.getElementsByTagName('label')[0] ;        // Memory Leak

 240          this._LabelEl.innerHTML = this.Label ;
 241      }
 242      else
 243      {
 244          oField.className = 'TB_Button_Off' ;
 245          //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>' ;

 246          //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>' ;

 247  
 248          // Gets the correct CSS class to use for the specified style (param).

 249          oField.innerHTML = '<table title="' + this.Tooltip + '" class="' + sClass + '" cellspacing="0" cellpadding="0" border="0">' +
 250                  '<tr>' +
 251                      //'<td class="TB_Icon"><img src="' + FCKConfig.SkinPath + 'toolbar/' + this.Command.Name.toLowerCase() + '.gif" width="21" height="21"></td>' +

 252                      '<td><img class="TB_Button_Padding" src="' + FCK_SPACER_PATH + '" /></td>' +
 253                      '<td class="TB_Text">' + this.Caption + '</td>' +
 254                      '<td><img class="TB_Button_Padding" src="' + FCK_SPACER_PATH + '" /></td>' +
 255                      '<td class="TB_ButtonArrow"><img src="' + FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif" width="5" height="3"></td>' +
 256                      '<td><img class="TB_Button_Padding" src="' + FCK_SPACER_PATH + '" /></td>' +
 257                  '</tr>' +
 258              '</table>' ;
 259      }
 260  
 261  
 262      // Events Handlers

 263  
 264      FCKTools.AddEventListenerEx( oField, 'mouseover', FCKSpecialCombo_OnMouseOver, this ) ;
 265      FCKTools.AddEventListenerEx( oField, 'mouseout', FCKSpecialCombo_OnMouseOut, this ) ;
 266      FCKTools.AddEventListenerEx( oField, 'click', FCKSpecialCombo_OnClick, this ) ;
 267  
 268      FCKTools.DisableSelection( this._Panel.Document.body ) ;
 269  }
 270  
 271  function FCKSpecialCombo_Cleanup()
 272  {
 273      this._LabelEl = null ;
 274      this._OuterTable = null ;
 275      this._ItemsHolderEl = null ;
 276      this._PanelBox = null ;
 277  
 278      if ( this.Items )
 279      {
 280          for ( var key in this.Items )
 281              this.Items[key] = null ;
 282      }
 283  }
 284  
 285  function FCKSpecialCombo_OnMouseOver( ev, specialCombo )
 286  {
 287      if ( specialCombo.Enabled )
 288      {
 289          switch ( specialCombo.Style )
 290          {
 291              case FCK_TOOLBARITEM_ONLYICON :
 292                  this.className = 'TB_Button_On_Over';
 293                  break ;
 294              case FCK_TOOLBARITEM_ONLYTEXT :
 295                  this.className = 'TB_Button_On_Over';
 296                  break ;
 297              case FCK_TOOLBARITEM_ICONTEXT :
 298                  this.className = 'SC_Field SC_FieldOver' ;
 299                  break ;
 300          }
 301      }
 302  }
 303  
 304  function FCKSpecialCombo_OnMouseOut( ev, specialCombo )
 305  {
 306      switch ( specialCombo.Style )
 307      {
 308          case FCK_TOOLBARITEM_ONLYICON :
 309              this.className = 'TB_Button_Off';
 310              break ;
 311          case FCK_TOOLBARITEM_ONLYTEXT :
 312              this.className = 'TB_Button_Off';
 313              break ;
 314          case FCK_TOOLBARITEM_ICONTEXT :
 315              this.className='SC_Field' ;
 316              break ;
 317      }
 318  }
 319  
 320  function FCKSpecialCombo_OnClick( e, specialCombo )
 321  {
 322      // For Mozilla we must stop the event propagation to avoid it hiding

 323      // the panel because of a click outside of it.

 324  //    if ( e )

 325  //    {

 326  //        e.stopPropagation() ;

 327  //        FCKPanelEventHandlers.OnDocumentClick( e ) ;

 328  //    }

 329  
 330      if ( specialCombo.Enabled )
 331      {
 332          var oPanel            = specialCombo._Panel ;
 333          var oPanelBox        = specialCombo._PanelBox ;
 334          var oItemsHolder    = specialCombo._ItemsHolderEl ;
 335          var iMaxHeight        = specialCombo.PanelMaxHeight ;
 336  
 337          if ( specialCombo.OnBeforeClick )
 338              specialCombo.OnBeforeClick( specialCombo ) ;
 339  
 340          // This is a tricky thing. We must call the "Load" function, otherwise

 341          // it will not be possible to retrieve "oItemsHolder.offsetHeight" (IE only).

 342          if ( FCKBrowserInfo.IsIE )
 343              oPanel.Preload( 0, this.offsetHeight, this ) ;
 344  
 345          if ( oItemsHolder.offsetHeight > iMaxHeight )
 346  //        {

 347              oPanelBox.style.height = iMaxHeight + 'px' ;
 348  
 349  //            if ( FCKBrowserInfo.IsGecko )

 350  //                oPanelBox.style.overflow = '-moz-scrollbars-vertical' ;

 351  //        }

 352          else
 353              oPanelBox.style.height = '' ;
 354  
 355  //        oPanel.PanelDiv.style.width = specialCombo.PanelWidth + 'px' ;

 356  
 357          oPanel.Show( 0, this.offsetHeight, this ) ;
 358      }
 359  
 360  //    return false ;

 361  }
 362  
 363  /*

 364  Sample Combo Field HTML output:

 365  

 366  <div class="SC_Field" style="width: 80px;">

 367      <table width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed;">

 368          <tbody>

 369              <tr>

 370                  <td class="SC_FieldLabel"><label>&nbsp;</label></td>

 371                  <td class="SC_FieldButton">&nbsp;</td>

 372              </tr>

 373          </tbody>

 374      </table>

 375  </div>

 376  */