sources/plugins/smiley/dialogs/smiley.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( 'smiley', function( editor ) {
   7         var config = editor.config,
   8                 lang = editor.lang.smiley,
   9                 images = config.smiley_images,
  10                 columns = config.smiley_columns || 8,
  11                 i;
  12
  13         // Simulate "this" of a dialog for non-dialog events.
  14         // @type {CKEDITOR.dialog}
  15         var dialog;
  16         var onClick = function( evt ) {
  17                         var target = evt.data.getTarget(),
  18                                 targetName = target.getName();
  19
  20                         if ( targetName == 'a' )
  21                                 target = target.getChild( 0 );
  22                         else if ( targetName != 'img' )
  23                                 return;
  24
  25                         var src = target.getAttribute( 'cke_src' ),
  26                                 title = target.getAttribute( 'title' );
  27
  28                         var img = editor.document.createElement( 'img', {
  29                                 attributes: {
  30                                         src: src,
  31                                         'data-cke-saved-src': src,
  32                                         title: title,
  33                                         alt: title,
  34                                         width: target.$.width,
  35                                         height: target.$.height
  36                                 }
  37                         } );
  38
  39                         editor.insertElement( img );
  40
  41                         dialog.hide();
  42                         evt.data.preventDefault();
  43                 };
  44
  45         var onKeydown = CKEDITOR.tools.addFunction( function( ev, element ) {
  46                 ev = new CKEDITOR.dom.event( ev );
  47                 element = new CKEDITOR.dom.element( element );
  48                 var relative, nodeToMove;
  49
  50                 var keystroke = ev.getKeystroke(),
  51                         rtl = editor.lang.dir == 'rtl';
  52                 switch ( keystroke ) {
  53                         // UP-ARROW
  54                         case 38:
  55                                 // relative is TR
  56                                 if ( ( relative = element.getParent().getParent().getPrevious() ) ) {
  57                                         nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
  58                                         nodeToMove.focus();
  59                                 }
  60                                 ev.preventDefault();
  61                                 break;
  62                                 // DOWN-ARROW
  63                         case 40:
  64                                 // relative is TR
  65                                 if ( ( relative = element.getParent().getParent().getNext() ) ) {
  66                                         nodeToMove = relative.getChild( [ element.getParent().getIndex(), 0 ] );
  67                                         if ( nodeToMove )
  68                                                 nodeToMove.focus();
  69                                 }
  70                                 ev.preventDefault();
  71                                 break;
  72                                 // ENTER
  73                                 // SPACE
  74                         case 32:
  75                                 onClick( { data: ev } );
  76                                 ev.preventDefault();
  77                                 break;
  78
  79                                 // RIGHT-ARROW
  80                         case rtl ? 37 : 39:
  81                                 // relative is TD
  82                                 if ( ( relative = element.getParent().getNext() ) ) {
  83                                         nodeToMove = relative.getChild( 0 );
  84                                         nodeToMove.focus();
  85                                         ev.preventDefault( true );
  86                                 }
  87                                 // relative is TR
  88                                 else if ( ( relative = element.getParent().getParent().getNext() ) ) {
  89                                         nodeToMove = relative.getChild( [ 0, 0 ] );
  90                                         if ( nodeToMove )
  91                                                 nodeToMove.focus();
  92                                         ev.preventDefault( true );
  93                                 }
  94                                 break;
  95
  96                                 // LEFT-ARROW
  97                         case rtl ? 39 : 37:
  98                                 // relative is TD
  99                                 if ( ( relative = element.getParent().getPrevious() ) ) {
 100                                         nodeToMove = relative.getChild( 0 );
 101                                         nodeToMove.focus();
 102                                         ev.preventDefault( true );
 103                                 }
 104                                 // relative is TR
 105                                 else if ( ( relative = element.getParent().getParent().getPrevious() ) ) {
 106                                         nodeToMove = relative.getLast().getChild( 0 );
 107                                         nodeToMove.focus();
 108                                         ev.preventDefault( true );
 109                                 }
 110                                 break;
 111                         default:
 112                                 // Do not stop not handled events.
 113                                 return;
 114                 }
 115         } );
 116
 117         // Build the HTML for the smiley images table.
 118         var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label';
 119         var html = [
 120                 '<div>' +
 121                 '<span id="' + labelId + '" class="cke_voice_label">' + lang.options + '</span>',
 122                 '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%;border-collapse:separate;" cellspacing="2" cellpadding="2"',
 123                 CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',
 124                 '><tbody>'
 125         ];
 126
 127         var size = images.length;
 128         for ( i = 0; i < size; i++ ) {
 129                 if ( i % columns === 0 )
 130                         html.push( '<tr role="presentation">' );
 131
 132                 var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();
 133                 html.push(
 134                         '<td class="cke_dark_background cke_centered" style="vertical-align: middle;" role="presentation">' +
 135                         '<a href="javascript:void(0)" role="option"', ' aria-posinset="' + ( i + 1 ) + '"', ' aria-setsize="' + size + '"', ' aria-labelledby="' + smileyLabelId + '"',
 136                         ' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',
 137                         '<img class="cke_hand" title="', config.smiley_descriptions[ i ], '"' +
 138                         ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[ i ], '"',
 139                         ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
 140                         // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.
 141                         ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ), '>' +
 142                         '<span id="' + smileyLabelId + '" class="cke_voice_label">' + config.smiley_descriptions[ i ] + '</span>' +
 143                         '</a>', '</td>'
 144                 );
 145
 146                 if ( i % columns == columns - 1 )
 147                         html.push( '</tr>' );
 148         }
 149
 150         if ( i < columns - 1 ) {
 151                 for ( ; i < columns - 1; i++ )
 152                         html.push( '<td></td>' );
 153                 html.push( '</tr>' );
 154         }
 155
 156         html.push( '</tbody></table></div>' );
 157
 158         var smileySelector = {
 159                 type: 'html',
 160                 id: 'smileySelector',
 161                 html: html.join( '' ),
 162                 onLoad: function( event ) {
 163                         dialog = event.sender;
 164                 },
 165                 focus: function() {
 166                         var self = this;
 167                         // IE need a while to move the focus (#6539).
 168                         setTimeout( function() {
 169                                 var firstSmile = self.getElement().getElementsByTag( 'a' ).getItem( 0 );
 170                                 firstSmile.focus();
 171                         }, 0 );
 172                 },
 173                 onClick: onClick,
 174                 style: 'width: 100%; border-collapse: separate;'
 175         };
 176
 177         return {
 178                 title: editor.lang.smiley.title,
 179                 minWidth: 270,
 180                 minHeight: 120,
 181                 contents: [ {
 182                         id: 'tab1',
 183                         label: '',
 184                         title: '',
 185                         expand: true,
 186                         padding: 0,
 187                         elements: [
 188                                 smileySelector
 189                         ]
 190                 } ],
 191                 buttons: [ CKEDITOR.dialog.cancelButton ]
 192         };
 193 } );