library/custom_template/ckeditor/_source/plugins/specialchar/dialogs/specialchar.js

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