_source/plugins/devtools/plugin.js

   1 /*
   2 Copyright (c) 2003-2011, 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' ],
   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 tooltip when hovering over a dialog UI element.
 131  * There are 4 parameters that are being passed into the function: editor, dialog, 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 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 holds CSS rules to be injected do page and contain 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 = &quot;
 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  * &quot;;
 173  */