aboutsummaryrefslogtreecommitdiff
path: root/sources/plugins/panel
diff options
context:
space:
mode:
authorIsmaël Bouya <ismael.bouya@normalesup.org>2016-02-19 23:38:52 +0100
committerIsmaël Bouya <ismael.bouya@normalesup.org>2016-02-19 23:38:52 +0100
commit3332bebe4da6dfa0fe3e4b2abddc84b1cc62f8f5 (patch)
treea4f77655fe55b79606e7d3416504686a1ab8b058 /sources/plugins/panel
downloadpiedsjaloux-ckeditor-component-3332bebe4da6dfa0fe3e4b2abddc84b1cc62f8f5.tar.gz
piedsjaloux-ckeditor-component-3332bebe4da6dfa0fe3e4b2abddc84b1cc62f8f5.tar.zst
piedsjaloux-ckeditor-component-3332bebe4da6dfa0fe3e4b2abddc84b1cc62f8f5.zip
Initial commit4.5.7
Diffstat (limited to 'sources/plugins/panel')
-rw-r--r--sources/plugins/panel/plugin.js403
1 files changed, 403 insertions, 0 deletions
diff --git a/sources/plugins/panel/plugin.js b/sources/plugins/panel/plugin.js
new file mode 100644
index 0000000..44129a9
--- /dev/null
+++ b/sources/plugins/panel/plugin.js
@@ -0,0 +1,403 @@
1/**
2 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6( function() {
7 CKEDITOR.plugins.add( 'panel', {
8 beforeInit: function( editor ) {
9 editor.ui.addHandler( CKEDITOR.UI_PANEL, CKEDITOR.ui.panel.handler );
10 }
11 } );
12
13 /**
14 * Panel UI element.
15 *
16 * @readonly
17 * @property {String} [='panel']
18 * @member CKEDITOR
19 */
20 CKEDITOR.UI_PANEL = 'panel';
21
22 /**
23 * @class
24 * @constructor Creates a panel class instance.
25 * @param {CKEDITOR.dom.document} document
26 * @param {Object} definition
27 */
28 CKEDITOR.ui.panel = function( document, definition ) {
29 // Copy all definition properties to this object.
30 if ( definition )
31 CKEDITOR.tools.extend( this, definition );
32
33 // Set defaults.
34 CKEDITOR.tools.extend( this, {
35 className: '',
36 css: []
37 } );
38
39 this.id = CKEDITOR.tools.getNextId();
40 this.document = document;
41 this.isFramed = this.forceIFrame || this.css.length;
42
43 this._ = {
44 blocks: {}
45 };
46 };
47
48 /**
49 * Represents panel handler object.
50 *
51 * @class
52 * @singleton
53 * @extends CKEDITOR.ui.handlerDefinition
54 */
55 CKEDITOR.ui.panel.handler = {
56 /**
57 * Transforms a panel definition in a {@link CKEDITOR.ui.panel} instance.
58 *
59 * @param {Object} definition
60 * @returns {CKEDITOR.ui.panel}
61 */
62 create: function( definition ) {
63 return new CKEDITOR.ui.panel( definition );
64 }
65 };
66
67 var panelTpl = CKEDITOR.addTemplate( 'panel', '<div lang="{langCode}" id="{id}" dir={dir}' +
68 ' class="cke cke_reset_all {editorId} cke_panel cke_panel {cls} cke_{dir}"' +
69 ' style="z-index:{z-index}" role="presentation">' +
70 '{frame}' +
71 '</div>' );
72
73 var frameTpl = CKEDITOR.addTemplate( 'panel-frame', '<iframe id="{id}" class="cke_panel_frame" role="presentation" frameborder="0" src="{src}"></iframe>' );
74
75 var frameDocTpl = CKEDITOR.addTemplate( 'panel-frame-inner', '<!DOCTYPE html>' +
76 '<html class="cke_panel_container {env}" dir="{dir}" lang="{langCode}">' +
77 '<head>{css}</head>' +
78 '<body class="cke_{dir}"' +
79 ' style="margin:0;padding:0" onload="{onload}"></body>' +
80 '<\/html>' );
81
82 /** @class CKEDITOR.ui.panel */
83 CKEDITOR.ui.panel.prototype = {
84 /**
85 * Renders the combo.
86 *
87 * @param {CKEDITOR.editor} editor The editor instance which this button is
88 * to be used by.
89 * @param {Array} [output] The output array to which append the HTML relative
90 * to this button.
91 */
92 render: function( editor, output ) {
93 this.getHolderElement = function() {
94 var holder = this._.holder;
95
96 if ( !holder ) {
97 if ( this.isFramed ) {
98 var iframe = this.document.getById( this.id + '_frame' ),
99 parentDiv = iframe.getParent(),
100 doc = iframe.getFrameDocument();
101
102 // Make it scrollable on iOS. (#8308)
103 CKEDITOR.env.iOS && parentDiv.setStyles( {
104 'overflow': 'scroll',
105 '-webkit-overflow-scrolling': 'touch'
106 } );
107
108 var onLoad = CKEDITOR.tools.addFunction( CKEDITOR.tools.bind( function() {
109 this.isLoaded = true;
110 if ( this.onLoad )
111 this.onLoad();
112 }, this ) );
113
114 doc.write( frameDocTpl.output( CKEDITOR.tools.extend( {
115 css: CKEDITOR.tools.buildStyleHtml( this.css ),
116 onload: 'window.parent.CKEDITOR.tools.callFunction(' + onLoad + ');'
117 }, data ) ) );
118
119 var win = doc.getWindow();
120
121 // Register the CKEDITOR global.
122 win.$.CKEDITOR = CKEDITOR;
123
124 // Arrow keys for scrolling is only preventable with 'keypress' event in Opera (#4534).
125 doc.on( 'keydown', function( evt ) {
126 var keystroke = evt.data.getKeystroke(),
127 dir = this.document.getById( this.id ).getAttribute( 'dir' );
128
129 // Delegate key processing to block.
130 if ( this._.onKeyDown && this._.onKeyDown( keystroke ) === false ) {
131 evt.data.preventDefault();
132 return;
133 }
134
135 // ESC/ARROW-LEFT(ltr) OR ARROW-RIGHT(rtl)
136 if ( keystroke == 27 || keystroke == ( dir == 'rtl' ? 39 : 37 ) ) {
137 if ( this.onEscape && this.onEscape( keystroke ) === false )
138 evt.data.preventDefault();
139 }
140 }, this );
141
142 holder = doc.getBody();
143 holder.unselectable();
144 CKEDITOR.env.air && CKEDITOR.tools.callFunction( onLoad );
145 } else {
146 holder = this.document.getById( this.id );
147 }
148
149 this._.holder = holder;
150 }
151
152 return holder;
153 };
154
155 var data = {
156 editorId: editor.id,
157 id: this.id,
158 langCode: editor.langCode,
159 dir: editor.lang.dir,
160 cls: this.className,
161 frame: '',
162 env: CKEDITOR.env.cssClass,
163 'z-index': editor.config.baseFloatZIndex + 1
164 };
165
166 if ( this.isFramed ) {
167 // With IE, the custom domain has to be taken care at first,
168 // for other browers, the 'src' attribute should be left empty to
169 // trigger iframe's 'load' event.
170 var src =
171 CKEDITOR.env.air ? 'javascript:void(0)' : // jshint ignore:line
172 CKEDITOR.env.ie ? 'javascript:void(function(){' + encodeURIComponent( // jshint ignore:line
173 'document.open();' +
174 // In IE, the document domain must be set any time we call document.open().
175 '(' + CKEDITOR.tools.fixDomain + ')();' +
176 'document.close();'
177 ) + '}())' :
178 '';
179
180 data.frame = frameTpl.output( {
181 id: this.id + '_frame',
182 src: src
183 } );
184 }
185
186 var html = panelTpl.output( data );
187
188 if ( output )
189 output.push( html );
190
191 return html;
192 },
193
194 /**
195 * @todo
196 */
197 addBlock: function( name, block ) {
198 block = this._.blocks[ name ] = block instanceof CKEDITOR.ui.panel.block ? block : new CKEDITOR.ui.panel.block( this.getHolderElement(), block );
199
200 if ( !this._.currentBlock )
201 this.showBlock( name );
202
203 return block;
204 },
205
206 /**
207 * @todo
208 */
209 getBlock: function( name ) {
210 return this._.blocks[ name ];
211 },
212
213 /**
214 * @todo
215 */
216 showBlock: function( name ) {
217 var blocks = this._.blocks,
218 block = blocks[ name ],
219 current = this._.currentBlock;
220
221 // ARIA role works better in IE on the body element, while on the iframe
222 // for FF. (#8864)
223 var holder = !this.forceIFrame || CKEDITOR.env.ie ? this._.holder : this.document.getById( this.id + '_frame' );
224
225 if ( current )
226 current.hide();
227
228 this._.currentBlock = block;
229
230 CKEDITOR.fire( 'ariaWidget', holder );
231
232 // Reset the focus index, so it will always go into the first one.
233 block._.focusIndex = -1;
234
235 this._.onKeyDown = block.onKeyDown && CKEDITOR.tools.bind( block.onKeyDown, block );
236
237 block.show();
238
239 return block;
240 },
241
242 /**
243 * @todo
244 */
245 destroy: function() {
246 this.element && this.element.remove();
247 }
248 };
249
250 /**
251 * @class
252 *
253 * @todo class and all methods
254 */
255 CKEDITOR.ui.panel.block = CKEDITOR.tools.createClass( {
256 /**
257 * Creates a block class instances.
258 *
259 * @constructor
260 * @todo
261 */
262 $: function( blockHolder, blockDefinition ) {
263 this.element = blockHolder.append( blockHolder.getDocument().createElement( 'div', {
264 attributes: {
265 'tabindex': -1,
266 'class': 'cke_panel_block'
267 },
268 styles: {
269 display: 'none'
270 }
271 } ) );
272
273 // Copy all definition properties to this object.
274 if ( blockDefinition )
275 CKEDITOR.tools.extend( this, blockDefinition );
276
277 // Set the a11y attributes of this element ...
278 this.element.setAttributes( {
279 'role': this.attributes.role || 'presentation',
280 'aria-label': this.attributes[ 'aria-label' ],
281 'title': this.attributes.title || this.attributes[ 'aria-label' ]
282 } );
283
284 this.keys = {};
285
286 this._.focusIndex = -1;
287
288 // Disable context menu for panels.
289 this.element.disableContextMenu();
290 },
291
292 _: {
293
294 /**
295 * Mark the item specified by the index as current activated.
296 */
297 markItem: function( index ) {
298 if ( index == -1 )
299 return;
300 var links = this.element.getElementsByTag( 'a' );
301 var item = links.getItem( this._.focusIndex = index );
302
303 // Safari need focus on the iframe window first(#3389), but we need
304 // lock the blur to avoid hiding the panel.
305 if ( CKEDITOR.env.webkit )
306 item.getDocument().getWindow().focus();
307 item.focus();
308
309 this.onMark && this.onMark( item );
310 }
311 },
312
313 proto: {
314 show: function() {
315 this.element.setStyle( 'display', '' );
316 },
317
318 hide: function() {
319 if ( !this.onHide || this.onHide.call( this ) !== true )
320 this.element.setStyle( 'display', 'none' );
321 },
322
323 onKeyDown: function( keystroke, noCycle ) {
324 var keyAction = this.keys[ keystroke ];
325 switch ( keyAction ) {
326 // Move forward.
327 case 'next':
328 var index = this._.focusIndex,
329 links = this.element.getElementsByTag( 'a' ),
330 link;
331
332 while ( ( link = links.getItem( ++index ) ) ) {
333 // Move the focus only if the element is marked with
334 // the _cke_focus and it it's visible (check if it has
335 // width).
336 if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth ) {
337 this._.focusIndex = index;
338 link.focus();
339 break;
340 }
341 }
342
343 // If no link was found, cycle and restart from the top. (#11125)
344 if ( !link && !noCycle ) {
345 this._.focusIndex = -1;
346 return this.onKeyDown( keystroke, 1 );
347 }
348
349 return false;
350
351 // Move backward.
352 case 'prev':
353 index = this._.focusIndex;
354 links = this.element.getElementsByTag( 'a' );
355
356 while ( index > 0 && ( link = links.getItem( --index ) ) ) {
357 // Move the focus only if the element is marked with
358 // the _cke_focus and it it's visible (check if it has
359 // width).
360 if ( link.getAttribute( '_cke_focus' ) && link.$.offsetWidth ) {
361 this._.focusIndex = index;
362 link.focus();
363 break;
364 }
365
366 // Make sure link is null when the loop ends and nothing was
367 // found (#11125).
368 link = null;
369 }
370
371 // If no link was found, cycle and restart from the bottom. (#11125)
372 if ( !link && !noCycle ) {
373 this._.focusIndex = links.count();
374 return this.onKeyDown( keystroke, 1 );
375 }
376
377 return false;
378
379 case 'click':
380 case 'mouseup':
381 index = this._.focusIndex;
382 link = index >= 0 && this.element.getElementsByTag( 'a' ).getItem( index );
383
384 if ( link )
385 link.$[ keyAction ] ? link.$[ keyAction ]() : link.$[ 'on' + keyAction ]();
386
387 return false;
388 }
389
390 return true;
391 }
392 }
393 } );
394
395} )();
396
397/**
398 * Fired when a panel is added to the document.
399 *
400 * @event ariaWidget
401 * @member CKEDITOR
402 * @param {Object} data The element wrapping the panel.
403 */
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 21:08:13 +0000