_source/plugins/smiley/dialogs/smiley.js

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