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

PHP Demo Application - Source Code

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



/*
Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
(function()
{
	    var widthPattern = /^(\d+(?:\.\d+)?)(px|%)$/,
	        heightPattern = /^(\d+(?:\.\d+)?)px$/;
	    var commitValue = function( data )
	    {
		        var id this.id;
		        if ( !data.info )
		            data.info {};
		        data.info[id] = this.getValue();
		    };
	    function tableDialogeditorcommand )
	    {
		        var makeElement = function( name )
		            {
			                return new CKEDITOR.dom.elementnameeditor.document );
			            };
		        var dialogadvtab editor.plugins.dialogadvtab;
		        return {
			            title editor.lang.table.title,
			            minWidth 310,
			            minHeight CKEDITOR.env.ie 310 280,
			            onLoad : function()
			            {
				                var dialog this;
				                var styles dialog.getContentElement'advanced''advStyles' );
				                if ( styles )
				                {
					                    styles.on'change', function( evt )
					                        {
						                            // Synchronize width value.
						                            var width this.getStyle'width''' ),
						                                txtWidth dialog.getContentElement'info''txtWidth' ),
						                                cmbWidthType dialog.getContentElement'info''cmbWidthType' ),
						                                isPx 1;
						                            if ( width )
						                            {
							                                isPx = ( width.length || width.substrwidth.length ) != '%' );
							                                width parseIntwidth10 );
							                            }
						                            txtWidth && txtWidth.setValuewidthtrue );
						                            cmbWidthType && cmbWidthType.setValueisPx 'pixels' 'percents'true );
						                            // Synchronize height value.
						                            var height this.getStyle'height''' ),
						                                txtHeight dialog.getContentElement'info''txtHeight' );
						                            height && ( height parseIntheight10 ) );
						                            txtHeight && txtHeight.setValueheighttrue );
						                        });
					                }
				            },
			            onShow : function()
			            {
				                // Detect if there's a selected table.
				                var selection editor.getSelection(),
				                    ranges selection.getRanges(),
				                    selectedTable null;
				                var rowsInput this.getContentElement'info''txtRows' ),
				                    colsInput this.getContentElement'info''txtCols' ),
				                    widthInput this.getContentElement'info''txtWidth' ),
				                    heightInput this.getContentElement'info''txtHeight' );
				                if ( command == 'tableProperties' )
				                {
					                    if ( ( selectedTable selection.getSelectedElement() ) )
					                        selectedTable selectedTable.getAscendant'table'true );
					                    else if ( ranges.length )
					                    {
						                        // Webkit could report the following range on cell selection (#4948):
						                        // <table><tr><td>[&nbsp;
						</td></tr></table>]
						                        if ( CKEDITOR.env.webkit )
						                            ranges].shrinkCKEDITOR.NODE_ELEMENT );
						                        var rangeRoot ranges[0].getCommonAncestortrue );
						                        selectedTable rangeRoot.getAscendant'table'true );
						                    }
					                    // Save a reference to the selected table, and push a new set of default values.
					                    this._.selectedElement selectedTable;
					                }
				                // Enable or disable the row, cols, width fields.
				                if ( selectedTable )
				                {
					                    this.setupContentselectedTable );
					                    rowsInput && rowsInput.disable();
					                    colsInput && colsInput.disable();
					                }
				                else
				                {
					                    rowsInput && rowsInput.enable();
					                    colsInput && colsInput.enable();
					                }
				                // Call the onChange method for the widht and height fields so
				                // they get reflected into the Advanced tab.
				                widthInput && widthInput.onChange();
				                heightInput && heightInput.onChange();
				            },
			            onOk : function()
			            {
				                if ( this._.selectedElement )
				                {
					                    var selection editor.getSelection(),
					                        bms selection.createBookmarks();
					                }
				                var table this._.selectedElement || makeElement'table' ),
				                    me this,
				                    data {};
				                this.commitContentdatatable );
				                if ( data.info )
				                {
					                    var info data.info;
					                    // Generate the rows and cols.
					                    if ( !this._.selectedElement )
					                    {
						                        var tbody table.appendmakeElement'tbody' ) ),
						                            rows parseIntinfo.txtRows10 ) || 0,
						                            cols parseIntinfo.txtCols10 ) || 0;
						                        for ( var ;
						 rows ;
						 i++ )
						                        {
							                            var row tbody.appendmakeElement'tr' ) );
							                            for ( var ;
							 cols ;
							 j++ )
							                            {
								                                var cell row.appendmakeElement'td' ) );
								                                if ( !CKEDITOR.env.ie )
								                                    cell.appendmakeElement'br' ) );
								                            }
							                        }
						                    }
					                    // Modify the table headers. Depends on having rows and cols generated
					                    // correctly so it can't be done in commit functions.
					                    // Should we make a <thead>?
					                    var headers info.selHeaders;
					                    if ( !table.$.tHead && ( headers == 'row' || headers == 'both' ) )
					                    {
						                        var thead = new CKEDITOR.dom.elementtable.$.createTHead() );
						                        tbody table.getElementsByTag'tbody' ).getItem);
						                        var theRow tbody.getElementsByTag'tr' ).getItem);
						                        // Change TD to TH:
						                        for ( ;
						 theRow.getChildCount() ;
						 i++ )
						                        {
							                            var th theRow.getChild);
							                            // Skip bookmark nodes. (#6155)
							                            if ( th.type == CKEDITOR.NODE_ELEMENT && !th.hasAttribute'_cke_bookmark' ) )
							                            {
								                                th.renameNode'th' );
								                                th.setAttribute'scope''col' );
								                            }
							                        }
						                        thead.appendtheRow.remove() );
						                    }
					                    if ( table.$.tHead !== null && !( headers == 'row' || headers == 'both' ) )
					                    {
						                        // Move the row out of the THead and put it in the TBody:
						                        thead = new CKEDITOR.dom.elementtable.$.tHead );
						                        tbody table.getElementsByTag'tbody' ).getItem);
						                        var previousFirstRow tbody.getFirst();
						                        while ( thead.getChildCount() > )
						                        {
							                            theRow thead.getFirst();
							                            for ( 0;
							 theRow.getChildCount() ;
							 i++ )
							                            {
								                                var newCell theRow.getChild);
								                                if ( newCell.type == CKEDITOR.NODE_ELEMENT )
								                                {
									                                    newCell.renameNode'td' );
									                                    newCell.removeAttribute'scope' );
									                                }
								                            }
							                            theRow.insertBeforepreviousFirstRow );
							                        }
						                        thead.remove();
						                    }
					                    // Should we make all first cells in a row TH?
					                    if ( !this.hasColumnHeaders && ( headers == 'col' || headers == 'both' ) )
					                    {
						                        for ( row ;
						 row table.$.rows.length ;
						 row++ )
						                        {
							                            newCell = new CKEDITOR.dom.elementtable.$.rowsrow ].cells] );
							                            newCell.renameNode'th' );
							                            newCell.setAttribute'scope''row' );
							                        }
						                    }
					                    // Should we make all first TH-cells in a row make TD? If 'yes' we do it the other way round :-)
					                    if ( ( this.hasColumnHeaders ) && !( headers == 'col' || headers == 'both' ) )
					                    {
						                        for ( ;
						 table.$.rows.length ;
						 i++ )
						                        {
							                            row = new CKEDITOR.dom.elementtable.$.rows[i] );
							                            if ( row.getParent().getName() == 'tbody' )
							                            {
								                                newCell = new CKEDITOR.dom.elementrow.$.cells[0] );
								                                newCell.renameNode'td' );
								                                newCell.removeAttribute'scope' );
								                            }
							                        }
						                    }
					                    // Set the width and height.
					                    var styles [];
					                    if ( info.txtHeight )
					                        table.setStyle'height'CKEDITOR.tools.cssLengthinfo.txtHeight ) );
					                    else
					                        table.removeStyle'height' );
					                    if ( info.txtWidth )
					                    {
						                        var type info.cmbWidthType || 'pixels';
						                        table.setStyle'width'info.txtWidth + ( type == 'pixels' 'px' '%' ) );
						                    }
					                    else
					                        table.removeStyle'width' );
					                    if ( !table.getAttribute'style' ) )
					                        table.removeAttribute'style' );
					                }
				                // Insert the table element if we're creating one.
				                if ( !this._.selectedElement )
				                    editor.insertElementtable );
				                // Properly restore the selection inside table. (#4822)
				                else
				                    selection.selectBookmarksbms );
				                return true;
				            },
			            contents : [
			                {
				                    id 'info',
				                    label editor.lang.table.title,
				                    elements :
				                    [
				                        {
					                            type 'hbox',
					                            widths : [ nullnull ],
					                            styles : [ 'vertical-align:top' ],
					                            children :
					                            [
					                                {
						                                    type 'vbox',
						                                    padding 0,
						                                    children :
						                                    [
						                                        {
							                                            type 'text',
							                                            id 'txtRows',
							                                            'default' 3,
							                                            label editor.lang.table.rows,
							                                            required true,
							                                            style 'width:5em',
							                                            validate : function()
							                                            {
								                                                var pass true,
								                                                    value this.getValue();
								                                                pass pass && CKEDITOR.dialog.validate.integer()( value )
								                                                    && value 0;
								                                                if ( !pass )
								                                                {
									                                                    alerteditor.lang.table.invalidRows );
									                                                    this.select();
									                                                }
								                                                return pass;
								                                            },
							                                            setup : function( selectedElement )
							                                            {
								                                                this.setValueselectedElement.$.rows.length );
								                                            },
							                                            commit commitValue
							                                        },
						                                        {
							                                            type 'text',
							                                            id 'txtCols',
							                                            'default' 2,
							                                            label editor.lang.table.columns,
							                                            required true,
							                                            style 'width:5em',
							                                            validate : function()
							                                            {
								                                                var pass true,
								                                                    value this.getValue();
								                                                pass pass && CKEDITOR.dialog.validate.integer()( value )
								                                                    && value 0;
								                                                if ( !pass )
								                                                {
									                                                    alerteditor.lang.table.invalidCols );
									                                                    this.select();
									                                                }
								                                                return pass;
								                                            },
							                                            setup : function( selectedTable )
							                                            {
								                                                this.setValueselectedTable.$.rows[0].cells.length);
								                                            },
							                                            commit commitValue
							                                        },
						                                        {
							                                            type 'html',
							                                            html '&nbsp;
							'
							                                        },
						                                        {
							                                            type 'select',
							                                            id 'selHeaders',
							                                            'default' '',
							                                            label editor.lang.table.headers,
							                                            items :
							                                            [
							                                                [ editor.lang.table.headersNone'' ],
							                                                [ editor.lang.table.headersRow'row' ],
							                                                [ editor.lang.table.headersColumn'col' ],
							                                                [ editor.lang.table.headersBoth'both' ]
							                                            ],
							                                            setup : function( selectedTable )
							                                            {
								                                                // Fill in the headers field.
								                                                var dialog this.getDialog();
								                                                dialog.hasColumnHeaders true;
								                                                // Check if all the first cells in every row are TH
								                                                for ( var row ;
								 row selectedTable.$.rows.length ;
								 row++ )
								                                                {
									                                                    // If just one cell isn't a TH then it isn't a header column
									                                                    if ( selectedTable.$.rows[row].cells[0].nodeName.toLowerCase() != 'th' )
									                                                    {
										                                                        dialog.hasColumnHeaders false;
										                                                        break;
										                                                    }
									                                                }
								                                                // Check if the table contains <thead>.
								                                                if ( ( selectedTable.$.tHead !== null) )
								                                                    this.setValuedialog.hasColumnHeaders 'both' 'row' );
								                                                else
								                                                    this.setValuedialog.hasColumnHeaders 'col' '' );
								                                            },
							                                            commit commitValue
							                                        },
						                                        {
							                                            type 'text',
							                                            id 'txtBorder',
							                                            'default' 1,
							                                            label editor.lang.table.border,
							                                            style 'width:3em',
							                                            validate CKEDITOR.dialog.validate['number']( editor.lang.table.invalidBorder ),
							                                            setup : function( selectedTable )
							                                            {
								                                                this.setValueselectedTable.getAttribute'border' ) || '' );
								                                            },
							                                            commit : function( dataselectedTable )
							                                            {
								                                                if ( this.getValue() )
								                                                    selectedTable.setAttribute'border'this.getValue() );
								                                                else
								                                                    selectedTable.removeAttribute'border' );
								                                            }
							                                        },
						                                        {
							                                            id 'cmbAlign',
							                                            type 'select',
							                                            'default' '',
							                                            label editor.lang.table.align,
							                                            items :
							                                            [
							                                                [ editor.lang.common.notSet ''],
							                                                [ editor.lang.table.alignLeft 'left'],
							                                                [ editor.lang.table.alignCenter 'center'],
							                                                [ editor.lang.table.alignRight 'right']
							                                            ],
							                                            setup : function( selectedTable )
							                                            {
								                                                this.setValueselectedTable.getAttribute'align' ) || '' );
								                                            },
							                                            commit : function( dataselectedTable )
							                                            {
								                                                if ( this.getValue() )
								                                                    selectedTable.setAttribute'align'this.getValue() );
								                                                else
								                                                    selectedTable.removeAttribute'align' );
								                                            }
							                                        }
						                                    ]
						                                },
					                                {
						                                    type 'vbox',
						                                    padding 0,
						                                    children :
						                                    [
						                                        {
							                                            type 'hbox',
							                                            widths : [ '5em' ],
							                                            children :
							                                            [
							                                                {
								                                                    type 'text',
								                                                    id 'txtWidth',
								                                                    style 'width:5em',
								                                                    label editor.lang.table.width,
								                                                    'default' 500,
								                                                    validate CKEDITOR.dialog.validate['number']( editor.lang.table.invalidWidth ),
								                                                    // Extra labelling of width unit type.
								                                                    onLoad : function()
								                                                    {
									                                                        var widthType this.getDialog().getContentElement'info''cmbWidthType' ),
									                                                            labelElement widthType.getElement(),
									                                                            inputElement this.getInputElement(),
									                                                            ariaLabelledByAttr inputElement.getAttribute'aria-labelledby' );
									                                                        inputElement.setAttribute'aria-labelledby', [ ariaLabelledByAttrlabelElement.$.id ].join' ' ) );
									                                                    },
								                                                    onChange : function()
								                                                    {
									                                                        var styles this.getDialog().getContentElement'advanced''advStyles' );
									                                                        if ( styles )
									                                                        {
										                                                            var value this.getValue();
										                                                            if ( value )
										                                                                value += this.getDialog().getContentElement'info''cmbWidthType' ).getValue() == 'percents' '%' 'px';
										                                                            styles.updateStyle'width'value );
										                                                        }
									                                                    },
								                                                    setup : function( selectedTable )
								                                                    {
									                                                        var widthMatch widthPattern.execselectedTable.$.style.width );
									                                                        if ( widthMatch )
									                                                            this.setValuewidthMatch[1] );
									                                                        else
									                                                            this.setValue'' );
									                                                    },
								                                                    commit commitValue
								                                                },
							                                                {
								                                                    id 'cmbWidthType',
								                                                    type 'select',
								                                                    label editor.lang.table.widthUnit,
								                                                    labelStyle'visibility:hidden',
								                                                    'default' 'pixels',
								                                                    items :
								                                                    [
								                                                        [ editor.lang.table.widthPx 'pixels'],
								                                                        [ editor.lang.table.widthPc 'percents']
								                                                    ],
								                                                    setup : function( selectedTable )
								                                                    {
									                                                        var widthMatch widthPattern.execselectedTable.$.style.width );
									                                                        if ( widthMatch )
									                                                            this.setValuewidthMatch[2] == 'px' 'pixels' 'percents' );
									                                                    },
								                                                    onChange : function()
								                                                    {
									                                                        this.getDialog().getContentElement'info''txtWidth' ).onChange();
									                                                    },
								                                                    commit commitValue
								                                                }
							                                            ]
							                                        },
						                                        {
							                                            type 'hbox',
							                                            widths : [ '5em' ],
							                                            children :
							                                            [
							                                                {
								                                                    type 'text',
								                                                    id 'txtHeight',
								                                                    style 'width:5em',
								                                                    label editor.lang.table.height,
								                                                    'default' '',
								                                                    validate CKEDITOR.dialog.validate['number']( editor.lang.table.invalidHeight ),
								                                                    // Extra labelling of height unit type.
								                                                    onLoad : function()
								                                                    {
									                                                        var heightType this.getDialog().getContentElement'info''htmlHeightType' ),
									                                                            labelElement heightType.getElement(),
									                                                            inputElement this.getInputElement(),
									                                                            ariaLabelledByAttr inputElement.getAttribute'aria-labelledby' );
									                                                        inputElement.setAttribute'aria-labelledby', [ ariaLabelledByAttrlabelElement.$.id ].join' ' ) );
									                                                    },
								                                                    onChange : function()
								                                                    {
									                                                        var styles this.getDialog().getContentElement'advanced''advStyles' );
									                                                        if ( styles )
									                                                        {
										                                                            var value this.getValue();
										                                                            styles.updateStyle'height'value && ( value 'px' ) );
										                                                        }
									                                                    },
								                                                    setup : function( selectedTable )
								                                                    {
									                                                        var heightMatch heightPattern.execselectedTable.$.style.height );
									                                                        if ( heightMatch )
									                                                            this.setValueheightMatch[1] );
									                                                    },
								                                                    commit commitValue
								                                                },
							                                                {
								                                                    id 'htmlHeightType',
								                                                    type 'html',
								                                                    html '<div><br />' editor.lang.table.widthPx '</div>'
								                                                }
							                                            ]
							                                        },
						                                        {
							                                            type 'html',
							                                            html '&nbsp;
							'
							                                        },
						                                        {
							                                            type 'text',
							                                            id 'txtCellSpace',
							                                            style 'width:3em',
							                                            label editor.lang.table.cellSpace,
							                                            'default' 1,
							                                            validate CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellSpacing ),
							                                            setup : function( selectedTable )
							                                            {
								                                                this.setValueselectedTable.getAttribute'cellSpacing' ) || '' );
								                                            },
							                                            commit : function( dataselectedTable )
							                                            {
								                                                if ( this.getValue() )
								                                                    selectedTable.setAttribute'cellSpacing'this.getValue() );
								                                                else
								                                                    selectedTable.removeAttribute'cellSpacing' );
								                                            }
							                                        },
						                                        {
							                                            type 'text',
							                                            id 'txtCellPad',
							                                            style 'width:3em',
							                                            label editor.lang.table.cellPad,
							                                            'default' 1,
							                                            validate CKEDITOR.dialog.validate['number']( editor.lang.table.invalidCellPadding ),
							                                            setup : function( selectedTable )
							                                            {
								                                                this.setValueselectedTable.getAttribute'cellPadding' ) || '' );
								                                            },
							                                            commit : function( dataselectedTable )
							                                            {
								                                                if ( this.getValue() )
								                                                    selectedTable.setAttribute'cellPadding'this.getValue() );
								                                                else
								                                                    selectedTable.removeAttribute'cellPadding' );
								                                            }
							                                        }
						                                    ]
						                                }
					                            ]
					                        },
				                        {
					                            type 'html',
					                            align 'right',
					                            html ''
					                        },
				                        {
					                            type 'vbox',
					                            padding 0,
					                            children :
					                            [
					                                {
						                                    type 'text',
						                                    id 'txtCaption',
						                                    label editor.lang.table.caption,
						                                    setup : function( selectedTable )
						                                    {
							                                        var nodeList selectedTable.getElementsByTag'caption' );
							                                        if ( nodeList.count() > )
							                                        {
								                                            var caption nodeList.getItem);
								                                            caption = ( caption.getChild) && caption.getChild).getText() ) || '';
								                                            caption CKEDITOR.tools.trimcaption );
								                                            this.setValuecaption );
								                                        }
							                                    },
						                                    commit : function( datatable )
						                                    {
							                                        var caption this.getValue(),
							                                            captionElement table.getElementsByTag'caption' );
							                                        if ( caption )
							                                        {
								                                            if ( captionElement.count() > )
								                                            {
									                                                captionElement captionElement.getItem);
									                                                captionElement.setHtml'' );
									                                            }
								                                            else
								                                            {
									                                                captionElement = new CKEDITOR.dom.element'caption'editor.document );
									                                                if ( table.getChildCount() )
									                                                    captionElement.insertBeforetable.getFirst() );
									                                                else
									                                                    captionElement.appendTotable );
									                                            }
								                                            captionElement.append( new CKEDITOR.dom.textcaptioneditor.document ) );
								                                        }
							                                        else if ( captionElement.count() > )
							                                        {
								                                            for ( var captionElement.count() - ;
								 >= ;
								 i-- )
								                                                captionElement.getItem).remove();
								                                        }
							                                    }
						                                },
					                                {
						                                    type 'text',
						                                    id 'txtSummary',
						                                    label editor.lang.table.summary,
						                                    setup : function( selectedTable )
						                                    {
							                                        this.setValueselectedTable.getAttribute'summary' ) || '' );
							                                    },
						                                    commit : function( dataselectedTable )
						                                    {
							                                        if ( this.getValue() )
							                                            selectedTable.setAttribute'summary'this.getValue() );
							                                        else
							                                            selectedTable.removeAttribute'summary' );
							                                    }
						                                }
					                            ]
					                        }
				                    ]
				                },
			                dialogadvtab && dialogadvtab.createAdvancedTabeditor )
			            ]
			        };
		    }
	    CKEDITOR.dialog.add'table', function( editor )
	        {
		            return tableDialogeditor'table' );
		        } );
	    CKEDITOR.dialog.add'tableProperties', function( editor )
	        {
		            return tableDialogeditor'tableProperties' );
		        } );
	})();





PHP Demo Source Code Index