1 /*
  2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5
  6 /**
  7  * @fileOverview The "showblocks" plugin. Enable it will make all block level
  8  *               elements being decorated with a border and the element name
  9  *               displayed on the left-right corner.
 10  */
 11
 12 (function()
 13 {
 14 	var cssTemplate = '.%2 p,'+
 15 		'.%2 div,'+
 16 		'.%2 pre,'+
 17 		'.%2 address,'+
 18 		'.%2 blockquote,'+
 19 		'.%2 h1,'+
 20 		'.%2 h2,'+
 21 		'.%2 h3,'+
 22 		'.%2 h4,'+
 23 		'.%2 h5,'+
 24 		'.%2 h6'+
 25 		'{'+
 26 			'background-repeat: no-repeat;'+
 27 			'border: 1px dotted gray;'+
 28 			'padding-top: 8px;'+
 29 			'padding-left: 8px;'+
 30 		'}'+
 31
 32 		'.%2 p'+
 33 		'{'+
 34 			'%1p.png);'+
 35 		'}'+
 36
 37 		'.%2 div'+
 38 		'{'+
 39 			'%1div.png);'+
 40 		'}'+
 41
 42 		'.%2 pre'+
 43 		'{'+
 44 			'%1pre.png);'+
 45 		'}'+
 46
 47 		'.%2 address'+
 48 		'{'+
 49 			'%1address.png);'+
 50 		'}'+
 51
 52 		'.%2 blockquote'+
 53 		'{'+
 54 			'%1blockquote.png);'+
 55 		'}'+
 56
 57 		'.%2 h1'+
 58 		'{'+
 59 			'%1h1.png);'+
 60 		'}'+
 61
 62 		'.%2 h2'+
 63 		'{'+
 64 			'%1h2.png);'+
 65 		'}'+
 66
 67 		'.%2 h3'+
 68 		'{'+
 69 			'%1h3.png);'+
 70 		'}'+
 71
 72 		'.%2 h4'+
 73 		'{'+
 74 			'%1h4.png);'+
 75 		'}'+
 76
 77 		'.%2 h5'+
 78 		'{'+
 79 			'%1h5.png);'+
 80 		'}'+
 81
 82 		'.%2 h6'+
 83 		'{'+
 84 			'%1h6.png);'+
 85 		'}';
 86
 87 	var cssTemplateRegex = /%1/g, cssClassRegex = /%2/g;
 88
 89 	var commandDefinition =
 90 	{
 91 		exec : function ( editor )
 92 		{
 93 			var isOn = ( this.state == CKEDITOR.TRISTATE_ON );
 94 			var funcName = isOn ? 'removeClass' : 'addClass';
 95 			editor.document.getBody()[funcName]( 'cke_show_blocks' );
 96
 97 			this.toggleState();
 98 			editor._.showBlocks = !isOn;
 99 		}
100 	};
101
102 	CKEDITOR.plugins.add( 'showblocks',
103 	{
104 		requires : [ 'wysiwygarea' ],
105
106 		init : function( editor )
107 		{
108 			var command = editor.addCommand( 'showblocks', commandDefinition );
109
110 			editor.addCss( cssTemplate
111 				.replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )
112 				   .replace( cssClassRegex, 'cke_show_blocks ' ) );
113
114 			// Set a flag in the editor object for remembering the show block state on
115 			// mode switches.
116 			editor._.showBlocks = editor.config.startupOutlineBlocks;
117
118 			editor.ui.addButton( 'ShowBlocks',
119 				{
120 					label : editor.lang.showBlocks,
121 					command : 'showblocks'
122 				} );
123
124 			editor.on( 'contentDom', function()
125 			{
126 				// Restore show blocks state after mode switches.
127 				command.setState( CKEDITOR.TRISTATE_OFF );
128 				if ( this._.showBlocks )
129 					command.exec();
130 			} );
131 		}
132 	});
133 } )();
134
135 CKEDITOR.config.startupOutlineBlocks = false;
136