2 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
\r
3 * Copyright (C) 2003-2009 Frederico Caldeira Knabben
\r
5 * == BEGIN LICENSE ==
\r
7 * Licensed under the terms of any of the following licenses at your
\r
10 * - GNU General Public License Version 2 or later (the "GPL")
\r
11 * http://www.gnu.org/licenses/gpl.html
\r
13 * - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
\r
14 * http://www.gnu.org/licenses/lgpl.html
\r
16 * - Mozilla Public License Version 1.1 or later (the "MPL")
\r
17 * http://www.mozilla.org/MPL/MPL-1.1.html
\r
21 * FCKToolbarButtonUI Class: interface representation of a toolbar button.
\r
24 var FCKToolbarButtonUI = function( name, label, tooltip, iconPathOrStripInfoArray, style, state )
\r
27 this.Label = label || name ;
\r
28 this.Tooltip = tooltip || this.Label ;
\r
29 this.Style = style || FCK_TOOLBARITEM_ONLYICON ;
\r
30 this.State = state || FCK_TRISTATE_OFF ;
\r
32 this.Icon = new FCKIcon( iconPathOrStripInfoArray ) ;
\r
34 if ( FCK.IECleanup )
\r
35 FCK.IECleanup.AddItem( this, FCKToolbarButtonUI_Cleanup ) ;
\r
39 FCKToolbarButtonUI.prototype._CreatePaddingElement = function( document )
\r
41 var oImg = document.createElement( 'IMG' ) ;
\r
42 oImg.className = 'TB_Button_Padding' ;
\r
43 oImg.src = FCK_SPACER_PATH ;
\r
47 FCKToolbarButtonUI.prototype.Create = function( parentElement )
\r
49 var oDoc = FCKTools.GetElementDocument( parentElement ) ;
\r
51 // Create the Main Element.
\r
52 var oMainElement = this.MainElement = oDoc.createElement( 'DIV' ) ;
\r
53 oMainElement.title = this.Tooltip ;
\r
55 // The following will prevent the button from catching the focus.
\r
56 if ( FCKBrowserInfo.IsGecko )
\r
57 oMainElement.onmousedown = FCKTools.CancelEvent ;
\r
59 FCKTools.AddEventListenerEx( oMainElement, 'mouseover', FCKToolbarButtonUI_OnMouseOver, this ) ;
\r
60 FCKTools.AddEventListenerEx( oMainElement, 'mouseout', FCKToolbarButtonUI_OnMouseOut, this ) ;
\r
61 FCKTools.AddEventListenerEx( oMainElement, 'click', FCKToolbarButtonUI_OnClick, this ) ;
\r
63 this.ChangeState( this.State, true ) ;
\r
65 if ( this.Style == FCK_TOOLBARITEM_ONLYICON && !this.ShowArrow )
\r
67 // <td><div class="TB_Button_On" title="Smiley">{Image}</div></td>
\r
69 oMainElement.appendChild( this.Icon.CreateIconElement( oDoc ) ) ;
\r
73 // <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>
\r
74 // <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>
\r
76 var oTable = oMainElement.appendChild( oDoc.createElement( 'TABLE' ) ) ;
\r
77 oTable.cellPadding = 0 ;
\r
78 oTable.cellSpacing = 0 ;
\r
80 var oRow = oTable.insertRow(-1) ;
\r
82 // The Image cell (icon or padding).
\r
83 var oCell = oRow.insertCell(-1) ;
\r
85 if ( this.Style == FCK_TOOLBARITEM_ONLYICON || this.Style == FCK_TOOLBARITEM_ICONTEXT )
\r
86 oCell.appendChild( this.Icon.CreateIconElement( oDoc ) ) ;
\r
88 oCell.appendChild( this._CreatePaddingElement( oDoc ) ) ;
\r
90 if ( this.Style == FCK_TOOLBARITEM_ONLYTEXT || this.Style == FCK_TOOLBARITEM_ICONTEXT )
\r
93 oCell = oRow.insertCell(-1) ;
\r
94 oCell.className = 'TB_Button_Text' ;
\r
95 oCell.noWrap = true ;
\r
96 oCell.appendChild( oDoc.createTextNode( this.Label ) ) ;
\r
99 if ( this.ShowArrow )
\r
101 if ( this.Style != FCK_TOOLBARITEM_ONLYICON )
\r
104 oRow.insertCell(-1).appendChild( this._CreatePaddingElement( oDoc ) ) ;
\r
107 oCell = oRow.insertCell(-1) ;
\r
108 var eImg = oCell.appendChild( oDoc.createElement( 'IMG' ) ) ;
\r
109 eImg.src = FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif' ;
\r
114 // The last padding cell.
\r
115 oCell = oRow.insertCell(-1) ;
\r
116 oCell.appendChild( this._CreatePaddingElement( oDoc ) ) ;
\r
119 parentElement.appendChild( oMainElement ) ;
\r
122 FCKToolbarButtonUI.prototype.ChangeState = function( newState, force )
\r
124 if ( !force && this.State == newState )
\r
127 var e = this.MainElement ;
\r
129 // In IE it can happen when the page is reloaded that MainElement is null, so exit here
\r
133 switch ( parseInt( newState, 10 ) )
\r
135 case FCK_TRISTATE_OFF :
\r
136 e.className = 'TB_Button_Off' ;
\r
139 case FCK_TRISTATE_ON :
\r
140 e.className = 'TB_Button_On' ;
\r
143 case FCK_TRISTATE_DISABLED :
\r
144 e.className = 'TB_Button_Disabled' ;
\r
148 this.State = newState ;
\r
151 function FCKToolbarButtonUI_OnMouseOver( ev, button )
\r
153 if ( button.State == FCK_TRISTATE_OFF )
\r
154 this.className = 'TB_Button_Off_Over' ;
\r
155 else if ( button.State == FCK_TRISTATE_ON )
\r
156 this.className = 'TB_Button_On_Over' ;
\r
159 function FCKToolbarButtonUI_OnMouseOut( ev, button )
\r
161 if ( button.State == FCK_TRISTATE_OFF )
\r
162 this.className = 'TB_Button_Off' ;
\r
163 else if ( button.State == FCK_TRISTATE_ON )
\r
164 this.className = 'TB_Button_On' ;
\r
167 function FCKToolbarButtonUI_OnClick( ev, button )
\r
169 if ( button.OnClick && button.State != FCK_TRISTATE_DISABLED )
\r
170 button.OnClick( button ) ;
\r
173 function FCKToolbarButtonUI_Cleanup()
\r
175 // This one should not cause memory leak, but just for safety, let's clean
\r
177 this.MainElement = null ;
\r
183 This is the base structure. The variation is the image that is marked as {Image}:
\r
184 <td><div class="TB_Button_On" title="Smiley">{Image}</div></td>
\r
185 <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>
\r
186 <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>
\r
188 These are samples of possible {Image} values:
\r
190 Strip - IE version:
\r
191 <div class="TB_Button_Image"><img src="strip.gif" style="top:-16px"></div>
\r
193 Strip : Firefox, Safari and Opera version
\r
194 <img class="TB_Button_Image" style="background-position: 0px -16px;background-image: url(strip.gif);">
\r
196 No-Strip : Browser independent:
\r
197 <img class="TB_Button_Image" src="smiley.gif">
\r