[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, 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                      _cke_saved_src : src,
  38                      title : title,
  39                      alt : title
  40                  }
  41              });
  42  
  43          editor.insertElement( img );
  44  
  45          dialog.hide();
  46          evt.data.preventDefault();
  47      };
  48  
  49      var onKeydown = CKEDITOR.tools.addFunction( function( ev, element )
  50      {
  51          ev = new CKEDITOR.dom.event( ev );
  52          element = new CKEDITOR.dom.element( element );
  53          var relative, nodeToMove;
  54  
  55          var keystroke = ev.getKeystroke();
  56          var rtl = editor.lang.dir == 'rtl';
  57          switch ( keystroke )
  58          {
  59              // UP-ARROW

  60              case 38 :
  61                  // relative is TR

  62                  if ( ( relative = element.getParent().getParent().getPrevious() ) )
  63                  {
  64                      nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
  65                      nodeToMove.focus();
  66                  }
  67                  ev.preventDefault();
  68                  break;
  69              // DOWN-ARROW

  70              case 40 :
  71                  // relative is TR

  72                  if ( ( relative = element.getParent().getParent().getNext() ) )
  73                  {
  74                      nodeToMove = relative.getChild( [element.getParent().getIndex(), 0] );
  75                      if ( nodeToMove )
  76                          nodeToMove.focus();
  77                  }
  78                  ev.preventDefault();
  79                  break;
  80              // ENTER

  81              // SPACE

  82              case 32 :
  83                  onClick( { data: ev } );
  84                  ev.preventDefault();
  85                  break;
  86  
  87              // RIGHT-ARROW

  88              case rtl ? 37 : 39 :
  89              // TAB

  90              case 9 :
  91                  // relative is TD

  92                  if ( ( relative = element.getParent().getNext() ) )
  93                  {
  94                      nodeToMove = relative.getChild( 0 );
  95                      nodeToMove.focus();
  96                      ev.preventDefault(true);
  97                  }
  98                  // relative is TR

  99                  else if ( ( relative = element.getParent().getParent().getNext() ) )
 100                  {
 101                      nodeToMove = relative.getChild( [0, 0] );
 102                      if ( nodeToMove )
 103                          nodeToMove.focus();
 104                      ev.preventDefault(true);
 105                  }
 106                  break;
 107  
 108              // LEFT-ARROW

 109              case rtl ? 39 : 37 :
 110              // SHIFT + TAB

 111              case CKEDITOR.SHIFT + 9 :
 112                  // relative is TD

 113                  if ( ( relative = element.getParent().getPrevious() ) )
 114                  {
 115                      nodeToMove = relative.getChild( 0 );
 116                      nodeToMove.focus();
 117                      ev.preventDefault(true);
 118                  }
 119                  // relative is TR

 120                  else if ( ( relative = element.getParent().getParent().getPrevious() ) )
 121                  {
 122                      nodeToMove = relative.getLast().getChild( 0 );
 123                      nodeToMove.focus();
 124                      ev.preventDefault(true);
 125                  }
 126                  break;
 127              default :
 128                  // Do not stop not handled events.

 129                  return;
 130          }
 131      });
 132  
 133      // Build the HTML for the smiley images table.

 134      var labelId = CKEDITOR.tools.getNextId() + '_smiley_emtions_label';
 135      var html =
 136      [
 137          '<div>' +
 138          '<span id="' + labelId + '" class="cke_voice_label">' + lang.options +'</span>',
 139          '<table role="listbox" aria-labelledby="' + labelId + '" style="width:100%;height:100%" cellspacing="2" cellpadding="2"',
 140          CKEDITOR.env.ie && CKEDITOR.env.quirks ? ' style="position:absolute;"' : '',
 141          '><tbody>'
 142      ];
 143  
 144      var size = images.length;
 145      for ( i = 0 ; i < size ; i++ )
 146      {
 147          if ( i % columns === 0 )
 148              html.push( '<tr>' );
 149  
 150          var smileyLabelId = 'cke_smile_label_' + i + '_' + CKEDITOR.tools.getNextNumber();
 151          html.push(
 152              '<td class="cke_dark_background cke_centered" style="vertical-align: middle;">' +
 153                  '<a href="javascript:void(0)" role="option"',
 154                      ' aria-posinset="' + ( i +1 ) + '"',
 155                      ' aria-setsize="' + size + '"',
 156                      ' aria-labelledby="' + smileyLabelId + '"',
 157                      ' class="cke_smile cke_hand" tabindex="-1" onkeydown="CKEDITOR.tools.callFunction( ', onKeydown, ', event, this );">',
 158                      '<img class="cke_hand" title="', config.smiley_descriptions[i], '"' +
 159                          ' cke_src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '" alt="', config.smiley_descriptions[i], '"',
 160                          ' src="', CKEDITOR.tools.htmlEncode( config.smiley_path + images[ i ] ), '"',
 161                          // IE BUG: Below is a workaround to an IE image loading bug to ensure the image sizes are correct.

 162                          ( CKEDITOR.env.ie ? ' onload="this.setAttribute(\'width\', 2); this.removeAttribute(\'width\');" ' : '' ),
 163                      '>' +
 164                      '<span id="' + smileyLabelId + '" class="cke_voice_label">' +config.smiley_descriptions[ i ]  + '</span>' +
 165                  '</a>',
 166               '</td>' );
 167  
 168          if ( i % columns == columns - 1 )
 169              html.push( '</tr>' );
 170      }
 171  
 172      if ( i < columns - 1 )
 173      {
 174          for ( ; i < columns - 1 ; i++ )
 175              html.push( '<td></td>' );
 176          html.push( '</tr>' );
 177      }
 178  
 179      html.push( '</tbody></table></div>' );
 180  
 181      var smileySelector =
 182      {
 183          type : 'html',
 184          html : html.join( '' ),
 185          onLoad : function( event )
 186          {
 187              dialog = event.sender;
 188          },
 189          focus : function()
 190           {
 191              var firstSmile = this.getElement().getElementsByTag( 'a' ).getItem( 0 );
 192              firstSmile.focus();
 193           },
 194          onClick : onClick,
 195          style : 'width: 100%; border-collapse: separate;'
 196      };
 197  
 198      return {
 199          title : editor.lang.smiley.title,
 200          minWidth : 270,
 201          minHeight : 120,
 202          contents : [
 203              {
 204                  id : 'tab1',
 205                  label : '',
 206                  title : '',
 207                  expand : true,
 208                  padding : 0,
 209                  elements : [
 210                          smileySelector
 211                      ]
 212              }
 213          ],
 214          buttons : [ CKEDITOR.dialog.cancelButton ]
 215      };
 216  } );