httemplate/elements/fckeditor/editor/dialog/fck_image/fck_image.js

   1 /*\r
   2  * FCKeditor - The text editor for Internet - http://www.fckeditor.net\r
   3  * Copyright (C) 2003-2010 Frederico Caldeira Knabben\r
   4  *\r
   5  * == BEGIN LICENSE ==\r
   6  *\r
   7  * Licensed under the terms of any of the following licenses at your\r
   8  * choice:\r
   9  *\r
  10  *  - GNU General Public License Version 2 or later (the "GPL")\r
  11  *    http://www.gnu.org/licenses/gpl.html\r
  12  *\r
  13  *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")\r
  14  *    http://www.gnu.org/licenses/lgpl.html\r
  15  *\r
  16  *  - Mozilla Public License Version 1.1 or later (the "MPL")\r
  17  *    http://www.mozilla.org/MPL/MPL-1.1.html\r
  18  *\r
  19  * == END LICENSE ==\r
  20  *\r
  21  * Scripts related to the Image dialog window (see fck_image.html).\r
  22  */\r
  23 \r
  24 var dialog              = window.parent ;\r
  25 var oEditor             = dialog.InnerDialogLoaded() ;\r
  26 var FCK                 = oEditor.FCK ;\r
  27 var FCKLang             = oEditor.FCKLang ;\r
  28 var FCKConfig   = oEditor.FCKConfig ;\r
  29 var FCKDebug    = oEditor.FCKDebug ;\r
  30 var FCKTools    = oEditor.FCKTools ;\r
  31 \r
  32 var bImageButton = ( document.location.search.length > 0 && document.location.search.substr(1) == 'ImageButton' ) ;\r
  33 \r
  34 //#### Dialog Tabs\r
  35 \r
  36 // Set the dialog tabs.\r
  37 dialog.AddTab( 'Info', FCKLang.DlgImgInfoTab ) ;\r
  38 \r
  39 if ( !bImageButton && !FCKConfig.ImageDlgHideLink )\r
  40         dialog.AddTab( 'Link', FCKLang.DlgImgLinkTab ) ;\r
  41 \r
  42 if ( FCKConfig.ImageUpload )\r
  43         dialog.AddTab( 'Upload', FCKLang.DlgLnkUpload ) ;\r
  44 \r
  45 if ( !FCKConfig.ImageDlgHideAdvanced )\r
  46         dialog.AddTab( 'Advanced', FCKLang.DlgAdvancedTag ) ;\r
  47 \r
  48 // Function called when a dialog tag is selected.\r
  49 function OnDialogTabChange( tabCode )\r
  50 {\r
  51         ShowE('divInfo'         , ( tabCode == 'Info' ) ) ;\r
  52         ShowE('divLink'         , ( tabCode == 'Link' ) ) ;\r
  53         ShowE('divUpload'       , ( tabCode == 'Upload' ) ) ;\r
  54         ShowE('divAdvanced'     , ( tabCode == 'Advanced' ) ) ;\r
  55 }\r
  56 \r
  57 // Get the selected image (if available).\r
  58 var oImage = dialog.Selection.GetSelectedElement() ;\r
  59 \r
  60 if ( oImage && oImage.tagName != 'IMG' && !( oImage.tagName == 'INPUT' && oImage.type == 'image' ) )\r
  61         oImage = null ;\r
  62 \r
  63 // Get the active link.\r
  64 var oLink = dialog.Selection.GetSelection().MoveToAncestorNode( 'A' ) ;\r
  65 \r
  66 var oImageOriginal ;\r
  67 \r
  68 function UpdateOriginal( resetSize )\r
  69 {\r
  70         if ( !eImgPreview )\r
  71                 return ;\r
  72 \r
  73         if ( GetE('txtUrl').value.length == 0 )\r
  74         {\r
  75                 oImageOriginal = null ;\r
  76                 return ;\r
  77         }\r
  78 \r
  79         oImageOriginal = document.createElement( 'IMG' ) ;      // new Image() ;\r
  80 \r
  81         if ( resetSize )\r
  82         {\r
  83                 oImageOriginal.onload = function()\r
  84                 {\r
  85                         this.onload = null ;\r
  86                         ResetSizes() ;\r
  87                 }\r
  88         }\r
  89 \r
  90         oImageOriginal.src = eImgPreview.src ;\r
  91 }\r
  92 \r
  93 var bPreviewInitialized ;\r
  94 \r
  95 window.onload = function()\r
  96 {\r
  97         // Translate the dialog box texts.\r
  98         oEditor.FCKLanguageManager.TranslatePage(document) ;\r
  99 \r
 100         GetE('btnLockSizes').title = FCKLang.DlgImgLockRatio ;\r
 101         GetE('btnResetSize').title = FCKLang.DlgBtnResetSize ;\r
 102 \r
 103         // Load the selected element information (if any).\r
 104         LoadSelection() ;\r
 105 \r
 106         // Show/Hide the "Browse Server" button.\r
 107         GetE('tdBrowse').style.display                          = FCKConfig.ImageBrowser        ? '' : 'none' ;\r
 108         GetE('divLnkBrowseServer').style.display        = FCKConfig.LinkBrowser         ? '' : 'none' ;\r
 109 \r
 110         UpdateOriginal() ;\r
 111 \r
 112         // Set the actual uploader URL.\r
 113         if ( FCKConfig.ImageUpload )\r
 114                 GetE('frmUpload').action = FCKConfig.ImageUploadURL ;\r
 115 \r
 116         dialog.SetAutoSize( true ) ;\r
 117 \r
 118         // Activate the "OK" button.\r
 119         dialog.SetOkButton( true ) ;\r
 120 \r
 121         SelectField( 'txtUrl' ) ;\r
 122 }\r
 123 \r
 124 function LoadSelection()\r
 125 {\r
 126         if ( ! oImage ) return ;\r
 127 \r
 128         var sUrl = oImage.getAttribute( '_fcksavedurl' ) ;\r
 129         if ( sUrl == null )\r
 130                 sUrl = GetAttribute( oImage, 'src', '' ) ;\r
 131 \r
 132         GetE('txtUrl').value    = sUrl ;\r
 133         GetE('txtAlt').value    = GetAttribute( oImage, 'alt', '' ) ;\r
 134         GetE('txtVSpace').value = GetAttribute( oImage, 'vspace', '' ) ;\r
 135         GetE('txtHSpace').value = GetAttribute( oImage, 'hspace', '' ) ;\r
 136         GetE('txtBorder').value = GetAttribute( oImage, 'border', '' ) ;\r
 137         GetE('cmbAlign').value  = GetAttribute( oImage, 'align', '' ) ;\r
 138 \r
 139         var iWidth, iHeight ;\r
 140 \r
 141         var regexSize = /^\s*(\d+)px\s*$/i ;\r
 142 \r
 143         if ( oImage.style.width )\r
 144         {\r
 145                 var aMatchW  = oImage.style.width.match( regexSize ) ;\r
 146                 if ( aMatchW )\r
 147                 {\r
 148                         iWidth = aMatchW[1] ;\r
 149                         oImage.style.width = '' ;\r
 150                         SetAttribute( oImage, 'width' , iWidth ) ;\r
 151                 }\r
 152         }\r
 153 \r
 154         if ( oImage.style.height )\r
 155         {\r
 156                 var aMatchH  = oImage.style.height.match( regexSize ) ;\r
 157                 if ( aMatchH )\r
 158                 {\r
 159                         iHeight = aMatchH[1] ;\r
 160                         oImage.style.height = '' ;\r
 161                         SetAttribute( oImage, 'height', iHeight ) ;\r
 162                 }\r
 163         }\r
 164 \r
 165         GetE('txtWidth').value  = iWidth ? iWidth : GetAttribute( oImage, "width", '' ) ;\r
 166         GetE('txtHeight').value = iHeight ? iHeight : GetAttribute( oImage, "height", '' ) ;\r
 167 \r
 168         // Get Advances Attributes\r
 169         GetE('txtAttId').value                  = oImage.id ;\r
 170         GetE('cmbAttLangDir').value             = oImage.dir ;\r
 171         GetE('txtAttLangCode').value    = oImage.lang ;\r
 172         GetE('txtAttTitle').value               = oImage.title ;\r
 173         GetE('txtLongDesc').value               = oImage.longDesc ;\r
 174 \r
 175         if ( oEditor.FCKBrowserInfo.IsIE )\r
 176         {\r
 177                 GetE('txtAttClasses').value = oImage.className || '' ;\r
 178                 GetE('txtAttStyle').value = oImage.style.cssText ;\r
 179         }\r
 180         else\r
 181         {\r
 182                 GetE('txtAttClasses').value = oImage.getAttribute('class',2) || '' ;\r
 183                 GetE('txtAttStyle').value = oImage.getAttribute('style',2) ;\r
 184         }\r
 185 \r
 186         if ( oLink )\r
 187         {\r
 188                 var sLinkUrl = oLink.getAttribute( '_fcksavedurl' ) ;\r
 189                 if ( sLinkUrl == null )\r
 190                         sLinkUrl = oLink.getAttribute('href',2) ;\r
 191 \r
 192                 GetE('txtLnkUrl').value         = sLinkUrl ;\r
 193                 GetE('cmbLnkTarget').value      = oLink.target ;\r
 194         }\r
 195 \r
 196         UpdatePreview() ;\r
 197 }\r
 198 \r
 199 //#### The OK button was hit.\r
 200 function Ok()\r
 201 {\r
 202         if ( GetE('txtUrl').value.length == 0 )\r
 203         {\r
 204                 dialog.SetSelectedTab( 'Info' ) ;\r
 205                 GetE('txtUrl').focus() ;\r
 206 \r
 207                 alert( FCKLang.DlgImgAlertUrl ) ;\r
 208 \r
 209                 return false ;\r
 210         }\r
 211 \r
 212         var bHasImage = ( oImage != null ) ;\r
 213 \r
 214         if ( bHasImage && bImageButton && oImage.tagName == 'IMG' )\r
 215         {\r
 216                 if ( confirm( 'Do you want to transform the selected image on a image button?' ) )\r
 217                         oImage = null ;\r
 218         }\r
 219         else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' )\r
 220         {\r
 221                 if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) )\r
 222                         oImage = null ;\r
 223         }\r
 224 \r
 225         oEditor.FCKUndo.SaveUndoStep() ;\r
 226         if ( !bHasImage )\r
 227         {\r
 228                 if ( bImageButton )\r
 229                 {\r
 230                         oImage = FCK.EditorDocument.createElement( 'input' ) ;\r
 231                         oImage.type = 'image' ;\r
 232                         oImage = FCK.InsertElement( oImage ) ;\r
 233                 }\r
 234                 else\r
 235                         oImage = FCK.InsertElement( 'img' ) ;\r
 236         }\r
 237 \r
 238         UpdateImage( oImage ) ;\r
 239 \r
 240         var sLnkUrl = GetE('txtLnkUrl').value.Trim() ;\r
 241 \r
 242         if ( sLnkUrl.length == 0 )\r
 243         {\r
 244                 if ( oLink )\r
 245                         FCK.ExecuteNamedCommand( 'Unlink' ) ;\r
 246         }\r
 247         else\r
 248         {\r
 249                 if ( oLink )    // Modifying an existent link.\r
 250                         oLink.href = sLnkUrl ;\r
 251                 else                    // Creating a new link.\r
 252                 {\r
 253                         if ( !bHasImage )\r
 254                                 oEditor.FCKSelection.SelectNode( oImage ) ;\r
 255 \r
 256                         oLink = oEditor.FCK.CreateLink( sLnkUrl )[0] ;\r
 257 \r
 258                         if ( !bHasImage )\r
 259                         {\r
 260                                 oEditor.FCKSelection.SelectNode( oLink ) ;\r
 261                                 oEditor.FCKSelection.Collapse( false ) ;\r
 262                         }\r
 263                 }\r
 264 \r
 265                 SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;\r
 266                 SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;\r
 267         }\r
 268 \r
 269         return true ;\r
 270 }\r
 271 \r
 272 function UpdateImage( e, skipId )\r
 273 {\r
 274         e.src = GetE('txtUrl').value ;\r
 275         SetAttribute( e, "_fcksavedurl", GetE('txtUrl').value ) ;\r
 276         SetAttribute( e, "alt"   , GetE('txtAlt').value ) ;\r
 277         SetAttribute( e, "width" , GetE('txtWidth').value ) ;\r
 278         SetAttribute( e, "height", GetE('txtHeight').value ) ;\r
 279         SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;\r
 280         SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;\r
 281         SetAttribute( e, "border", GetE('txtBorder').value ) ;\r
 282         SetAttribute( e, "align" , GetE('cmbAlign').value ) ;\r
 283 \r
 284         // Advances Attributes\r
 285 \r
 286         if ( ! skipId )\r
 287                 SetAttribute( e, 'id', GetE('txtAttId').value ) ;\r
 288 \r
 289         SetAttribute( e, 'dir'          , GetE('cmbAttLangDir').value ) ;\r
 290         SetAttribute( e, 'lang'         , GetE('txtAttLangCode').value ) ;\r
 291         SetAttribute( e, 'title'        , GetE('txtAttTitle').value ) ;\r
 292         SetAttribute( e, 'longDesc'     , GetE('txtLongDesc').value ) ;\r
 293 \r
 294         if ( oEditor.FCKBrowserInfo.IsIE )\r
 295         {\r
 296                 e.className = GetE('txtAttClasses').value ;\r
 297                 e.style.cssText = GetE('txtAttStyle').value ;\r
 298         }\r
 299         else\r
 300         {\r
 301                 SetAttribute( e, 'class'        , GetE('txtAttClasses').value ) ;\r
 302                 SetAttribute( e, 'style', GetE('txtAttStyle').value ) ;\r
 303         }\r
 304 }\r
 305 \r
 306 var eImgPreview ;\r
 307 var eImgPreviewLink ;\r
 308 \r
 309 function SetPreviewElements( imageElement, linkElement )\r
 310 {\r
 311         eImgPreview = imageElement ;\r
 312         eImgPreviewLink = linkElement ;\r
 313 \r
 314         UpdatePreview() ;\r
 315         UpdateOriginal() ;\r
 316 \r
 317         bPreviewInitialized = true ;\r
 318 }\r
 319 \r
 320 function UpdatePreview()\r
 321 {\r
 322         if ( !eImgPreview || !eImgPreviewLink )\r
 323                 return ;\r
 324 \r
 325         if ( GetE('txtUrl').value.length == 0 )\r
 326                 eImgPreviewLink.style.display = 'none' ;\r
 327         else\r
 328         {\r
 329                 UpdateImage( eImgPreview, true ) ;\r
 330 \r
 331                 if ( GetE('txtLnkUrl').value.Trim().length > 0 )\r
 332                         eImgPreviewLink.href = 'javascript:void(null);' ;\r
 333                 else\r
 334                         SetAttribute( eImgPreviewLink, 'href', '' ) ;\r
 335 \r
 336                 eImgPreviewLink.style.display = '' ;\r
 337         }\r
 338 }\r
 339 \r
 340 var bLockRatio = true ;\r
 341 \r
 342 function SwitchLock( lockButton )\r
 343 {\r
 344         bLockRatio = !bLockRatio ;\r
 345         lockButton.className = bLockRatio ? 'BtnLocked' : 'BtnUnlocked' ;\r
 346         lockButton.title = bLockRatio ? 'Lock sizes' : 'Unlock sizes' ;\r
 347 \r
 348         if ( bLockRatio )\r
 349         {\r
 350                 if ( GetE('txtWidth').value.length > 0 )\r
 351                         OnSizeChanged( 'Width', GetE('txtWidth').value ) ;\r
 352                 else\r
 353                         OnSizeChanged( 'Height', GetE('txtHeight').value ) ;\r
 354         }\r
 355 }\r
 356 \r
 357 // Fired when the width or height input texts change\r
 358 function OnSizeChanged( dimension, value )\r
 359 {\r
 360         // Verifies if the aspect ration has to be maintained\r
 361         if ( oImageOriginal && bLockRatio )\r
 362         {\r
 363                 var e = dimension == 'Width' ? GetE('txtHeight') : GetE('txtWidth') ;\r
 364 \r
 365                 if ( value.length == 0 || isNaN( value ) )\r
 366                 {\r
 367                         e.value = '' ;\r
 368                         return ;\r
 369                 }\r
 370 \r
 371                 if ( dimension == 'Width' )\r
 372                         value = value == 0 ? 0 : Math.round( oImageOriginal.height * ( value  / oImageOriginal.width ) ) ;\r
 373                 else\r
 374                         value = value == 0 ? 0 : Math.round( oImageOriginal.width  * ( value / oImageOriginal.height ) ) ;\r
 375 \r
 376                 if ( !isNaN( value ) )\r
 377                         e.value = value ;\r
 378         }\r
 379 \r
 380         UpdatePreview() ;\r
 381 }\r
 382 \r
 383 // Fired when the Reset Size button is clicked\r
 384 function ResetSizes()\r
 385 {\r
 386         if ( ! oImageOriginal ) return ;\r
 387         if ( oEditor.FCKBrowserInfo.IsGecko && !oImageOriginal.complete )\r
 388         {\r
 389                 setTimeout( ResetSizes, 50 ) ;\r
 390                 return ;\r
 391         }\r
 392 \r
 393         GetE('txtWidth').value  = oImageOriginal.width ;\r
 394         GetE('txtHeight').value = oImageOriginal.height ;\r
 395 \r
 396         UpdatePreview() ;\r
 397 }\r
 398 \r
 399 function BrowseServer()\r
 400 {\r
 401         OpenServerBrowser(\r
 402                 'Image',\r
 403                 FCKConfig.ImageBrowserURL,\r
 404                 FCKConfig.ImageBrowserWindowWidth,\r
 405                 FCKConfig.ImageBrowserWindowHeight ) ;\r
 406 }\r
 407 \r
 408 function LnkBrowseServer()\r
 409 {\r
 410         OpenServerBrowser(\r
 411                 'Link',\r
 412                 FCKConfig.LinkBrowserURL,\r
 413                 FCKConfig.LinkBrowserWindowWidth,\r
 414                 FCKConfig.LinkBrowserWindowHeight ) ;\r
 415 }\r
 416 \r
 417 function OpenServerBrowser( type, url, width, height )\r
 418 {\r
 419         sActualBrowser = type ;\r
 420         OpenFileBrowser( url, width, height ) ;\r
 421 }\r
 422 \r
 423 var sActualBrowser ;\r
 424 \r
 425 function SetUrl( url, width, height, alt )\r
 426 {\r
 427         if ( sActualBrowser == 'Link' )\r
 428         {\r
 429                 GetE('txtLnkUrl').value = url ;\r
 430                 UpdatePreview() ;\r
 431         }\r
 432         else\r
 433         {\r
 434                 GetE('txtUrl').value = url ;\r
 435                 GetE('txtWidth').value = width ? width : '' ;\r
 436                 GetE('txtHeight').value = height ? height : '' ;\r
 437 \r
 438                 if ( alt )\r
 439                         GetE('txtAlt').value = alt;\r
 440 \r
 441                 UpdatePreview() ;\r
 442                 UpdateOriginal( true ) ;\r
 443         }\r
 444 \r
 445         dialog.SetSelectedTab( 'Info' ) ;\r
 446 }\r
 447 \r
 448 function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )\r
 449 {\r
 450         // Remove animation\r
 451         window.parent.Throbber.Hide() ;\r
 452         GetE( 'divUpload' ).style.display  = '' ;\r
 453 \r
 454         switch ( errorNumber )\r
 455         {\r
 456                 case 0 :        // No errors\r
 457                         alert( 'Your file has been successfully uploaded' ) ;\r
 458                         break ;\r
 459                 case 1 :        // Custom error\r
 460                         alert( customMsg ) ;\r
 461                         return ;\r
 462                 case 101 :      // Custom warning\r
 463                         alert( customMsg ) ;\r
 464                         break ;\r
 465                 case 201 :\r
 466                         alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ;\r
 467                         break ;\r
 468                 case 202 :\r
 469                         alert( 'Invalid file type' ) ;\r
 470                         return ;\r
 471                 case 203 :\r
 472                         alert( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ;\r
 473                         return ;\r
 474                 case 500 :\r
 475                         alert( 'The connector is disabled' ) ;\r
 476                         break ;\r
 477                 default :\r
 478                         alert( 'Error on file upload. Error number: ' + errorNumber ) ;\r
 479                         return ;\r
 480         }\r
 481 \r
 482         sActualBrowser = '' ;\r
 483         SetUrl( fileUrl ) ;\r
 484         GetE('frmUpload').reset() ;\r
 485 }\r
 486 \r
 487 var oUploadAllowedExtRegex      = new RegExp( FCKConfig.ImageUploadAllowedExtensions, 'i' ) ;\r
 488 var oUploadDeniedExtRegex       = new RegExp( FCKConfig.ImageUploadDeniedExtensions, 'i' ) ;\r
 489 \r
 490 function CheckUpload()\r
 491 {\r
 492         var sFile = GetE('txtUploadFile').value ;\r
 493 \r
 494         if ( sFile.length == 0 )\r
 495         {\r
 496                 alert( 'Please select a file to upload' ) ;\r
 497                 return false ;\r
 498         }\r
 499 \r
 500         if ( ( FCKConfig.ImageUploadAllowedExtensions.length > 0 && !oUploadAllowedExtRegex.test( sFile ) ) ||\r
 501                 ( FCKConfig.ImageUploadDeniedExtensions.length > 0 && oUploadDeniedExtRegex.test( sFile ) ) )\r
 502         {\r
 503                 OnUploadCompleted( 202 ) ;\r
 504                 return false ;\r
 505         }\r
 506 \r
 507         // Show animation\r
 508         window.parent.Throbber.Show( 100 ) ;\r
 509         GetE( 'divUpload' ).style.display  = 'none' ;\r
 510 \r
 511         return true ;\r
 512 }\r