ckeditor/_source/plugins/elementspath/plugin.js

   1 /*
   2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.html or http://ckeditor.com/license
   4 */
   5
   6 /**
   7  * @fileOverview The "elementspath" plugin. It shows all elements in the DOM
   8  *              parent tree relative to the current selection in the editing area.
   9  */
  10
  11 (function()
  12 {
  13         var commands =
  14         {
  15                 toolbarFocus :
  16                 {
  17                         exec : function( editor )
  18                         {
  19                                 var idBase = editor._.elementsPath.idBase;
  20                                 var element = CKEDITOR.document.getById( idBase + '0' );
  21
  22                                 if ( element )
  23                                         element.focus();
  24                         }
  25                 }
  26         };
  27
  28         var emptyHtml = '<span class="cke_empty">&nbsp;</span>';
  29
  30         CKEDITOR.plugins.add( 'elementspath',
  31         {
  32                 requires : [ 'selection' ],
  33
  34                 init : function( editor )
  35                 {
  36                         var spaceId = 'cke_path_' + editor.name;
  37                         var spaceElement;
  38                         var getSpaceElement = function()
  39                         {
  40                                 if ( !spaceElement )
  41                                         spaceElement = CKEDITOR.document.getById( spaceId );
  42                                 return spaceElement;
  43                         };
  44
  45                         var idBase = 'cke_elementspath_' + CKEDITOR.tools.getNextNumber() + '_';
  46
  47                         editor._.elementsPath = { idBase : idBase, filters : [] };
  48
  49                         editor.on( 'themeSpace', function( event )
  50                                 {
  51                                         if ( event.data.space == 'bottom' )
  52                                         {
  53                                                 event.data.html +=
  54                                                         '<span id="' + spaceId + '_label" class="cke_voice_label">' + editor.lang.elementsPath.eleLabel + '</span>' +
  55                                                         '<div id="' + spaceId + '" class="cke_path" role="group" aria-labelledby="' + spaceId + '_label">' + emptyHtml + '</div>';
  56                                         }
  57                                 });
  58
  59                         editor.on( 'selectionChange', function( ev )
  60                                 {
  61                                         var env = CKEDITOR.env,
  62                                                 selection = ev.data.selection,
  63                                                 element = selection.getStartElement(),
  64                                                 html = [],
  65                                                 editor = ev.editor,
  66                                                 elementsList = editor._.elementsPath.list = [],
  67                                                 filters = editor._.elementsPath.filters;
  68
  69                                         while ( element )
  70                                         {
  71                                                 var ignore = 0;
  72                                                 for ( var i = 0; i < filters.length; i++ )
  73                                                 {
  74                                                         if ( filters[ i ]( element ) === false )
  75                                                         {
  76                                                                 ignore = 1;
  77                                                                 break;
  78                                                         }
  79                                                 }
  80
  81                                                 if ( !ignore )
  82                                                 {
  83                                                         var index = elementsList.push( element ) - 1;
  84                                                         var name;
  85                                                         if ( element.getAttribute( '_cke_real_element_type' ) )
  86                                                                 name = element.getAttribute( '_cke_real_element_type' );
  87                                                         else
  88                                                                 name = element.getName();
  89
  90                                                         // Use this variable to add conditional stuff to the
  91                                                         // HTML (because we are doing it in reverse order... unshift).
  92                                                         var extra = '';
  93
  94                                                         // Some browsers don't cancel key events in the keydown but in the
  95                                                         // keypress.
  96                                                         // TODO: Check if really needed for Gecko+Mac.
  97                                                         if ( env.opera || ( env.gecko && env.mac ) )
  98                                                                 extra += ' onkeypress="return false;"';
  99
 100                                                         // With Firefox, we need to force the button to redraw, otherwise it
 101                                                         // will remain in the focus state.
 102                                                         if ( env.gecko )
 103                                                                 extra += ' onblur="this.style.cssText = this.style.cssText;"';
 104
 105                                                         var label = editor.lang.elementsPath.eleTitle.replace( /%1/, name );
 106                                                         html.unshift(
 107                                                                 '<a' +
 108                                                                         ' id="', idBase, index, '"' +
 109                                                                         ' href="javascript:void(\'', name, '\')"' +
 110                                                                         ' tabindex="-1"' +
 111                                                                         ' title="', label, '"' +
 112                                                                         ( ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 ) ?
 113                                                                         ' onfocus="event.preventBubble();"' : '' ) +
 114                                                                         ' hidefocus="true" ' +
 115                                                                         ' onkeydown="return CKEDITOR._.elementsPath.keydown(\'', editor.name, '\',', index, ', event);"' +
 116                                                                         extra ,
 117                                                                         ' onclick="return CKEDITOR._.elementsPath.click(\'', editor.name, '\',', index, ');"',
 118                                                                         ' role="button" aria-labelledby="' + idBase + index + '_label">',
 119                                                                                 name,
 120                                                                                 '<span id="', idBase, index, '_label" class="cke_label">' + label + '</span>',
 121                                                                 '</a>' );
 122
 123                                                 }
 124
 125                                                 if ( name == 'body' )
 126                                                         break;
 127
 128                                                 element = element.getParent();
 129                                         }
 130
 131                                         getSpaceElement().setHtml( html.join('') + emptyHtml );
 132                                 });
 133
 134                         editor.on( 'contentDomUnload', function()
 135                                 {
 136                                         getSpaceElement().setHtml( emptyHtml );
 137                                 });
 138
 139                         editor.addCommand( 'elementsPathFocus', commands.toolbarFocus );
 140                 }
 141         });
 142 })();
 143
 144 /**
 145  * Handles the click on an element in the element path.
 146  * @private
 147  */
 148 CKEDITOR._.elementsPath =
 149 {
 150         click : function( instanceName, elementIndex )
 151         {
 152                 var editor = CKEDITOR.instances[ instanceName ];
 153                 editor.focus();
 154
 155                 var element = editor._.elementsPath.list[ elementIndex ];
 156                 editor.getSelection().selectElement( element );
 157
 158                 return false;
 159         },
 160
 161         keydown : function( instanceName, elementIndex, ev )
 162         {
 163                 var instance = CKEDITOR.ui.button._.instances[ elementIndex ];
 164                 var editor = CKEDITOR.instances[ instanceName ];
 165                 var idBase = editor._.elementsPath.idBase;
 166
 167                 var element;
 168
 169                 ev = new CKEDITOR.dom.event( ev );
 170
 171                 switch ( ev.getKeystroke() )
 172                 {
 173                         case 37 :                                       // LEFT-ARROW
 174                         case 9 :                                        // TAB
 175                                 element = CKEDITOR.document.getById( idBase + ( elementIndex + 1 ) );
 176                                 if ( !element )
 177                                         element = CKEDITOR.document.getById( idBase + '0' );
 178                                 element.focus();
 179                                 return false;
 180
 181                         case 39 :                                       // RIGHT-ARROW
 182                         case CKEDITOR.SHIFT + 9 :       // SHIFT + TAB
 183                                 element = CKEDITOR.document.getById( idBase + ( elementIndex - 1 ) );
 184                                 if ( !element )
 185                                         element = CKEDITOR.document.getById( idBase + ( editor._.elementsPath.list.length - 1 ) );
 186                                 element.focus();
 187                                 return false;
 188
 189                         case 27 :                                       // ESC
 190                                 editor.focus();
 191                                 return false;
 192
 193                         case 13 :                                       // ENTER        // Opera
 194                         case 32 :                                       // SPACE
 195                                 this.click( instanceName, elementIndex );
 196                                 return false;
 197
 198                         //default :
 199                         //      alert( ev.getKeystroke() );
 200                 }
 201                 return true;
 202         }
 203 };