source: trunk/phpgwapi/js/ckeditor/_source/plugins/image/dialogs/image.js @ 2862

Revision 2862, 45.1 KB checked in by rodsouza, 14 years ago (diff)

Ticket #663 - Atualizando e centralizando o CKEditor (v. 3.2.1)

Line 
1/*
2Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
3For licensing, see LICENSE.html or http://ckeditor.com/license
4*/
5
6(function()
7{
8        // Load image preview.
9        var IMAGE = 1,
10                LINK = 2,
11                PREVIEW = 4,
12                CLEANUP = 8,
13                regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
14                regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
15                pxLengthRegex = /^\d+px$/;
16
17        var onSizeChange = function()
18        {
19                var value = this.getValue(),    // This = input element.
20                        dialog = this.getDialog(),
21                        aMatch  =  value.match( regexGetSize ); // Check value
22                if ( aMatch )
23                {
24                        if ( aMatch[2] == '%' )                 // % is allowed - > unlock ratio.
25                                switchLockRatio( dialog, false );       // Unlock.
26                        value = aMatch[1];
27                }
28
29                // Only if ratio is locked
30                if ( dialog.lockRatio )
31                {
32                        var oImageOriginal = dialog.originalElement;
33                        if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
34                        {
35                                if ( this.id == 'txtHeight' )
36                                {
37                                        if ( value && value != '0' )
38                                                value = Math.round( oImageOriginal.$.width * ( value  / oImageOriginal.$.height ) );
39                                        if ( !isNaN( value ) )
40                                                dialog.setValueOf( 'info', 'txtWidth', value );
41                                }
42                                else            //this.id = txtWidth.
43                                {
44                                        if ( value && value != '0' )
45                                                value = Math.round( oImageOriginal.$.height * ( value  / oImageOriginal.$.width ) );
46                                        if ( !isNaN( value ) )
47                                                dialog.setValueOf( 'info', 'txtHeight', value );
48                                }
49                        }
50                }
51                updatePreview( dialog );
52        };
53
54        var updatePreview = function( dialog )
55        {
56                //Don't load before onShow.
57                if ( !dialog.originalElement || !dialog.preview )
58                        return 1;
59
60                // Read attributes and update imagePreview;
61                dialog.commitContent( PREVIEW, dialog.preview );
62                return 0;
63        };
64
65        // Custom commit dialog logic, where we're intended to give inline style
66        // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
67        // by other fields.
68        function commitContent()
69        {
70                var args = arguments;
71                var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );
72                inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );
73
74                this.foreach( function( widget )
75                {
76                        if ( widget.commit &&  widget.id != 'txtdlgGenStyle' )
77                                widget.commit.apply( widget, args );
78                });
79        }
80
81        // Avoid recursions.
82        var incommit;
83
84        // Synchronous field values to other impacted fields is required, e.g. border
85        // size change should alter inline-style text as well.
86        function commitInternally( targetFields )
87        {
88                if ( incommit )
89                        return;
90
91                incommit = 1;
92
93                var dialog = this.getDialog(),
94                        element = dialog.imageElement;
95                if ( element )
96                {
97                        // Commit this field and broadcast to target fields.
98                        this.commit( IMAGE, element );
99
100                        targetFields = [].concat( targetFields );
101                        var length = targetFields.length,
102                                field;
103                        for ( var i = 0; i < length; i++ )
104                        {
105                                field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );
106                                // May cause recursion.
107                                field && field.setup( IMAGE, element );
108                        }
109                }
110
111                incommit = 0;
112        }
113
114        var switchLockRatio = function( dialog, value )
115        {
116                var oImageOriginal = dialog.originalElement,
117                        ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
118
119                if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
120                {
121                        if ( value == 'check' )                 // Check image ratio and original image ratio.
122                        {
123                                var width = dialog.getValueOf( 'info', 'txtWidth' ),
124                                        height = dialog.getValueOf( 'info', 'txtHeight' ),
125                                        originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
126                                        thisRatio = width * 1000 / height;
127                                dialog.lockRatio  = false;              // Default: unlock ratio
128
129                                if ( !width && !height )
130                                        dialog.lockRatio = true;
131                                else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
132                                {
133                                        if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
134                                                dialog.lockRatio = true;
135                                }
136                        }
137                        else if ( value != undefined )
138                                dialog.lockRatio = value;
139                        else
140                                dialog.lockRatio = !dialog.lockRatio;
141                }
142                else if ( value != 'check' )            // I can't lock ratio if ratio is unknown.
143                        dialog.lockRatio = false;
144
145                if ( dialog.lockRatio )
146                        ratioButton.removeClass( 'cke_btn_unlocked' );
147                else
148                        ratioButton.addClass( 'cke_btn_unlocked' );
149
150                var lang = dialog._.editor.lang.image,
151                        label =  lang[  dialog.lockRatio ? 'unlockRatio' : 'lockRatio' ];
152
153                ratioButton.setAttribute( 'title', label );
154                ratioButton.getFirst().setText( label );
155
156                return dialog.lockRatio;
157        };
158
159        var resetSize = function( dialog )
160        {
161                var oImageOriginal = dialog.originalElement;
162                if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
163                {
164                        dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
165                        dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
166                }
167                updatePreview( dialog );
168        };
169
170        var setupDimension = function( type, element )
171        {
172                if ( type != IMAGE )
173                        return;
174
175                function checkDimension( size, defaultValue )
176                {
177                        var aMatch  =  size.match( regexGetSize );
178                        if ( aMatch )
179                        {
180                                if ( aMatch[2] == '%' )                         // % is allowed.
181                                {
182                                        aMatch[1] += '%';
183                                        switchLockRatio( dialog, false );       // Unlock ratio
184                                }
185                                return aMatch[1];
186                        }
187                        return defaultValue;
188                }
189
190                var dialog = this.getDialog(),
191                        value = '',
192                        dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
193                        size = element.getAttribute( dimension );
194
195                if ( size )
196                        value = checkDimension( size, value );
197                value = checkDimension( element.getStyle( dimension ), value );
198
199                this.setValue( value );
200        };
201
202        var imageDialog = function( editor, dialogType )
203        {
204                var previewPreloader;
205
206                var onImgLoadEvent = function()
207                {
208                        // Image is ready.
209                        var original = this.originalElement;
210                        original.setCustomData( 'isReady', 'true' );
211                        original.removeListener( 'load', onImgLoadEvent );
212                        original.removeListener( 'error', onImgLoadErrorEvent );
213                        original.removeListener( 'abort', onImgLoadErrorEvent );
214
215                        // Hide loader
216                        CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
217
218                        // New image -> new domensions
219                        if ( !this.dontResetSize )
220                                resetSize( this );
221
222                        if ( this.firstLoad )
223                                CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this );
224
225                        this.firstLoad = false;
226                        this.dontResetSize = false;
227                };
228
229                var onImgLoadErrorEvent = function()
230                {
231                        // Error. Image is not loaded.
232                        var original = this.originalElement;
233                        original.removeListener( 'load', onImgLoadEvent );
234                        original.removeListener( 'error', onImgLoadErrorEvent );
235                        original.removeListener( 'abort', onImgLoadErrorEvent );
236
237                        // Set Error image.
238                        var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
239
240                        if ( this.preview )
241                                this.preview.setAttribute( 'src', noimage );
242
243                        // Hide loader
244                        CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
245                        switchLockRatio( this, false ); // Unlock.
246                };
247                return {
248                        title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,
249                        minWidth : 420,
250                        minHeight : 310,
251                        onShow : function()
252                        {
253                                this.imageElement = false;
254                                this.linkElement = false;
255
256                                // Default: create a new element.
257                                this.imageEditMode = false;
258                                this.linkEditMode = false;
259
260                                this.lockRatio = true;
261                                this.dontResetSize = false;
262                                this.firstLoad = true;
263                                this.addLink = false;
264
265                                var editor = this.getParentEditor(),
266                                        sel = this.getParentEditor().getSelection(),
267                                        element = sel.getSelectedElement(),
268                                        link = element && element.getAscendant( 'a' );
269
270                                //Hide loader.
271                                CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
272                                // Create the preview before setup the dialog contents.
273                                previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );
274                                this.preview = CKEDITOR.document.getById( 'previewImage' );
275
276                                // Copy of the image
277                                this.originalElement = editor.document.createElement( 'img' );
278                                this.originalElement.setAttribute( 'alt', '' );
279                                this.originalElement.setCustomData( 'isReady', 'false' );
280
281                                if ( link )
282                                {
283                                        this.linkElement = link;
284                                        this.linkEditMode = true;
285
286                                        // Look for Image element.
287                                        var linkChildren = link.getChildren();
288                                        if ( linkChildren.count() == 1 )                        // 1 child.
289                                        {
290                                                var childTagName = linkChildren.getItem( 0 ).getName();
291                                                if ( childTagName == 'img' || childTagName == 'input' )
292                                                {
293                                                        this.imageElement = linkChildren.getItem( 0 );
294                                                        if ( this.imageElement.getName() == 'img' )
295                                                                this.imageEditMode = 'img';
296                                                        else if ( this.imageElement.getName() == 'input' )
297                                                                this.imageEditMode = 'input';
298                                                }
299                                        }
300                                        // Fill out all fields.
301                                        if ( dialogType == 'image' )
302                                                this.setupContent( LINK, link );
303                                }
304
305                                if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' )
306                                        || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' )
307                                {
308                                        this.imageEditMode = element.getName();
309                                        this.imageElement = element;
310                                }
311
312                                if ( this.imageEditMode )
313                                {
314                                        // Use the original element as a buffer from  since we don't want
315                                        // temporary changes to be committed, e.g. if the dialog is canceled.
316                                        this.cleanImageElement = this.imageElement;
317                                        this.imageElement = this.cleanImageElement.clone( true, true );
318
319                                        // Fill out all fields.
320                                        this.setupContent( IMAGE, this.imageElement );
321
322                                        // Refresh LockRatio button
323                                        switchLockRatio ( this, true );
324                                }
325                                else
326                                        this.imageElement =  editor.document.createElement( 'img' );
327
328                                // Dont show preview if no URL given.
329                                if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
330                                {
331                                        this.preview.removeAttribute( 'src' );
332                                        this.preview.setStyle( 'display', 'none' );
333                                }
334                        },
335                        onOk : function()
336                        {
337                                // Edit existing Image.
338                                if ( this.imageEditMode )
339                                {
340                                        var imgTagName = this.imageEditMode;
341
342                                        // Image dialog and Input element.
343                                        if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
344                                        {
345                                                // Replace INPUT-> IMG
346                                                imgTagName = 'img';
347                                                this.imageElement = editor.document.createElement( 'img' );
348                                                this.imageElement.setAttribute( 'alt', '' );
349                                                editor.insertElement( this.imageElement );
350                                        }
351                                        // ImageButton dialog and Image element.
352                                        else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
353                                        {
354                                                // Replace IMG -> INPUT
355                                                imgTagName = 'input';
356                                                this.imageElement = editor.document.createElement( 'input' );
357                                                this.imageElement.setAttributes(
358                                                        {
359                                                                type : 'image',
360                                                                alt : ''
361                                                        }
362                                                );
363                                                editor.insertElement( this.imageElement );
364                                        }
365                                        else
366                                        {
367                                                // Restore the original element before all commits.
368                                                this.imageElement = this.cleanImageElement;
369                                                delete this.cleanImageElement;
370                                        }
371                                }
372                                else    // Create a new image.
373                                {
374                                        // Image dialog -> create IMG element.
375                                        if ( dialogType == 'image' )
376                                                this.imageElement = editor.document.createElement( 'img' );
377                                        else
378                                        {
379                                                this.imageElement = editor.document.createElement( 'input' );
380                                                this.imageElement.setAttribute ( 'type' ,'image' );
381                                        }
382                                        this.imageElement.setAttribute( 'alt', '' );
383                                }
384
385                                // Create a new link.
386                                if ( !this.linkEditMode )
387                                        this.linkElement = editor.document.createElement( 'a' );
388
389                                // Set attributes.
390                                this.commitContent( IMAGE, this.imageElement );
391                                this.commitContent( LINK, this.linkElement );
392
393                                // Remove empty style attribute.
394                                if ( !this.imageElement.getAttribute( 'style' ) )
395                                        this.imageElement.removeAttribute( 'style' );
396
397                                // Insert a new Image.
398                                if ( !this.imageEditMode )
399                                {
400                                        if ( this.addLink )
401                                        {
402                                                //Insert a new Link.
403                                                if ( !this.linkEditMode )
404                                                {
405                                                        editor.insertElement(this.linkElement);
406                                                        this.linkElement.append(this.imageElement, false);
407                                                }
408                                                else     //Link already exists, image not.
409                                                        editor.insertElement(this.imageElement );
410                                        }
411                                        else
412                                                editor.insertElement( this.imageElement );
413                                }
414                                else            // Image already exists.
415                                {
416                                        //Add a new link element.
417                                        if ( !this.linkEditMode && this.addLink )
418                                        {
419                                                editor.insertElement( this.linkElement );
420                                                this.imageElement.appendTo( this.linkElement );
421                                        }
422                                        //Remove Link, Image exists.
423                                        else if ( this.linkEditMode && !this.addLink )
424                                        {
425                                                editor.getSelection().selectElement( this.linkElement );
426                                                editor.insertElement( this.imageElement );
427                                        }
428                                }
429                        },
430                        onLoad : function()
431                        {
432                                if ( dialogType != 'image' )
433                                        this.hidePage( 'Link' );                //Hide Link tab.
434                                var doc = this._.element.getDocument();
435                                this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
436                                this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
437
438                                this.commitContent = commitContent;
439                        },
440                        onHide : function()
441                        {
442                                if ( this.preview )
443                                        this.commitContent( CLEANUP, this.preview );
444
445                                if ( this.originalElement )
446                                {
447                                        this.originalElement.removeListener( 'load', onImgLoadEvent );
448                                        this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
449                                        this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
450                                        this.originalElement.remove();
451                                        this.originalElement = false;           // Dialog is closed.
452                                }
453
454                                delete this.imageElement;
455                        },
456                        contents : [
457                                {
458                                        id : 'info',
459                                        label : editor.lang.image.infoTab,
460                                        accessKey : 'I',
461                                        elements :
462                                        [
463                                                {
464                                                        type : 'vbox',
465                                                        padding : 0,
466                                                        children :
467                                                        [
468                                                                {
469                                                                        type : 'hbox',
470                                                                        widths : [ '280px', '110px' ],
471                                                                        align : 'right',
472                                                                        children :
473                                                                        [
474                                                                                {
475                                                                                        id : 'txtUrl',
476                                                                                        type : 'text',
477                                                                                        label : editor.lang.common.url,
478                                                                                        required: true,
479                                                                                        onChange : function()
480                                                                                        {
481                                                                                                var dialog = this.getDialog(),
482                                                                                                        newUrl = this.getValue();
483
484                                                                                                //Update original image
485                                                                                                if ( newUrl.length > 0 )        //Prevent from load before onShow
486                                                                                                {
487                                                                                                        dialog = this.getDialog();
488                                                                                                        var original = dialog.originalElement;
489
490                                                                                                        dialog.preview.removeStyle( 'display' );
491
492                                                                                                        original.setCustomData( 'isReady', 'false' );
493                                                                                                        // Show loader
494                                                                                                        var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
495                                                                                                        if ( loader )
496                                                                                                                loader.setStyle( 'display', '' );
497
498                                                                                                        original.on( 'load', onImgLoadEvent, dialog );
499                                                                                                        original.on( 'error', onImgLoadErrorEvent, dialog );
500                                                                                                        original.on( 'abort', onImgLoadErrorEvent, dialog );
501                                                                                                        original.setAttribute( 'src', newUrl );
502
503                                                                                                        // Query the preloader to figure out the url impacted by based href.
504                                                                                                        previewPreloader.setAttribute( 'src', newUrl );
505                                                                                                        dialog.preview.setAttribute( 'src', previewPreloader.$.src );
506                                                                                                        updatePreview( dialog );
507                                                                                                }
508                                                                                                // Dont show preview if no URL given.
509                                                                                                else if ( dialog.preview )
510                                                                                                {
511                                                                                                        dialog.preview.removeAttribute( 'src' );
512                                                                                                        dialog.preview.setStyle( 'display', 'none' );
513                                                                                                }
514                                                                                        },
515                                                                                        setup : function( type, element )
516                                                                                        {
517                                                                                                if ( type == IMAGE )
518                                                                                                {
519                                                                                                        var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
520                                                                                                        var field = this;
521
522                                                                                                        this.getDialog().dontResetSize = true;
523
524                                                                                                        field.setValue( url );          // And call this.onChange()
525                                                                                                        // Manually set the initial value.(#4191)
526                                                                                                        field.setInitValue();
527                                                                                                        field.focus();
528                                                                                                }
529                                                                                        },
530                                                                                        commit : function( type, element )
531                                                                                        {
532                                                                                                if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
533                                                                                                {
534                                                                                                        element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
535                                                                                                        element.setAttribute( 'src', decodeURI( this.getValue() ) );
536                                                                                                }
537                                                                                                else if ( type == CLEANUP )
538                                                                                                {
539                                                                                                        element.setAttribute( 'src', '' );      // If removeAttribute doesn't work.
540                                                                                                        element.removeAttribute( 'src' );
541                                                                                                }
542                                                                                        },
543                                                                                        validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
544                                                                                },
545                                                                                {
546                                                                                        type : 'button',
547                                                                                        id : 'browse',
548                                                                                        // v-align with the 'txtUrl' field.
549                                                                                        // TODO: We need something better than a fixed size here.
550                                                                                        style : 'display:inline-block;margin-top:10px;',
551                                                                                        align : 'center',
552                                                                                        label : editor.lang.common.browseServer,
553                                                                                        hidden : true,
554                                                                                        filebrowser : 'info:txtUrl'
555                                                                                }
556                                                                        ]
557                                                                }
558                                                        ]
559                                                },
560                                                {
561                                                        id : 'txtAlt',
562                                                        type : 'text',
563                                                        label : editor.lang.image.alt,
564                                                        accessKey : 'A',
565                                                        'default' : '',
566                                                        onChange : function()
567                                                        {
568                                                                updatePreview( this.getDialog() );
569                                                        },
570                                                        setup : function( type, element )
571                                                        {
572                                                                if ( type == IMAGE )
573                                                                        this.setValue( element.getAttribute( 'alt' ) );
574                                                        },
575                                                        commit : function( type, element )
576                                                        {
577                                                                if ( type == IMAGE )
578                                                                {
579                                                                        if ( this.getValue() || this.isChanged() )
580                                                                                element.setAttribute( 'alt', this.getValue() );
581                                                                }
582                                                                else if ( type == PREVIEW )
583                                                                {
584                                                                        element.setAttribute( 'alt', this.getValue() );
585                                                                }
586                                                                else if ( type == CLEANUP )
587                                                                {
588                                                                        element.removeAttribute( 'alt' );
589                                                                }
590                                                        }
591                                                },
592                                                {
593                                                        type : 'hbox',
594                                                        widths : [ '140px', '240px' ],
595                                                        children :
596                                                        [
597                                                                {
598                                                                        type : 'vbox',
599                                                                        padding : 10,
600                                                                        children :
601                                                                        [
602                                                                                {
603                                                                                        type : 'hbox',
604                                                                                        widths : [ '70%', '30%' ],
605                                                                                        children :
606                                                                                        [
607                                                                                                {
608                                                                                                        type : 'vbox',
609                                                                                                        padding : 1,
610                                                                                                        children :
611                                                                                                        [
612                                                                                                                {
613                                                                                                                        type : 'text',
614                                                                                                                        width: '40px',
615                                                                                                                        id : 'txtWidth',
616                                                                                                                        labelLayout : 'horizontal',
617                                                                                                                        label : editor.lang.image.width,
618                                                                                                                        onKeyUp : onSizeChange,
619                                                                                                                        onChange : function()
620                                                                                                                        {
621                                                                                                                                commitInternally.call( this, 'advanced:txtdlgGenStyle' );
622                                                                                                                        },
623                                                                                                                        validate : function()
624                                                                                                                        {
625                                                                                                                                var aMatch  =  this.getValue().match( regexGetSizeOrEmpty );
626                                                                                                                                if ( !aMatch )
627                                                                                                                                        alert( editor.lang.image.validateWidth );
628                                                                                                                                return !!aMatch;
629                                                                                                                        },
630                                                                                                                        setup : setupDimension,
631                                                                                                                        commit : function( type, element, internalCommit )
632                                                                                                                        {
633                                                                                                                                var value = this.getValue();
634                                                                                                                                if ( type == IMAGE )
635                                                                                                                                {
636                                                                                                                                        if ( value )
637                                                                                                                                                element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
638                                                                                                                                        else if ( !value && this.isChanged( ) )
639                                                                                                                                                element.removeStyle( 'width' );
640
641                                                                                                                                        !internalCommit && element.removeAttribute( 'width' );
642                                                                                                                                }
643                                                                                                                                else if ( type == PREVIEW )
644                                                                                                                                {
645                                                                                                                                        var aMatch = value.match( regexGetSize );
646                                                                                                                                        if ( !aMatch )
647                                                                                                                                        {
648                                                                                                                                                var oImageOriginal = this.getDialog().originalElement;
649                                                                                                                                                if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
650                                                                                                                                                        element.setStyle( 'width',  oImageOriginal.$.width + 'px');
651                                                                                                                                        }
652                                                                                                                                        else
653                                                                                                                                                element.setStyle( 'width', value + 'px');
654                                                                                                                                }
655                                                                                                                                else if ( type == CLEANUP )
656                                                                                                                                {
657                                                                                                                                        element.removeAttribute( 'width' );
658                                                                                                                                        element.removeStyle( 'width' );
659                                                                                                                                }
660                                                                                                                        }
661                                                                                                                },
662                                                                                                                {
663                                                                                                                        type : 'text',
664                                                                                                                        id : 'txtHeight',
665                                                                                                                        width: '40px',
666                                                                                                                        labelLayout : 'horizontal',
667                                                                                                                        label : editor.lang.image.height,
668                                                                                                                        onKeyUp : onSizeChange,
669                                                                                                                        onChange : function()
670                                                                                                                        {
671                                                                                                                                commitInternally.call( this, 'advanced:txtdlgGenStyle' );
672                                                                                                                        },
673                                                                                                                        validate : function()
674                                                                                                                        {
675                                                                                                                                var aMatch = this.getValue().match( regexGetSizeOrEmpty );
676                                                                                                                                if ( !aMatch )
677                                                                                                                                        alert( editor.lang.image.validateHeight );
678                                                                                                                                return !!aMatch;
679                                                                                                                        },
680                                                                                                                        setup : setupDimension,
681                                                                                                                        commit : function( type, element, internalCommit )
682                                                                                                                        {
683                                                                                                                                var value = this.getValue();
684                                                                                                                                if ( type == IMAGE )
685                                                                                                                                {
686                                                                                                                                        if ( value )
687                                                                                                                                                element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
688                                                                                                                                        else if ( !value && this.isChanged( ) )
689                                                                                                                                                element.removeStyle( 'height' );
690
691                                                                                                                                        if ( !internalCommit && type == IMAGE )
692                                                                                                                                                element.removeAttribute( 'height' );
693                                                                                                                                }
694                                                                                                                                else if ( type == PREVIEW )
695                                                                                                                                {
696                                                                                                                                        var aMatch = value.match( regexGetSize );
697                                                                                                                                        if ( !aMatch )
698                                                                                                                                        {
699                                                                                                                                                var oImageOriginal = this.getDialog().originalElement;
700                                                                                                                                                if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
701                                                                                                                                                        element.setStyle( 'height', oImageOriginal.$.height + 'px' );
702                                                                                                                                        }
703                                                                                                                                        else
704                                                                                                                                                element.setStyle( 'height', value + 'px' );
705                                                                                                                                }
706                                                                                                                                else if ( type == CLEANUP )
707                                                                                                                                {
708                                                                                                                                        element.removeAttribute( 'height' );
709                                                                                                                                        element.removeStyle( 'height' );
710                                                                                                                                }
711                                                                                                                        }
712                                                                                                                }
713                                                                                                        ]
714                                                                                                },
715                                                                                                {
716                                                                                                        type : 'html',
717                                                                                                        style : 'margin-top:10px;width:40px;height:40px;',
718                                                                                                        onLoad : function()
719                                                                                                        {
720                                                                                                                // Activate Reset button
721                                                                                                                var     resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
722                                                                                                                        ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
723                                                                                                                if ( resetButton )
724                                                                                                                {
725                                                                                                                        resetButton.on( 'click', function(evt)
726                                                                                                                                {
727                                                                                                                                        resetSize( this );
728                                                                                                                                        evt.data.preventDefault();
729                                                                                                                                }, this.getDialog() );
730                                                                                                                        resetButton.on( 'mouseover', function()
731                                                                                                                                {
732                                                                                                                                        this.addClass( 'cke_btn_over' );
733                                                                                                                                }, resetButton );
734                                                                                                                        resetButton.on( 'mouseout', function()
735                                                                                                                                {
736                                                                                                                                        this.removeClass( 'cke_btn_over' );
737                                                                                                                                }, resetButton );
738                                                                                                                }
739                                                                                                                // Activate (Un)LockRatio button
740                                                                                                                if ( ratioButton )
741                                                                                                                {
742                                                                                                                        ratioButton.on( 'click', function(evt)
743                                                                                                                                {
744                                                                                                                                        var locked = switchLockRatio( this ),
745                                                                                                                                                oImageOriginal = this.originalElement,
746                                                                                                                                                width = this.getValueOf( 'info', 'txtWidth' );
747
748                                                                                                                                        if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
749                                                                                                                                        {
750                                                                                                                                                var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
751                                                                                                                                                if ( !isNaN( height ) )
752                                                                                                                                                {
753                                                                                                                                                        this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
754                                                                                                                                                        updatePreview( this );
755                                                                                                                                                }
756                                                                                                                                        }
757                                                                                                                                        evt.data.preventDefault();
758                                                                                                                                }, this.getDialog() );
759                                                                                                                        ratioButton.on( 'mouseover', function()
760                                                                                                                                {
761                                                                                                                                        this.addClass( 'cke_btn_over' );
762                                                                                                                                }, ratioButton );
763                                                                                                                        ratioButton.on( 'mouseout', function()
764                                                                                                                                {
765                                                                                                                                        this.removeClass( 'cke_btn_over' );
766                                                                                                                                }, ratioButton );
767                                                                                                                }
768                                                                                                        },
769                                                                                                        html : '<div>'+
770                                                                                                                '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.unlockRatio +
771                                                                                                                '" class="cke_btn_locked" id="btnLockSizes" role="button"><span class="cke_label">' + editor.lang.image.unlockRatio + '</span></a>' +
772                                                                                                                '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
773                                                                                                                '" class="cke_btn_reset" id="btnResetSize" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+
774                                                                                                                '</div>'
775                                                                                                }
776                                                                                        ]
777                                                                                },
778                                                                                {
779                                                                                        type : 'vbox',
780                                                                                        padding : 1,
781                                                                                        children :
782                                                                                        [
783                                                                                                {
784                                                                                                        type : 'text',
785                                                                                                        id : 'txtBorder',
786                                                                                                        width: '60px',
787                                                                                                        labelLayout : 'horizontal',
788                                                                                                        label : editor.lang.image.border,
789                                                                                                        'default' : '',
790                                                                                                        onKeyUp : function()
791                                                                                                        {
792                                                                                                                updatePreview( this.getDialog() );
793                                                                                                        },
794                                                                                                        onChange : function()
795                                                                                                        {
796                                                                                                                commitInternally.call( this, 'advanced:txtdlgGenStyle' );
797                                                                                                        },
798                                                                                                        validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),
799                                                                                                        setup : function( type, element )
800                                                                                                        {
801                                                                                                                if ( type == IMAGE )
802                                                                                                                {
803                                                                                                                        var value,
804                                                                                                                                borderStyle = element.getStyle( 'border-width' );
805                                                                                                                        borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );
806                                                                                                                        value = borderStyle && parseInt( borderStyle[ 1 ], 10 );
807                                                                                                                        isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );
808                                                                                                                        this.setValue( value );
809                                                                                                                }
810                                                                                                        },
811                                                                                                        commit : function( type, element, internalCommit )
812                                                                                                        {
813                                                                                                                var value = parseInt( this.getValue(), 10 );
814                                                                                                                if ( type == IMAGE || type == PREVIEW )
815                                                                                                                {
816                                                                                                                        if ( !isNaN( value ) )
817                                                                                                                        {
818                                                                                                                                element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );
819                                                                                                                                element.setStyle( 'border-style', 'solid' );
820                                                                                                                        }
821                                                                                                                        else if ( !value && this.isChanged() )
822                                                                                                                        {
823                                                                                                                                element.removeStyle( 'border-width' );
824                                                                                                                                element.removeStyle( 'border-style' );
825                                                                                                                                element.removeStyle( 'border-color' );
826                                                                                                                        }
827
828                                                                                                                        if ( !internalCommit && type == IMAGE )
829                                                                                                                                element.removeAttribute( 'border' );
830                                                                                                                }
831                                                                                                                else if ( type == CLEANUP )
832                                                                                                                {
833                                                                                                                        element.removeAttribute( 'border' );
834                                                                                                                        element.removeStyle( 'border-width' );
835                                                                                                                        element.removeStyle( 'border-style' );
836                                                                                                                        element.removeStyle( 'border-color' );
837                                                                                                                }
838                                                                                                        }
839                                                                                                },
840                                                                                                {
841                                                                                                        type : 'text',
842                                                                                                        id : 'txtHSpace',
843                                                                                                        width: '60px',
844                                                                                                        labelLayout : 'horizontal',
845                                                                                                        label : editor.lang.image.hSpace,
846                                                                                                        'default' : '',
847                                                                                                        onKeyUp : function()
848                                                                                                        {
849                                                                                                                updatePreview( this.getDialog() );
850                                                                                                        },
851                                                                                                        onChange : function()
852                                                                                                        {
853                                                                                                                commitInternally.call( this, 'advanced:txtdlgGenStyle' );
854                                                                                                        },
855                                                                                                        validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),
856                                                                                                        setup : function( type, element )
857                                                                                                        {
858                                                                                                                if ( type == IMAGE )
859                                                                                                                {
860                                                                                                                        var value,
861                                                                                                                                marginLeftPx,
862                                                                                                                                marginRightPx,
863                                                                                                                                marginLeftStyle = element.getStyle( 'margin-left' ),
864                                                                                                                                marginRightStyle = element.getStyle( 'margin-right' );
865
866                                                                                                                        marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );
867                                                                                                                        marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );
868                                                                                                                        marginLeftPx = parseInt( marginLeftStyle, 10 );
869                                                                                                                        marginRightPx = parseInt( marginRightStyle, 10 );
870
871                                                                                                                        value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
872                                                                                                                        isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );
873
874                                                                                                                        this.setValue( value );
875                                                                                                                }
876                                                                                                        },
877                                                                                                        commit : function( type, element, internalCommit )
878                                                                                                        {
879                                                                                                                var value = parseInt( this.getValue(), 10 );
880                                                                                                                if ( type == IMAGE || type == PREVIEW )
881                                                                                                                {
882                                                                                                                        if ( !isNaN( value ) )
883                                                                                                                        {
884                                                                                                                                element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );
885                                                                                                                                element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );
886                                                                                                                        }
887                                                                                                                        else if ( !value && this.isChanged( ) )
888                                                                                                                        {
889                                                                                                                                element.removeStyle( 'margin-left' );
890                                                                                                                                element.removeStyle( 'margin-right' );
891                                                                                                                        }
892
893                                                                                                                        if ( !internalCommit && type == IMAGE )
894                                                                                                                                element.removeAttribute( 'hspace' );
895                                                                                                                }
896                                                                                                                else if ( type == CLEANUP )
897                                                                                                                {
898                                                                                                                        element.removeAttribute( 'hspace' );
899                                                                                                                        element.removeStyle( 'margin-left' );
900                                                                                                                        element.removeStyle( 'margin-right' );
901                                                                                                                }
902                                                                                                        }
903                                                                                                },
904                                                                                                {
905                                                                                                        type : 'text',
906                                                                                                        id : 'txtVSpace',
907                                                                                                        width : '60px',
908                                                                                                        labelLayout : 'horizontal',
909                                                                                                        label : editor.lang.image.vSpace,
910                                                                                                        'default' : '',
911                                                                                                        onKeyUp : function()
912                                                                                                        {
913                                                                                                                updatePreview( this.getDialog() );
914                                                                                                        },
915                                                                                                        onChange : function()
916                                                                                                        {
917                                                                                                                commitInternally.call( this, 'advanced:txtdlgGenStyle' );
918                                                                                                        },
919                                                                                                        validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),
920                                                                                                        setup : function( type, element )
921                                                                                                        {
922                                                                                                                if ( type == IMAGE )
923                                                                                                                {
924                                                                                                                        var value,
925                                                                                                                                marginTopPx,
926                                                                                                                                marginBottomPx,
927                                                                                                                                marginTopStyle = element.getStyle( 'margin-top' ),
928                                                                                                                                marginBottomStyle = element.getStyle( 'margin-bottom' );
929
930                                                                                                                        marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );
931                                                                                                                        marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );
932                                                                                                                        marginTopPx = parseInt( marginTopStyle, 10 );
933                                                                                                                        marginBottomPx = parseInt( marginBottomStyle, 10 );
934
935                                                                                                                        value = ( marginTopPx == marginBottomPx ) && marginTopPx;
936                                                                                                                        isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );
937                                                                                                                        this.setValue( value );
938                                                                                                                }
939                                                                                                        },
940                                                                                                        commit : function( type, element, internalCommit )
941                                                                                                        {
942                                                                                                                var value = parseInt( this.getValue(), 10 );
943                                                                                                                if ( type == IMAGE || type == PREVIEW )
944                                                                                                                {
945                                                                                                                        if ( !isNaN( value ) )
946                                                                                                                        {
947                                                                                                                                element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );
948                                                                                                                                element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );
949                                                                                                                        }
950                                                                                                                        else if ( !value && this.isChanged( ) )
951                                                                                                                        {
952                                                                                                                                element.removeStyle( 'margin-top' );
953                                                                                                                                element.removeStyle( 'margin-bottom' );
954                                                                                                                        }
955
956                                                                                                                        if ( !internalCommit && type == IMAGE )
957                                                                                                                                element.removeAttribute( 'vspace' );
958                                                                                                                }
959                                                                                                                else if ( type == CLEANUP )
960                                                                                                                {
961                                                                                                                        element.removeAttribute( 'vspace' );
962                                                                                                                        element.removeStyle( 'margin-top' );
963                                                                                                                        element.removeStyle( 'margin-bottom' );
964                                                                                                                }
965                                                                                                        }
966                                                                                                },
967                                                                                                {
968                                                                                                        id : 'cmbAlign',
969                                                                                                        type : 'select',
970                                                                                                        labelLayout : 'horizontal',
971                                                                                                        widths : [ '35%','65%' ],
972                                                                                                        style : 'width:90px',
973                                                                                                        label : editor.lang.image.align,
974                                                                                                        'default' : '',
975                                                                                                        items :
976                                                                                                        [
977                                                                                                                [ editor.lang.common.notSet , ''],
978                                                                                                                [ editor.lang.image.alignLeft , 'left'],
979                                                                                                                [ editor.lang.image.alignRight , 'right']
980                                                                                                                // Backward compatible with v2 on setup when specified as attribute value,
981                                                                                                                // while these values are no more available as select options.
982                                                                                                                //      [ editor.lang.image.alignAbsBottom , 'absBottom'],
983                                                                                                                //      [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
984                                                                                                                //  [ editor.lang.image.alignBaseline , 'baseline'],
985                                                                                                                //  [ editor.lang.image.alignTextTop , 'text-top'],
986                                                                                                                //  [ editor.lang.image.alignBottom , 'bottom'],
987                                                                                                                //  [ editor.lang.image.alignMiddle , 'middle'],
988                                                                                                                //  [ editor.lang.image.alignTop , 'top']
989                                                                                                        ],
990                                                                                                        onChange : function()
991                                                                                                        {
992                                                                                                                updatePreview( this.getDialog() );
993                                                                                                                commitInternally.call( this, 'advanced:txtdlgGenStyle' );
994                                                                                                        },
995                                                                                                        setup : function( type, element )
996                                                                                                        {
997                                                                                                                if ( type == IMAGE )
998                                                                                                                {
999                                                                                                                        var value = element.getStyle( 'float' );
1000                                                                                                                        switch( value )
1001                                                                                                                        {
1002                                                                                                                                // Ignore those unrelated values.
1003                                                                                                                                case 'inherit':
1004                                                                                                                                case 'none':
1005                                                                                                                                        value = '';
1006                                                                                                                        }
1007
1008                                                                                                                        !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );
1009                                                                                                                        this.setValue( value );
1010                                                                                                                }
1011                                                                                                        },
1012                                                                                                        commit : function( type, element, internalCommit )
1013                                                                                                        {
1014                                                                                                                var value = this.getValue();
1015                                                                                                                if ( type == IMAGE || type == PREVIEW )
1016                                                                                                                {
1017                                                                                                                        if ( value )
1018                                                                                                                                element.setStyle( 'float', value );
1019                                                                                                                        else
1020                                                                                                                                element.removeStyle( 'float' );
1021
1022                                                                                                                        if ( !internalCommit && type == IMAGE )
1023                                                                                                                        {
1024                                                                                                                                value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();
1025                                                                                                                                switch( value )
1026                                                                                                                                {
1027                                                                                                                                        // we should remove it only if it matches "left" or "right",
1028                                                                                                                                        // otherwise leave it intact.
1029                                                                                                                                        case 'left':
1030                                                                                                                                        case 'right':
1031                                                                                                                                                element.removeAttribute( 'align' );
1032                                                                                                                                }
1033                                                                                                                        }
1034                                                                                                                }
1035                                                                                                                else if ( type == CLEANUP )
1036                                                                                                                        element.removeStyle( 'float' );
1037
1038                                                                                                        }
1039                                                                                                }
1040                                                                                        ]
1041                                                                                }
1042                                                                        ]
1043                                                                },
1044                                                                {
1045                                                                        type : 'vbox',
1046                                                                        height : '250px',
1047                                                                        children :
1048                                                                        [
1049                                                                                {
1050                                                                                        type : 'html',
1051                                                                                        style : 'width:95%;',
1052                                                                                        html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>'+
1053                                                                                        '<div id="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>'+
1054                                                                                        '<div id="ImagePreviewBox"><table><tr><td>'+
1055                                                                                        '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
1056                                                                                        '<img id="previewImage" alt="" /></a>' +
1057                                                                                        ( editor.config.image_previewText ||
1058                                                                                        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
1059                                                                                        'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
1060                                                                                        'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) +
1061                                                                                        '</td></tr></table></div></div>'
1062                                                                                }
1063                                                                        ]
1064                                                                }
1065                                                        ]
1066                                                }
1067                                        ]
1068                                },
1069                                {
1070                                        id : 'Link',
1071                                        label : editor.lang.link.title,
1072                                        padding : 0,
1073                                        elements :
1074                                        [
1075                                                {
1076                                                        id : 'txtUrl',
1077                                                        type : 'text',
1078                                                        label : editor.lang.common.url,
1079                                                        style : 'width: 100%',
1080                                                        'default' : '',
1081                                                        setup : function( type, element )
1082                                                        {
1083                                                                if ( type == LINK )
1084                                                                {
1085                                                                        var href = element.getAttribute( '_cke_saved_href' );
1086                                                                        if ( !href )
1087                                                                                href = element.getAttribute( 'href' );
1088                                                                        this.setValue( href );
1089                                                                }
1090                                                        },
1091                                                        commit : function( type, element )
1092                                                        {
1093                                                                if ( type == LINK )
1094                                                                {
1095                                                                        if ( this.getValue() || this.isChanged() )
1096                                                                        {
1097                                                                                element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
1098                                                                                element.setAttribute( 'href', 'javascript:void(0)/*' +
1099                                                                                        CKEDITOR.tools.getNextNumber() + '*/' );
1100
1101                                                                                if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
1102                                                                                        this.getDialog().addLink = true;
1103                                                                        }
1104                                                                }
1105                                                        }
1106                                                },
1107                                                {
1108                                                        type : 'button',
1109                                                        id : 'browse',
1110                                                        filebrowser :
1111                                                        {
1112                                                                action : 'Browse',
1113                                                                target: 'Link:txtUrl',
1114                                                                url: editor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl
1115                                                        },
1116                                                        style : 'float:right',
1117                                                        hidden : true,
1118                                                        label : editor.lang.common.browseServer
1119                                                },
1120                                                {
1121                                                        id : 'cmbTarget',
1122                                                        type : 'select',
1123                                                        label : editor.lang.common.target,
1124                                                        'default' : '',
1125                                                        items :
1126                                                        [
1127                                                                [ editor.lang.common.notSet , ''],
1128                                                                [ editor.lang.common.targetNew , '_blank'],
1129                                                                [ editor.lang.common.targetTop , '_top'],
1130                                                                [ editor.lang.common.targetSelf , '_self'],
1131                                                                [ editor.lang.common.targetParent , '_parent']
1132                                                        ],
1133                                                        setup : function( type, element )
1134                                                        {
1135                                                                if ( type == LINK )
1136                                                                        this.setValue( element.getAttribute( 'target' ) );
1137                                                        },
1138                                                        commit : function( type, element )
1139                                                        {
1140                                                                if ( type == LINK )
1141                                                                {
1142                                                                        if ( this.getValue() || this.isChanged() )
1143                                                                                element.setAttribute( 'target', this.getValue() );
1144                                                                }
1145                                                        }
1146                                                }
1147                                        ]
1148                                },
1149                                {
1150                                        id : 'Upload',
1151                                        hidden : true,
1152                                        filebrowser : 'uploadButton',
1153                                        label : editor.lang.image.upload,
1154                                        elements :
1155                                        [
1156                                                {
1157                                                        type : 'file',
1158                                                        id : 'upload',
1159                                                        label : editor.lang.image.btnUpload,
1160                                                        style: 'height:40px',
1161                                                        size : 38
1162                                                },
1163                                                {
1164                                                        type : 'fileButton',
1165                                                        id : 'uploadButton',
1166                                                        filebrowser : 'info:txtUrl',
1167                                                        label : editor.lang.image.btnUpload,
1168                                                        'for' : [ 'Upload', 'upload' ]
1169                                                }
1170                                        ]
1171                                },
1172                                {
1173                                        id : 'advanced',
1174                                        label : editor.lang.common.advancedTab,
1175                                        elements :
1176                                        [
1177                                                {
1178                                                        type : 'hbox',
1179                                                        widths : [ '50%', '25%', '25%' ],
1180                                                        children :
1181                                                        [
1182                                                                {
1183                                                                        type : 'text',
1184                                                                        id : 'linkId',
1185                                                                        label : editor.lang.common.id,
1186                                                                        setup : function( type, element )
1187                                                                        {
1188                                                                                if ( type == IMAGE )
1189                                                                                        this.setValue( element.getAttribute( 'id' ) );
1190                                                                        },
1191                                                                        commit : function( type, element )
1192                                                                        {
1193                                                                                if ( type == IMAGE )
1194                                                                                {
1195                                                                                        if ( this.getValue() || this.isChanged() )
1196                                                                                                element.setAttribute( 'id', this.getValue() );
1197                                                                                }
1198                                                                        }
1199                                                                },
1200                                                                {
1201                                                                        id : 'cmbLangDir',
1202                                                                        type : 'select',
1203                                                                        style : 'width : 100px;',
1204                                                                        label : editor.lang.common.langDir,
1205                                                                        'default' : '',
1206                                                                        items :
1207                                                                        [
1208                                                                                [ editor.lang.common.notSet, '' ],
1209                                                                                [ editor.lang.common.langDirLtr, 'ltr' ],
1210                                                                                [ editor.lang.common.langDirRtl, 'rtl' ]
1211                                                                        ],
1212                                                                        setup : function( type, element )
1213                                                                        {
1214                                                                                if ( type == IMAGE )
1215                                                                                        this.setValue( element.getAttribute( 'dir' ) );
1216                                                                        },
1217                                                                        commit : function( type, element )
1218                                                                        {
1219                                                                                if ( type == IMAGE )
1220                                                                                {
1221                                                                                        if ( this.getValue() || this.isChanged() )
1222                                                                                                element.setAttribute( 'dir', this.getValue() );
1223                                                                                }
1224                                                                        }
1225                                                                },
1226                                                                {
1227                                                                        type : 'text',
1228                                                                        id : 'txtLangCode',
1229                                                                        label : editor.lang.common.langCode,
1230                                                                        'default' : '',
1231                                                                        setup : function( type, element )
1232                                                                        {
1233                                                                                if ( type == IMAGE )
1234                                                                                        this.setValue( element.getAttribute( 'lang' ) );
1235                                                                        },
1236                                                                        commit : function( type, element )
1237                                                                        {
1238                                                                                if ( type == IMAGE )
1239                                                                                {
1240                                                                                        if ( this.getValue() || this.isChanged() )
1241                                                                                                element.setAttribute( 'lang', this.getValue() );
1242                                                                                }
1243                                                                        }
1244                                                                }
1245                                                        ]
1246                                                },
1247                                                {
1248                                                        type : 'text',
1249                                                        id : 'txtGenLongDescr',
1250                                                        label : editor.lang.common.longDescr,
1251                                                        setup : function( type, element )
1252                                                        {
1253                                                                if ( type == IMAGE )
1254                                                                        this.setValue( element.getAttribute( 'longDesc' ) );
1255                                                        },
1256                                                        commit : function( type, element )
1257                                                        {
1258                                                                if ( type == IMAGE )
1259                                                                {
1260                                                                        if ( this.getValue() || this.isChanged() )
1261                                                                                element.setAttribute( 'longDesc', this.getValue() );
1262                                                                }
1263                                                        }
1264                                                },
1265                                                {
1266                                                        type : 'hbox',
1267                                                        widths : [ '50%', '50%' ],
1268                                                        children :
1269                                                        [
1270                                                                {
1271                                                                        type : 'text',
1272                                                                        id : 'txtGenClass',
1273                                                                        label : editor.lang.common.cssClass,
1274                                                                        'default' : '',
1275                                                                        setup : function( type, element )
1276                                                                        {
1277                                                                                if ( type == IMAGE )
1278                                                                                        this.setValue( element.getAttribute( 'class' ) );
1279                                                                        },
1280                                                                        commit : function( type, element )
1281                                                                        {
1282                                                                                if ( type == IMAGE )
1283                                                                                {
1284                                                                                        if ( this.getValue() || this.isChanged() )
1285                                                                                                element.setAttribute( 'class', this.getValue() );
1286                                                                                }
1287                                                                        }
1288                                                                },
1289                                                                {
1290                                                                        type : 'text',
1291                                                                        id : 'txtGenTitle',
1292                                                                        label : editor.lang.common.advisoryTitle,
1293                                                                        'default' : '',
1294                                                                        onChange : function()
1295                                                                        {
1296                                                                                updatePreview( this.getDialog() );
1297                                                                        },
1298                                                                        setup : function( type, element )
1299                                                                        {
1300                                                                                if ( type == IMAGE )
1301                                                                                        this.setValue( element.getAttribute( 'title' ) );
1302                                                                        },
1303                                                                        commit : function( type, element )
1304                                                                        {
1305                                                                                if ( type == IMAGE )
1306                                                                                {
1307                                                                                        if ( this.getValue() || this.isChanged() )
1308                                                                                                element.setAttribute( 'title', this.getValue() );
1309                                                                                }
1310                                                                                else if ( type == PREVIEW )
1311                                                                                {
1312                                                                                        element.setAttribute( 'title', this.getValue() );
1313                                                                                }
1314                                                                                else if ( type == CLEANUP )
1315                                                                                {
1316                                                                                        element.removeAttribute( 'title' );
1317                                                                                }
1318                                                                        }
1319                                                                }
1320                                                        ]
1321                                                },
1322                                                {
1323                                                        type : 'text',
1324                                                        id : 'txtdlgGenStyle',
1325                                                        label : editor.lang.common.cssStyle,
1326                                                        'default' : '',
1327                                                        setup : function( type, element )
1328                                                        {
1329                                                                if ( type == IMAGE )
1330                                                                {
1331                                                                        var genStyle = element.getAttribute( 'style' );
1332                                                                        if ( !genStyle && element.$.style.cssText )
1333                                                                                genStyle = element.$.style.cssText;
1334                                                                        this.setValue( genStyle );
1335
1336                                                                        var height = element.$.style.height,
1337                                                                                width = element.$.style.width,
1338                                                                                aMatchH  = ( height ? height : '' ).match( regexGetSize ),
1339                                                                                aMatchW  = ( width ? width : '').match( regexGetSize );
1340
1341                                                                        this.attributesInStyle =
1342                                                                        {
1343                                                                                height : !!aMatchH,
1344                                                                                width : !!aMatchW
1345                                                                        };
1346                                                                }
1347                                                        },
1348                                                        onChange : function ()
1349                                                        {
1350                                                                commitInternally.call( this,
1351                                                                        [ 'info:cmbFloat', 'info:cmbAlign',
1352                                                                          'info:txtVSpace', 'info:txtHSpace',
1353                                                                          'info:txtBorder',
1354                                                                          'info:txtWidth', 'info:txtHeight' ] );
1355                                                                updatePreview( this );
1356                                                        },
1357                                                        commit : function( type, element )
1358                                                        {
1359                                                                if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
1360                                                                {
1361                                                                        element.setAttribute( 'style', this.getValue() );
1362                                                                }
1363                                                        }
1364                                                }
1365                                        ]
1366                                }
1367                        ]
1368                };
1369        };
1370
1371        CKEDITOR.dialog.add( 'image', function( editor )
1372                {
1373                        return imageDialog( editor, 'image' );
1374                });
1375
1376        CKEDITOR.dialog.add( 'imagebutton', function( editor )
1377                {
1378                        return imageDialog( editor, 'imagebutton' );
1379                });
1380})();
Note: See TracBrowser for help on using the repository browser.