_source/plugins/smiley/dialogs/smiley.js

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