_source/plugins/specialchar/dialogs/specialchar.js

   1 /*\r
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.dialog.add( 'specialchar', function( editor )\r
   7 {\r
   8         /**\r
   9          * Simulate "this" of a dialog for non-dialog events.\r
  10          * @type {CKEDITOR.dialog}\r
  11          */\r
  12         var dialog,\r
  13                 lang = editor.lang.specialChar;\r
  14 \r
  15         var onChoice = function( evt )\r
  16         {\r
  17                 var target, value;\r
  18                 if ( evt.data )\r
  19                         target = evt.data.getTarget();\r
  20                 else\r
  21                         target = new CKEDITOR.dom.element( evt );\r
  22 \r
  23                 if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )\r
  24                 {\r
  25                         target.removeClass( "cke_light_background" );\r
  26                         dialog.hide();\r
  27 \r
  28                         // We must use "insertText" here to keep text styled.\r
  29                         var span = editor.document.createElement( 'span' );\r
  30                         span.setHtml( value );\r
  31                         editor.insertText( span.getText() );\r
  32                 }\r
  33         };\r
  34 \r
  35         var onClick = CKEDITOR.tools.addFunction( onChoice );\r
  36 \r
  37         var focusedNode;\r
  38 \r
  39         var onFocus = function( evt, target )\r
  40         {\r
  41                 var value;\r
  42                 target = target || evt.data.getTarget();\r
  43 \r
  44                 if ( target.getName() == 'span' )\r
  45                         target = target.getParent();\r
  46 \r
  47                 if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )\r
  48                 {\r
  49                         // Trigger blur manually if there is focused node.\r
  50                         if ( focusedNode )\r
  51                                 onBlur( null, focusedNode );\r
  52 \r
  53                         var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();\r
  54 \r
  55                         dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value );\r
  56                         htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );\r
  57                         target.getParent().addClass( "cke_light_background" );\r
  58 \r
  59                         // Memorize focused node.\r
  60                         focusedNode = target;\r
  61                 }\r
  62         };\r
  63 \r
  64         var onBlur = function( evt, target )\r
  65         {\r
  66                 target = target || evt.data.getTarget();\r
  67 \r
  68                 if ( target.getName() == 'span' )\r
  69                         target = target.getParent();\r
  70 \r
  71                 if ( target.getName() == 'a' )\r
  72                 {\r
  73                         dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( '&nbsp;' );\r
  74                         dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( '&nbsp;' );\r
  75                         target.getParent().removeClass( "cke_light_background" );\r
  76 \r
  77                         focusedNode = undefined;\r
  78                 }\r
  79         };\r
  80 \r
  81         var onKeydown = CKEDITOR.tools.addFunction( function( ev )\r
  82         {\r
  83                 ev = new CKEDITOR.dom.event( ev );\r
  84 \r
  85                 // Get an Anchor element.\r
  86                 var element = ev.getTarget();\r
  87                 var relative, nodeToMove;\r
  88                 var keystroke = ev.getKeystroke(),\r
  89                         rtl = editor.lang.dir == 'rtl';\r
  90 \r
  91                 switch ( keystroke )\r
  92                 {\r
  93                         // UP-ARROW\r
  94                         case 38 :\r
  95                                 // relative is TR\r
  96                                 if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
  97                                 {\r
  98                                         nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );\r
  99                                         nodeToMove.focus();\r
 100                                         onBlur( null, element );\r
 101                                         onFocus( null, nodeToMove );\r
 102                                 }\r
 103                                 ev.preventDefault();\r
 104                                 break;\r
 105                         // DOWN-ARROW\r
 106                         case 40 :\r
 107                                 // relative is TR\r
 108                                 if ( ( relative = element.getParent().getParent().getNext() ) )\r
 109                                 {\r
 110                                         nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );\r
 111                                         if ( nodeToMove && nodeToMove.type == 1 )\r
 112                                         {\r
 113                                                 nodeToMove.focus();\r
 114                                                 onBlur( null, element );\r
 115                                                 onFocus( null, nodeToMove );\r
 116                                         }\r
 117                                 }\r
 118                                 ev.preventDefault();\r
 119                                 break;\r
 120                         // SPACE\r
 121                         // ENTER is already handled as onClick\r
 122                         case 32 :\r
 123                                 onChoice( { data: ev } );\r
 124                                 ev.preventDefault();\r
 125                                 break;\r
 126 \r
 127                         // RIGHT-ARROW\r
 128                         case rtl ? 37 : 39 :\r
 129                         // TAB\r
 130                         case 9 :\r
 131                                 // relative is TD\r
 132                                 if ( ( relative = element.getParent().getNext() ) )\r
 133                                 {\r
 134                                         nodeToMove = relative.getChild( 0 );\r
 135                                         if ( nodeToMove.type == 1 )\r
 136                                         {\r
 137                                                 nodeToMove.focus();\r
 138                                                 onBlur( null, element );\r
 139                                                 onFocus( null, nodeToMove );\r
 140                                                 ev.preventDefault( true );\r
 141                                         }\r
 142                                         else\r
 143                                                 onBlur( null, element );\r
 144                                 }\r
 145                                 // relative is TR\r
 146                                 else if ( ( relative = element.getParent().getParent().getNext() ) )\r
 147                                 {\r
 148                                         nodeToMove = relative.getChild( [ 0, 0 ] );\r
 149                                         if ( nodeToMove && nodeToMove.type == 1 )\r
 150                                         {\r
 151                                                 nodeToMove.focus();\r
 152                                                 onBlur( null, element );\r
 153                                                 onFocus( null, nodeToMove );\r
 154                                                 ev.preventDefault( true );\r
 155                                         }\r
 156                                         else\r
 157                                                 onBlur( null, element );\r
 158                                 }\r
 159                                 break;\r
 160 \r
 161                         // LEFT-ARROW\r
 162                         case rtl ? 39 : 37 :\r
 163                         // SHIFT + TAB\r
 164                         case CKEDITOR.SHIFT + 9 :\r
 165                                 // relative is TD\r
 166                                 if ( ( relative = element.getParent().getPrevious() ) )\r
 167                                 {\r
 168                                         nodeToMove = relative.getChild( 0 );\r
 169                                         nodeToMove.focus();\r
 170                                         onBlur( null, element );\r
 171                                         onFocus( null, nodeToMove );\r
 172                                         ev.preventDefault( true );\r
 173                                 }\r
 174                                 // relative is TR\r
 175                                 else if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
 176                                 {\r
 177                                         nodeToMove = relative.getLast().getChild( 0 );\r
 178                                         nodeToMove.focus();\r
 179                                         onBlur( null, element );\r
 180                                         onFocus( null, nodeToMove );\r
 181                                         ev.preventDefault( true );\r
 182                                 }\r
 183                                 else\r
 184                                         onBlur( null, element );\r
 185                                 break;\r
 186                         default :\r
 187                                 // Do not stop not handled events.\r
 188                                 return;\r
 189                 }\r
 190         });\r
 191 \r
 192         return {\r
 193                 title : lang.title,\r
 194                 minWidth : 430,\r
 195                 minHeight : 280,\r
 196                 buttons : [ CKEDITOR.dialog.cancelButton ],\r
 197                 charColumns : 17,\r
 198                 onLoad :  function()\r
 199                 {\r
 200                         var columns = this.definition.charColumns,\r
 201                                 extraChars = editor.config.extraSpecialChars,\r
 202                                 chars = editor.config.specialChars;\r
 203 \r
 204                         var charsTableLabel =  CKEDITOR.tools.getNextId() + '_specialchar_table_label';\r
 205                         var html = [ '<table role="listbox" aria-labelledby="' + charsTableLabel + '"' +\r
 206                                                                         ' style="width: 320px; height: 100%; border-collapse: separate;"' +\r
 207                                                                         ' align="center" cellspacing="2" cellpadding="2" border="0">' ];\r
 208 \r
 209                         var i = 0,\r
 210                                 size = chars.length,\r
 211                                 character,\r
 212                                 charDesc;\r
 213 \r
 214                         while ( i < size )\r
 215                         {\r
 216                                 html.push( '<tr>' ) ;\r
 217 \r
 218                                 for ( var j = 0 ; j < columns ; j++, i++ )\r
 219                                 {\r
 220                                         if ( ( character = chars[ i ] ) )\r
 221                                         {\r
 222                                                 charDesc = '';\r
 223 \r
 224                                                 if ( character instanceof Array )\r
 225                                                 {\r
 226                                                         charDesc = character[ 1 ];\r
 227                                                         character = character[ 0 ];\r
 228                                                 }\r
 229                                                 else\r
 230                                                 {\r
 231                                                         var _tmpName = character.toLowerCase().replace( '&', '' ).replace( ';', '' ).replace( '#', '' );\r
 232 \r
 233                                                         // Use character in case description unavailable.\r
 234                                                         charDesc = lang[ _tmpName ] || character;\r
 235                                                 }\r
 236 \r
 237                                                 var charLabelId =  'cke_specialchar_label_' + i + '_' + CKEDITOR.tools.getNextNumber();\r
 238 \r
 239                                                 html.push(\r
 240                                                         '<td class="cke_dark_background" style="cursor: default" role="presentation">' +\r
 241                                                         '<a href="javascript: void(0);" role="option"' +\r
 242                                                         ' aria-posinset="' + ( i +1 ) + '"',\r
 243                                                         ' aria-setsize="' + size + '"',\r
 244                                                         ' aria-labelledby="' + charLabelId + '"',\r
 245                                                         ' style="cursor: inherit; display: block; height: 1.25em; margin-top: 0.25em; text-align: center;" title="', CKEDITOR.tools.htmlEncode( charDesc ), '"' +\r
 246                                                         ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydown + ', event, this )"' +\r
 247                                                         ' onclick="CKEDITOR.tools.callFunction(' + onClick + ', this); return false;"' +\r
 248                                                         ' tabindex="-1">' +\r
 249                                                         '<span style="margin: 0 auto;cursor: inherit">' +\r
 250                                                         character +\r
 251                                                         '</span>' +\r
 252                                                         '<span class="cke_voice_label" id="' + charLabelId + '">' +\r
 253                                                         charDesc +\r
 254                                                         '</span></a>');\r
 255                                         }\r
 256                                         else\r
 257                                                 html.push( '<td class="cke_dark_background">&nbsp;' );\r
 258 \r
 259                                         html.push( '</td>' );\r
 260                                 }\r
 261                                 html.push( '</tr>' );\r
 262                         }\r
 263 \r
 264                         html.push( '</tbody></table>', '<span id="' + charsTableLabel + '" class="cke_voice_label">' + lang.options +'</span>' );\r
 265 \r
 266                         this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );\r
 267                 },\r
 268                 contents : [\r
 269                         {\r
 270                                 id : 'info',\r
 271                                 label : editor.lang.common.generalTab,\r
 272                                 title : editor.lang.common.generalTab,\r
 273                                 padding : 0,\r
 274                                 align : 'top',\r
 275                                 elements : [\r
 276                                         {\r
 277                                                 type : 'hbox',\r
 278                                                 align : 'top',\r
 279                                                 widths : [ '320px', '90px' ],\r
 280                                                 children :\r
 281                                                 [\r
 282                                                         {\r
 283                                                                 type : 'html',\r
 284                                                                 id : 'charContainer',\r
 285                                                                 html : '',\r
 286                                                                 onMouseover : onFocus,\r
 287                                                                 onMouseout : onBlur,\r
 288                                                                 focus : function()\r
 289                                                                 {\r
 290                                                                         var firstChar = this.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
 291                                                                         setTimeout( function()\r
 292                                                                         {\r
 293                                                                                 firstChar.focus();\r
 294                                                                                 onFocus( null, firstChar );\r
 295                                                                         }, 0 );\r
 296                                                                 },\r
 297                                                                 onShow : function()\r
 298                                                                 {\r
 299                                                                         var firstChar = this.getElement().getChild( [ 0, 0, 0, 0, 0 ] );\r
 300                                                                         setTimeout( function()\r
 301                                                                                 {\r
 302                                                                                         firstChar.focus();\r
 303                                                                                         onFocus( null, firstChar );\r
 304                                                                                 }, 0 );\r
 305                                                                 },\r
 306                                                                 onLoad : function( event )\r
 307                                                                 {\r
 308                                                                         dialog = event.sender;\r
 309                                                                 }\r
 310                                                         },\r
 311                                                         {\r
 312                                                                 type : 'hbox',\r
 313                                                                 align : 'top',\r
 314                                                                 widths : [ '100%' ],\r
 315                                                                 children :\r
 316                                                                 [\r
 317                                                                         {\r
 318                                                                                 type : 'vbox',\r
 319                                                                                 align : 'top',\r
 320                                                                                 children :\r
 321                                                                                 [\r
 322                                                                                         {\r
 323                                                                                                 type : 'html',\r
 324                                                                                                 html : '<div></div>'\r
 325                                                                                         },\r
 326                                                                                         {\r
 327                                                                                                 type : 'html',\r
 328                                                                                                 id : 'charPreview',\r
 329                                                                                                 className : 'cke_dark_background',\r
 330                                                                                                 style : 'border:1px solid #eeeeee;font-size:28px;height:40px;width:70px;padding-top:9px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',\r
 331                                                                                                 html : '<div>&nbsp;</div>'\r
 332                                                                                         },\r
 333                                                                                         {\r
 334                                                                                                 type : 'html',\r
 335                                                                                                 id : 'htmlPreview',\r
 336                                                                                                 className : 'cke_dark_background',\r
 337                                                                                                 style : 'border:1px solid #eeeeee;font-size:14px;height:20px;width:70px;padding-top:2px;font-family:\'Microsoft Sans Serif\',Arial,Helvetica,Verdana;text-align:center;',\r
 338                                                                                                 html : '<div>&nbsp;</div>'\r
 339                                                                                         }\r
 340                                                                                 ]\r
 341                                                                         }\r
 342                                                                 ]\r
 343                                                         }\r
 344                                                 ]\r
 345                                         }\r
 346                                 ]\r
 347                         }\r
 348                 ]\r
 349         };\r
 350 } );\r