JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
4b90c8024de04a7bdfef3e792beec599eedb8529
[ckeditor.git] / _source / plugins / elementspath / 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 "elementspath" plugin. It shows all elements in the DOM\r
8  *              parent tree relative to the current selection in the editing area.\r
9  */\r
10 \r
11 (function()\r
12 {\r
13         var commands =\r
14         {\r
15                 toolbarFocus :\r
16                 {\r
17                         editorFocus : false,\r
18                         exec : function( editor )\r
19                         {\r
20                                 var idBase = editor._.elementsPath.idBase;\r
21                                 var element = CKEDITOR.document.getById( idBase + '0' );\r
22 \r
23                                 // Make the first button focus accessible for IE. (#3417)\r
24                                 // Adobe AIR instead need while of delay.\r
25                                 element && element.focus( CKEDITOR.env.ie || CKEDITOR.env.air );\r
26                         }\r
27                 }\r
28         };\r
29 \r
30         var emptyHtml = '<span class="cke_empty">&nbsp;</span>';\r
31 \r
32         CKEDITOR.plugins.add( 'elementspath',\r
33         {\r
34                 requires : [ 'selection' ],\r
35 \r
36                 init : function( editor )\r
37                 {\r
38                         var spaceId = 'cke_path_' + editor.name;\r
39                         var spaceElement;\r
40                         var getSpaceElement = function()\r
41                         {\r
42                                 if ( !spaceElement )\r
43                                         spaceElement = CKEDITOR.document.getById( spaceId );\r
44                                 return spaceElement;\r
45                         };\r
46 \r
47                         var idBase = 'cke_elementspath_' + CKEDITOR.tools.getNextNumber() + '_';\r
48 \r
49                         editor._.elementsPath = { idBase : idBase, filters : [] };\r
50 \r
51                         editor.on( 'themeSpace', function( event )\r
52                                 {\r
53                                         if ( event.data.space == 'bottom' )\r
54                                         {\r
55                                                 event.data.html +=\r
56                                                         '<span id="' + spaceId + '_label" class="cke_voice_label">' + editor.lang.elementsPath.eleLabel + '</span>' +\r
57                                                         '<div id="' + spaceId + '" class="cke_path" role="group" aria-labelledby="' + spaceId + '_label">' + emptyHtml + '</div>';\r
58                                         }\r
59                                 });\r
60 \r
61                         function onClick( elementIndex )\r
62                         {\r
63                                 editor.focus();\r
64                                 var element = editor._.elementsPath.list[ elementIndex ];\r
65                                 if ( element.is( 'body' ) )\r
66                                 {\r
67                                         var range = new CKEDITOR.dom.range( editor.document );\r
68                                         range.selectNodeContents( element );\r
69                                         range.select();\r
70                                 }\r
71                                 else\r
72                                         editor.getSelection().selectElement( element );\r
73                         }\r
74 \r
75                         var onClickHanlder = CKEDITOR.tools.addFunction( onClick );\r
76 \r
77                         var onKeyDownHandler = CKEDITOR.tools.addFunction( function( elementIndex, ev )\r
78                                 {\r
79                                         var idBase = editor._.elementsPath.idBase,\r
80                                                 element;\r
81 \r
82                                         ev = new CKEDITOR.dom.event( ev );\r
83 \r
84                                         var rtl = editor.lang.dir == 'rtl';\r
85                                         switch ( ev.getKeystroke() )\r
86                                         {\r
87                                                 case rtl ? 39 : 37 :            // LEFT-ARROW\r
88                                                 case 9 :                                        // TAB\r
89                                                         element = CKEDITOR.document.getById( idBase + ( elementIndex + 1 ) );\r
90                                                         if ( !element )\r
91                                                                 element = CKEDITOR.document.getById( idBase + '0' );\r
92                                                         element.focus();\r
93                                                         return false;\r
94 \r
95                                                 case rtl ? 37 : 39 :            // RIGHT-ARROW\r
96                                                 case CKEDITOR.SHIFT + 9 :       // SHIFT + TAB\r
97                                                         element = CKEDITOR.document.getById( idBase + ( elementIndex - 1 ) );\r
98                                                         if ( !element )\r
99                                                                 element = CKEDITOR.document.getById( idBase + ( editor._.elementsPath.list.length - 1 ) );\r
100                                                         element.focus();\r
101                                                         return false;\r
102 \r
103                                                 case 27 :                                       // ESC\r
104                                                         editor.focus();\r
105                                                         return false;\r
106 \r
107                                                 case 13 :                                       // ENTER        // Opera\r
108                                                 case 32 :                                       // SPACE\r
109                                                         onClick( elementIndex );\r
110                                                         return false;\r
111                                         }\r
112                                         return true;\r
113                                 });\r
114 \r
115                         editor.on( 'selectionChange', function( ev )\r
116                                 {\r
117                                         var env = CKEDITOR.env,\r
118                                                 selection = ev.data.selection,\r
119                                                 element = selection.getStartElement(),\r
120                                                 html = [],\r
121                                                 editor = ev.editor,\r
122                                                 elementsList = editor._.elementsPath.list = [],\r
123                                                 filters = editor._.elementsPath.filters;\r
124 \r
125                                         while ( element )\r
126                                         {\r
127                                                 var ignore = 0;\r
128                                                 for ( var i = 0; i < filters.length; i++ )\r
129                                                 {\r
130                                                         if ( filters[ i ]( element ) === false )\r
131                                                         {\r
132                                                                 ignore = 1;\r
133                                                                 break;\r
134                                                         }\r
135                                                 }\r
136 \r
137                                                 if ( !ignore )\r
138                                                 {\r
139                                                         var index = elementsList.push( element ) - 1;\r
140                                                         var name;\r
141                                                         if ( element.data( 'cke-real-element-type' ) )\r
142                                                                 name = element.data( 'cke-real-element-type' );\r
143                                                         else\r
144                                                                 name = element.getName();\r
145 \r
146                                                         // Use this variable to add conditional stuff to the\r
147                                                         // HTML (because we are doing it in reverse order... unshift).\r
148                                                         var extra = '';\r
149 \r
150                                                         // Some browsers don't cancel key events in the keydown but in the\r
151                                                         // keypress.\r
152                                                         // TODO: Check if really needed for Gecko+Mac.\r
153                                                         if ( env.opera || ( env.gecko && env.mac ) )\r
154                                                                 extra += ' onkeypress="return false;"';\r
155 \r
156                                                         // With Firefox, we need to force the button to redraw, otherwise it\r
157                                                         // will remain in the focus state.\r
158                                                         if ( env.gecko )\r
159                                                                 extra += ' onblur="this.style.cssText = this.style.cssText;"';\r
160 \r
161                                                         var label = editor.lang.elementsPath.eleTitle.replace( /%1/, name );\r
162                                                         html.unshift(\r
163                                                                 '<a' +\r
164                                                                         ' id="', idBase, index, '"' +\r
165                                                                         ' href="javascript:void(\'', name, '\')"' +\r
166                                                                         ' tabindex="-1"' +\r
167                                                                         ' title="', label, '"' +\r
168                                                                         ( ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 ) ?\r
169                                                                         ' onfocus="event.preventBubble();"' : '' ) +\r
170                                                                         ' hidefocus="true" ' +\r
171                                                                         ' onkeydown="return CKEDITOR.tools.callFunction(', onKeyDownHandler, ',', index, ', event );"' +\r
172                                                                         extra ,\r
173                                                                         ' onclick="CKEDITOR.tools.callFunction('+ onClickHanlder, ',', index, '); return false;"',\r
174                                                                         ' role="button" aria-labelledby="' + idBase + index + '_label">',\r
175                                                                                 name,\r
176                                                                                 '<span id="', idBase, index, '_label" class="cke_label">' + label + '</span>',\r
177                                                                 '</a>' );\r
178 \r
179                                                 }\r
180 \r
181                                                 if ( name == 'body' )\r
182                                                         break;\r
183 \r
184                                                 element = element.getParent();\r
185                                         }\r
186 \r
187                                         var space = getSpaceElement();\r
188                                         space.setHtml( html.join('') + emptyHtml );\r
189                                         editor.fire( 'elementsPathUpdate', { space : space } );\r
190                                 });\r
191 \r
192                         editor.on( 'contentDomUnload', function()\r
193                                 {\r
194                                         // If the spaceElement hasn't been initialized, don't try to do it at this time\r
195                                         // Only reuse existing reference.\r
196                                         spaceElement && spaceElement.setHtml( emptyHtml );\r
197                                 });\r
198 \r
199                         editor.addCommand( 'elementsPathFocus', commands.toolbarFocus );\r
200                 }\r
201         });\r
202 })();\r
203 \r
204 /**\r
205  * Fired when the contents of the elementsPath are changed\r
206  * @name CKEDITOR.editor#elementsPathUpdate\r
207  * @event\r
208  * @param {Object} eventData.space The elementsPath container\r
209  */\r