[Summary view] [Print] [Text view]

   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                      // If the spaceElement hasn't been initialized, don't try to do it at this time

 137                      // Only reuse existing reference.

 138                      spaceElement && spaceElement.setHtml( emptyHtml );
 139                  });
 140  
 141              editor.addCommand( 'elementsPathFocus', commands.toolbarFocus );
 142          }
 143      });
 144  })();
 145  
 146  /**

 147   * Handles the click on an element in the element path.

 148   * @private

 149   */
 150  CKEDITOR._.elementsPath =
 151  {
 152      click : function( instanceName, elementIndex )
 153      {
 154          var editor = CKEDITOR.instances[ instanceName ];
 155          editor.focus();
 156  
 157          var element = editor._.elementsPath.list[ elementIndex ];
 158          editor.getSelection().selectElement( element );
 159  
 160          return false;
 161      },
 162  
 163      keydown : function( instanceName, elementIndex, ev )
 164      {
 165          var instance = CKEDITOR.ui.button._.instances[ elementIndex ];
 166          var editor = CKEDITOR.instances[ instanceName ];
 167          var idBase = editor._.elementsPath.idBase;
 168  
 169          var element;
 170  
 171          ev = new CKEDITOR.dom.event( ev );
 172  
 173          var rtl = editor.lang.dir == 'rtl';
 174          switch ( ev.getKeystroke() )
 175          {
 176              case rtl ? 39 : 37 :                    // LEFT-ARROW
 177              case 9 :                    // TAB
 178                  element = CKEDITOR.document.getById( idBase + ( elementIndex + 1 ) );
 179                  if ( !element )
 180                      element = CKEDITOR.document.getById( idBase + '0' );
 181                  element.focus();
 182                  return false;
 183  
 184              case rtl ? 37 : 39 :                    // RIGHT-ARROW
 185              case CKEDITOR.SHIFT + 9 :    // SHIFT + TAB
 186                  element = CKEDITOR.document.getById( idBase + ( elementIndex - 1 ) );
 187                  if ( !element )
 188                      element = CKEDITOR.document.getById( idBase + ( editor._.elementsPath.list.length - 1 ) );
 189                  element.focus();
 190                  return false;
 191  
 192              case 27 :                    // ESC
 193                  editor.focus();
 194                  return false;
 195  
 196              case 13 :                    // ENTER    // Opera
 197              case 32 :                    // SPACE
 198                  this.click( instanceName, elementIndex );
 199                  return false;
 200  
 201              //default :

 202              //    alert( ev.getKeystroke() );

 203          }
 204          return true;
 205      }
 206  };