sources/plugins/specialchar/dialogs/specialchar.js

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