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 * FCKToolbarButtonUI Class: interface representation of a toolbar button. 22 */ 23 24var FCKToolbarButtonUI = function( name, label, tooltip, iconPathOrStripInfoArray, style, state ) 25{ 26 this.Name = name ; 27 this.Label = label || name ; 28 this.Tooltip = tooltip || this.Label ; 29 this.Style = style || FCK_TOOLBARITEM_ONLYICON ; 30 this.State = state || FCK_TRISTATE_OFF ; 31 32 this.Icon = new FCKIcon( iconPathOrStripInfoArray ) ; 33 34 if ( FCK.IECleanup ) 35 FCK.IECleanup.AddItem( this, FCKToolbarButtonUI_Cleanup ) ; 36} 37 38 39FCKToolbarButtonUI.prototype._CreatePaddingElement = function( document ) 40{ 41 var oImg = document.createElement( 'IMG' ) ; 42 oImg.className = 'TB_Button_Padding' ; 43 oImg.src = FCK_SPACER_PATH ; 44 return oImg ; 45} 46 47FCKToolbarButtonUI.prototype.Create = function( parentElement ) 48{ 49 var oDoc = FCKTools.GetElementDocument( parentElement ) ; 50 51 // Create the Main Element. 52 var oMainElement = this.MainElement = oDoc.createElement( 'DIV' ) ; 53 oMainElement.title = this.Tooltip ; 54 55 // The following will prevent the button from catching the focus. 56 if ( FCKBrowserInfo.IsGecko ) 57 oMainElement.onmousedown = FCKTools.CancelEvent ; 58 59 FCKTools.AddEventListenerEx( oMainElement, 'mouseover', FCKToolbarButtonUI_OnMouseOver, this ) ; 60 FCKTools.AddEventListenerEx( oMainElement, 'mouseout', FCKToolbarButtonUI_OnMouseOut, this ) ; 61 FCKTools.AddEventListenerEx( oMainElement, 'click', FCKToolbarButtonUI_OnClick, this ) ; 62 63 this.ChangeState( this.State, true ) ; 64 65 if ( this.Style == FCK_TOOLBARITEM_ONLYICON && !this.ShowArrow ) 66 { 67 // <td><div class="TB_Button_On" title="Smiley">{Image}</div></td> 68 69 oMainElement.appendChild( this.Icon.CreateIconElement( oDoc ) ) ; 70 } 71 else 72 { 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> 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> 75 76 var oTable = oMainElement.appendChild( oDoc.createElement( 'TABLE' ) ) ; 77 oTable.cellPadding = 0 ; 78 oTable.cellSpacing = 0 ; 79 80 var oRow = oTable.insertRow(-1) ; 81 82 // The Image cell (icon or padding). 83 var oCell = oRow.insertCell(-1) ; 84 85 if ( this.Style == FCK_TOOLBARITEM_ONLYICON || this.Style == FCK_TOOLBARITEM_ICONTEXT ) 86 oCell.appendChild( this.Icon.CreateIconElement( oDoc ) ) ; 87 else 88 oCell.appendChild( this._CreatePaddingElement( oDoc ) ) ; 89 90 if ( this.Style == FCK_TOOLBARITEM_ONLYTEXT || this.Style == FCK_TOOLBARITEM_ICONTEXT ) 91 { 92 // The Text cell. 93 oCell = oRow.insertCell(-1) ; 94 oCell.className = 'TB_Button_Text' ; 95 oCell.noWrap = true ; 96 oCell.appendChild( oDoc.createTextNode( this.Label ) ) ; 97 } 98 99 if ( this.ShowArrow ) 100 { 101 if ( this.Style != FCK_TOOLBARITEM_ONLYICON ) 102 { 103 // A padding cell. 104 oRow.insertCell(-1).appendChild( this._CreatePaddingElement( oDoc ) ) ; 105 } 106 107 oCell = oRow.insertCell(-1) ; 108 var eImg = oCell.appendChild( oDoc.createElement( 'IMG' ) ) ; 109 eImg.src = FCKConfig.SkinPath + 'images/toolbar.buttonarrow.gif' ; 110 eImg.width = 5 ; 111 eImg.height = 3 ; 112 } 113 114 // The last padding cell. 115 oCell = oRow.insertCell(-1) ; 116 oCell.appendChild( this._CreatePaddingElement( oDoc ) ) ; 117 } 118 119 parentElement.appendChild( oMainElement ) ; 120} 121 122FCKToolbarButtonUI.prototype.ChangeState = function( newState, force ) 123{ 124 if ( !force && this.State == newState ) 125 return ; 126 127 var e = this.MainElement ; 128 129 switch ( parseInt( newState, 10 ) ) 130 { 131 case FCK_TRISTATE_OFF : 132 e.className = 'TB_Button_Off' ; 133 break ; 134 135 case FCK_TRISTATE_ON : 136 e.className = 'TB_Button_On' ; 137 break ; 138 139 case FCK_TRISTATE_DISABLED : 140 e.className = 'TB_Button_Disabled' ; 141 break ; 142 } 143 144 this.State = newState ; 145} 146 147function FCKToolbarButtonUI_OnMouseOver( ev, button ) 148{ 149 if ( button.State == FCK_TRISTATE_OFF ) 150 this.className = 'TB_Button_Off_Over' ; 151 else if ( button.State == FCK_TRISTATE_ON ) 152 this.className = 'TB_Button_On_Over' ; 153} 154 155function FCKToolbarButtonUI_OnMouseOut( ev, button ) 156{ 157 if ( button.State == FCK_TRISTATE_OFF ) 158 this.className = 'TB_Button_Off' ; 159 else if ( button.State == FCK_TRISTATE_ON ) 160 this.className = 'TB_Button_On' ; 161} 162 163function FCKToolbarButtonUI_OnClick( ev, button ) 164{ 165 if ( button.OnClick && button.State != FCK_TRISTATE_DISABLED ) 166 button.OnClick( button ) ; 167} 168 169function FCKToolbarButtonUI_Cleanup() 170{ 171 // This one should not cause memory leak, but just for safety, let's clean 172 // it up. 173 this.MainElement = null ; 174} 175 176/* 177 Sample outputs: 178 179 This is the base structure. The variation is the image that is marked as {Image}: 180 <td><div class="TB_Button_On" title="Smiley">{Image}</div></td> 181 <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> 182 <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> 183 184 These are samples of possible {Image} values: 185 186 Strip - IE version: 187 <div class="TB_Button_Image"><img src="strip.gif" style="top:-16px"></div> 188 189 Strip : Firefox, Safari and Opera version 190 <img class="TB_Button_Image" style="background-position: 0px -16px;background-image: url(strip.gif);"> 191 192 No-Strip : Browser independent: 193 <img class="TB_Button_Image" src="smiley.gif"> 194*/ 195