[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: fcktoolbarbuttonui.js
  14   *     FCKToolbarButtonUI Class: interface representation of a toolbar button.
  15   * 
  16   * File Authors:
  17   *         Frederico Caldeira Knabben (fredck@fckeditor.net)
  18   */
  19  
  20  var FCKToolbarButtonUI = function( name, label, tooltip, iconPathOrStripInfoArray, style, state )
  21  {
  22      this.Name        = name ;
  23      this.Label        = label || name ;
  24      this.Tooltip    = tooltip || this.Label ;
  25      this.Style        = style || FCK_TOOLBARITEM_ONLYICON ;
  26      this.State        = state || FCK_TRISTATE_OFF ;
  27      
  28      this.Icon = new FCKIcon( iconPathOrStripInfoArray ) ;
  29  
  30      if ( FCK.IECleanup )
  31          FCK.IECleanup.AddItem( this, FCKToolbarButtonUI_Cleanup ) ;
  32  }
  33  
  34  
  35  FCKToolbarButtonUI.prototype._CreatePaddingElement = function( document )
  36  {
  37      var oImg = document.createElement( 'IMG' ) ;
  38      oImg.className = 'TB_Button_Padding' ;
  39      oImg.src = FCK_SPACER_PATH ;
  40      return oImg ;
  41  }
  42  
  43  FCKToolbarButtonUI.prototype.Create = function( parentElement )
  44  {
  45      var oMainElement = this.MainElement ;
  46      
  47      if ( oMainElement )
  48      {
  49          FCKToolbarButtonUI_Cleanup.call(this) ;
  50          
  51          if ( oMainElement.parentNode )
  52              oMainElement.parentNode.removeChild( oMainElement ) ;
  53          oMainElement = this.MainElement = null ;
  54      }
  55  
  56      var oDoc = FCKTools.GetElementDocument( parentElement ) ;
  57      
  58      // Create the Main Element.
  59      oMainElement = this.MainElement = oDoc.createElement( 'DIV' ) ;
  60      oMainElement._FCKButton = this ;        // IE Memory Leak (Circular reference).
  61      oMainElement.title        = this.Tooltip ;
  62  
  63      // The following will prevent the button from catching the focus.
  64      if ( FCKBrowserInfo.IsGecko )
  65           oMainElement.onmousedown    = FCKTools.CancelEvent ;
  66  
  67      this.ChangeState( this.State, true ) ;
  68  
  69      if ( this.Style == FCK_TOOLBARITEM_ONLYICON && !this.ShowArrow )
  70      {
  71          // <td><div class="TB_Button_On" title="Smiley">{Image}</div></td>
  72          
  73          oMainElement.appendChild( this.Icon.CreateIconElement( oDoc ) ) ;
  74      }
  75      else
  76      {
  77          // <td><div class="TB_Button_On" title="Smiley"><table cellpadding="0" cellspacing="0"><tr><td>{Image}</td><td nowrap>Toolbar Button</td><td><img class="TB_Button_Padding"></td></tr></table></div></td>
  78          // <td><div class="TB_Button_On" title="Smiley"><table cellpadding="0" cellspacing="0"><tr><td><img class="TB_Button_Padding"></td><td nowrap>Toolbar Button</td><td><img class="TB_Button_Padding"></td></tr></table></div></td>
  79          
  80          var oTable = oMainElement.appendChild( oDoc.createElement( 'TABLE' ) ) ;
  81          oTable.cellPadding = 0 ;
  82          oTable.cellSpacing = 0 ;
  83  
  84          var oRow = oTable.insertRow(-1) ;
  85          
  86          // The Image cell (icon or padding).
  87          var oCell = oRow.insertCell(-1) ;
  88          
  89          if ( this.Style == FCK_TOOLBARITEM_ONLYICON || this.Style == FCK_TOOLBARITEM_ICONTEXT )
  90              oCell.appendChild( this.Icon.CreateIconElement( oDoc ) ) ;
  91          else
  92              oCell.appendChild( this._CreatePaddingElement( oDoc ) ) ;
  93          
  94          if ( this.Style == FCK_TOOLBARITEM_ONLYTEXT || this.Style == FCK_TOOLBARITEM_ICONTEXT )
  95          {
  96              // The Text cell.
  97              oCell = oRow.insertCell(-1) ;
  98              oCell.className = 'TB_Button_Text' ;
  99              oCell.noWrap = true ;
 100              oCell.appendChild( oDoc.createTextNode( this.Label ) ) ;
 101          }
 102          
 103          if ( this.ShowArrow )
 104          {
 105              if ( this.Style != FCK_TOOLBARITEM_ONLYICON )
 106              {    
 107                  // A padding cell.
 108                  oRow.insertCell(-1).appendChild( this._CreatePaddingElement( oDoc ) ) ;
 109              }
 110              
 111              oCell = oRow.insertCell(-1) ;
 112              var eImg = oCell.appendChild( oDoc.createElement( 'IMG' ) ) ;
 113              eImg.src    = FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif' ;
 114              eImg.width    = 5 ;
 115              eImg.height    = 3 ;
 116          }
 117  
 118          // The last padding cell.
 119          oCell = oRow.insertCell(-1) ;
 120          oCell.appendChild( this._CreatePaddingElement( oDoc ) ) ;
 121      }
 122      
 123      parentElement.appendChild( oMainElement ) ;
 124  }
 125  
 126  FCKToolbarButtonUI.prototype.ChangeState = function( newState, force )
 127  {
 128      if ( !force && this.State == newState )
 129          return ;
 130  
 131      var e = this.MainElement ;
 132  
 133      switch ( parseInt( newState ) )
 134      {
 135          case FCK_TRISTATE_OFF :
 136              e.className        = 'TB_Button_Off' ;
 137              e.onmouseover    = FCKToolbarButton_OnMouseOverOff ;
 138              e.onmouseout    = FCKToolbarButton_OnMouseOutOff ;
 139              e.onclick        = FCKToolbarButton_OnClick ;
 140              
 141              break ;
 142              
 143          case FCK_TRISTATE_ON :
 144              e.className        = 'TB_Button_On' ;
 145              e.onmouseover    = FCKToolbarButton_OnMouseOverOn ;
 146              e.onmouseout    = FCKToolbarButton_OnMouseOutOn ;
 147              e.onclick        = FCKToolbarButton_OnClick ;
 148              
 149              break ;
 150  
 151          case FCK_TRISTATE_DISABLED :
 152              e.className        = 'TB_Button_Disabled' ;
 153              e.onmouseover    = null ;
 154              e.onmouseout    = null ;
 155              e.onclick        = null ;
 156              bEnableEvents = false ;
 157              break ;
 158      }
 159  
 160      this.State = newState ;
 161  }
 162  
 163  function FCKToolbarButtonUI_Cleanup()
 164  {
 165      if ( this.MainElement )
 166      {
 167          this.MainElement._FCKButton = null ;
 168          this.MainElement = null ;
 169      }
 170  }    
 171  
 172  // Event Handlers.
 173  
 174  function FCKToolbarButton_OnMouseOverOn()
 175  {
 176      this.className = 'TB_Button_On_Over' ;
 177  }
 178  
 179  function FCKToolbarButton_OnMouseOutOn()
 180  {
 181      this.className = 'TB_Button_On' ;
 182  }
 183  
 184  function FCKToolbarButton_OnMouseOverOff()
 185  {
 186      this.className = 'TB_Button_Off_Over' ;
 187  }
 188  
 189  function FCKToolbarButton_OnMouseOutOff()
 190  {
 191      this.className = 'TB_Button_Off' ;
 192  }
 193  
 194  function FCKToolbarButton_OnClick( e )
 195  {
 196      if ( this._FCKButton.OnClick )
 197          this._FCKButton.OnClick( this._FCKButton ) ;
 198  }
 199  
 200  /* 
 201      Sample outputs:
 202  
 203      This is the base structure. The variation is the image that is marked as {Image}:
 204          <td><div class="TB_Button_On" title="Smiley">{Image}</div></td>
 205          <td><div class="TB_Button_On" title="Smiley"><table cellpadding="0" cellspacing="0"><tr><td>{Image}</td><td nowrap>Toolbar Button</td><td><img class="TB_Button_Padding"></td></tr></table></div></td>
 206          <td><div class="TB_Button_On" title="Smiley"><table cellpadding="0" cellspacing="0"><tr><td><img class="TB_Button_Padding"></td><td nowrap>Toolbar Button</td><td><img class="TB_Button_Padding"></td></tr></table></div></td>
 207  
 208      These are samples of possible {Image} values:
 209          
 210          Strip - IE version:
 211              <div class="TB_Button_Image"><img src="strip.gif" style="top:-16px"></div>
 212          
 213          Strip : Firefox, Safari and Opera version
 214              <img class="TB_Button_Image" style="background-position: 0px -16px;background-image: url(strip.gif);">
 215          
 216          No-Strip : Browser independent:
 217              <img class="TB_Button_Image" src="smiley.gif">
 218  */