CLICK HERE TO BUY IT TODAY! OR GET IT FREE VIA TRIALPAY  

PHP Demo Application - Source Code

/Framework/Model/Vendor/CkEditor/_source/plugins/image/dialogs/image.js



/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
(function()
{
	    var imageDialog = function( editordialogType )
	    {
		        // Load image preview.
		        var IMAGE 1,
		            LINK 2,
		            PREVIEW 4,
		            CLEANUP 8,
		            regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
		            regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,
		            pxLengthRegex = /^\d+px$/;
		        var onSizeChange = function()
		        {
			            var value this.getValue(),    // This = input element.
			                dialog this.getDialog(),
			                aMatch  =  value.matchregexGetSize );
			    // Check value
			            if ( aMatch )
			            {
				                if ( aMatch[2] == '%' )            // % is allowed - > unlock ratio.
				                    switchLockRatiodialogfalse );
				    // Unlock.
				                value aMatch[1];
				            }
			            // Only if ratio is locked
			            if ( dialog.lockRatio )
			            {
				                var oImageOriginal dialog.originalElement;
				                if ( oImageOriginal.getCustomData'isReady' ) == 'true' )
				                {
					                    if ( this.id == 'txtHeight' )
					                    {
						                        if ( value && value != '0' )
						                            value Math.roundoImageOriginal.$.width * ( value  oImageOriginal.$.height ) );
						                        if ( !isNaNvalue ) )
						                            dialog.setValueOf'info''txtWidth'value );
						                    }
					                    else        //this.id = txtWidth.
					                    {
						                        if ( value && value != '0' )
						                            value Math.roundoImageOriginal.$.height * ( value  oImageOriginal.$.width ) );
						                        if ( !isNaNvalue ) )
						                            dialog.setValueOf'info''txtHeight'value );
						                    }
					                }
				            }
			            updatePreviewdialog );
			        };
		        var updatePreview = function( dialog )
		        {
			            //Don't load before onShow.
			            if ( !dialog.originalElement || !dialog.preview )
			                return 1;
			            // Read attributes and update imagePreview;
			            dialog.commitContentPREVIEWdialog.preview );
			            return 0;
			        };
		        // Custom commit dialog logic, where we're intended to give inline style
		        // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute
		        // by other fields.
		        function commitContent()
		        {
			            var args arguments;
			            var inlineStyleField this.getContentElement'advanced''txtdlgGenStyle' );
			            inlineStyleField && inlineStyleField.commit.applyinlineStyleFieldargs );
			            this.foreach( function( widget )
			            {
				                if ( widget.commit &&  widget.id != 'txtdlgGenStyle' )
				                    widget.commit.applywidgetargs );
				            });
			        }
		        // Avoid recursions.
		        var incommit;
		        // Synchronous field values to other impacted fields is required, e.g. border
		        // size change should alter inline-style text as well.
		        function commitInternallytargetFields )
		        {
			            if ( incommit )
			                return;
			            incommit 1;
			            var dialog this.getDialog(),
			                element dialog.imageElement;
			            if ( element )
			            {
				                // Commit this field and broadcast to target fields.
				                this.commitIMAGEelement );
				                targetFields [].concattargetFields );
				                var length targetFields.length,
				                    field;
				                for ( var 0;
				 length;
				 i++ )
				                {
					                    field dialog.getContentElement.applydialogtargetFields].split':' ) );
					                    // May cause recursion.
					                    field && field.setupIMAGEelement );
					                }
				            }
			            incommit 0;
			        }
		        var switchLockRatio = function( dialogvalue )
		        {
			            var oImageOriginal dialog.originalElement;
			            // Dialog may already closed. (#5505)
			            if( !oImageOriginal )
			                return null;
			            var ratioButton CKEDITOR.document.getByIdbtnLockSizesId );
			            if ( oImageOriginal.getCustomData'isReady' ) == 'true' )
			            {
				                if ( value == 'check' )            // Check image ratio and original image ratio.
				                {
					                    var width dialog.getValueOf'info''txtWidth' ),
					                        height dialog.getValueOf'info''txtHeight' ),
					                        originalRatio oImageOriginal.$.width 1000 oImageOriginal.$.height,
					                        thisRatio width 1000 height;
					                    dialog.lockRatio  false;
					        // Default: unlock ratio
					                    if ( !width && !height )
					                        dialog.lockRatio true;
					                    else if ( !isNaNoriginalRatio ) && !isNaNthisRatio ) )
					                    {
						                        if ( Math.roundoriginalRatio ) == Math.roundthisRatio ) )
						                            dialog.lockRatio true;
						                    }
					                }
				                else if ( value != undefined )
				                    dialog.lockRatio value;
				                else
				                    dialog.lockRatio = !dialog.lockRatio;
				            }
			            else if ( value != 'check' )        // I can't lock ratio if ratio is unknown.
			                dialog.lockRatio false;
			            if ( dialog.lockRatio )
			                ratioButton.removeClass'cke_btn_unlocked' );
			            else
			                ratioButton.addClass'cke_btn_unlocked' );
			            var lang dialog._.editor.lang.image,
			                label =  lang[  dialog.lockRatio 'unlockRatio' 'lockRatio' ];
			            ratioButton.setAttribute'title'label );
			            ratioButton.getFirst().setTextlabel );
			            return dialog.lockRatio;
			        };
		        var resetSize = function( dialog )
		        {
			            var oImageOriginal dialog.originalElement;
			            if ( oImageOriginal.getCustomData'isReady' ) == 'true' )
			            {
				                dialog.setValueOf'info''txtWidth'oImageOriginal.$.width );
				                dialog.setValueOf'info''txtHeight'oImageOriginal.$.height );
				            }
			            updatePreviewdialog );
			        };
		        var setupDimension = function( typeelement )
		        {
			            if ( type != IMAGE )
			                return;
			            function checkDimensionsizedefaultValue )
			            {
				                var aMatch  =  size.matchregexGetSize );
				                if ( aMatch )
				                {
					                    if ( aMatch[2] == '%' )                // % is allowed.
					                    {
						                        aMatch[1] += '%';
						                        switchLockRatiodialogfalse );
						    // Unlock ratio
						                    }
					                    return aMatch[1];
					                }
				                return defaultValue;
				            }
			            var dialog this.getDialog(),
			                value '',
			                dimension = (( this.id == 'txtWidth' )? 'width' 'height' ),
			                size element.getAttributedimension );
			            if ( size )
			                value checkDimensionsizevalue );
			            value checkDimensionelement.getStyledimension ), value );
			            this.setValuevalue );
			        };
		        var previewPreloader;
		        var onImgLoadEvent = function()
		        {
			            // Image is ready.
			            var original this.originalElement;
			            original.setCustomData'isReady''true' );
			            original.removeListener'load'onImgLoadEvent );
			            original.removeListener'error'onImgLoadErrorEvent );
			            original.removeListener'abort'onImgLoadErrorEvent );
			            // Hide loader
			            CKEDITOR.document.getByIdimagePreviewLoaderId ).setStyle'display''none' );
			            // New image -> new domensions
			            if ( !this.dontResetSize )
			                resetSizethis );
			            if ( this.firstLoad )
			                CKEDITOR.tools.setTimeout( function(){ switchLockRatiothis'check' );
				}, 0this );
			            this.firstLoad false;
			            this.dontResetSize false;
			        };
		        var onImgLoadErrorEvent = function()
		        {
			            // Error. Image is not loaded.
			            var original this.originalElement;
			            original.removeListener'load'onImgLoadEvent );
			            original.removeListener'error'onImgLoadErrorEvent );
			            original.removeListener'abort'onImgLoadErrorEvent );
			            // Set Error image.
			            var noimage CKEDITOR.getUrleditor.skinPath 'images/noimage.png' );
			            if ( this.preview )
			                this.preview.setAttribute'src'noimage );
			            // Hide loader
			            CKEDITOR.document.getByIdimagePreviewLoaderId ).setStyle'display''none' );
			            switchLockRatiothisfalse );
			    // Unlock.
			        };
		        var numbering = function( id )
		            {
			                return CKEDITOR.tools.getNextId() + '_' id;
			            },
		            btnLockSizesId numbering'btnLockSizes' ),
		            btnResetSizeId numbering'btnResetSize' ),
		            imagePreviewLoaderId numbering'ImagePreviewLoader' ),
		            imagePreviewBoxId numbering'ImagePreviewBox' ),
		            previewLinkId numbering'previewLink' ),
		            previewImageId numbering'previewImage' );
		        return {
			            title : ( dialogType == 'image' ) ? editor.lang.image.title editor.lang.image.titleButton,
			            minWidth 420,
			            minHeight 310,
			            onShow : function()
			            {
				                this.imageElement false;
				                this.linkElement false;
				                // Default: create a new element.
				                this.imageEditMode false;
				                this.linkEditMode false;
				                this.lockRatio true;
				                this.dontResetSize false;
				                this.firstLoad true;
				                this.addLink false;
				                var editor this.getParentEditor(),
				                    sel this.getParentEditor().getSelection(),
				                    element sel.getSelectedElement(),
				                    link element && element.getAscendant'a' );
				                //Hide loader.
				                CKEDITOR.document.getByIdimagePreviewLoaderId ).setStyle'display''none' );
				                // Create the preview before setup the dialog contents.
				                previewPreloader = new CKEDITOR.dom.element'img'editor.document );
				                this.preview CKEDITOR.document.getByIdpreviewImageId );
				                // Copy of the image
				                this.originalElement editor.document.createElement'img' );
				                this.originalElement.setAttribute'alt''' );
				                this.originalElement.setCustomData'isReady''false' );
				                if ( link )
				                {
					                    this.linkElement link;
					                    this.linkEditMode true;
					                    // Look for Image element.
					                    var linkChildren link.getChildren();
					                    if ( linkChildren.count() == )            // 1 child.
					                    {
						                        var childTagName linkChildren.getItem).getName();
						                        if ( childTagName == 'img' || childTagName == 'input' )
						                        {
							                            this.imageElement linkChildren.getItem);
							                            if ( this.imageElement.getName() == 'img' )
							                                this.imageEditMode 'img';
							                            else if ( this.imageElement.getName() == 'input' )
							                                this.imageEditMode 'input';
							                        }
						                    }
					                    // Fill out all fields.
					                    if ( dialogType == 'image' )
					                        this.setupContentLINKlink );
					                }
				                if ( element && element.getName() == 'img' && !element.getAttribute'_cke_realelement' )
				                    || element && element.getName() == 'input' && element.getAttribute'type' ) == 'image' )
				                {
					                    this.imageEditMode element.getName();
					                    this.imageElement element;
					                }
				                if ( this.imageEditMode )
				                {
					                    // Use the original element as a buffer from  since we don't want
					                    // temporary changes to be committed, e.g. if the dialog is canceled.
					                    this.cleanImageElement this.imageElement;
					                    this.imageElement this.cleanImageElement.clone( truetrue );
					                    // Fill out all fields.
					                    this.setupContentIMAGEthis.imageElement );
					                    // Refresh LockRatio button
					                    switchLockRatio thistrue );
					                }
				                else
				                    this.imageElement =  editor.document.createElement'img' );
				                // Dont show preview if no URL given.
				                if ( !CKEDITOR.tools.trimthis.getValueOf'info''txtUrl' ) ) )
				                {
					                    this.preview.removeAttribute'src' );
					                    this.preview.setStyle'display''none' );
					                }
				            },
			            onOk : function()
			            {
				                // Edit existing Image.
				                if ( this.imageEditMode )
				                {
					                    var imgTagName this.imageEditMode;
					                    // Image dialog and Input element.
					                    if ( dialogType == 'image' && imgTagName == 'input' && confirmeditor.lang.image.button2Img ) )
					                    {
						                        // Replace INPUT-> IMG
						                        imgTagName 'img';
						                        this.imageElement editor.document.createElement'img' );
						                        this.imageElement.setAttribute'alt''' );
						                        editor.insertElementthis.imageElement );
						                    }
					                    // ImageButton dialog and Image element.
					                    else if ( dialogType != 'image' && imgTagName == 'img' && confirmeditor.lang.image.img2Button ))
					                    {
						                        // Replace IMG -> INPUT
						                        imgTagName 'input';
						                        this.imageElement editor.document.createElement'input' );
						                        this.imageElement.setAttributes(
						                            {
							                                type 'image',
							                                alt ''
							                            }
						                        );
						                        editor.insertElementthis.imageElement );
						                    }
					                    else
					                    {
						                        // Restore the original element before all commits.
						                        this.imageElement this.cleanImageElement;
						                        delete this.cleanImageElement;
						                    }
					                }
				                else    // Create a new image.
				                {
					                    // Image dialog -> create IMG element.
					                    if ( dialogType == 'image' )
					                        this.imageElement editor.document.createElement'img' );
					                    else
					                    {
						                        this.imageElement editor.document.createElement'input' );
						                        this.imageElement.setAttribute 'type' ,'image' );
						                    }
					                    this.imageElement.setAttribute'alt''' );
					                }
				                // Create a new link.
				                if ( !this.linkEditMode )
				                    this.linkElement editor.document.createElement'a' );
				                // Set attributes.
				                this.commitContentIMAGEthis.imageElement );
				                this.commitContentLINKthis.linkElement );
				                // Remove empty style attribute.
				                if ( !this.imageElement.getAttribute'style' ) )
				                    this.imageElement.removeAttribute'style' );
				                // Insert a new Image.
				                if ( !this.imageEditMode )
				                {
					                    if ( this.addLink )
					                    {
						                        //Insert a new Link.
						                        if ( !this.linkEditMode )
						                        {
							                            editor.insertElement(this.linkElement);
							                            this.linkElement.append(this.imageElementfalse);
							                        }
						                        else     //Link already exists, image not.
						                            editor.insertElement(this.imageElement );
						                    }
					                    else
					                        editor.insertElementthis.imageElement );
					                }
				                else        // Image already exists.
				                {
					                    //Add a new link element.
					                    if ( !this.linkEditMode && this.addLink )
					                    {
						                        editor.insertElementthis.linkElement );
						                        this.imageElement.appendTothis.linkElement );
						                    }
					                    //Remove Link, Image exists.
					                    else if ( this.linkEditMode && !this.addLink )
					                    {
						                        editor.getSelection().selectElementthis.linkElement );
						                        editor.insertElementthis.imageElement );
						                    }
					                }
				            },
			            onLoad : function()
			            {
				                if ( dialogType != 'image' )
				                    this.hidePage'Link' );
				        //Hide Link tab.
				                var doc this._.element.getDocument();
				                this.addFocusabledoc.getByIdbtnResetSizeId ), );
				                this.addFocusabledoc.getByIdbtnLockSizesId ), );
				                this.commitContent commitContent;
				            },
			            onHide : function()
			            {
				                if ( this.preview )
				                    this.commitContentCLEANUPthis.preview );
				                if ( this.originalElement )
				                {
					                    this.originalElement.removeListener'load'onImgLoadEvent );
					                    this.originalElement.removeListener'error'onImgLoadErrorEvent );
					                    this.originalElement.removeListener'abort'onImgLoadErrorEvent );
					                    this.originalElement.remove();
					                    this.originalElement false;
					        // Dialog is closed.
					                }
				                delete this.imageElement;
				            },
			            contents : [
			                {
				                    id 'info',
				                    label editor.lang.image.infoTab,
				                    accessKey 'I',
				                    elements :
				                    [
				                        {
					                            type 'vbox',
					                            padding 0,
					                            children :
					                            [
					                                {
						                                    type 'hbox',
						                                    widths : [ '280px''110px' ],
						                                    align 'right',
						                                    children :
						                                    [
						                                        {
							                                            id 'txtUrl',
							                                            type 'text',
							                                            label editor.lang.common.url,
							                                            requiredtrue,
							                                            onChange : function()
							                                            {
								                                                var dialog this.getDialog(),
								                                                    newUrl this.getValue();
								                                                //Update original image
								                                                if ( newUrl.length )    //Prevent from load before onShow
								                                                {
									                                                    dialog this.getDialog();
									                                                    var original dialog.originalElement;
									                                                    dialog.preview.removeStyle'display' );
									                                                    original.setCustomData'isReady''false' );
									                                                    // Show loader
									                                                    var loader CKEDITOR.document.getByIdimagePreviewLoaderId );
									                                                    if ( loader )
									                                                        loader.setStyle'display''' );
									                                                    original.on'load'onImgLoadEventdialog );
									                                                    original.on'error'onImgLoadErrorEventdialog );
									                                                    original.on'abort'onImgLoadErrorEventdialog );
									                                                    original.setAttribute'src'newUrl );
									                                                    // Query the preloader to figure out the url impacted by based href.
									                                                    previewPreloader.setAttribute'src'newUrl );
									                                                    dialog.preview.setAttribute'src'previewPreloader.$.src );
									                                                    updatePreviewdialog );
									                                                }
								                                                // Dont show preview if no URL given.
								                                                else if ( dialog.preview )
								                                                {
									                                                    dialog.preview.removeAttribute'src' );
									                                                    dialog.preview.setStyle'display''none' );
									                                                }
								                                            },
							                                            setup : function( typeelement )
							                                            {
								                                                if ( type == IMAGE )
								                                                {
									                                                    var url element.getAttribute'_cke_saved_src' ) || element.getAttribute'src' );
									                                                    var field this;
									                                                    this.getDialog().dontResetSize true;
									                                                    field.setValueurl );
									        // And call this.onChange()
									                                                    // Manually set the initial value.(#4191)
									                                                    field.setInitValue();
									                                                }
								                                            },
							                                            commit : function( typeelement )
							                                            {
								                                                if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
								                                                {
									                                                    element.setAttribute'_cke_saved_src'decodeURIthis.getValue() ) );
									                                                    element.setAttribute'src'decodeURIthis.getValue() ) );
									                                                }
								                                                else if ( type == CLEANUP )
								                                                {
									                                                    element.setAttribute'src''' );
									    // If removeAttribute doesn't work.
									                                                    element.removeAttribute'src' );
									                                                }
								                                            },
							                                            validate CKEDITOR.dialog.validate.notEmptyeditor.lang.image.urlMissing )
							                                        },
						                                        {
							                                            type 'button',
							                                            id 'browse',
							                                            // v-align with the 'txtUrl' field.
							                                            // TODO: We need something better than a fixed size here.
							                                            style 'display:inline-block;
							margin-top:10px;
							',
							                                            align 'center',
							                                            label editor.lang.common.browseServer,
							                                            hidden true,
							                                            filebrowser 'info:txtUrl'
							                                        }
						                                    ]
						                                }
					                            ]
					                        },
				                        {
					                            id 'txtAlt',
					                            type 'text',
					                            label editor.lang.image.alt,
					                            accessKey 'T',
					                            'default' '',
					                            onChange : function()
					                            {
						                                updatePreviewthis.getDialog() );
						                            },
					                            setup : function( typeelement )
					                            {
						                                if ( type == IMAGE )
						                                    this.setValueelement.getAttribute'alt' ) );
						                            },
					                            commit : function( typeelement )
					                            {
						                                if ( type == IMAGE )
						                                {
							                                    if ( this.getValue() || this.isChanged() )
							                                        element.setAttribute'alt'this.getValue() );
							                                }
						                                else if ( type == PREVIEW )
						                                {
							                                    element.setAttribute'alt'this.getValue() );
							                                }
						                                else if ( type == CLEANUP )
						                                {
							                                    element.removeAttribute'alt' );
							                                }
						                            }
					                        },
				                        {
					                            type 'hbox',
					                            widths : [ '140px''240px' ],
					                            children :
					                            [
					                                {
						                                    type 'vbox',
						                                    padding 10,
						                                    children :
						                                    [
						                                        {
							                                            type 'hbox',
							                                            widths : [ '70%''30%' ],
							                                            children :
							                                            [
							                                                {
								                                                    type 'vbox',
								                                                    padding 1,
								                                                    children :
								                                                    [
								                                                        {
									                                                            type 'text',
									                                                            width'40px',
									                                                            id 'txtWidth',
									                                                            labelLayout 'horizontal',
									                                                            label editor.lang.image.width,
									                                                            onKeyUp onSizeChange,
									                                                            onChange : function()
									                                                            {
										                                                                commitInternally.callthis'advanced:txtdlgGenStyle' );
										                                                            },
									                                                            validate : function()
									                                                            {
										                                                                var aMatch  =  this.getValue().matchregexGetSizeOrEmpty );
										                                                                if ( !aMatch )
										                                                                    alerteditor.lang.image.validateWidth );
										                                                                return !!aMatch;
										                                                            },
									                                                            setup setupDimension,
									                                                            commit : function( typeelementinternalCommit )
									                                                            {
										                                                                var value this.getValue();
										                                                                if ( type == IMAGE )
										                                                                {
											                                                                    if ( value )
											                                                                        element.setStyle'width'CKEDITOR.tools.cssLengthvalue ) );
											                                                                    else if ( !value && this.isChanged( ) )
											                                                                        element.removeStyle'width' );
											                                                                    !internalCommit && element.removeAttribute'width' );
											                                                                }
										                                                                else if ( type == PREVIEW )
										                                                                {
											                                                                    var aMatch value.matchregexGetSize );
											                                                                    if ( !aMatch )
											                                                                    {
												                                                                        var oImageOriginal this.getDialog().originalElement;
												                                                                        if ( oImageOriginal.getCustomData'isReady' ) == 'true' )
												                                                                            element.setStyle'width',  oImageOriginal.$.width 'px');
												                                                                    }
											                                                                    else
											                                                                        element.setStyle'width'CKEDITOR.tools.cssLengthvalue ) );
											                                                                }
										                                                                else if ( type == CLEANUP )
										                                                                {
											                                                                    element.removeAttribute'width' );
											                                                                    element.removeStyle'width' );
											                                                                }
										                                                            }
									                                                        },
								                                                        {
									                                                            type 'text',
									                                                            id 'txtHeight',
									                                                            width'40px',
									                                                            labelLayout 'horizontal',
									                                                            label editor.lang.image.height,
									                                                            onKeyUp onSizeChange,
									                                                            onChange : function()
									                                                            {
										                                                                commitInternally.callthis'advanced:txtdlgGenStyle' );
										                                                            },
									                                                            validate : function()
									                                                            {
										                                                                var aMatch this.getValue().matchregexGetSizeOrEmpty );
										                                                                if ( !aMatch )
										                                                                    alerteditor.lang.image.validateHeight );
										                                                                return !!aMatch;
										                                                            },
									                                                            setup setupDimension,
									                                                            commit : function( typeelementinternalCommit )
									                                                            {
										                                                                var value this.getValue();
										                                                                if ( type == IMAGE )
										                                                                {
											                                                                    if ( value )
											                                                                        element.setStyle'height'CKEDITOR.tools.cssLengthvalue ) );
											                                                                    else if ( !value && this.isChanged( ) )
											                                                                        element.removeStyle'height' );
											                                                                    if ( !internalCommit && type == IMAGE )
											                                                                        element.removeAttribute'height' );
											                                                                }
										                                                                else if ( type == PREVIEW )
										                                                                {
											                                                                    var aMatch value.matchregexGetSize );
											                                                                    if ( !aMatch )
											                                                                    {
												                                                                        var oImageOriginal this.getDialog().originalElement;
												                                                                        if ( oImageOriginal.getCustomData'isReady' ) == 'true' )
												                                                                            element.setStyle'height'oImageOriginal.$.height 'px' );
												                                                                    }
											                                                                    else
											                                                                        element.setStyle'height',  CKEDITOR.tools.cssLengthvalue ) );
											                                                                }
										                                                                else if ( type == CLEANUP )
										                                                                {
											                                                                    element.removeAttribute'height' );
											                                                                    element.removeStyle'height' );
											                                                                }
										                                                            }
									                                                        }
								                                                    ]
								                                                },
							                                                {
								                                                    type 'html',
								                                                    style 'margin-top:10px;
								width:40px;
								height:40px;
								',
								                                                    onLoad : function()
								                                                    {
									                                                        // Activate Reset button
									                                                        var    resetButton CKEDITOR.document.getByIdbtnResetSizeId ),
									                                                            ratioButton CKEDITOR.document.getByIdbtnLockSizesId );
									                                                        if ( resetButton )
									                                                        {
										                                                            resetButton.on'click', function(evt)
										                                                                {
											                                                                    resetSizethis );
											                                                                    evt.data.preventDefault();
											                                                                }, this.getDialog() );
										                                                            resetButton.on'mouseover', function()
										                                                                {
											                                                                    this.addClass'cke_btn_over' );
											                                                                }, resetButton );
										                                                            resetButton.on'mouseout', function()
										                                                                {
											                                                                    this.removeClass'cke_btn_over' );
											                                                                }, resetButton );
										                                                        }
									                                                        // Activate (Un)LockRatio button
									                                                        if ( ratioButton )
									                                                        {
										                                                            ratioButton.on'click', function(evt)
										                                                                {
											                                                                    var locked switchLockRatiothis ),
											                                                                        oImageOriginal this.originalElement,
											                                                                        width this.getValueOf'info''txtWidth' );
											                                                                    if ( oImageOriginal.getCustomData'isReady' ) == 'true' && width )
											                                                                    {
												                                                                        var height oImageOriginal.$.height oImageOriginal.$.width width;
												                                                                        if ( !isNaNheight ) )
												                                                                        {
													                                                                            this.setValueOf'info''txtHeight'Math.roundheight ) );
													                                                                            updatePreviewthis );
													                                                                        }
												                                                                    }
											                                                                    evt.data.preventDefault();
											                                                                }, this.getDialog() );
										                                                            ratioButton.on'mouseover', function()
										                                                                {
											                                                                    this.addClass'cke_btn_over' );
											                                                                }, ratioButton );
										                                                            ratioButton.on'mouseout', function()
										                                                                {
											                                                                    this.removeClass'cke_btn_over' );
											                                                                }, ratioButton );
										                                                        }
									                                                    },
								                                                    html '<div>'+
								                                                        '<a href="javascript:void(0)" tabindex="-1" title="' editor.lang.image.unlockRatio +
								                                                        '" class="cke_btn_locked" id="' btnLockSizesId '" role="button"><span class="cke_label">' editor.lang.image.unlockRatio '</span></a>' +
								                                                        '<a href="javascript:void(0)" tabindex="-1" title="' editor.lang.image.resetSize +
								                                                        '" class="cke_btn_reset" id="' btnResetSizeId '" role="button"><span class="cke_label">' editor.lang.image.resetSize '</span></a>'+
								                                                        '</div>'
								                                                }
							                                            ]
							                                        },
						                                        {
							                                            type 'vbox',
							                                            padding 1,
							                                            children :
							                                            [
							                                                {
								                                                    type 'text',
								                                                    id 'txtBorder',
								                                                    width'60px',
								                                                    labelLayout 'horizontal',
								                                                    label editor.lang.image.border,
								                                                    'default' '',
								                                                    onKeyUp : function()
								                                                    {
									                                                        updatePreviewthis.getDialog() );
									                                                    },
								                                                    onChange : function()
								                                                    {
									                                                        commitInternally.callthis'advanced:txtdlgGenStyle' );
									                                                    },
								                                                    validate CKEDITOR.dialog.validate.integereditor.lang.image.validateBorder ),
								                                                    setup : function( typeelement )
								                                                    {
									                                                        if ( type == IMAGE )
									                                                        {
										                                                            var value,
										                                                                borderStyle element.getStyle'border-width' );
										                                                            borderStyle borderStyle && borderStyle.match( /^(\d+px)(?: \\\1)?$/ );
										                                                            value borderStyle && parseIntborderStyle], 10 );
										                                                            isNaN parseIntvalue10 ) ) && ( value element.getAttribute'border' ) );
										                                                            this.setValuevalue );
										                                                        }
									                                                    },
								                                                    commit : function( typeelementinternalCommit )
								                                                    {
									                                                        var value parseIntthis.getValue(), 10 );
									                                                        if ( type == IMAGE || type == PREVIEW )
									                                                        {
										                                                            if ( !isNaNvalue ) )
										                                                            {
											                                                                element.setStyle'border-width'CKEDITOR.tools.cssLengthvalue ) );
											                                                                element.setStyle'border-style''solid' );
											                                                            }
										                                                            else if ( !value && this.isChanged() )
										                                                            {
											                                                                element.removeStyle'border-width' );
											                                                                element.removeStyle'border-style' );
											                                                                element.removeStyle'border-color' );
											                                                            }
										                                                            if ( !internalCommit && type == IMAGE )
										                                                                element.removeAttribute'border' );
										                                                        }
									                                                        else if ( type == CLEANUP )
									                                                        {
										                                                            element.removeAttribute'border' );
										                                                            element.removeStyle'border-width' );
										                                                            element.removeStyle'border-style' );
										                                                            element.removeStyle'border-color' );
										                                                        }
									                                                    }
								                                                },
							                                                {
								                                                    type 'text',
								                                                    id 'txtHSpace',
								                                                    width'60px',
								                                                    labelLayout 'horizontal',
								                                                    label editor.lang.image.hSpace,
								                                                    'default' '',
								                                                    onKeyUp : function()
								                                                    {
									                                                        updatePreviewthis.getDialog() );
									                                                    },
								                                                    onChange : function()
								                                                    {
									                                                        commitInternally.callthis'advanced:txtdlgGenStyle' );
									                                                    },
								                                                    validate CKEDITOR.dialog.validate.integereditor.lang.image.validateHSpace ),
								                                                    setup : function( typeelement )
								                                                    {
									                                                        if ( type == IMAGE )
									                                                        {
										                                                            var value,
										                                                                marginLeftPx,
										                                                                marginRightPx,
										                                                                marginLeftStyle element.getStyle'margin-left' ),
										                                                                marginRightStyle element.getStyle'margin-right' );
										                                                            marginLeftStyle marginLeftStyle && marginLeftStyle.matchpxLengthRegex );
										                                                            marginRightStyle marginRightStyle && marginRightStyle.matchpxLengthRegex );
										                                                            marginLeftPx parseIntmarginLeftStyle10 );
										                                                            marginRightPx parseIntmarginRightStyle10 );
										                                                            value = ( marginLeftPx == marginRightPx ) && marginLeftPx;
										                                                            isNaNparseIntvalue10 ) ) && ( value element.getAttribute'hspace' ) );
										                                                            this.setValuevalue );
										                                                        }
									                                                    },
								                                                    commit : function( typeelementinternalCommit )
								                                                    {
									                                                        var value parseIntthis.getValue(), 10 );
									                                                        if ( type == IMAGE || type == PREVIEW )
									                                                        {
										                                                            if ( !isNaNvalue ) )
										                                                            {
											                                                                element.setStyle'margin-left'CKEDITOR.tools.cssLengthvalue ) );
											                                                                element.setStyle'margin-right'CKEDITOR.tools.cssLengthvalue ) );
											                                                            }
										                                                            else if ( !value && this.isChanged( ) )
										                                                            {
											                                                                element.removeStyle'margin-left' );
											                                                                element.removeStyle'margin-right' );
											                                                            }
										                                                            if ( !internalCommit && type == IMAGE )
										                                                                element.removeAttribute'hspace' );
										                                                        }
									                                                        else if ( type == CLEANUP )
									                                                        {
										                                                            element.removeAttribute'hspace' );
										                                                            element.removeStyle'margin-left' );
										                                                            element.removeStyle'margin-right' );
										                                                        }
									                                                    }
								                                                },
							                                                {
								                                                    type 'text',
								                                                    id 'txtVSpace',
								                                                    width '60px',
								                                                    labelLayout 'horizontal',
								                                                    label editor.lang.image.vSpace,
								                                                    'default' '',
								                                                    onKeyUp : function()
								                                                    {
									                                                        updatePreviewthis.getDialog() );
									                                                    },
								                                                    onChange : function()
								                                                    {
									                                                        commitInternally.callthis'advanced:txtdlgGenStyle' );
									                                                    },
								                                                    validate CKEDITOR.dialog.validate.integereditor.lang.image.validateVSpace ),
								                                                    setup : function( typeelement )
								                                                    {
									                                                        if ( type == IMAGE )
									                                                        {
										                                                            var value,
										                                                                marginTopPx,
										                                                                marginBottomPx,
										                                                                marginTopStyle element.getStyle'margin-top' ),
										                                                                marginBottomStyle element.getStyle'margin-bottom' );
										                                                            marginTopStyle marginTopStyle && marginTopStyle.matchpxLengthRegex );
										                                                            marginBottomStyle marginBottomStyle && marginBottomStyle.matchpxLengthRegex );
										                                                            marginTopPx parseIntmarginTopStyle10 );
										                                                            marginBottomPx parseIntmarginBottomStyle10 );
										                                                            value = ( marginTopPx == marginBottomPx ) && marginTopPx;
										                                                            isNaN parseIntvalue10 ) ) && ( value element.getAttribute'vspace' ) );
										                                                            this.setValuevalue );
										                                                        }
									                                                    },
								                                                    commit : function( typeelementinternalCommit )
								                                                    {
									                                                        var value parseIntthis.getValue(), 10 );
									                                                        if ( type == IMAGE || type == PREVIEW )
									                                                        {
										                                                            if ( !isNaNvalue ) )
										                                                            {
											                                                                element.setStyle'margin-top'CKEDITOR.tools.cssLengthvalue ) );
											                                                                element.setStyle'margin-bottom'CKEDITOR.tools.cssLengthvalue ) );
											                                                            }
										                                                            else if ( !value && this.isChanged( ) )
										                                                            {
											                                                                element.removeStyle'margin-top' );
											                                                                element.removeStyle'margin-bottom' );
											                                                            }
										                                                            if ( !internalCommit && type == IMAGE )
										                                                                element.removeAttribute'vspace' );
										                                                        }
									                                                        else if ( type == CLEANUP )
									                                                        {
										                                                            element.removeAttribute'vspace' );
										                                                            element.removeStyle'margin-top' );
										                                                            element.removeStyle'margin-bottom' );
										                                                        }
									                                                    }
								                                                },
							                                                {
								                                                    id 'cmbAlign',
								                                                    type 'select',
								                                                    labelLayout 'horizontal',
								                                                    widths : [ '35%','65%' ],
								                                                    style 'width:90px',
								                                                    label editor.lang.image.align,
								                                                    'default' '',
								                                                    items :
								                                                    [
								                                                        [ editor.lang.common.notSet ''],
								                                                        [ editor.lang.image.alignLeft 'left'],
								                                                        [ editor.lang.image.alignRight 'right']
								                                                        // Backward compatible with v2 on setup when specified as attribute value,
								                                                        // while these values are no more available as select options.
								                                                        //    [ editor.lang.image.alignAbsBottom , 'absBottom'],
								                                                        //    [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
								                                                        //  [ editor.lang.image.alignBaseline , 'baseline'],
								                                                        //  [ editor.lang.image.alignTextTop , 'text-top'],
								                                                        //  [ editor.lang.image.alignBottom , 'bottom'],
								                                                        //  [ editor.lang.image.alignMiddle , 'middle'],
								                                                        //  [ editor.lang.image.alignTop , 'top']
								                                                    ],
								                                                    onChange : function()
								                                                    {
									                                                        updatePreviewthis.getDialog() );
									                                                        commitInternally.callthis'advanced:txtdlgGenStyle' );
									                                                    },
								                                                    setup : function( typeelement )
								                                                    {
									                                                        if ( type == IMAGE )
									                                                        {
										                                                            var value element.getStyle'float' );
										                                                            switch( value )
										                                                            {
											                                                                // Ignore those unrelated values.
											                                                                case 'inherit':
											                                                                case 'none':
											                                                                    value '';
											                                                            }
										                                                            !value && ( value = ( element.getAttribute'align' ) || '' ).toLowerCase() );
										                                                            this.setValuevalue );
										                                                        }
									                                                    },
								                                                    commit : function( typeelementinternalCommit )
								                                                    {
									                                                        var value this.getValue();
									                                                        if ( type == IMAGE || type == PREVIEW )
									                                                        {
										                                                            if ( value )
										                                                                element.setStyle'float'value );
										                                                            else
										                                                                element.removeStyle'float' );
										                                                            if ( !internalCommit && type == IMAGE )
										                                                            {
											                                                                value = ( element.getAttribute'align' ) || '' ).toLowerCase();
											                                                                switch( value )
											                                                                {
												                                                                    // we should remove it only if it matches "left" or "right",
												                                                                    // otherwise leave it intact.
												                                                                    case 'left':
												                                                                    case 'right':
												                                                                        element.removeAttribute'align' );
												                                                                }
											                                                            }
										                                                        }
									                                                        else if ( type == CLEANUP )
									                                                            element.removeStyle'float' );
									                                                    }
								                                                }
							                                            ]
							                                        }
						                                    ]
						                                },
					                                {
						                                    type 'vbox',
						                                    height '250px',
						                                    children :
						                                    [
						                                        {
							                                            type 'html',
							                                            style 'width:95%;
							',
							                                            html '<div>' CKEDITOR.tools.htmlEncodeeditor.lang.common.preview ) +'<br>'+
							                                            '<div id="' imagePreviewLoaderId '" class="ImagePreviewLoader" style="display:none"><div class="loading">&nbsp;
							</div></div>'+
							                                            '<div id="' imagePreviewBoxId '" class="ImagePreviewBox"><table><tr><td>'+
							                                            '<a href="javascript:void(0)" target="_blank" onclick="return false;
							" id="' previewLinkId '">'+
							                                            '<img id="' previewImageId '" alt="" /></a>' +
							                                            ( editor.config.image_previewText ||
							                                            'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
							                                            'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
							                                            '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.' ) +
							                                            '</td></tr></table></div></div>'
							                                        }
						                                    ]
						                                }
					                            ]
					                        }
				                    ]
				                },
			                {
				                    id 'Link',
				                    label editor.lang.link.title,
				                    padding 0,
				                    elements :
				                    [
				                        {
					                            id 'txtUrl',
					                            type 'text',
					                            label editor.lang.common.url,
					                            style 'width: 100%',
					                            'default' '',
					                            setup : function( typeelement )
					                            {
						                                if ( type == LINK )
						                                {
							                                    var href element.getAttribute'_cke_saved_href' );
							                                    if ( !href )
							                                        href element.getAttribute'href' );
							                                    this.setValuehref );
							                                }
						                            },
					                            commit : function( typeelement )
					                            {
						                                if ( type == LINK )
						                                {
							                                    if ( this.getValue() || this.isChanged() )
							                                    {
								                                        element.setAttribute'_cke_saved_href'decodeURIthis.getValue() ) );
								                                        element.setAttribute'href''javascript:void(0)/*' +
								                                            CKEDITOR.tools.getNextNumber() + '*/' );
								                                        if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
								                                            this.getDialog().addLink true;
								                                    }
							                                }
						                            }
					                        },
				                        {
					                            type 'button',
					                            id 'browse',
					                            filebrowser :
					                            {
						                                action 'Browse',
						                                target'Link:txtUrl',
						                                urleditor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl
						                            },
					                            style 'float:right',
					                            hidden true,
					                            label editor.lang.common.browseServer
					                        },
				                        {
					                            id 'cmbTarget',
					                            type 'select',
					                            label editor.lang.common.target,
					                            'default' '',
					                            items :
					                            [
					                                [ editor.lang.common.notSet ''],
					                                [ editor.lang.common.targetNew '_blank'],
					                                [ editor.lang.common.targetTop '_top'],
					                                [ editor.lang.common.targetSelf '_self'],
					                                [ editor.lang.common.targetParent '_parent']
					                            ],
					                            setup : function( typeelement )
					                            {
						                                if ( type == LINK )
						                                    this.setValueelement.getAttribute'target' ) );
						                            },
					                            commit : function( typeelement )
					                            {
						                                if ( type == LINK )
						                                {
							                                    if ( this.getValue() || this.isChanged() )
							                                        element.setAttribute'target'this.getValue() );
							                                }
						                            }
					                        }
				                    ]
				                },
			                {
				                    id 'Upload',
				                    hidden true,
				                    filebrowser 'uploadButton',
				                    label editor.lang.image.upload,
				                    elements :
				                    [
				                        {
					                            type 'file',
					                            id 'upload',
					                            label editor.lang.image.btnUpload,
					                            style'height:40px',
					                            size 38
					                        },
				                        {
					                            type 'fileButton',
					                            id 'uploadButton',
					                            filebrowser 'info:txtUrl',
					                            label editor.lang.image.btnUpload,
					                            'for' : [ 'Upload''upload' ]
					                        }
				                    ]
				                },
			                {
				                    id 'advanced',
				                    label editor.lang.common.advancedTab,
				                    elements :
				                    [
				                        {
					                            type 'hbox',
					                            widths : [ '50%''25%''25%' ],
					                            children :
					                            [
					                                {
						                                    type 'text',
						                                    id 'linkId',
						                                    label editor.lang.common.id,
						                                    setup : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                            this.setValueelement.getAttribute'id' ) );
							                                    },
						                                    commit : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                        {
								                                            if ( this.getValue() || this.isChanged() )
								                                                element.setAttribute'id'this.getValue() );
								                                        }
							                                    }
						                                },
					                                {
						                                    id 'cmbLangDir',
						                                    type 'select',
						                                    style 'width : 100px;
						',
						                                    label editor.lang.common.langDir,
						                                    'default' '',
						                                    items :
						                                    [
						                                        [ editor.lang.common.notSet'' ],
						                                        [ editor.lang.common.langDirLtr'ltr' ],
						                                        [ editor.lang.common.langDirRtl'rtl' ]
						                                    ],
						                                    setup : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                            this.setValueelement.getAttribute'dir' ) );
							                                    },
						                                    commit : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                        {
								                                            if ( this.getValue() || this.isChanged() )
								                                                element.setAttribute'dir'this.getValue() );
								                                        }
							                                    }
						                                },
					                                {
						                                    type 'text',
						                                    id 'txtLangCode',
						                                    label editor.lang.common.langCode,
						                                    'default' '',
						                                    setup : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                            this.setValueelement.getAttribute'lang' ) );
							                                    },
						                                    commit : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                        {
								                                            if ( this.getValue() || this.isChanged() )
								                                                element.setAttribute'lang'this.getValue() );
								                                        }
							                                    }
						                                }
					                            ]
					                        },
				                        {
					                            type 'text',
					                            id 'txtGenLongDescr',
					                            label editor.lang.common.longDescr,
					                            setup : function( typeelement )
					                            {
						                                if ( type == IMAGE )
						                                    this.setValueelement.getAttribute'longDesc' ) );
						                            },
					                            commit : function( typeelement )
					                            {
						                                if ( type == IMAGE )
						                                {
							                                    if ( this.getValue() || this.isChanged() )
							                                        element.setAttribute'longDesc'this.getValue() );
							                                }
						                            }
					                        },
				                        {
					                            type 'hbox',
					                            widths : [ '50%''50%' ],
					                            children :
					                            [
					                                {
						                                    type 'text',
						                                    id 'txtGenClass',
						                                    label editor.lang.common.cssClass,
						                                    'default' '',
						                                    setup : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                            this.setValueelement.getAttribute'class' ) );
							                                    },
						                                    commit : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                        {
								                                            if ( this.getValue() || this.isChanged() )
								                                                element.setAttribute'class'this.getValue() );
								                                        }
							                                    }
						                                },
					                                {
						                                    type 'text',
						                                    id 'txtGenTitle',
						                                    label editor.lang.common.advisoryTitle,
						                                    'default' '',
						                                    onChange : function()
						                                    {
							                                        updatePreviewthis.getDialog() );
							                                    },
						                                    setup : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                            this.setValueelement.getAttribute'title' ) );
							                                    },
						                                    commit : function( typeelement )
						                                    {
							                                        if ( type == IMAGE )
							                                        {
								                                            if ( this.getValue() || this.isChanged() )
								                                                element.setAttribute'title'this.getValue() );
								                                        }
							                                        else if ( type == PREVIEW )
							                                        {
								                                            element.setAttribute'title'this.getValue() );
								                                        }
							                                        else if ( type == CLEANUP )
							                                        {
								                                            element.removeAttribute'title' );
								                                        }
							                                    }
						                                }
					                            ]
					                        },
				                        {
					                            type 'text',
					                            id 'txtdlgGenStyle',
					                            label editor.lang.common.cssStyle,
					                            'default' '',
					                            setup : function( typeelement )
					                            {
						                                if ( type == IMAGE )
						                                {
							                                    var genStyle element.getAttribute'style' );
							                                    if ( !genStyle && element.$.style.cssText )
							                                        genStyle element.$.style.cssText;
							                                    this.setValuegenStyle );
							                                    var height element.$.style.height,
							                                        width element.$.style.width,
							                                        aMatchH  = ( height height '' ).matchregexGetSize ),
							                                        aMatchW  = ( width width '').matchregexGetSize );
							                                    this.attributesInStyle =
							                                    {
								                                        height : !!aMatchH,
								                                        width : !!aMatchW
								                                    };
							                                }
						                            },
					                            onChange : function ()
					                            {
						                                commitInternally.callthis,
						                                    [ 'info:cmbFloat''info:cmbAlign',
						                                      'info:txtVSpace''info:txtHSpace',
						                                      'info:txtBorder',
						                                      'info:txtWidth''info:txtHeight' ] );
						                                updatePreviewthis );
						                            },
					                            commit : function( typeelement )
					                            {
						                                if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
						                                {
							                                    element.setAttribute'style'this.getValue() );
							                                }
						                            }
					                        }
				                    ]
				                }
			            ]
			        };
		    };
	    CKEDITOR.dialog.add'image', function( editor )
	        {
		            return imageDialogeditor'image' );
		        });
	    CKEDITOR.dialog.add'imagebutton', function( editor )
	        {
		            return imageDialogeditor'imagebutton' );
		        });
	})();





PHP Demo Source Code Index