2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
6 CKEDITOR.plugins.add( 'devtools',
10 init : function( editor )
12 editor._.showDialogDefinitionTooltips = 1;
16 CKEDITOR.document.appendStyleText( CKEDITOR.config.devtools_styles ||
17 '#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' +
18 '#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +
19 '#cke_tooltip ul { padding: 0pt; list-style-type: none; }' );
25 function defaultCallback( editor, dialog, element, tabName )
27 var lang = editor.lang.devTools,
28 link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +
29 ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
30 '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
32 '<h2>' + lang.title + '</h2>' +
34 '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
35 '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
38 str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
40 str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
45 function showTooltip( callback, el, editor, dialog, obj, tabName )
47 var pos = el.getDocumentPosition(),
48 styles = { 'z-index' : CKEDITOR.dialog._.currentZIndex + 10, top : ( pos.y + el.getSize( 'height' ) ) + 'px' };
50 tooltip.setHtml( callback( editor, dialog, obj, tabName ) );
53 // Translate coordinate for RTL.
54 if ( editor.lang.dir == 'rtl' )
56 var viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();
57 styles.right = ( viewPaneSize.width - pos.x - el.getSize( 'width' ) ) + 'px';
60 styles.left = pos.x + 'px';
62 tooltip.setStyles( styles );
66 CKEDITOR.on( 'reset', function()
68 tooltip && tooltip.remove();
72 CKEDITOR.on( 'dialogDefinition', function( evt )
74 var editor = evt.editor;
75 if ( editor._.showDialogDefinitionTooltips )
79 tooltip = CKEDITOR.dom.element.createFromHtml( '<div id="cke_tooltip" tabindex="-1" style="position: absolute"></div>', CKEDITOR.document );
81 tooltip.on( 'mouseover', function(){ this.show(); } );
82 tooltip.on( 'mouseout', function(){ this.hide(); } );
83 tooltip.appendTo( CKEDITOR.document.getBody() );
86 var dialog = evt.data.definition.dialog,
87 callback = editor.config.devtools_textCallback || defaultCallback;
89 dialog.on( 'load', function()
91 var tabs = dialog.parts.tabs.getChildren(), tab;
92 for ( var i = 0, len = tabs.count(); i < len; i++ )
94 tab = tabs.getItem( i );
95 tab.on( 'mouseover', function()
98 showTooltip( callback, this, editor, dialog, null, id.substring( 4, id.lastIndexOf( '_' ) ) );
100 tab.on( 'mouseout', function()
106 dialog.foreach( function( obj )
108 if ( obj.type in { hbox : 1, vbox : 1 } )
111 var el = obj.getElement();
114 el.on( 'mouseover', function()
116 showTooltip( callback, this, editor, dialog, obj, dialog._.currentTabId );
118 el.on( 'mouseout', function()
130 * A function that returns the text to be displayed inside the Developer Tools tooltip when hovering over a dialog UI element.
131 * There are 4 parameters that are being passed into the function: editor, dialog window, element, tab name.
132 * @name editor.config.devtools_textCallback
135 * @default (see example)
137 * // This is actually the default value.
138 * // Show dialog window name, tab ID, and element ID.
139 * config.devtools_textCallback = function( editor, dialog, element, tabName )
141 * var lang = editor.lang.devTools,
142 * link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +
143 * ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +
144 * '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',
146 * '<h2>' + lang.title + '</h2>' +
148 * '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
149 * '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
152 * str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
154 * str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
156 * return str + '</ul>';
161 * A setting that stores CSS rules to be injected into the page with styles to be applied to the tooltip element.
162 * @name CKEDITOR.config.devtools_styles
165 * @default (see example)
167 * // This is actually the default value.
168 * CKEDITOR.config.devtools_styles = "
169 * #cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }
170 * #cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }
171 * #cke_tooltip ul { padding: 0pt; list-style-type: none; }