JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
cbec3141b36f5ed607d72b4ae1d62a4f7e822829
[ckeditor.git] / _source / plugins / showblocks / plugin.js
1 /*\r
2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
4 */\r
5 \r
6 /**\r
7  * @fileOverview The "showblocks" plugin. Enable it will make all block level\r
8  *               elements being decorated with a border and the element name\r
9  *               displayed on the left-right corner.\r
10  */\r
11 \r
12 (function()\r
13 {\r
14         var cssTemplate = '.%2 p,'+\r
15                 '.%2 div,'+\r
16                 '.%2 pre,'+\r
17                 '.%2 address,'+\r
18                 '.%2 blockquote,'+\r
19                 '.%2 h1,'+\r
20                 '.%2 h2,'+\r
21                 '.%2 h3,'+\r
22                 '.%2 h4,'+\r
23                 '.%2 h5,'+\r
24                 '.%2 h6'+\r
25                 '{'+\r
26                         'background-repeat: no-repeat;'+\r
27                         'background-position: top %3;'+\r
28                         'border: 1px dotted gray;'+\r
29                         'padding-top: 8px;'+\r
30                         'padding-%3: 8px;'+\r
31                 '}'+\r
32 \r
33                 '.%2 p'+\r
34                 '{'+\r
35                         '%1p.png);'+\r
36                 '}'+\r
37 \r
38                 '.%2 div'+\r
39                 '{'+\r
40                         '%1div.png);'+\r
41                 '}'+\r
42 \r
43                 '.%2 pre'+\r
44                 '{'+\r
45                         '%1pre.png);'+\r
46                 '}'+\r
47 \r
48                 '.%2 address'+\r
49                 '{'+\r
50                         '%1address.png);'+\r
51                 '}'+\r
52 \r
53                 '.%2 blockquote'+\r
54                 '{'+\r
55                         '%1blockquote.png);'+\r
56                 '}'+\r
57 \r
58                 '.%2 h1'+\r
59                 '{'+\r
60                         '%1h1.png);'+\r
61                 '}'+\r
62 \r
63                 '.%2 h2'+\r
64                 '{'+\r
65                         '%1h2.png);'+\r
66                 '}'+\r
67 \r
68                 '.%2 h3'+\r
69                 '{'+\r
70                         '%1h3.png);'+\r
71                 '}'+\r
72 \r
73                 '.%2 h4'+\r
74                 '{'+\r
75                         '%1h4.png);'+\r
76                 '}'+\r
77 \r
78                 '.%2 h5'+\r
79                 '{'+\r
80                         '%1h5.png);'+\r
81                 '}'+\r
82 \r
83                 '.%2 h6'+\r
84                 '{'+\r
85                         '%1h6.png);'+\r
86                 '}';\r
87 \r
88         var cssTemplateRegex = /%1/g, cssClassRegex = /%2/g, backgroundPositionRegex = /%3/g;\r
89 \r
90         var commandDefinition =\r
91         {\r
92                 preserveState : true,\r
93                 editorFocus : false,\r
94 \r
95                 exec : function ( editor )\r
96                 {\r
97                         this.toggleState();\r
98                         this.refresh( editor );\r
99                 },\r
100 \r
101                 refresh : function( editor )\r
102                 {\r
103                         var funcName = ( this.state == CKEDITOR.TRISTATE_ON ) ? 'addClass' : 'removeClass';\r
104                         editor.document.getBody()[ funcName ]( 'cke_show_blocks' );\r
105                 }\r
106         };\r
107 \r
108         CKEDITOR.plugins.add( 'showblocks',\r
109         {\r
110                 requires : [ 'wysiwygarea' ],\r
111 \r
112                 init : function( editor )\r
113                 {\r
114                         var command = editor.addCommand( 'showblocks', commandDefinition );\r
115                         command.canUndo = false;\r
116 \r
117                         if ( editor.config.startupOutlineBlocks )\r
118                                 command.setState( CKEDITOR.TRISTATE_ON );\r
119 \r
120                         editor.addCss( cssTemplate\r
121                                 .replace( cssTemplateRegex, 'background-image: url(' + CKEDITOR.getUrl( this.path ) + 'images/block_' )\r
122                                 .replace( cssClassRegex, 'cke_show_blocks ' )\r
123                                 .replace( backgroundPositionRegex, editor.lang.dir == 'rtl' ? 'right' : 'left' ) );\r
124 \r
125                         editor.ui.addButton( 'ShowBlocks',\r
126                                 {\r
127                                         label : editor.lang.showBlocks,\r
128                                         command : 'showblocks'\r
129                                 });\r
130 \r
131                         // Refresh the command on setData.\r
132                         editor.on( 'mode', function()\r
133                                 {\r
134                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
135                                                 command.refresh( editor );\r
136                                 });\r
137 \r
138                         // Refresh the command on setData.\r
139                         editor.on( 'contentDom', function()\r
140                                 {\r
141                                         if ( command.state != CKEDITOR.TRISTATE_DISABLED )\r
142                                                 command.refresh( editor );\r
143                                 });\r
144                 }\r
145         });\r
146 } )();\r
147 \r
148 /**\r
149  * Whether to automaticaly enable the "show block" command when the editor\r
150  * loads. (StartupShowBlocks in FCKeditor)\r
151  * @name CKEDITOR.config.startupOutlineBlocks\r
152  * @type Boolean\r
153  * @default false\r
154  * @example\r
155  * config.startupOutlineBlocks = true;\r
156  */\r