Ticket #4246: fck_image.js

File fck_image.js, 15.1 KB (added by Florian, 14 years ago)
Line 
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 * Scripts related to the Image dialog window (see fck_image.html).
22 */
23
24var dialog              = window.parent ;
25var oEditor             = dialog.InnerDialogLoaded() ;
26var FCK                 = oEditor.FCK ;
27var FCKLang             = oEditor.FCKLang ;
28var FCKConfig   = oEditor.FCKConfig ;
29var FCKDebug    = oEditor.FCKDebug ;
30var FCKTools    = oEditor.FCKTools ;
31
32var bImageButton = ( document.location.search.length > 0 && document.location.search.substr(1) == 'ImageButton' ) ;
33
34//#### Dialog Tabs
35
36// Set the dialog tabs.
37dialog.AddTab( 'Info', FCKLang.DlgImgInfoTab ) ;
38
39if ( !bImageButton && !FCKConfig.ImageDlgHideLink )
40        dialog.AddTab( 'Link', FCKLang.DlgImgLinkTab ) ;
41
42if ( FCKConfig.ImageUpload )
43        dialog.AddTab( 'Upload', FCKLang.DlgLnkUpload ) ;
44
45if ( !FCKConfig.ImageDlgHideAdvanced )
46        dialog.AddTab( 'Advanced', FCKLang.DlgAdvancedTag ) ;
47
48// Function called when a dialog tag is selected.
49function OnDialogTabChange( tabCode )
50{
51        ShowE('divInfo'         , ( tabCode == 'Info' ) ) ;
52        ShowE('divLink'         , ( tabCode == 'Link' ) ) ;
53        ShowE('divUpload'       , ( tabCode == 'Upload' ) ) ;
54        ShowE('divAdvanced'     , ( tabCode == 'Advanced' ) ) ;
55}
56
57
58// Get the selected image (if available).
59var oImage = dialog.Selection.GetSelectedElement() ;
60
61if ( oImage && oImage.tagName != 'IMG' && !( oImage.tagName == 'INPUT' && oImage.type == 'image' ) )
62        oImage = null ;
63
64// Get the active link.
65var oLink = dialog.Selection.GetSelection().MoveToAncestorNode( 'A' ) ;
66
67var oImageOriginal ;
68
69function UpdateOriginal( resetSize )
70{
71        if ( !eImgPreview )
72                return ;
73
74        if ( GetE('txtUrl').value.length == 0 )
75        {
76                oImageOriginal = null ;
77                return ;
78        }
79
80        oImageOriginal = document.createElement( 'IMG' ) ;      // new Image() ;
81
82        if ( resetSize )
83        {
84                oImageOriginal.onload = function()
85                {
86                        this.onload = null ;
87                        ResetSizes() ;
88                }
89        }
90
91        oImageOriginal.src = eImgPreview.src ;
92}
93
94var bPreviewInitialized ;
95
96window.onload = function()
97{
98        // Translate the dialog box texts.
99        oEditor.FCKLanguageManager.TranslatePage(document) ;
100
101        GetE('btnLockSizes').title = FCKLang.DlgImgLockRatio ;
102        GetE('btnResetSize').title = FCKLang.DlgBtnResetSize ;
103
104        // Load the selected element information (if any).
105        LoadSelection() ;
106
107        // Show/Hide the "Browse Server" button.
108        GetE('tdBrowse').style.display                          = FCKConfig.ImageBrowser        ? '' : 'none' ;
109        GetE('divLnkBrowseServer').style.display        = FCKConfig.LinkBrowser         ? '' : 'none' ;
110
111        UpdateOriginal() ;
112
113        // Set the actual uploader URL.
114        if ( FCKConfig.ImageUpload )
115                GetE('frmUpload').action = FCKConfig.ImageUploadURL ;
116
117        dialog.SetAutoSize( true ) ;
118
119        // Activate the "OK" button.
120        dialog.SetOkButton( true ) ;
121
122        SelectField( 'txtUrl' ) ;
123}
124
125function LoadSelection()
126{
127        if ( ! oImage ) return ;
128
129        var sUrl = oImage.getAttribute( '_fcksavedurl' ) ;
130        if ( sUrl == null )
131                sUrl = GetAttribute( oImage, 'src', '' ) ;
132        GetE('txtUrl').value    = sUrl ;
133        GetE('txtAlt').value    = GetAttribute( oImage, 'alt', '' ) ;
134        //GetE('txtVSpace').value       = GetAttribute( oImage, 'vspace', '' ) ;
135        //GetE('txtHSpace').value       = GetAttribute( oImage, 'hspace', '' ) ;
136        GetE('txtBorder').value = GetAttribute( oImage, 'border', '' ) ;
137        //GetE('cmbAlign').value        = GetAttribute( oImage, 'align', '' ) ;
138
139        if( oImage.style.cssFloat == 'left' || oImage.style.cssFloat == 'right' ) {
140                GetE('cmbAlign').value = oImage.style.cssFloat ;
141        }
142
143        if( oImage.style.verticalAlign == 'baseline' || oImage.style.verticalAlign == 'bottom' || 
144        oImage.style.verticalAlign == 'middle' || oImage.style.verticalAlign == 'top' ) {
145                GetE('cmbAlign').value = oImage.style.verticalAlign ;
146        }
147
148        if( oImage.style.verticalAlign == 'text-bottom' ) {
149                GetE('cmbAlign').value = 'absBottom' ;
150        }
151
152        if( oImage.style.verticalAlign == 'text-top' ) {
153                GetE('cmbAlign').value = 'textTop' ;
154        }
155
156        /*
157        left                                    :float left
158        absBottom                               :vertical-align like text-bottom? *if
159        absMiddle                               :vertical-align like middle? *if
160        baseline                                :vertical-align baseline
161        bottom                                  :vertical-align bottom
162        middle                                  :vertical-align middle
163        right                                   :float right
164        textTop                                 :vertical-align text-top *if
165        top                                     :vertical-align top
166        */
167
168        var regexMargin = /^\s*(\d+)px\s*$/i ;
169        var vMargincss ;
170
171        if ( oImage.style.marginTop && oImage.style.marginBottom )
172        {
173                var vMargin  = oImage.style.marginTop.match( regexMargin ) ;
174                if ( vMargin )
175                {
176                        vMargincss = vMargin[1] ;
177                        GetE('txtVSpace').value = vMargincss ;
178                }
179        }
180
181        var hMargincss ;
182
183        if ( oImage.style.marginLeft && oImage.style.marginRight )
184        {
185                var hMargin  = oImage.style.marginLeft.match( regexMargin ) ;
186                if ( hMargin )
187                {
188                        hMargincss = hMargin[1] ;
189                        GetE('txtHSpace').value = hMargincss ;
190                }
191        }
192
193        var iWidth, iHeight ;
194
195        var regexSize = /^\s*(\d+)px\s*$/i ;
196
197        if ( oImage.style.width )
198        {
199                var aMatchW  = oImage.style.width.match( regexSize ) ;
200                if ( aMatchW )
201                {
202                        iWidth = aMatchW[1] ;
203                        oImage.style.width = '' ;
204                        SetAttribute( oImage, 'width' , iWidth ) ;
205                }
206        }
207
208        if ( oImage.style.height )
209        {
210                var aMatchH  = oImage.style.height.match( regexSize ) ;
211                if ( aMatchH )
212                {
213                        iHeight = aMatchH[1] ;
214                        oImage.style.height = '' ;
215                        SetAttribute( oImage, 'height', iHeight ) ;
216                }
217        }
218
219        GetE('txtWidth').value  = iWidth ? iWidth : GetAttribute( oImage, "width", '' ) ;
220        GetE('txtHeight').value = iHeight ? iHeight : GetAttribute( oImage, "height", '' ) ;
221
222        // Get Advances Attributes
223        GetE('txtAttId').value                  = oImage.id ;
224        GetE('cmbAttLangDir').value             = oImage.dir ;
225        GetE('txtAttLangCode').value    = oImage.lang ;
226        GetE('txtAttTitle').value               = oImage.title ;
227        GetE('txtLongDesc').value               = oImage.longDesc ;
228
229        if ( oEditor.FCKBrowserInfo.IsIE )
230        {
231                GetE('txtAttClasses').value = oImage.className || '' ;
232                GetE('txtAttStyle').value = oImage.style.cssText ;
233        }
234        else
235        {
236                GetE('txtAttClasses').value = oImage.getAttribute('class',2) || '' ;
237                GetE('txtAttStyle').value = oImage.getAttribute('style',2) ;
238        }
239
240        if ( oLink )
241        {
242                var sLinkUrl = oLink.getAttribute( '_fcksavedurl' ) ;
243                if ( sLinkUrl == null )
244                        sLinkUrl = oLink.getAttribute('href',2) ;
245
246                GetE('txtLnkUrl').value         = sLinkUrl ;
247                GetE('cmbLnkTarget').value      = oLink.target ;
248        }
249
250        UpdatePreview() ;
251}
252
253//#### The OK button was hit.
254function Ok()
255{
256        if ( GetE('txtUrl').value.length == 0 )
257        {
258                dialog.SetSelectedTab( 'Info' ) ;
259                GetE('txtUrl').focus() ;
260
261                alert( FCKLang.DlgImgAlertUrl ) ;
262
263                return false ;
264        }
265
266        var bHasImage = ( oImage != null ) ;
267
268        if ( bHasImage && bImageButton && oImage.tagName == 'IMG' )
269        {
270                if ( confirm( 'Do you want to transform the selected image on a image button?' ) )
271                        oImage = null ;
272        }
273        else if ( bHasImage && !bImageButton && oImage.tagName == 'INPUT' )
274        {
275                if ( confirm( 'Do you want to transform the selected image button on a simple image?' ) )
276                        oImage = null ;
277        }
278
279        oEditor.FCKUndo.SaveUndoStep() ;
280        if ( !bHasImage )
281        {
282                if ( bImageButton )
283                {
284                        oImage = FCK.EditorDocument.createElement( 'input' ) ;
285                        oImage.type = 'image' ;
286                        oImage = FCK.InsertElement( oImage ) ;
287                }
288                else
289                        oImage = FCK.InsertElement( 'img' ) ;
290        }
291
292        UpdateImage( oImage ) ;
293
294        var sLnkUrl = GetE('txtLnkUrl').value.Trim() ;
295
296        if ( sLnkUrl.length == 0 )
297        {
298                if ( oLink )
299                        FCK.ExecuteNamedCommand( 'Unlink' ) ;
300        }
301        else
302        {
303                if ( oLink )    // Modifying an existent link.
304                        oLink.href = sLnkUrl ;
305                else                    // Creating a new link.
306                {
307                        if ( !bHasImage )
308                                oEditor.FCKSelection.SelectNode( oImage ) ;
309
310                        oLink = oEditor.FCK.CreateLink( sLnkUrl )[0] ;
311
312                        if ( !bHasImage )
313                        {
314                                oEditor.FCKSelection.SelectNode( oLink ) ;
315                                oEditor.FCKSelection.Collapse( false ) ;
316                        }
317                }
318
319                SetAttribute( oLink, '_fcksavedurl', sLnkUrl ) ;
320                SetAttribute( oLink, 'target', GetE('cmbLnkTarget').value ) ;
321        }
322
323        return true ;
324}
325
326function UpdateImage( e, skipId )
327{
328        e.src = GetE('txtUrl').value ;
329        SetAttribute( e, "_fcksavedurl", GetE('txtUrl').value ) ;
330        SetAttribute( e, "alt"   , GetE('txtAlt').value ) ;
331        SetAttribute( e, "width" , GetE('txtWidth').value ) ;
332        SetAttribute( e, "height", GetE('txtHeight').value ) ;
333        //SetAttribute( e, "vspace", GetE('txtVSpace').value ) ;
334        SetAttribute( e, "vspace", '' ) ; //deletes old
335        //SetAttribute( e, "hspace", GetE('txtHSpace').value ) ;
336        SetAttribute( e, "hspace", '' ) ;//deletes old
337        SetAttribute( e, "border", GetE('txtBorder').value ) ;
338        //SetAttribute( e, "align" , GetE('cmbAlign').value ) ;
339        SetAttribute( e, "align" , '' ) ;//deletes old
340
341        /*
342        left                                    :float left
343        absBottom                               :vertical-align like text-bottom? *if
344        absMiddle                               :vertical-align like middle? *if
345        baseline                                :vertical-align baseline
346        bottom                                  :vertical-align bottom
347        middle                                  :vertical-align middle
348        right                                   :float right
349        textTop                                 :vertical-align text-top *if
350        top                                     :vertical-align top
351        */
352
353
354        oImage.style.cssFloat = '';
355        oImage.style.verticalAlign = '';
356
357        if( GetE('cmbAlign').value == 'left' || GetE('cmbAlign').value == 'right' ) {
358                oImage.style.cssFloat = GetE('cmbAlign').value ;
359        }
360
361        if( GetE('cmbAlign').value == 'baseline' || GetE('cmbAlign').value == 'bottom' || 
362        GetE('cmbAlign').value == 'middle' || GetE('cmbAlign').value == 'top' ) {
363                oImage.style.verticalAlign = GetE('cmbAlign').value ;
364        }
365
366        if( GetE('cmbAlign').value == 'absBottom' ) {
367                oImage.style.verticalAlign = 'text-bottom' ;
368        }
369
370        if( GetE('cmbAlign').value == 'absMiddle' ) {
371                oImage.style.verticalAlign = 'middle' ;
372        }
373
374        if( GetE('cmbAlign').value == 'textTop' ) {
375                oImage.style.verticalAlign = 'text-top' ;
376        }
377       
378        if ( GetE('txtVSpace').value )
379        {
380                oImage.style.marginTop = GetE('txtVSpace').value ;
381                oImage.style.marginBottom = GetE('txtVSpace').value ;
382        }
383
384        if ( GetE('txtHSpace').value )
385        {
386                oImage.style.marginLeft = GetE('txtHSpace').value ;
387                oImage.style.marginRight = GetE('txtHSpace').value ;
388        }
389
390        // Advances Attributes
391
392        if ( ! skipId )
393                SetAttribute( e, 'id', GetE('txtAttId').value ) ;
394
395        SetAttribute( e, 'dir'          , GetE('cmbAttLangDir').value ) ;
396        SetAttribute( e, 'lang'         , GetE('txtAttLangCode').value ) ;
397        SetAttribute( e, 'title'        , GetE('txtAttTitle').value ) ;
398        SetAttribute( e, 'longDesc'     , GetE('txtLongDesc').value ) ;
399
400        if ( oEditor.FCKBrowserInfo.IsIE )
401        {
402                e.className = GetE('txtAttClasses').value ;
403                //e.style.cssText = GetE('txtAttStyle').value ;
404        }
405        else
406        {
407                SetAttribute( e, 'class'        , GetE('txtAttClasses').value ) ;
408                //SetAttribute( e, 'style', GetE('txtAttStyle').value ) ;
409        }
410}
411
412var eImgPreview ;
413var eImgPreviewLink ;
414
415function SetPreviewElements( imageElement, linkElement )
416{
417        eImgPreview = imageElement ;
418        eImgPreviewLink = linkElement ;
419
420        UpdatePreview() ;
421        UpdateOriginal() ;
422
423        bPreviewInitialized = true ;
424}
425
426function UpdatePreview()
427{
428        if ( !eImgPreview || !eImgPreviewLink )
429                return ;
430
431        if ( GetE('txtUrl').value.length == 0 )
432                eImgPreviewLink.style.display = 'none' ;
433        else
434        {
435                UpdateImage( eImgPreview, true ) ;
436
437                if ( GetE('txtLnkUrl').value.Trim().length > 0 )
438                        eImgPreviewLink.href = 'javascript:void(null);' ;
439                else
440                        SetAttribute( eImgPreviewLink, 'href', '' ) ;
441
442                eImgPreviewLink.style.display = '' ;
443        }
444}
445
446var bLockRatio = true ;
447
448function SwitchLock( lockButton )
449{
450        bLockRatio = !bLockRatio ;
451        lockButton.className = bLockRatio ? 'BtnLocked' : 'BtnUnlocked' ;
452        lockButton.title = bLockRatio ? 'Lock sizes' : 'Unlock sizes' ;
453
454        if ( bLockRatio )
455        {
456                if ( GetE('txtWidth').value.length > 0 )
457                        OnSizeChanged( 'Width', GetE('txtWidth').value ) ;
458                else
459                        OnSizeChanged( 'Height', GetE('txtHeight').value ) ;
460        }
461}
462
463// Fired when the width or height input texts change
464function OnSizeChanged( dimension, value )
465{
466        // Verifies if the aspect ration has to be maintained
467        if ( oImageOriginal && bLockRatio )
468        {
469                var e = dimension == 'Width' ? GetE('txtHeight') : GetE('txtWidth') ;
470
471                if ( value.length == 0 || isNaN( value ) )
472                {
473                        e.value = '' ;
474                        return ;
475                }
476
477                if ( dimension == 'Width' )
478                        value = value == 0 ? 0 : Math.round( oImageOriginal.height * ( value  / oImageOriginal.width ) ) ;
479                else
480                        value = value == 0 ? 0 : Math.round( oImageOriginal.width  * ( value / oImageOriginal.height ) ) ;
481
482                if ( !isNaN( value ) )
483                        e.value = value ;
484        }
485
486        UpdatePreview() ;
487}
488
489// Fired when the Reset Size button is clicked
490function ResetSizes()
491{
492        if ( ! oImageOriginal ) return ;
493        if ( oEditor.FCKBrowserInfo.IsGecko && !oImageOriginal.complete )
494        {
495                setTimeout( ResetSizes, 50 ) ;
496                return ;
497        }
498
499        GetE('txtWidth').value  = oImageOriginal.width ;
500        GetE('txtHeight').value = oImageOriginal.height ;
501
502        UpdatePreview() ;
503}
504
505function BrowseServer()
506{
507        OpenServerBrowser(
508                'Image',
509                FCKConfig.ImageBrowserURL,
510                FCKConfig.ImageBrowserWindowWidth,
511                FCKConfig.ImageBrowserWindowHeight ) ;
512}
513
514function LnkBrowseServer()
515{
516        OpenServerBrowser(
517                'Link',
518                FCKConfig.LinkBrowserURL,
519                FCKConfig.LinkBrowserWindowWidth,
520                FCKConfig.LinkBrowserWindowHeight ) ;
521}
522
523function OpenServerBrowser( type, url, width, height )
524{
525        sActualBrowser = type ;
526        OpenFileBrowser( url, width, height ) ;
527}
528
529var sActualBrowser ;
530
531function SetUrl( url, width, height, alt )
532{
533        if ( sActualBrowser == 'Link' )
534        {
535                GetE('txtLnkUrl').value = url ;
536                UpdatePreview() ;
537        }
538        else
539        {
540                GetE('txtUrl').value = url ;
541                GetE('txtWidth').value = width ? width : '' ;
542                GetE('txtHeight').value = height ? height : '' ;
543
544                if ( alt )
545                        GetE('txtAlt').value = alt;
546
547                UpdatePreview() ;
548                UpdateOriginal( true ) ;
549        }
550
551        dialog.SetSelectedTab( 'Info' ) ;
552}
553
554function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
555{
556        // Remove animation
557        window.parent.Throbber.Hide() ;
558        GetE( 'divUpload' ).style.display  = '' ;
559
560        switch ( errorNumber )
561        {
562                case 0 :        // No errors
563                        alert( 'Your file has been successfully uploaded' ) ;
564                        break ;
565                case 1 :        // Custom error
566                        alert( customMsg ) ;
567                        return ;
568                case 101 :      // Custom warning
569                        alert( customMsg ) ;
570                        break ;
571                case 201 :
572                        alert( 'A file with the same name is already available. The uploaded file has been renamed to "' + fileName + '"' ) ;
573                        break ;
574                case 202 :
575                        alert( 'Invalid file type' ) ;
576                        return ;
577                case 203 :
578                        alert( "Security error. You probably don't have enough permissions to upload. Please check your server." ) ;
579                        return ;
580                case 500 :
581                        alert( 'The connector is disabled' ) ;
582                        break ;
583                default :
584                        alert( 'Error on file upload. Error number: ' + errorNumber ) ;
585                        return ;
586        }
587
588        sActualBrowser = '' ;
589        SetUrl( fileUrl ) ;
590        GetE('frmUpload').reset() ;
591}
592
593var oUploadAllowedExtRegex      = new RegExp( FCKConfig.ImageUploadAllowedExtensions, 'i' ) ;
594var oUploadDeniedExtRegex       = new RegExp( FCKConfig.ImageUploadDeniedExtensions, 'i' ) ;
595
596function CheckUpload()
597{
598        var sFile = GetE('txtUploadFile').value ;
599
600        if ( sFile.length == 0 )
601        {
602                alert( 'Please select a file to upload' ) ;
603                return false ;
604        }
605
606        if ( ( FCKConfig.ImageUploadAllowedExtensions.length > 0 && !oUploadAllowedExtRegex.test( sFile ) ) ||
607                ( FCKConfig.ImageUploadDeniedExtensions.length > 0 && oUploadDeniedExtRegex.test( sFile ) ) )
608        {
609                OnUploadCompleted( 202 ) ;
610                return false ;
611        }
612
613        // Show animation
614        window.parent.Throbber.Show( 100 ) ;
615        GetE( 'divUpload' ).style.display  = 'none' ;
616
617        return true ;
618}
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy