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