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