1 /*
  2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
  3 For licensing, see LICENSE.html or http://ckeditor.com/license
  4 */
  5 
  6 CKEDITOR.plugins.add( 'devtools',
  7 {
  8 	lang : [ 'en', 'bg', 'cs', 'cy', 'da', 'de', 'el', 'eo', 'et', 'fa', 'fi', 'fr', 'gu', 'he', 'hr', 'it', 'ku', 'nb', 'nl', 'no', 'pl', 'pt-br', 'sk', 'tr', 'ug', 'uk', 'vi', 'zh-cn' ],
  9 
 10 	init : function( editor )
 11 	{
 12 		editor._.showDialogDefinitionTooltips = 1;
 13 	},
 14 	onLoad : function()
 15 	{
 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; }' );
 20 	}
 21 });
 22 
 23 (function()
 24 {
 25 	function defaultCallback( editor, dialog, element, tabName )
 26 	{
 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>',
 31 			str =
 32 				'<h2>' + lang.title + '</h2>' +
 33 				'<ul>' +
 34 					'<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
 35 					'<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
 36 
 37 		if ( element )
 38 			str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
 39 
 40 		str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
 41 
 42 		return str + '</ul>';
 43 	}
 44 
 45 	function showTooltip( callback, el, editor, dialog, obj, tabName )
 46 	{
 47 		var pos = el.getDocumentPosition(),
 48 			styles = { 'z-index' : CKEDITOR.dialog._.currentZIndex + 10, top : ( pos.y + el.getSize( 'height' ) ) + 'px' };
 49 
 50 		tooltip.setHtml( callback( editor, dialog, obj, tabName ) );
 51 		tooltip.show();
 52 
 53 		// Translate coordinate for RTL.
 54 		if ( editor.lang.dir == 'rtl' )
 55 		{
 56 			var viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();
 57 			styles.right = ( viewPaneSize.width - pos.x - el.getSize( 'width' ) ) + 'px';
 58 		}
 59 		else
 60 			styles.left = pos.x + 'px';
 61 
 62 		tooltip.setStyles( styles );
 63 	}
 64 
 65 	var tooltip;
 66 	CKEDITOR.on( 'reset', function()
 67 	{
 68 		tooltip && tooltip.remove();
 69 		tooltip = null;
 70 	});
 71 
 72 	CKEDITOR.on( 'dialogDefinition', function( evt )
 73 	{
 74 		var editor = evt.editor;
 75 		if ( editor._.showDialogDefinitionTooltips )
 76 		{
 77 			if ( !tooltip )
 78 			{
 79 				tooltip = CKEDITOR.dom.element.createFromHtml( '<div id="cke_tooltip" tabindex="-1" style="position: absolute"></div>', CKEDITOR.document );
 80 				tooltip.hide();
 81 				tooltip.on( 'mouseover', function(){ this.show(); } );
 82 				tooltip.on( 'mouseout', function(){ this.hide(); } );
 83 				tooltip.appendTo( CKEDITOR.document.getBody() );
 84 			}
 85 
 86 			var dialog = evt.data.definition.dialog,
 87 				callback = editor.config.devtools_textCallback || defaultCallback;
 88 
 89 			dialog.on( 'load', function()
 90 			{
 91 				var tabs = dialog.parts.tabs.getChildren(), tab;
 92 				for ( var i = 0, len = tabs.count(); i < len; i++ )
 93 				{
 94 					tab = tabs.getItem( i );
 95 					tab.on( 'mouseover', function()
 96 					{
 97 						var id = this.$.id;
 98 						showTooltip( callback, this, editor, dialog, null, id.substring( 4, id.lastIndexOf( '_' ) ) );
 99 					});
100 					tab.on( 'mouseout', function()
101 					{
102 						tooltip.hide();
103 					});
104 				}
105 
106 				dialog.foreach( function( obj )
107 				{
108 					if ( obj.type in { hbox : 1, vbox : 1 } )
109 						return;
110 
111 					var el = obj.getElement();
112 					if ( el )
113 					{
114 						el.on( 'mouseover', function()
115 						{
116 							showTooltip( callback, this, editor, dialog, obj, dialog._.currentTabId );
117 						});
118 						el.on( 'mouseout', function()
119 						{
120 							tooltip.hide();
121 						});
122 					}
123 				});
124 			});
125 		}
126 	});
127 })();
128 
129 /**
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
133  * @since 3.6
134  * @type Function
135  * @default (see example)
136  * @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 )
140  * {
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>',
145  * 		str =
146  * 			'<h2>' + lang.title + '</h2>' +
147  * 			'<ul>' +
148  * 				'<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +
149  * 				'<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';
150  *
151  * 	if ( element )
152  * 		str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';
153  *
154  * 	str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';
155  *
156  * 	return str + '</ul>';
157  * }
158  */
159 
160 /**
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
163  * @since 3.6
164  * @type String
165  * @default (see example)
166  * @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; }
172  * ";
173  */
174