_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         var onChoice = function( evt )\r
  15         {\r
  16                 var target, value;\r
  17                 if ( evt.data )\r
  18                         target = evt.data.getTarget();\r
  19                 else\r
  20                         target = new CKEDITOR.dom.element( evt );\r
  21 \r
  22                 if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )\r
  23                 {\r
  24                         target.removeClass( "cke_light_background" );\r
  25                         dialog.hide();\r
  26                         editor.insertHtml( value );\r
  27                 }\r
  28         };\r
  29 \r
  30         var onClick = CKEDITOR.tools.addFunction( onChoice );\r
  31 \r
  32         var focusedNode;\r
  33 \r
  34         var onFocus = function( evt, target )\r
  35         {\r
  36                 var value;\r
  37                 target = target || evt.data.getTarget();\r
  38 \r
  39                 if ( target.getName() == 'span' )\r
  40                         target = target.getParent();\r
  41 \r
  42                 if ( target.getName() == 'a' && ( value = target.getChild( 0 ).getHtml() ) )\r
  43                 {\r
  44                         // Trigger blur manually if there is focused node.\r
  45                         if ( focusedNode )\r
  46                                 onBlur( null, focusedNode );\r
  47 \r
  48                         var htmlPreview = dialog.getContentElement( 'info', 'htmlPreview' ).getElement();\r
  49 \r
  50                         dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( value );\r
  51                         htmlPreview.setHtml( CKEDITOR.tools.htmlEncode( value ) );\r
  52                         target.getParent().addClass( "cke_light_background" );\r
  53 \r
  54                         // Memorize focused node.\r
  55                         focusedNode = target;\r
  56                 }\r
  57         };\r
  58 \r
  59         var onBlur = function( evt, target )\r
  60         {\r
  61                 target = target || evt.data.getTarget();\r
  62 \r
  63                 if ( target.getName() == 'span' )\r
  64                         target = target.getParent();\r
  65 \r
  66                 if ( target.getName() == 'a' )\r
  67                 {\r
  68                         dialog.getContentElement( 'info', 'charPreview' ).getElement().setHtml( '&nbsp;' );\r
  69                         dialog.getContentElement( 'info', 'htmlPreview' ).getElement().setHtml( '&nbsp;' );\r
  70                         target.getParent().removeClass( "cke_light_background" );\r
  71 \r
  72                         focusedNode = undefined;\r
  73                 }\r
  74         };\r
  75 \r
  76         var onKeydown = CKEDITOR.tools.addFunction( function( ev )\r
  77         {\r
  78                 ev = new CKEDITOR.dom.event( ev );\r
  79 \r
  80                 // Get an Anchor element.\r
  81                 var element = ev.getTarget();\r
  82                 var relative, nodeToMove;\r
  83                 var keystroke = ev.getKeystroke();\r
  84 \r
  85                 switch ( keystroke )\r
  86                 {\r
  87                         // UP-ARROW\r
  88                         case 38 :\r
  89                                 // relative is TR\r
  90                                 if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
  91                                 {\r
  92                                         nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );\r
  93                                         nodeToMove.focus();\r
  94                                         onBlur( null, element );\r
  95                                         onFocus( null, nodeToMove );\r
  96                                 }\r
  97                                 ev.preventDefault();\r
  98                                 break;\r
  99                         // DOWN-ARROW\r
 100                         case 40 :\r
 101                                 // relative is TR\r
 102                                 if ( ( relative = element.getParent().getParent().getNext() ) )\r
 103                                 {\r
 104                                         nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );\r
 105                                         if ( nodeToMove && nodeToMove.type == 1 )\r
 106                                         {\r
 107                                                 nodeToMove.focus();\r
 108                                                 onBlur( null, element );\r
 109                                                 onFocus( null, nodeToMove );\r
 110                                         }\r
 111                                 }\r
 112                                 ev.preventDefault();\r
 113                                 break;\r
 114                         // SPACE\r
 115                         // ENTER is already handled as onClick\r
 116                         case 32 :\r
 117                                 onChoice( { data: ev } );\r
 118                                 ev.preventDefault();\r
 119                                 break;\r
 120 \r
 121                         // RIGHT-ARROW\r
 122                         case 39 :\r
 123                         // TAB\r
 124                         case 9 :\r
 125                                 // relative is TD\r
 126                                 if ( ( relative = element.getParent().getNext() ) )\r
 127                                 {\r
 128                                         nodeToMove = relative.getChild( 0 );\r
 129                                         if ( nodeToMove.type == 1 )\r
 130                                         {\r
 131                                                 nodeToMove.focus();\r
 132                                                 onBlur( null, element );\r
 133                                                 onFocus( null, nodeToMove );\r
 134                                                 ev.preventDefault( true );\r
 135                                         }\r
 136                                         else\r
 137                                                 onBlur( null, element );\r
 138                                 }\r
 139                                 // relative is TR\r
 140                                 else if ( ( relative = element.getParent().getParent().getNext() ) )\r
 141                                 {\r
 142                                         nodeToMove = relative.getChild( [ 0, 0 ] );\r
 143                                         if ( nodeToMove && nodeToMove.type == 1 )\r
 144                                         {\r
 145                                                 nodeToMove.focus();\r
 146                                                 onBlur( null, element );\r
 147                                                 onFocus( null, nodeToMove );\r
 148                                                 ev.preventDefault( true );\r
 149                                         }\r
 150                                         else\r
 151                                                 onBlur( null, element );\r
 152                                 }\r
 153                                 break;\r
 154 \r
 155                         // LEFT-ARROW\r
 156                         case 37 :\r
 157                         // SHIFT + TAB\r
 158                         case CKEDITOR.SHIFT + 9 :\r
 159                                 // relative is TD\r
 160                                 if ( ( relative = element.getParent().getPrevious() ) )\r
 161                                 {\r
 162                                         nodeToMove = relative.getChild( 0 );\r
 163                                         nodeToMove.focus();\r
 164                                         onBlur( null, element );\r
 165                                         onFocus( null, nodeToMove );\r
 166                                         ev.preventDefault( true );\r
 167                                 }\r
 168                                 // relative is TR\r
 169                                 else if ( ( relative = element.getParent().getParent().getPrevious() ) )\r
 170                                 {\r
 171                                         nodeToMove = relative.getLast().getChild( 0 );\r
 172                                         nodeToMove.focus();\r
 173                                         onBlur( null, element );\r
 174                                         onFocus( null, nodeToMove );\r
 175                                         ev.preventDefault( true );\r
 176                                 }\r
 177                                 else\r
 178                                         onBlur( null, element );\r
 179                                 break;\r
 180                         default :\r
 181                                 // Do not stop not handled events.\r
 182                                 return;\r
 183                 }\r
 184         });\r
 185 \r
 186         return {\r
 187                 title : lang.title,\r
 188                 minWidth : 430,\r
 189                 minHeight : 280,\r
 190                 buttons : [ CKEDITOR.dialog.cancelButton ],\r
 191                 charColumns : 17,\r
 192                 chars :\r
 193                         [\r
 194                                 '!','&quot;','#','$','%','&amp;',"'",'(',')','*','+','-','.','/',\r
 195                                 '0','1','2','3','4','5','6','7','8','9',':',';',\r
 196                                 '&lt;','=','&gt;','?','@',\r
 197                                 'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O',\r
 198                                 'P','Q','R','S','T','U','V','W','X','Y','Z',\r
 199                                 '[',']','^','_','`',\r
 200                                 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',\r
 201                                 'q','r','s','t','u','v','w','x','y','z',\r
 202                                 '{','|','}','~','&euro;(EURO SIGN)','&lsquo;(LEFT SINGLE QUOTATION MARK)','&rsquo;(RIGHT SINGLE QUOTATION MARK)','&ldquo;(LEFT DOUBLE QUOTATION MARK)',\r
 203                                 '&rdquo;(RIGHT DOUBLE QUOTATION MARK)','&ndash;(EN DASH)','&mdash;(EM DASH)','&iexcl;(INVERTED EXCLAMATION MARK)','&cent;(CENT SIGN)','&pound;(POUND SIGN)',\r
 204                                 '&curren;(CURRENCY SIGN)','&yen;(YEN SIGN)','&brvbar;(BROKEN BAR)','&sect;(SECTION SIGN)','&uml;(DIAERESIS)','&copy;(COPYRIGHT SIGN)','&ordf;(FEMININE ORDINAL INDICATOR)',\r
 205                                 '&laquo;(LEFT-POINTING DOUBLE ANGLE QUOTATION MARK)','&not;(NOT SIGN)','&reg;(REGISTERED SIGN)','&macr;(MACRON)','&deg;(DEGREE SIGN)','&plusmn;(PLUS-MINUS SIGN)','&sup2;(SUPERSCRIPT TWO)',\r
 206                                 '&sup3;(SUPERSCRIPT THREE)','&acute;(ACUTE ACCENT)','&micro;(MICRO SIGN)','&para;(PILCROW SIGN)','&middot;(MIDDLE DOT)','&cedil;(CEDILLA)',\r
 207                                 '&sup1;(SUPERSCRIPT ONE)','&ordm;(MASCULINE ORDINAL INDICATOR)','&raquo;(RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK)','&frac14;(VULGAR FRACTION ONE QUARTER)','&frac12;(VULGAR FRACTION ONE HALF)','&frac34;(VULGAR FRACTION THREE QUARTERS)',\r
 208                                 '&iquest;(INVERTED QUESTION MARK)','&Agrave;(LATIN CAPITAL LETTER A WITH GRAVE)','&Aacute;(LATIN CAPITAL LETTER A WITH ACUTE)','&Acirc;(LATIN CAPITAL LETTER A WITH CIRCUMFLEX)','&Atilde;(LATIN CAPITAL LETTER A WITH TILDE)','&Auml;(LATIN CAPITAL LETTER A WITH DIAERESIS)',\r
 209                                 '&Aring;(LATIN CAPITAL LETTER A WITH RING ABOVE)','&AElig;(LATIN CAPITAL LETTER AE)','&Ccedil;(LATIN CAPITAL LETTER C WITH CEDILLA)','&Egrave;(LATIN CAPITAL LETTER E WITH GRAVE)','&Eacute;(LATIN CAPITAL LETTER E WITH ACUTE)','&Ecirc;(LATIN CAPITAL LETTER E WITH CIRCUMFLEX)',\r
 210                                 '&Euml;(LATIN CAPITAL LETTER E WITH DIAERESIS)','&Igrave;(LATIN CAPITAL LETTER I WITH GRAVE)','&Iacute;(LATIN CAPITAL LETTER I WITH ACUTE)','&Icirc;(LATIN CAPITAL LETTER I WITH CIRCUMFLEX)','&Iuml;(LATIN CAPITAL LETTER I WITH DIAERESIS)','&ETH;(LATIN CAPITAL LETTER ETH)',\r
 211                                 '&Ntilde;(LATIN CAPITAL LETTER N WITH TILDE)','&Ograve;(LATIN CAPITAL LETTER O WITH GRAVE)','&Oacute;(LATIN CAPITAL LETTER O WITH ACUTE)','&Ocirc;(LATIN CAPITAL LETTER O WITH CIRCUMFLEX)','&Otilde;(LATIN CAPITAL LETTER O WITH TILDE)','&Ouml;(LATIN CAPITAL LETTER O WITH DIAERESIS)',\r
 212                                 '&times;(MULTIPLICATION SIGN)','&Oslash;(LATIN CAPITAL LETTER O WITH STROKE)','&Ugrave;(LATIN CAPITAL LETTER U WITH GRAVE)','&Uacute;(LATIN CAPITAL LETTER U WITH ACUTE)','&Ucirc;(LATIN CAPITAL LETTER U WITH CIRCUMFLEX)','&Uuml;(LATIN CAPITAL LETTER U WITH DIAERESIS)',\r
 213                                 '&Yacute;(LATIN CAPITAL LETTER Y WITH ACUTE)','&THORN;(LATIN CAPITAL LETTER THORN)','&szlig;(LATIN SMALL LETTER SHARP S)','&agrave;(LATIN SMALL LETTER A WITH GRAVE)','&aacute;(LATIN SMALL LETTER A WITH ACUTE)','&acirc;(LATIN SMALL LETTER A WITH CIRCUMFLEX)',\r
 214                                 '&atilde;(LATIN SMALL LETTER A WITH TILDE)','&auml;(LATIN SMALL LETTER A WITH DIAERESIS)','&aring;(LATIN SMALL LETTER A WITH RING ABOVE)','&aelig;(LATIN SMALL LETTER AE)','&ccedil;(LATIN SMALL LETTER C WITH CEDILLA)','&egrave;(LATIN SMALL LETTER E WITH GRAVE)',\r
 215                                 '&eacute;(LATIN SMALL LETTER E WITH ACUTE)','&ecirc;(LATIN SMALL LETTER E WITH CIRCUMFLEX)','&euml;(LATIN SMALL LETTER E WITH DIAERESIS)','&igrave;(LATIN SMALL LETTER I WITH GRAVE)','&iacute;(LATIN SMALL LETTER I WITH ACUTE)','&icirc;(LATIN SMALL LETTER I WITH CIRCUMFLEX)',\r
 216                                 '&iuml;(LATIN SMALL LETTER I WITH DIAERESIS)','&eth;(LATIN SMALL LETTER ETH)','&ntilde;(LATIN SMALL LETTER N WITH TILDE)','&ograve;(LATIN SMALL LETTER O WITH GRAVE)','&oacute;(LATIN SMALL LETTER O WITH ACUTE)','&ocirc;(LATIN SMALL LETTER O WITH CIRCUMFLEX)',\r
 217                                 '&otilde;(LATIN SMALL LETTER O WITH TILDE)','&ouml;(LATIN SMALL LETTER O WITH DIAERESIS)',\r
 218                                 '&divide;(DIVISION SIGN)','&oslash;(LATIN SMALL LETTER O WITH STROKE)',\r
 219                                 '&ugrave;(LATIN SMALL LETTER U WITH GRAVE)','&uacute;(LATIN SMALL LETTER U WITH ACUTE)',\r
 220                                 '&ucirc;(LATIN SMALL LETTER U WITH CIRCUMFLEX)','&uuml;(LATIN SMALL LETTER U WITH DIAERESIS)',\r
 221                                 '&uuml;(LATIN SMALL LETTER U WITH DIAERESIS)','&yacute;(LATIN SMALL LETTER Y WITH ACUTE)','&thorn;(LATIN SMALL LETTER THORN)','&yuml;(LATIN SMALL LETTER Y WITH DIAERESIS)',\r
 222                                 '&OElig;(LATIN CAPITAL LIGATURE OE)',\r
 223                                 '&oelig;(LATIN SMALL LIGATURE OE)','&#372;(LATIN CAPITAL LETTER W WITH CIRCUMFLEX)',\r
 224                                 '&#374(LATIN CAPITAL LETTER Y WITH CIRCUMFLEX)','&#373(LATIN SMALL LETTER W WITH CIRCUMFLEX)',\r
 225                                 '&#375;(LATIN SMALL LETTER Y WITH CIRCUMFLEX)','&sbquo;(SINGLE LOW-9 QUOTATION MARK)',\r
 226                                 '&#8219;(SINGLE HIGH-REVERSED-9 QUOTATION MARK)','&bdquo;(DOUBLE LOW-9 QUOTATION MARK)','&hellip;(HORIZONTAL ELLIPSIS)',\r
 227                                 '&trade;(TRADE MARK SIGN)','&#9658;(BLACK RIGHT-POINTING POINTER)','&bull;(BULLET)',\r
 228                                 '&rarr;(RIGHTWARDS ARROW)','&rArr;(RIGHTWARDS DOUBLE ARROW)','&hArr;(LEFT RIGHT DOUBLE ARROW)','&diams;(BLACK DIAMOND SUIT)','&asymp;(ALMOST EQUAL TO)'\r
 229                         ],\r
 230                 onLoad :  function()\r
 231                 {\r
 232                         var columns = this.definition.charColumns,\r
 233                                 chars = this.definition.chars;\r
 234 \r
 235                         var html = [ '<table role="listbox" aria-labelledby="specialchar_table_label"' +\r
 236                                                                         ' style="width: 320px; height: 100%; border-collapse: separate;"' +\r
 237                                                                         ' align="center" cellspacing="2" cellpadding="2" border="0">' ];\r
 238 \r
 239                         var i = 0,\r
 240                                 size = chars.length,\r
 241                                 character,\r
 242                                 charDesc;\r
 243 \r
 244                         while ( i < size )\r
 245                         {\r
 246                                 html.push( '<tr>' ) ;\r
 247 \r
 248                                 for ( var j = 0 ; j < columns ; j++, i++ )\r
 249                                 {\r
 250                                         if ( ( character = chars[ i ] ) )\r
 251                                         {\r
 252                                                 charDesc = '';\r
 253                                                 character = character.replace( /\((.*?)\)/, function( match, desc )\r
 254                                                         {\r
 255                                                                 charDesc = desc;\r
 256                                                                 return '';\r
 257                                                         } );\r
 258 \r
 259                                                 // Use character in case description unavailable.\r
 260                                                 charDesc = charDesc || character;\r
 261 \r
 262                                                 html.push(\r
 263                                                         '<td class="cke_dark_background" style="cursor: default">' +\r
 264                                                         '<a href="javascript: void(0);" role="option"' +\r
 265                                                         ' aria-posinset="' + ( i +1 ) + '"',\r
 266                                                         ' aria-setsize="' + size + '"',\r
 267                                                         ' aria-labelledby="cke_specialchar_label_' + i + '"',\r
 268                                                         ' style="cursor: inherit; display: block; height: 1.25em; margin-top: 0.25em; text-align: center;" title="', CKEDITOR.tools.htmlEncode( charDesc ), '"' +\r
 269                                                         ' onkeydown="CKEDITOR.tools.callFunction( ' + onKeydown + ', event, this )"' +\r
 270                                                         ' onclick="CKEDITOR.tools.callFunction(' + onClick + ', this); return false;"' +\r
 271                                                         ' tabindex="-1">' +\r
 272                                                         '<span style="margin: 0 auto;cursor: inherit">' +\r
 273                                                         character +\r
 274                                                         '</span>' +\r
 275                                                         '<span class="cke_voice_label" id="cke_specialchar_label_' + i + '">' +\r
 276                                                         charDesc +\r
 277                                                         '</span></a>');\r
 278                                         }\r
 279                                         else\r
 280                                                 html.push( '<td class="cke_dark_background">&nbsp;' );\r
 281 \r
 282                                         html.push( '</td>' );\r
 283                                 }\r
 284                                 html.push( '</tr>' );\r
 285                         }\r
 286 \r
 287                         html.push( '</tbody></table>', '<span id="specialchar_table_label" class="cke_voice_label">' + editor.lang.common.options +'</span>' );\r
 288 \r
 289                         this.getContentElement( 'info', 'charContainer' ).getElement().setHtml( html.join( '' ) );\r
 290                 },\r
 291                 contents : [\r
 292                         {\r
 293                                 id : 'info',\r
 294                                 label : editor.lang.common.generalTab,\r
 295                                 title : editor.lang.common.generalTab,\r
 296                                 padding : 0,\r
 297                                 align : 'top',\r
 298                                 elements : [\r
 299                                         {\r
 300                                                 type : 'hbox',\r
 301                                                 align : 'top',\r
 302                                                 widths : [ '320px', '90px' ],\r
 303                                                 children :\r
 304                                                 [\r
 305                                                         {\r
 306                                                                 type : 'html',\r
 307                                                                 id : 'charContainer',\r
 308                                                                 html : '',\r
 309                                                                 onMouseover : onFocus,\r
 310                                                                 onMouseout : onBlur,\r
 311                                                                 focus : function()\r
 312                                                                 {\r
 313                                                                         var firstChar = this.getElement().getElementsByTag( 'a' ).getItem( 0 );\r
 314                                                                         setTimeout(function()\r
 315                                                                         {\r
 316                                                                                 firstChar.focus();\r
 317                                                                                 onFocus( null, firstChar );\r
 318                                                                         });\r
 319                                                                 },\r
 320                                                                 onShow : function()\r
 321                                                                 {\r
 322                                                                         var firstChar = this.getElement().getChild( [ 0, 0, 0, 0, 0 ] );\r
 323                                                                         setTimeout( function()\r
 324                                                                                 {\r
 325                                                                                         firstChar.focus();\r
 326                                                                                         onFocus( null, firstChar );\r
 327                                                                                 });\r
 328                                                                 },\r
 329                                                                 onLoad : function( event )\r
 330                                                                 {\r
 331                                                                         dialog = event.sender;\r
 332                                                                 }\r
 333                                                         },\r
 334                                                         {\r
 335                                                                 type : 'hbox',\r
 336                                                                 align : 'top',\r
 337                                                                 widths : [ '100%' ],\r
 338                                                                 children :\r
 339                                                                 [\r
 340                                                                         {\r
 341                                                                                 type : 'vbox',\r
 342                                                                                 align : 'top',\r
 343                                                                                 children :\r
 344                                                                                 [\r
 345                                                                                         {\r
 346                                                                                                 type : 'html',\r
 347                                                                                                 html : '<div></div>'\r
 348                                                                                         },\r
 349                                                                                         {\r
 350                                                                                                 type : 'html',\r
 351                                                                                                 id : 'charPreview',\r
 352                                                                                                 className : 'cke_dark_background',\r
 353                                                                                                 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
 354                                                                                                 html : '<div>&nbsp;</div>'\r
 355                                                                                         },\r
 356                                                                                         {\r
 357                                                                                                 type : 'html',\r
 358                                                                                                 id : 'htmlPreview',\r
 359                                                                                                 className : 'cke_dark_background',\r
 360                                                                                                 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
 361                                                                                                 html : '<div>&nbsp;</div>'\r
 362                                                                                         }\r
 363                                                                                 ]\r
 364                                                                         }\r
 365                                                                 ]\r
 366                                                         }\r
 367                                                 ]\r
 368                                         }\r
 369                                 ]\r
 370                         }\r
 371                 ]\r
 372         };\r
 373 } );\r