_source/plugins/elementspath/plugin.js

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