Context Navigation

source: sandbox/3.0/phpgwapi/js/ckeditor/_source/plugins/panel/plugin.js @ 2862

Revision 2862, 9.4 KB checked in by rodsouza, 14 years ago (diff)
Ticket #663 - Atualizando e centralizando o CKEditor (v. 3.2.1)

Line
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.plugins.add( 'panel',
7	{
8	beforeInit : function( editor )
9	{
10	editor.ui.addHandler( CKEDITOR.UI_PANEL, CKEDITOR.ui.panel.handler );
11	}
12	});
13
14	/**
15	* Panel UI element.
16	* @constant
17	* @example
18	*/
19	CKEDITOR.UI_PANEL = 2;
20
21	CKEDITOR.ui.panel = function( document, definition )
22	{
23	// Copy all definition properties to this object.
24	if ( definition )
25	CKEDITOR.tools.extend( this, definition );
26
27	// Set defaults.
28	CKEDITOR.tools.extend( this,
29	{
30	className : '',
31	css : []
32	});
33
34	this.id = CKEDITOR.tools.getNextNumber();
35	this.document = document;
36
37	this._ =
38	{
39	blocks : {}
40	};
41	};
42
43	/**
44	* Transforms a rich combo definition in a {@link CKEDITOR.ui.richCombo}
45	* instance.
46	* @type Object
47	* @example
48	*/
49	CKEDITOR.ui.panel.handler =
50	{
51	create : function( definition )
52	{
53	return new CKEDITOR.ui.panel( definition );
54	}
55	};
56
57	CKEDITOR.ui.panel.prototype =
58	{
59	renderHtml : function( editor )
60	{
61	var output = [];
62	this.render( editor, output );
63	return output.join( '' );
64	},
65
66	/**
67	* Renders the combo.
68	* @param {CKEDITOR.editor} editor The editor instance which this button is
69	* to be used by.
70	* @param {Array} output The output array to which append the HTML relative
71	* to this button.
72	* @example
73	*/
74	render : function( editor, output )
75	{
76	var id = 'cke_' + this.id;
77
78	output.push(
79	'<div class="', editor.skinClass ,'"' +
80	' lang="', editor.langCode, '"' +
81	' role="presentation"' +
82	// iframe loading need sometime, keep the panel hidden(#4186).
83	' style="display:none;z-index:' + ( editor.config.baseFloatZIndex + 1 ) + '">' +
84	'<div' +
85	' id=', id,
86	' dir=', editor.lang.dir,
87	' role="presentation"' +
88	' class="cke_panel cke_', editor.lang.dir );
89
90	if ( this.className )
91	output.push( ' ', this.className );
92
93	output.push(
94	'">' );
95
96	if ( this.forceIFrame \|\| this.css.length )
97	{
98	output.push(
99	'<iframe id="', id, '_frame"' +
100	' frameborder="0"' +
101	' role="application" src="javascript:void(' );
102
103	output.push(
104	// Support for custom document.domain in IE.
105	CKEDITOR.env.isCustomDomain() ?
106	'(function(){' +
107	'document.open();' +
108	'document.domain=\'' + document.domain + '\';' +
109	'document.close();' +
110	'})()'
111	:
112	'0' );
113
114	output.push(
115	')"></iframe>' );
116	}
117
118	output.push(
119	'</div>' +
120	'</div>' );
121
122	return id;
123	},
124
125	getHolderElement : function()
126	{
127	var holder = this._.holder;
128
129	if ( !holder )
130	{
131	if ( this.forceIFrame \|\| this.css.length )
132	{
133	var iframe = this.document.getById( 'cke_' + this.id + '_frame' ),
134	parentDiv = iframe.getParent(),
135	dir = parentDiv.getAttribute( 'dir' ),
136	className = parentDiv.getParent().getAttribute( 'class' ),
137	langCode = parentDiv.getParent().getAttribute( 'lang' ),
138	doc = iframe.getFrameDocument();
139	// Initialize the IFRAME document body.
140	doc.$.open();
141
142	// Support for custom document.domain in IE.
143	if ( CKEDITOR.env.isCustomDomain() )
144	doc.$.domain = document.domain;
145
146	var onLoad = CKEDITOR.tools.addFunction( CKEDITOR.tools.bind( function( ev )
147	{
148	this.isLoaded = true;
149	if ( this.onLoad )
150	this.onLoad();
151	}, this ) );
152
153	doc.$.write(
154	'<!DOCTYPE html>' +
155	'<html dir="' + dir + '" class="' + className + '_container" lang="' + langCode + '">' +
156	'<head>' +
157	'<style>.' + className + '_container{visibility:hidden}</style>' +
158	'</head>' +
159	'<body class="cke_' + dir + ' cke_panel_frame ' + CKEDITOR.env.cssClass + '" style="margin:0;padding:0"' +
160	' onload="( window.CKEDITOR \|\| window.parent.CKEDITOR ).tools.callFunction(' + onLoad + ');"></body>' +
161	// It looks strange, but for FF2, the styles must go
162	// after <body>, so it (body) becames immediatelly
163	// available. (#3031)
164	CKEDITOR.tools.buildStyleHtml( this.css ) +
165	'<\/html>' );
166	doc.$.close();
167
168	var win = doc.getWindow();
169
170	// Register the CKEDITOR global.
171	win.$.CKEDITOR = CKEDITOR;
172
173	doc.on( 'keydown', function( evt )
174	{
175	var keystroke = evt.data.getKeystroke(),
176	dir = this.document.getById( 'cke_' + this.id ).getAttribute( 'dir' );
177
178	// Delegate key processing to block.
179	if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false )
180	{
181	evt.data.preventDefault();
182	return;
183	}
184
185	// ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl)
186	if ( keystroke == 27 \|\| keystroke == ( dir == 'rtl' ? 39 : 37 ) )
187	{
188	if ( this.onEscape && this.onEscape( keystroke ) === false )
189	evt.data.preventDefault( );
190	}
191	},
192	this );
193
194	holder = doc.getBody();
195	}
196	else
197	holder = this.document.getById( 'cke_' + this.id );
198
199	this._.holder = holder;
200	}
201
202	return holder;
203	},
204
205	addBlock : function( name, block )
206	{
207	block = this._.blocks[ name ] = block instanceof CKEDITOR.ui.panel.block ? block
208	: new CKEDITOR.ui.panel.block( this.getHolderElement(), block );
209
210	if ( !this._.currentBlock )
211	this.showBlock( name );
212
213	return block;
214	},
215
216	getBlock : function( name )
217	{
218	return this._.blocks[ name ];
219	},
220
221	showBlock : function( name )
222	{
223	var blocks = this._.blocks,
224	block = blocks[ name ],
225	current = this._.currentBlock,
226	holder = this.forceIFrame ?
227	this.document.getById( 'cke_' + this.id + '_frame' )
228	: this._.holder;
229
230	// Disable context menu for block panel.
231	holder.getParent().getParent().disableContextMenu();
232
233	if ( current )
234	{
235	// Clean up the current block's effects on holder.
236	holder.removeAttributes( current.attributes );
237	current.hide();
238	}
239
240	this._.currentBlock = block;
241
242	holder.setAttributes( block.attributes );
243	CKEDITOR.fire( 'ariaWidget', holder );
244
245	// Reset the focus index, so it will always go into the first one.
246	block._.focusIndex = -1;
247
248	this._.onKeyDown = block.onKeyDown && CKEDITOR.tools.bind( block.onKeyDown, block );
249
250	block.onMark = function( item )
251	{
252	holder.setAttribute( 'aria-activedescendant', item.getId() + '_option' );
253	};
254
255	block.onUnmark = function()
256	{
257	holder.removeAttribute( 'aria-activedescendant' );
258	};
259
260	block.show();
261
262	return block;
263	},
264
265	destroy : function()
266	{
267	this.element && this.element.remove();
268	}
269	};
270
271	CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass(
272	{
273	$ : function( blockHolder, blockDefinition )
274	{
275	this.element = blockHolder.append(
276	blockHolder.getDocument().createElement( 'div',
277	{
278	attributes :
279	{
280	'tabIndex' : -1,
281	'class' : 'cke_panel_block',
282	'role' : 'presentation'
283	},
284	styles :
285	{
286	display : 'none'
287	}
288	}) );
289
290	// Copy all definition properties to this object.
291	if ( blockDefinition )
292	CKEDITOR.tools.extend( this, blockDefinition );
293
294	if ( !this.attributes.title )
295	this.attributes.title = this.attributes[ 'aria-label' ];
296
297	this.keys = {};
298
299	this._.focusIndex = -1;
300
301	// Disable context menu for panels.
302	this.element.disableContextMenu();
303	},
304
305	_ : {
306
307	/**
308	* Mark the item specified by the index as current activated.
309	*/
310	markItem: function( index )
311	{
312	if ( index == -1 )
313	return;
314	var links = this.element.getElementsByTag( 'a' );
315	var item = links.getItem( this._.focusIndex = index );
316
317	// Safari need focus on the iframe window first(#3389), but we need
318	// lock the blur to avoid hiding the panel.
319	if ( CKEDITOR.env.webkit )
320	item.getDocument().getWindow().focus();
321	item.focus();
322
323	this.onMark && this.onMark( item );
324	}
325	},
326
327	proto :
328	{
329	show : function()
330	{
331	this.element.setStyle( 'display', '' );
332	},
333
334	hide : function()
335	{
336	if ( !this.onHide \|\| this.onHide.call( this ) !== true )
337	this.element.setStyle( 'display', 'none' );
338	},
339
340	onKeyDown : function( keystroke )
341	{
342	var keyAction = this.keys[ keystroke ];
343	switch ( keyAction )
344	{
345	// Move forward.
346	case 'next' :
347	var index = this._.focusIndex,
348	links = this.element.getElementsByTag( 'a' ),
349	link;
350
351	while ( ( link = links.getItem( ++index ) ) )
352	{
353	// Move the focus only if the element is marked with
354	// the _cke_focus and it it's visible (check if it has
355	// width).
356	if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth )
357	{
358	this._.focusIndex = index;
359	link.focus();
360	break;
361	}
362	}
363	return false;
364
365	// Move backward.
366	case 'prev' :
367	index = this._.focusIndex;
368	links = this.element.getElementsByTag( 'a' );
369
370	while ( index > 0 && ( link = links.getItem( --index ) ) )
371	{
372	// Move the focus only if the element is marked with
373	// the _cke_focus and it it's visible (check if it has
374	// width).
375	if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth )
376	{
377	this._.focusIndex = index;
378	link.focus();
379	break;
380	}
381	}
382	return false;
383
384	case 'click' :
385	index = this._.focusIndex;
386	link = index >= 0 && this.element.getElementsByTag( 'a' ).getItem( index );
387
388	if ( link )
389	link.$.click ? link.$.click() : link.$.onclick();
390
391	return false;
392	}
393
394	return true;
395	}
396	}
397	});

Note: See TracBrowser for help on using the repository browser.

Download in other formats: