_source/plugins/tab/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 (function()\r
   7 {\r
   8         var meta =\r
   9         {\r
  10                 editorFocus : false,\r
  11                 modes : { wysiwyg:1, source:1 }\r
  12         };\r
  13 \r
  14         var blurCommand =\r
  15                 {\r
  16                         exec : function( editor )\r
  17                         {\r
  18                                 editor.container.focusNext( true, editor.tabIndex );\r
  19                         }\r
  20                 };\r
  21 \r
  22         var blurBackCommand =\r
  23                 {\r
  24                         exec : function( editor )\r
  25                         {\r
  26                                 editor.container.focusPrevious( true, editor.tabIndex );\r
  27                         }\r
  28                 };\r
  29 \r
  30         function selectNextCellCommand( backward )\r
  31         {\r
  32                 return {\r
  33                         editorFocus : false,\r
  34                         canUndo : false,\r
  35                         modes : { wysiwyg : 1 },\r
  36                         exec : function( editor )\r
  37                         {\r
  38                                 if ( editor.focusManager.hasFocus )\r
  39                                 {\r
  40                                         var sel = editor.getSelection(),\r
  41                                                 ancestor = sel.getCommonAncestor(),\r
  42                                                 cell;\r
  43 \r
  44                                         if ( ( cell = ( ancestor.getAscendant( 'td', true ) || ancestor.getAscendant( 'th', true ) ) ) )\r
  45                                         {\r
  46                                                 var resultRange = new CKEDITOR.dom.range( editor.document ),\r
  47                                                                 next = CKEDITOR.tools.tryThese( function()\r
  48                                                                 {\r
  49                                                                         var row = cell.getParent(),\r
  50                                                                                         next = row.$.cells[ cell.$.cellIndex + ( backward ? - 1 : 1 ) ];\r
  51 \r
  52                                                                         // Invalid any empty value.\r
  53                                                                         next.parentNode.parentNode;\r
  54                                                                         return next;\r
  55                                                                 },\r
  56                                                                 function()\r
  57                                                                 {\r
  58                                                                         var row = cell.getParent(),\r
  59                                                                                         table = row.getAscendant( 'table' ),\r
  60                                                                                         nextRow = table.$.rows[ row.$.rowIndex + ( backward ? - 1 : 1 ) ];\r
  61 \r
  62                                                                         return nextRow.cells[ backward? nextRow.cells.length -1 : 0 ];\r
  63                                                                 });\r
  64 \r
  65                                                 // Clone one more row at the end of table and select the first newly established cell.\r
  66                                                 if ( ! ( next || backward ) )\r
  67                                                 {\r
  68                                                         var table = cell.getAscendant( 'table' ).$,\r
  69                                                                         cells = cell.getParent().$.cells;\r
  70 \r
  71                                                         var newRow = new CKEDITOR.dom.element( table.insertRow( -1 ), editor.document );\r
  72 \r
  73                                                         for ( var i = 0, count = cells.length ; i < count; i++ )\r
  74                                                         {\r
  75                                                                 var newCell = newRow.append( new CKEDITOR.dom.element(\r
  76                                                                                 cells[ i ], editor.document ).clone( false, false ) );\r
  77                                                                 !CKEDITOR.env.ie && newCell.appendBogus();\r
  78                                                         }\r
  79 \r
  80                                                         resultRange.moveToElementEditStart( newRow );\r
  81                                                 }\r
  82                                                 else if ( next )\r
  83                                                 {\r
  84                                                         next = new CKEDITOR.dom.element( next );\r
  85                                                         resultRange.moveToElementEditStart( next );\r
  86                                                         // Avoid selecting empty block makes the cursor blind.\r
  87                                                         if ( !( resultRange.checkStartOfBlock() && resultRange.checkEndOfBlock() ) )\r
  88                                                                 resultRange.selectNodeContents( next );\r
  89                                                 }\r
  90                                                 else\r
  91                                                         return true;\r
  92 \r
  93                                                 resultRange.select( true );\r
  94                                                 return true;\r
  95                                         }\r
  96                                 }\r
  97                                 return false;\r
  98                         }\r
  99                 };\r
 100         }\r
 101 \r
 102         CKEDITOR.plugins.add( 'tab',\r
 103         {\r
 104                 requires : [ 'keystrokes' ],\r
 105 \r
 106                 init : function( editor )\r
 107                 {\r
 108                         var tabTools = editor.config.enableTabKeyTools !== false,\r
 109                                 tabSpaces = editor.config.tabSpaces || 0,\r
 110                                 tabText = '';\r
 111 \r
 112                         while ( tabSpaces-- )\r
 113                                 tabText += '\xa0';\r
 114 \r
 115                         if ( tabText )\r
 116                         {\r
 117                                 editor.on( 'key', function( ev )\r
 118                                         {\r
 119                                                 if ( ev.data.keyCode == 9 )     // TAB\r
 120                                                 {\r
 121                                                         editor.insertHtml( tabText );\r
 122                                                         ev.cancel();\r
 123                                                 }\r
 124                                         });\r
 125                         }\r
 126 \r
 127                         if ( tabTools )\r
 128                         {\r
 129                                 editor.on( 'key', function( ev )\r
 130                                 {\r
 131                                         if ( ev.data.keyCode == 9 && editor.execCommand( 'selectNextCell' ) ||  // TAB\r
 132                                                         ev.data.keyCode == ( CKEDITOR.SHIFT + 9 ) && editor.execCommand( 'selectPreviousCell' ) )       // SHIFT+TAB\r
 133                                                 ev.cancel();\r
 134                                 });\r
 135                         }\r
 136 \r
 137                         if ( CKEDITOR.env.webkit || CKEDITOR.env.gecko )\r
 138                         {\r
 139                                 editor.on( 'key', function( ev )\r
 140                                         {\r
 141                                                 var keyCode = ev.data.keyCode;\r
 142 \r
 143                                                 if ( keyCode == 9 && !tabText )                         // TAB\r
 144                                                 {\r
 145                                                         ev.cancel();\r
 146                                                         editor.execCommand( 'blur' );\r
 147                                                 }\r
 148 \r
 149                                                 if ( keyCode == ( CKEDITOR.SHIFT + 9 ) )        // SHIFT+TAB\r
 150                                                 {\r
 151                                                         editor.execCommand( 'blurBack' );\r
 152                                                         ev.cancel();\r
 153                                                 }\r
 154                                         });\r
 155                         }\r
 156 \r
 157                         editor.addCommand( 'blur', CKEDITOR.tools.extend( blurCommand, meta ) );\r
 158                         editor.addCommand( 'blurBack', CKEDITOR.tools.extend( blurBackCommand, meta ) );\r
 159                         editor.addCommand( 'selectNextCell', selectNextCellCommand() );\r
 160                         editor.addCommand( 'selectPreviousCell', selectNextCellCommand( true ) );\r
 161                 }\r
 162         });\r
 163 })();\r
 164 \r
 165 /**\r
 166  * Moves the UI focus to the element following this element in the tabindex\r
 167  * order.\r
 168  * @example\r
 169  * var element = CKEDITOR.document.getById( 'example' );\r
 170  * element.focusNext();\r
 171  */\r
 172 CKEDITOR.dom.element.prototype.focusNext = function( ignoreChildren, indexToUse )\r
 173 {\r
 174         var $ = this.$,\r
 175                 curTabIndex = ( indexToUse === undefined ? this.getTabIndex() : indexToUse ),\r
 176                 passedCurrent, enteredCurrent,\r
 177                 elected, electedTabIndex,\r
 178                 element, elementTabIndex;\r
 179 \r
 180         if ( curTabIndex <= 0 )\r
 181         {\r
 182                 // If this element has tabindex <= 0 then we must simply look for any\r
 183                 // element following it containing tabindex=0.\r
 184 \r
 185                 element = this.getNextSourceNode( ignoreChildren, CKEDITOR.NODE_ELEMENT );\r
 186 \r
 187                 while ( element )\r
 188                 {\r
 189                         if ( element.isVisible() && element.getTabIndex() === 0 )\r
 190                         {\r
 191                                 elected = element;\r
 192                                 break;\r
 193                         }\r
 194 \r
 195                         element = element.getNextSourceNode( false, CKEDITOR.NODE_ELEMENT );\r
 196                 }\r
 197         }\r
 198         else\r
 199         {\r
 200                 // If this element has tabindex > 0 then we must look for:\r
 201                 //              1. An element following this element with the same tabindex.\r
 202                 //              2. The first element in source other with the lowest tabindex\r
 203                 //                 that is higher than this element tabindex.\r
 204                 //              3. The first element with tabindex=0.\r
 205 \r
 206                 element = this.getDocument().getBody().getFirst();\r
 207 \r
 208                 while ( ( element = element.getNextSourceNode( false, CKEDITOR.NODE_ELEMENT ) ) )\r
 209                 {\r
 210                         if ( !passedCurrent )\r
 211                         {\r
 212                                 if ( !enteredCurrent && element.equals( this ) )\r
 213                                 {\r
 214                                         enteredCurrent = true;\r
 215 \r
 216                                         // Ignore this element, if required.\r
 217                                         if ( ignoreChildren )\r
 218                                         {\r
 219                                                 if ( !( element = element.getNextSourceNode( true, CKEDITOR.NODE_ELEMENT ) ) )\r
 220                                                         break;\r
 221                                                 passedCurrent = 1;\r
 222                                         }\r
 223                                 }\r
 224                                 else if ( enteredCurrent && !this.contains( element ) )\r
 225                                         passedCurrent = 1;\r
 226                         }\r
 227 \r
 228                         if ( !element.isVisible() || ( elementTabIndex = element.getTabIndex() ) < 0 )\r
 229                                 continue;\r
 230 \r
 231                         if ( passedCurrent && elementTabIndex == curTabIndex )\r
 232                         {\r
 233                                 elected = element;\r
 234                                 break;\r
 235                         }\r
 236 \r
 237                         if ( elementTabIndex > curTabIndex && ( !elected || !electedTabIndex || elementTabIndex < electedTabIndex ) )\r
 238                         {\r
 239                                 elected = element;\r
 240                                 electedTabIndex = elementTabIndex;\r
 241                         }\r
 242                         else if ( !elected && elementTabIndex === 0 )\r
 243                         {\r
 244                                 elected = element;\r
 245                                 electedTabIndex = elementTabIndex;\r
 246                         }\r
 247                 }\r
 248         }\r
 249 \r
 250         if ( elected )\r
 251                 elected.focus();\r
 252 };\r
 253 \r
 254 /**\r
 255  * Moves the UI focus to the element before this element in the tabindex order.\r
 256  * @example\r
 257  * var element = CKEDITOR.document.getById( 'example' );\r
 258  * element.focusPrevious();\r
 259  */\r
 260 CKEDITOR.dom.element.prototype.focusPrevious = function( ignoreChildren, indexToUse )\r
 261 {\r
 262         var $ = this.$,\r
 263                 curTabIndex = ( indexToUse === undefined ? this.getTabIndex() : indexToUse ),\r
 264                 passedCurrent, enteredCurrent,\r
 265                 elected,\r
 266                 electedTabIndex = 0,\r
 267                 elementTabIndex;\r
 268 \r
 269         var element = this.getDocument().getBody().getLast();\r
 270 \r
 271         while ( ( element = element.getPreviousSourceNode( false, CKEDITOR.NODE_ELEMENT ) ) )\r
 272         {\r
 273                 if ( !passedCurrent )\r
 274                 {\r
 275                         if ( !enteredCurrent && element.equals( this ) )\r
 276                         {\r
 277                                 enteredCurrent = true;\r
 278 \r
 279                                 // Ignore this element, if required.\r
 280                                 if ( ignoreChildren )\r
 281                                 {\r
 282                                         if ( !( element = element.getPreviousSourceNode( true, CKEDITOR.NODE_ELEMENT ) ) )\r
 283                                                 break;\r
 284                                         passedCurrent = 1;\r
 285                                 }\r
 286                         }\r
 287                         else if ( enteredCurrent && !this.contains( element ) )\r
 288                                 passedCurrent = 1;\r
 289                 }\r
 290 \r
 291                 if ( !element.isVisible() || ( elementTabIndex = element.getTabIndex() ) < 0 )\r
 292                         continue;\r
 293 \r
 294                 if ( curTabIndex <= 0 )\r
 295                 {\r
 296                         // If this element has tabindex <= 0 then we must look for:\r
 297                         //              1. An element before this one containing tabindex=0.\r
 298                         //              2. The last element with the highest tabindex.\r
 299 \r
 300                         if ( passedCurrent && elementTabIndex === 0 )\r
 301                         {\r
 302                                 elected = element;\r
 303                                 break;\r
 304                         }\r
 305 \r
 306                         if ( elementTabIndex > electedTabIndex )\r
 307                         {\r
 308                                 elected = element;\r
 309                                 electedTabIndex = elementTabIndex;\r
 310                         }\r
 311                 }\r
 312                 else\r
 313                 {\r
 314                         // If this element has tabindex > 0 we must look for:\r
 315                         //              1. An element preceeding this one, with the same tabindex.\r
 316                         //              2. The last element in source other with the highest tabindex\r
 317                         //                 that is lower than this element tabindex.\r
 318 \r
 319                         if ( passedCurrent && elementTabIndex == curTabIndex )\r
 320                         {\r
 321                                 elected = element;\r
 322                                 break;\r
 323                         }\r
 324 \r
 325                         if ( elementTabIndex < curTabIndex && ( !elected || elementTabIndex > electedTabIndex ) )\r
 326                         {\r
 327                                 elected = element;\r
 328                                 electedTabIndex = elementTabIndex;\r
 329                         }\r
 330                 }\r
 331         }\r
 332 \r
 333         if ( elected )\r
 334                 elected.focus();\r
 335 };\r
 336 \r
 337 /**\r
 338  * Intructs the editor to add a number of spaces (&amp;nbsp;) to the text when\r
 339  * hitting the TAB key. If set to zero, the TAB key will be used to move the\r
 340  * cursor focus to the next element in the page, out of the editor focus.\r
 341  * @name CKEDITOR.config.tabSpaces\r
 342  * @type Number\r
 343  * @default 0\r
 344  * @example\r
 345  * config.tabSpaces = 4;\r
 346  */\r
 347 \r
 348 /**\r
 349  * Allow context-sensitive tab key behaviors, including the following scenarios:\r
 350  * <h5>When selection is anchored inside <b>table cells</b>:</h5>\r
 351  * <ul>\r
 352  *              <li>If TAB is pressed, select the contents of the "next" cell. If in the last cell in the table, add a new row to it and focus its first cell.</li>\r
 353  *              <li>If SHIFT+TAB is pressed, select the contents of the "previous" cell. Do nothing when it's in the first cell.</li>\r
 354  * </ul>\r
 355  * @name CKEDITOR.config.enableTabKeyTools\r
 356  * @type Boolean\r
 357  * @default true\r
 358  * @example\r
 359  * config.enableTabKeyTools = false;\r
 360  */\r
 361 \r
 362 // If the TAB key is not supposed to be enabled for navigation, the following\r
 363 // settings could be used alternatively:\r
 364 // config.keystrokes.push(\r
 365 //      [ CKEDITOR.ALT + 38 /*Arrow Up*/, 'selectPreviousCell' ],\r
 366 //      [ CKEDITOR.ALT + 40 /*Arrow Down*/, 'selectNextCell' ]\r
 367 // );\r