2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
7 * @fileOverview The "elementspath" plugin. It shows all elements in the DOM
8 * parent tree relative to the current selection in the editing area.
17 exec : function( editor )
19 var idBase = editor._.elementsPath.idBase;
20 var element = CKEDITOR.document.getById( idBase + '0' );
22 // Make the first button focus accessible for IE. (#3417)
23 // Adobe AIR instead need while of delay.
24 element && element.focus( CKEDITOR.env.ie || CKEDITOR.env.air );
29 var emptyHtml = '<span class="cke_empty"> </span>';
31 CKEDITOR.plugins.add( 'elementspath',
33 requires : [ 'selection' ],
35 init : function( editor )
37 var spaceId = 'cke_path_' + editor.name;
39 var getSpaceElement = function()
42 spaceElement = CKEDITOR.document.getById( spaceId );
46 var idBase = 'cke_elementspath_' + CKEDITOR.tools.getNextNumber() + '_';
48 editor._.elementsPath = { idBase : idBase, filters : [] };
50 editor.on( 'themeSpace', function( event )
52 if ( event.data.space == 'bottom' )
55 '<span id="' + spaceId + '_label" class="cke_voice_label">' + editor.lang.elementsPath.eleLabel + '</span>' +
56 '<div id="' + spaceId + '" class="cke_path" role="group" aria-labelledby="' + spaceId + '_label">' + emptyHtml + '</div>';
60 function onClick( elementIndex )
63 var element = editor._.elementsPath.list[ elementIndex ];
64 if ( element.is( 'body' ) )
66 var range = new CKEDITOR.dom.range( editor.document );
67 range.selectNodeContents( element );
71 editor.getSelection().selectElement( element );
74 var onClickHanlder = CKEDITOR.tools.addFunction( onClick );
76 var onKeyDownHandler = CKEDITOR.tools.addFunction( function( elementIndex, ev )
78 var idBase = editor._.elementsPath.idBase,
81 ev = new CKEDITOR.dom.event( ev );
83 var rtl = editor.lang.dir == 'rtl';
84 switch ( ev.getKeystroke() )
86 case rtl ? 39 : 37 : // LEFT-ARROW
88 element = CKEDITOR.document.getById( idBase + ( elementIndex + 1 ) );
90 element = CKEDITOR.document.getById( idBase + '0' );
94 case rtl ? 37 : 39 : // RIGHT-ARROW
95 case CKEDITOR.SHIFT + 9 : // SHIFT + TAB
96 element = CKEDITOR.document.getById( idBase + ( elementIndex - 1 ) );
98 element = CKEDITOR.document.getById( idBase + ( editor._.elementsPath.list.length - 1 ) );
106 case 13 : // ENTER // Opera
108 onClick( elementIndex );
114 editor.on( 'selectionChange', function( ev )
116 var env = CKEDITOR.env,
117 selection = ev.data.selection,
118 element = selection.getStartElement(),
121 elementsList = editor._.elementsPath.list = [],
122 filters = editor._.elementsPath.filters;
127 for ( var i = 0; i < filters.length; i++ )
129 if ( filters[ i ]( element ) === false )
138 var index = elementsList.push( element ) - 1;
140 if ( element.data( 'cke-real-element-type' ) )
141 name = element.data( 'cke-real-element-type' );
143 name = element.getName();
145 // Use this variable to add conditional stuff to the
146 // HTML (because we are doing it in reverse order... unshift).
149 // Some browsers don't cancel key events in the keydown but in the
151 // TODO: Check if really needed for Gecko+Mac.
152 if ( env.opera || ( env.gecko && env.mac ) )
153 extra += ' onkeypress="return false;"';
155 // With Firefox, we need to force the button to redraw, otherwise it
156 // will remain in the focus state.
158 extra += ' onblur="this.style.cssText = this.style.cssText;"';
160 var label = editor.lang.elementsPath.eleTitle.replace( /%1/, name );
163 ' id="', idBase, index, '"' +
164 ' href="javascript:void(\'', name, '\')"' +
166 ' title="', label, '"' +
167 ( ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 ) ?
168 ' onfocus="event.preventBubble();"' : '' ) +
169 ' hidefocus="true" ' +
170 ' onkeydown="return CKEDITOR.tools.callFunction(', onKeyDownHandler, ',', index, ', event );"' +
172 ' onclick="CKEDITOR.tools.callFunction('+ onClickHanlder, ',', index, '); return false;"',
173 ' role="button" aria-labelledby="' + idBase + index + '_label">',
175 '<span id="', idBase, index, '_label" class="cke_label">' + label + '</span>',
180 if ( name == 'body' )
183 element = element.getParent();
186 var space = getSpaceElement();
187 space.setHtml( html.join('') + emptyHtml );
188 editor.fire( 'elementsPathUpdate', { space : space } );
191 editor.on( 'contentDomUnload', function()
193 // If the spaceElement hasn't been initialized, don't try to do it at this time
194 // Only reuse existing reference.
195 spaceElement && spaceElement.setHtml( emptyHtml );
198 editor.addCommand( 'elementsPathFocus', commands.toolbarFocus );
204 * Fired when the contents of the elementsPath are changed
205 * @name CKEDITOR.editor#elementsPathUpdate
207 * @param {Object} eventData.space The elementsPath container