_source/plugins/tab/plugin.js

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