_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                                 if ( element )\r
  23                                         element.focus();\r
  24                         }\r
  25                 }\r
  26         };\r
  27 \r
  28         var emptyHtml = '<span class="cke_empty">&nbsp;</span>';\r
  29 \r
  30         CKEDITOR.plugins.add( 'elementspath',\r
  31         {\r
  32                 requires : [ 'selection' ],\r
  33 \r
  34                 init : function( editor )\r
  35                 {\r
  36                         var spaceId = 'cke_path_' + editor.name;\r
  37                         var spaceElement;\r
  38                         var getSpaceElement = function()\r
  39                         {\r
  40                                 if ( !spaceElement )\r
  41                                         spaceElement = CKEDITOR.document.getById( spaceId );\r
  42                                 return spaceElement;\r
  43                         };\r
  44 \r
  45                         var idBase = 'cke_elementspath_' + CKEDITOR.tools.getNextNumber() + '_';\r
  46 \r
  47                         editor._.elementsPath = { idBase : idBase };\r
  48 \r
  49                         editor.on( 'themeSpace', function( event )\r
  50                                 {\r
  51                                         if ( event.data.space == 'bottom' )\r
  52                                                 event.data.html += '<div id="' + spaceId + '" class="cke_path">' + emptyHtml + '</div>';\r
  53                                 });\r
  54 \r
  55                         editor.on( 'selectionChange', function( ev )\r
  56                                 {\r
  57                                         var env = CKEDITOR.env;\r
  58 \r
  59                                         var selection = ev.data.selection;\r
  60 \r
  61                                         var element = selection.getStartElement(),\r
  62                                                 html = [],\r
  63                                                 elementsList = this._.elementsPath.list = [];\r
  64 \r
  65                                         while ( element )\r
  66                                         {\r
  67                                                 var index = elementsList.push( element ) - 1;\r
  68                                                 var name;\r
  69                                                 if ( element.getAttribute( '_cke_real_element_type' ) )\r
  70                                                         name = element.getAttribute( '_cke_real_element_type' );\r
  71                                                 else\r
  72                                                         name = element.getName();\r
  73 \r
  74                                                 // Use this variable to add conditional stuff to the\r
  75                                                 // HTML (because we are doing it in reverse order... unshift).\r
  76                                                 var extra = '';\r
  77 \r
  78                                                 // Some browsers don't cancel key events in the keydown but in the\r
  79                                                 // keypress.\r
  80                                                 // TODO: Check if really needed for Gecko+Mac.\r
  81                                                 if ( env.opera || ( env.gecko && env.mac ) )\r
  82                                                         extra += ' onkeypress="return false;"';\r
  83 \r
  84                                                 // With Firefox, we need to force the button to redraw, otherwise it\r
  85                                                 // will remain in the focus state.\r
  86                                                 if ( env.gecko )\r
  87                                                         extra += ' onblur="this.style.cssText = this.style.cssText;"';\r
  88 \r
  89                                                 html.unshift(\r
  90                                                         '<a' +\r
  91                                                                 ' id="', idBase, index, '"' +\r
  92                                                                 ' href="javascript:void(\'', name, '\')"' +\r
  93                                                                 ' tabindex="-1"' +\r
  94                                                                 ' title="', editor.lang.elementsPath.eleTitle.replace( /%1/, name ), '"' +\r
  95                                                                 ( ( CKEDITOR.env.gecko && CKEDITOR.env.version < 10900 ) ?\r
  96                                                                 ' onfocus="event.preventBubble();"' : '' ) +\r
  97                                                                 ' hidefocus="true" ' +\r
  98                                                                 ' onkeydown="return CKEDITOR._.elementsPath.keydown(\'', this.name, '\',', index, ', event);"' +\r
  99                                                                 extra ,\r
 100                                                                 ' onclick="return CKEDITOR._.elementsPath.click(\'', this.name, '\',', index, ');">',\r
 101                                                                         name,\r
 102                                                         '</a>' );\r
 103 \r
 104                                                 if ( name == 'body' )\r
 105                                                         break;\r
 106 \r
 107                                                 element = element.getParent();\r
 108                                         }\r
 109 \r
 110                                         getSpaceElement().setHtml( html.join('') + emptyHtml );\r
 111                                 });\r
 112 \r
 113                         editor.on( 'contentDomUnload', function()\r
 114                                 {\r
 115                                         getSpaceElement().setHtml( emptyHtml );\r
 116                                 });\r
 117 \r
 118                         editor.addCommand( 'elementsPathFocus', commands.toolbarFocus );\r
 119                 }\r
 120         });\r
 121 })();\r
 122 \r
 123 /**\r
 124  * Handles the click on an element in the element path.\r
 125  * @private\r
 126  */\r
 127 CKEDITOR._.elementsPath =\r
 128 {\r
 129         click : function( instanceName, elementIndex )\r
 130         {\r
 131                 var editor = CKEDITOR.instances[ instanceName ];\r
 132                 editor.focus();\r
 133 \r
 134                 var element = editor._.elementsPath.list[ elementIndex ];\r
 135                 editor.getSelection().selectElement( element );\r
 136 \r
 137                 return false;\r
 138         },\r
 139 \r
 140         keydown : function( instanceName, elementIndex, ev )\r
 141         {\r
 142                 var instance = CKEDITOR.ui.button._.instances[ elementIndex ];\r
 143                 var editor = CKEDITOR.instances[ instanceName ];\r
 144                 var idBase = editor._.elementsPath.idBase;\r
 145 \r
 146                 var element;\r
 147 \r
 148                 ev = new CKEDITOR.dom.event( ev );\r
 149 \r
 150                 switch ( ev.getKeystroke() )\r
 151                 {\r
 152                         case 37 :                                       // LEFT-ARROW\r
 153                         case 9 :                                        // TAB\r
 154                                 element = CKEDITOR.document.getById( idBase + ( elementIndex + 1 ) );\r
 155                                 if ( !element )\r
 156                                         element = CKEDITOR.document.getById( idBase + '0' );\r
 157                                 element.focus();\r
 158                                 return false;\r
 159 \r
 160                         case 39 :                                       // RIGHT-ARROW\r
 161                         case CKEDITOR.SHIFT + 9 :       // SHIFT + TAB\r
 162                                 element = CKEDITOR.document.getById( idBase + ( elementIndex - 1 ) );\r
 163                                 if ( !element )\r
 164                                         element = CKEDITOR.document.getById( idBase + ( editor._.elementsPath.list.length - 1 ) );\r
 165                                 element.focus();\r
 166                                 return false;\r
 167 \r
 168                         case 27 :                                       // ESC\r
 169                                 editor.focus();\r
 170                                 return false;\r
 171 \r
 172                         case 13 :                                       // ENTER        // Opera\r
 173                         case 32 :                                       // SPACE\r
 174                                 this.click( instanceName, elementIndex );\r
 175                                 return false;\r
 176 \r
 177                         //default :\r
 178                         //      alert( ev.getKeystroke() );\r
 179                 }\r
 180                 return true;\r
 181         }\r
 182 };\r