path: root/sources/plugins/showborders/plugin.js

/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

/**
 * @fileOverview The "show border" plugin. The command display visible outline
 * border line around all table elements if table doesn't have a none-zero 'border' attribute specified.
 */

( function() {
	var commandDefinition = {
		preserveState: true,
		editorFocus: false,
		readOnly: 1,

		exec: function( editor ) {
			this.toggleState();
			this.refresh( editor );
		},

		refresh: function( editor ) {
			if ( editor.document ) {
				var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'attachClass' : 'removeClass';
				editor.editable()[ funcName ]( 'cke_show_borders' );
			}
		}
	};

	var showBorderClassName = 'cke_show_border';

	CKEDITOR.plugins.add( 'showborders', {
		modes: { 'wysiwyg': 1 },

		onLoad: function() {
			var cssStyleText,
				cssTemplate =
			// TODO: For IE6, we don't have child selector support,
			// where nested table cells could be incorrect.
			( CKEDITOR.env.ie6Compat ? [
				'.%1 table.%2,',
				'.%1 table.%2 td, .%1 table.%2 th',
				'{',
				'border : #d3d3d3 1px dotted',
				'}'
			] : [
				'.%1 table.%2,',
				'.%1 table.%2 > tr > td, .%1 table.%2 > tr > th,',
				'.%1 table.%2 > tbody > tr > td, .%1 table.%2 > tbody > tr > th,',
				'.%1 table.%2 > thead > tr > td, .%1 table.%2 > thead > tr > th,',
				'.%1 table.%2 > tfoot > tr > td, .%1 table.%2 > tfoot > tr > th',
				'{',
				'border : #d3d3d3 1px dotted',
				'}'
			] ).join( '' );

			cssStyleText = cssTemplate.replace( /%2/g, showBorderClassName ).replace( /%1/g, 'cke_show_borders ' );

			CKEDITOR.addCss( cssStyleText );
		},

		init: function( editor ) {

			var command = editor.addCommand( 'showborders', commandDefinition );
			command.canUndo = false;

			if ( editor.config.startupShowBorders !== false )
				command.setState( CKEDITOR.TRISTATE_ON );

			// Refresh the command on setData.
			editor.on( 'mode', function() {
				if ( command.state != CKEDITOR.TRISTATE_DISABLED )
					command.refresh( editor );
			}, null, null, 100 );

			// Refresh the command on wysiwyg frame reloads.
			editor.on( 'contentDom', function() {
				if ( command.state != CKEDITOR.TRISTATE_DISABLED )
					command.refresh( editor );
			} );

			editor.on( 'removeFormatCleanup', function( evt ) {
				var element = evt.data;
				if ( editor.getCommand( 'showborders' ).state == CKEDITOR.TRISTATE_ON && element.is( 'table' ) && ( !element.hasAttribute( 'border' ) || parseInt( element.getAttribute( 'border' ), 10 ) <= 0 ) )
					element.addClass( showBorderClassName );
			} );
		},

		afterInit: function( editor ) {
			var dataProcessor = editor.dataProcessor,
				dataFilter = dataProcessor && dataProcessor.dataFilter,
				htmlFilter = dataProcessor && dataProcessor.htmlFilter;

			if ( dataFilter ) {
				dataFilter.addRules( {
					elements: {
						'table': function( element ) {
							var attributes = element.attributes,
								cssClass = attributes[ 'class' ],
								border = parseInt( attributes.border, 10 );

							if ( ( !border || border <= 0 ) && ( !cssClass || cssClass.indexOf( showBorderClassName ) == -1 ) )
								attributes[ 'class' ] = ( cssClass || '' ) + ' ' + showBorderClassName;
						}
					}
				} );
			}

			if ( htmlFilter ) {
				htmlFilter.addRules( {
					elements: {
						'table': function( table ) {
							var attributes = table.attributes,
								cssClass = attributes[ 'class' ];

							cssClass && ( attributes[ 'class' ] = cssClass.replace( showBorderClassName, '' ).replace( /\s{2}/, ' ' ).replace( /^\s+|\s+$/, '' ) );
						}
					}
				} );
			}
		}
	} );

	// Table dialog must be aware of it.
	CKEDITOR.on( 'dialogDefinition', function( ev ) {
		var dialogName = ev.data.name;

		if ( dialogName == 'table' || dialogName == 'tableProperties' ) {
			var dialogDefinition = ev.data.definition,
				infoTab = dialogDefinition.getContents( 'info' ),
				borderField = infoTab.get( 'txtBorder' ),
				originalCommit = borderField.commit;

			borderField.commit = CKEDITOR.tools.override( originalCommit, function( org ) {
				return function( data, selectedTable ) {
					org.apply( this, arguments );
					var value = parseInt( this.getValue(), 10 );
					selectedTable[ ( !value || value <= 0 ) ? 'addClass' : 'removeClass' ]( showBorderClassName );
				};
			} );

			var advTab = dialogDefinition.getContents( 'advanced' ),
				classField = advTab && advTab.get( 'advCSSClasses' );

			if ( classField ) {
				classField.setup = CKEDITOR.tools.override( classField.setup, function( originalSetup ) {
					return function() {
						originalSetup.apply( this, arguments );
						this.setValue( this.getValue().replace( /cke_show_border/, '' ) );
					};
				} );

				classField.commit = CKEDITOR.tools.override( classField.commit, function( originalCommit ) {
					return function( data, element ) {
						originalCommit.apply( this, arguments );

						if ( !parseInt( element.getAttribute( 'border' ), 10 ) )
							element.addClass( 'cke_show_border' );
					};
				} );
			}
		}
	} );

} )();

/**
 * Whether to automatically enable the "show borders" command when the editor loads.
 *
 *		config.startupShowBorders = false;
 *
 * @cfg {Boolean} [startupShowBorders=true]
 * @member CKEDITOR.config
 */