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