--- /dev/null
+/*\r
+Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+\r
+CKEDITOR.plugins.add( 'devtools',\r
+{\r
+ lang : [ 'en' ],\r
+\r
+ init : function( editor )\r
+ {\r
+ editor._.showDialogDefinitionTooltips = 1;\r
+ },\r
+ onLoad : function()\r
+ {\r
+ CKEDITOR.document.appendStyleText( CKEDITOR.config.devtools_styles ||\r
+ '#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' +\r
+ '#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +\r
+ '#cke_tooltip ul { padding: 0pt; list-style-type: none; }' );\r
+ }\r
+});\r
+\r
+(function()\r
+{\r
+ function defaultCallback( editor, dialog, element, tabName )\r
+ {\r
+ var lang = editor.lang.devTools,\r
+ link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +\r
+ ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +\r
+ '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',\r
+ str =\r
+ '<h2>' + lang.title + '</h2>' +\r
+ '<ul>' +\r
+ '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +\r
+ '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';\r
+\r
+ if ( element )\r
+ str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';\r
+\r
+ str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';\r
+\r
+ return str + '</ul>';\r
+ }\r
+\r
+ function showTooltip( callback, el, editor, dialog, obj, tabName )\r
+ {\r
+ var pos = el.getDocumentPosition(),\r
+ styles = { 'z-index' : CKEDITOR.dialog._.currentZIndex + 10, top : ( pos.y + el.getSize( 'height' ) ) + 'px' };\r
+\r
+ tooltip.setHtml( callback( editor, dialog, obj, tabName ) );\r
+ tooltip.show();\r
+\r
+ // Translate coordinate for RTL.\r
+ if ( editor.lang.dir == 'rtl' )\r
+ {\r
+ var viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
+ styles.right = ( viewPaneSize.width - pos.x - el.getSize( 'width' ) ) + 'px';\r
+ }\r
+ else\r
+ styles.left = pos.x + 'px';\r
+\r
+ tooltip.setStyles( styles );\r
+ }\r
+\r
+ var tooltip;\r
+ CKEDITOR.on( 'reset', function()\r
+ {\r
+ tooltip && tooltip.remove();\r
+ tooltip = null;\r
+ });\r
+\r
+ CKEDITOR.on( 'dialogDefinition', function( evt )\r
+ {\r
+ var editor = evt.editor;\r
+ if ( editor._.showDialogDefinitionTooltips )\r
+ {\r
+ if ( !tooltip )\r
+ {\r
+ tooltip = CKEDITOR.dom.element.createFromHtml( '<div id="cke_tooltip" tabindex="-1" style="position: absolute"></div>', CKEDITOR.document );\r
+ tooltip.hide();\r
+ tooltip.on( 'mouseover', function(){ this.show(); } );\r
+ tooltip.on( 'mouseout', function(){ this.hide(); } );\r
+ tooltip.appendTo( CKEDITOR.document.getBody() );\r
+ }\r
+\r
+ var dialog = evt.data.definition.dialog,\r
+ callback = editor.config.devtools_textCallback || defaultCallback;\r
+\r
+ dialog.on( 'load', function()\r
+ {\r
+ var tabs = dialog.parts.tabs.getChildren(), tab;\r
+ for ( var i = 0, len = tabs.count(); i < len; i++ )\r
+ {\r
+ tab = tabs.getItem( i );\r
+ tab.on( 'mouseover', function()\r
+ {\r
+ var id = this.$.id;\r
+ showTooltip( callback, this, editor, dialog, null, id.substring( 4, id.lastIndexOf( '_' ) ) );\r
+ });\r
+ tab.on( 'mouseout', function()\r
+ {\r
+ tooltip.hide();\r
+ });\r
+ }\r
+\r
+ dialog.foreach( function( obj )\r
+ {\r
+ if ( obj.type in { hbox : 1, vbox : 1 } )\r
+ return;\r
+\r
+ var el = obj.getElement();\r
+ if ( el )\r
+ {\r
+ el.on( 'mouseover', function()\r
+ {\r
+ showTooltip( callback, this, editor, dialog, obj, dialog._.currentTabId );\r
+ });\r
+ el.on( 'mouseout', function()\r
+ {\r
+ tooltip.hide();\r
+ });\r
+ }\r
+ });\r
+ });\r
+ }\r
+ });\r
+})();\r
+\r
+/**\r
+ * A function that returns the text to be displayed inside the developer tooltip when hovering over a dialog UI element.\r
+ * There are 4 parameters that are being passed into the function: editor, dialog, element, tab name.\r
+ * @name editor.config.devtools_textCallback\r
+ * @since 3.6\r
+ * @type Function\r
+ * @default (see example)\r
+ * @example\r
+ * // This is actually the default value.\r
+ * // Show dialog name, tab id and element id.\r
+ * config.devtools_textCallback = function( editor, dialog, element, tabName )\r
+ * {\r
+ * var lang = editor.lang.devTools,\r
+ * link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +\r
+ * ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +\r
+ * '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',\r
+ * str =\r
+ * '<h2>' + lang.title + '</h2>' +\r
+ * '<ul>' +\r
+ * '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +\r
+ * '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';\r
+ *\r
+ * if ( element )\r
+ * str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';\r
+ *\r
+ * str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';\r
+ *\r
+ * return str + '</ul>';\r
+ * }\r
+ */\r
+\r
+/**\r
+ * A setting that holds CSS rules to be injected do page and contain styles to be applied to the tooltip element.\r
+ * @name CKEDITOR.config.devtools_styles\r
+ * @since 3.6\r
+ * @type String\r
+ * @default (see example)\r
+ * @example\r
+ * // This is actually the default value.\r
+ * CKEDITOR.config.devtools_styles = "\r
+ * #cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }\r
+ * #cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }\r
+ * #cke_tooltip ul { padding: 0pt; list-style-type: none; }\r
+ * ";\r
+ */\r
Got questions, comments, patches, etc.? Contact Jason Woofenden