JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
8974fca06a7e74859d960ae77117a35d4ed70e9d
[ckeditor.git] / _source / plugins / richcombo / plugin.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.plugins.add( 'richcombo',\r
7 {\r
8         requires : [ 'floatpanel', 'listblock', 'button' ],\r
9 \r
10         beforeInit : function( editor )\r
11         {\r
12                 editor.ui.addHandler( CKEDITOR.UI_RICHCOMBO, CKEDITOR.ui.richCombo.handler );\r
13         }\r
14 });\r
15 \r
16 /**\r
17  * Button UI element.\r
18  * @constant\r
19  * @example\r
20  */\r
21 CKEDITOR.UI_RICHCOMBO = 3;\r
22 \r
23 CKEDITOR.ui.richCombo = CKEDITOR.tools.createClass(\r
24 {\r
25         $ : function( definition )\r
26         {\r
27                 // Copy all definition properties to this object.\r
28                 CKEDITOR.tools.extend( this, definition,\r
29                         // Set defaults.\r
30                         {\r
31                                 title : definition.label,\r
32                                 modes : { wysiwyg : 1 }\r
33                         });\r
34 \r
35                 // We don't want the panel definition in this object.\r
36                 var panelDefinition = this.panel || {};\r
37                 delete this.panel;\r
38 \r
39                 this.id = CKEDITOR.tools.getNextNumber();\r
40 \r
41                 this.document = ( panelDefinition\r
42                                                         && panelDefinition.parent\r
43                                                         && panelDefinition.parent.getDocument() )\r
44                                                 || CKEDITOR.document;\r
45 \r
46                 panelDefinition.className = ( panelDefinition.className || '' ) + ' cke_rcombopanel';\r
47                 panelDefinition.block =\r
48                 {\r
49                         multiSelect : panelDefinition.multiSelect,\r
50                         attributes : panelDefinition.attributes\r
51                 };\r
52 \r
53                 this._ =\r
54                 {\r
55                         panelDefinition : panelDefinition,\r
56                         items : {},\r
57                         state : CKEDITOR.TRISTATE_OFF\r
58                 };\r
59         },\r
60 \r
61         statics :\r
62         {\r
63                 handler :\r
64                 {\r
65                         create : function( definition )\r
66                         {\r
67                                 return new CKEDITOR.ui.richCombo( definition );\r
68                         }\r
69                 }\r
70         },\r
71 \r
72         proto :\r
73         {\r
74                 renderHtml : function( editor )\r
75                 {\r
76                         var output = [];\r
77                         this.render( editor, output );\r
78                         return output.join( '' );\r
79                 },\r
80 \r
81                 /**\r
82                  * Renders the combo.\r
83                  * @param {CKEDITOR.editor} editor The editor instance which this button is\r
84                  *              to be used by.\r
85                  * @param {Array} output The output array to which append the HTML relative\r
86                  *              to this button.\r
87                  * @example\r
88                  */\r
89                 render : function( editor, output )\r
90                 {\r
91                         var env = CKEDITOR.env;\r
92 \r
93                         var id = 'cke_' + this.id;\r
94                         var clickFn = CKEDITOR.tools.addFunction( function( $element )\r
95                                 {\r
96                                         var _ = this._;\r
97 \r
98                                         if ( _.state == CKEDITOR.TRISTATE_DISABLED )\r
99                                                 return;\r
100 \r
101                                         this.createPanel( editor );\r
102 \r
103                                         if ( _.on )\r
104                                         {\r
105                                                 _.panel.hide();\r
106                                                 return;\r
107                                         }\r
108 \r
109                                         this.commit();\r
110                                         var value = this.getValue();\r
111                                         if ( value )\r
112                                                 _.list.mark( value );\r
113                                         else\r
114                                                 _.list.unmarkAll();\r
115 \r
116                                         _.panel.showBlock( this.id, new CKEDITOR.dom.element( $element ), 4 );\r
117                                 },\r
118                                 this );\r
119 \r
120                         var instance = {\r
121                                 id : id,\r
122                                 combo : this,\r
123                                 focus : function()\r
124                                 {\r
125                                         var element = CKEDITOR.document.getById( id ).getChild( 1 );\r
126                                         element.focus();\r
127                                 },\r
128                                 clickFn : clickFn\r
129                         };\r
130 \r
131                         editor.on( 'mode', function()\r
132                                 {\r
133                                         this.setState( this.modes[ editor.mode ] ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );\r
134                                         this.setValue( '' );\r
135                                 },\r
136                                 this );\r
137 \r
138                         var keyDownFn = CKEDITOR.tools.addFunction( function( ev, element )\r
139                                 {\r
140                                         ev = new CKEDITOR.dom.event( ev );\r
141 \r
142                                         var keystroke = ev.getKeystroke();\r
143                                         switch ( keystroke )\r
144                                         {\r
145                                                 case 13 :       // ENTER\r
146                                                 case 32 :       // SPACE\r
147                                                 case 40 :       // ARROW-DOWN\r
148                                                         // Show panel\r
149                                                         CKEDITOR.tools.callFunction( clickFn, element );\r
150                                                         break;\r
151                                                 default :\r
152                                                         // Delegate the default behavior to toolbar button key handling.\r
153                                                         instance.onkey( instance,  keystroke );\r
154                                         }\r
155 \r
156                                         // Avoid subsequent focus grab on editor document.\r
157                                         ev.preventDefault();\r
158                                 });\r
159 \r
160                         // For clean up\r
161                         instance.keyDownFn = keyDownFn;\r
162 \r
163                         output.push(\r
164                                 '<span class="cke_rcombo">',\r
165                                 '<span id=', id );\r
166 \r
167                         if ( this.className )\r
168                                 output.push( ' class="', this.className, ' cke_off"');\r
169 \r
170                         output.push(\r
171                                 '>',\r
172                                         '<span id="' + id+ '_label" class=cke_label>', this.label, '</span>',\r
173                                         '<a hidefocus=true title="', this.title, '" tabindex="-1"',\r
174                                                 env.gecko && env.version >= 10900 && !env.hc ? '' : ' href="javascript:void(\'' + this.label + '\')"',\r
175                                                 ' role="button" aria-labelledby="', id , '_label" aria-describedby="', id, '_text" aria-haspopup="true"' );\r
176 \r
177                         // Some browsers don't cancel key events in the keydown but in the\r
178                         // keypress.\r
179                         // TODO: Check if really needed for Gecko+Mac.\r
180                         if ( CKEDITOR.env.opera || ( CKEDITOR.env.gecko && CKEDITOR.env.mac ) )\r
181                         {\r
182                                 output.push(\r
183                                         ' onkeypress="return false;"' );\r
184                         }\r
185 \r
186                         // With Firefox, we need to force it to redraw, otherwise it\r
187                         // will remain in the focus state.\r
188                         if ( CKEDITOR.env.gecko )\r
189                         {\r
190                                 output.push(\r
191                                         ' onblur="this.style.cssText = this.style.cssText;"' );\r
192                         }\r
193 \r
194                         output.push(\r
195                                         ' onkeydown="CKEDITOR.tools.callFunction( ', keyDownFn, ', event, this );"' +\r
196                                         ' onclick="CKEDITOR.tools.callFunction(', clickFn, ', this); return false;">' +\r
197                                                 '<span>' +\r
198                                                         '<span id="' + id + '_text" class="cke_text cke_inline_label">' + this.label + '</span>' +\r
199                                                 '</span>' +\r
200                                                 '<span class=cke_openbutton><span class=cke_icon>' + ( CKEDITOR.env.hc ? '&#9660;' : CKEDITOR.env.air ?  '&nbsp;' : '' ) + '</span></span>' +   // BLACK DOWN-POINTING TRIANGLE\r
201                                         '</a>' +\r
202                                 '</span>' +\r
203                                 '</span>' );\r
204 \r
205                         if ( this.onRender )\r
206                                 this.onRender();\r
207 \r
208                         return instance;\r
209                 },\r
210 \r
211                 createPanel : function( editor )\r
212                 {\r
213                         if ( this._.panel )\r
214                                 return;\r
215 \r
216                         var panelDefinition = this._.panelDefinition,\r
217                                 panelBlockDefinition = this._.panelDefinition.block,\r
218                                 panelParentElement = panelDefinition.parent || CKEDITOR.document.getBody(),\r
219                                 panel = new CKEDITOR.ui.floatPanel( editor, panelParentElement, panelDefinition ),\r
220                                 list = panel.addListBlock( this.id, panelBlockDefinition ),\r
221                                 me = this;\r
222 \r
223                         panel.onShow = function()\r
224                                 {\r
225                                         if ( me.className )\r
226                                                 this.element.getFirst().addClass( me.className + '_panel' );\r
227 \r
228                                         me.setState( CKEDITOR.TRISTATE_ON );\r
229 \r
230                                         list.focus( !me.multiSelect && me.getValue() );\r
231 \r
232                                         me._.on = 1;\r
233 \r
234                                         if ( me.onOpen )\r
235                                                 me.onOpen();\r
236                                 };\r
237 \r
238                         panel.onHide = function( preventOnClose )\r
239                                 {\r
240                                         if ( me.className )\r
241                                                 this.element.getFirst().removeClass( me.className + '_panel' );\r
242 \r
243                                         me.setState( me.modes && me.modes[ editor.mode ] ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );\r
244 \r
245                                         me._.on = 0;\r
246 \r
247                                         if ( !preventOnClose && me.onClose )\r
248                                                 me.onClose();\r
249                                 };\r
250 \r
251                         panel.onEscape = function()\r
252                                 {\r
253                                         panel.hide();\r
254                                         me.document.getById( 'cke_' + me.id ).getFirst().getNext().focus();\r
255                                 };\r
256 \r
257                         list.onClick = function( value, marked )\r
258                                 {\r
259                                         // Move the focus to the main windows, otherwise it will stay\r
260                                         // into the floating panel, even if invisible, and Safari and\r
261                                         // Opera will go a bit crazy.\r
262                                         me.document.getWindow().focus();\r
263 \r
264                                         if ( me.onClick )\r
265                                                 me.onClick.call( me, value, marked );\r
266 \r
267                                         if ( marked )\r
268                                                 me.setValue( value, me._.items[ value ] );\r
269                                         else\r
270                                                 me.setValue( '' );\r
271 \r
272                                         panel.hide();\r
273                                 };\r
274 \r
275                         this._.panel = panel;\r
276                         this._.list = list;\r
277 \r
278                         panel.getBlock( this.id ).onHide = function()\r
279                                 {\r
280                                         me._.on = 0;\r
281                                         me.setState( CKEDITOR.TRISTATE_OFF );\r
282                                 };\r
283 \r
284                         if ( this.init )\r
285                                 this.init();\r
286                 },\r
287 \r
288                 setValue : function( value, text )\r
289                 {\r
290                         this._.value = value;\r
291 \r
292                         var textElement = this.document.getById( 'cke_' + this.id + '_text' );\r
293                         if ( textElement )\r
294                         {\r
295                                 if ( !( value || text ) )\r
296                                 {\r
297                                         text = this.label;\r
298                                         textElement.addClass( 'cke_inline_label' );\r
299                                 }\r
300                                 else\r
301                                         textElement.removeClass( 'cke_inline_label' );\r
302 \r
303                                 textElement.setHtml( typeof text != 'undefined' ? text : value );\r
304                         }\r
305                 },\r
306 \r
307                 getValue : function()\r
308                 {\r
309                         return this._.value || '';\r
310                 },\r
311 \r
312                 unmarkAll : function()\r
313                 {\r
314                         this._.list.unmarkAll();\r
315                 },\r
316 \r
317                 mark : function( value )\r
318                 {\r
319                         this._.list.mark( value );\r
320                 },\r
321 \r
322                 hideItem : function( value )\r
323                 {\r
324                         this._.list.hideItem( value );\r
325                 },\r
326 \r
327                 hideGroup : function( groupTitle )\r
328                 {\r
329                         this._.list.hideGroup( groupTitle );\r
330                 },\r
331 \r
332                 showAll : function()\r
333                 {\r
334                         this._.list.showAll();\r
335                 },\r
336 \r
337                 add : function( value, html, text )\r
338                 {\r
339                         this._.items[ value ] = text || value;\r
340                         this._.list.add( value, html, text );\r
341                 },\r
342 \r
343                 startGroup : function( title )\r
344                 {\r
345                         this._.list.startGroup( title );\r
346                 },\r
347 \r
348                 commit : function()\r
349                 {\r
350                         if ( !this._.committed )\r
351                         {\r
352                                 this._.list.commit();\r
353                                 this._.committed = 1;\r
354                                 CKEDITOR.ui.fire( 'ready', this );\r
355                         }\r
356                         this._.committed = 1;\r
357                 },\r
358 \r
359                 setState : function( state )\r
360                 {\r
361                         if ( this._.state == state )\r
362                                 return;\r
363 \r
364                         this.document.getById( 'cke_' + this.id ).setState( state );\r
365 \r
366                         this._.state = state;\r
367                 }\r
368         }\r
369 });\r
370 \r
371 CKEDITOR.ui.prototype.addRichCombo = function( name, definition )\r
372 {\r
373         this.add( name, CKEDITOR.UI_RICHCOMBO, definition );\r
374 };\r