_source/plugins/devtools/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 CKEDITOR.plugins.add( 'devtools',\r
   7 {\r
   8         lang : [ 'bg', 'cs', 'cy', 'da', 'de', 'el', 'en', 'eo', 'et', 'fa', 'fi', 'fr', 'gu', 'he', 'hr', 'it', 'nb', 'nl', 'no', 'pl', 'tr', 'ug', 'uk', 'vi', 'zh-cn' ],\r
   9 \r
  10         init : function( editor )\r
  11         {\r
  12                 editor._.showDialogDefinitionTooltips = 1;\r
  13         },\r
  14         onLoad : function()\r
  15         {\r
  16                 CKEDITOR.document.appendStyleText( CKEDITOR.config.devtools_styles ||\r
  17                                                         '#cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }' +\r
  18                                                         '#cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }' +\r
  19                                                         '#cke_tooltip ul { padding: 0pt; list-style-type: none; }' );\r
  20         }\r
  21 });\r
  22 \r
  23 (function()\r
  24 {\r
  25         function defaultCallback( editor, dialog, element, tabName )\r
  26         {\r
  27                 var lang = editor.lang.devTools,\r
  28                         link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +\r
  29                                         ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +\r
  30                                         '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',\r
  31                         str =\r
  32                                 '<h2>' + lang.title + '</h2>' +\r
  33                                 '<ul>' +\r
  34                                         '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +\r
  35                                         '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';\r
  36 \r
  37                 if ( element )\r
  38                         str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';\r
  39 \r
  40                 str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';\r
  41 \r
  42                 return str + '</ul>';\r
  43         }\r
  44 \r
  45         function showTooltip( callback, el, editor, dialog, obj, tabName )\r
  46         {\r
  47                 var pos = el.getDocumentPosition(),\r
  48                         styles = { 'z-index' : CKEDITOR.dialog._.currentZIndex + 10, top : ( pos.y + el.getSize( 'height' ) ) + 'px' };\r
  49 \r
  50                 tooltip.setHtml( callback( editor, dialog, obj, tabName ) );\r
  51                 tooltip.show();\r
  52 \r
  53                 // Translate coordinate for RTL.\r
  54                 if ( editor.lang.dir == 'rtl' )\r
  55                 {\r
  56                         var viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize();\r
  57                         styles.right = ( viewPaneSize.width - pos.x - el.getSize( 'width' ) ) + 'px';\r
  58                 }\r
  59                 else\r
  60                         styles.left = pos.x + 'px';\r
  61 \r
  62                 tooltip.setStyles( styles );\r
  63         }\r
  64 \r
  65         var tooltip;\r
  66         CKEDITOR.on( 'reset', function()\r
  67         {\r
  68                 tooltip && tooltip.remove();\r
  69                 tooltip = null;\r
  70         });\r
  71 \r
  72         CKEDITOR.on( 'dialogDefinition', function( evt )\r
  73         {\r
  74                 var editor = evt.editor;\r
  75                 if ( editor._.showDialogDefinitionTooltips )\r
  76                 {\r
  77                         if ( !tooltip )\r
  78                         {\r
  79                                 tooltip = CKEDITOR.dom.element.createFromHtml( '<div id="cke_tooltip" tabindex="-1" style="position: absolute"></div>', CKEDITOR.document );\r
  80                                 tooltip.hide();\r
  81                                 tooltip.on( 'mouseover', function(){ this.show(); } );\r
  82                                 tooltip.on( 'mouseout', function(){ this.hide(); } );\r
  83                                 tooltip.appendTo( CKEDITOR.document.getBody() );\r
  84                         }\r
  85 \r
  86                         var dialog = evt.data.definition.dialog,\r
  87                                 callback = editor.config.devtools_textCallback || defaultCallback;\r
  88 \r
  89                         dialog.on( 'load', function()\r
  90                         {\r
  91                                 var tabs = dialog.parts.tabs.getChildren(), tab;\r
  92                                 for ( var i = 0, len = tabs.count(); i < len; i++ )\r
  93                                 {\r
  94                                         tab = tabs.getItem( i );\r
  95                                         tab.on( 'mouseover', function()\r
  96                                         {\r
  97                                                 var id = this.$.id;\r
  98                                                 showTooltip( callback, this, editor, dialog, null, id.substring( 4, id.lastIndexOf( '_' ) ) );\r
  99                                         });\r
 100                                         tab.on( 'mouseout', function()\r
 101                                         {\r
 102                                                 tooltip.hide();\r
 103                                         });\r
 104                                 }\r
 105 \r
 106                                 dialog.foreach( function( obj )\r
 107                                 {\r
 108                                         if ( obj.type in { hbox : 1, vbox : 1 } )\r
 109                                                 return;\r
 110 \r
 111                                         var el = obj.getElement();\r
 112                                         if ( el )\r
 113                                         {\r
 114                                                 el.on( 'mouseover', function()\r
 115                                                 {\r
 116                                                         showTooltip( callback, this, editor, dialog, obj, dialog._.currentTabId );\r
 117                                                 });\r
 118                                                 el.on( 'mouseout', function()\r
 119                                                 {\r
 120                                                         tooltip.hide();\r
 121                                                 });\r
 122                                         }\r
 123                                 });\r
 124                         });\r
 125                 }\r
 126         });\r
 127 })();\r
 128 \r
 129 /**\r
 130  * A function that returns the text to be displayed inside the Developer Tools tooltip when hovering over a dialog UI element.\r
 131  * There are 4 parameters that are being passed into the function: editor, dialog window, element, tab name.\r
 132  * @name editor.config.devtools_textCallback\r
 133  * @since 3.6\r
 134  * @type Function\r
 135  * @default (see example)\r
 136  * @example\r
 137  * // This is actually the default value.\r
 138  * // Show dialog window name, tab ID, and element ID.\r
 139  * config.devtools_textCallback = function( editor, dialog, element, tabName )\r
 140  * {\r
 141  *      var lang = editor.lang.devTools,\r
 142  *              link = '<a href="http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.' +\r
 143  *                              ( element ? ( element.type == 'text' ? 'textInput' : element.type ) : 'content' ) +\r
 144  *                              '.html" target="_blank">' + ( element ? element.type : 'content' ) + '</a>',\r
 145  *              str =\r
 146  *                      '<h2>' + lang.title + '</h2>' +\r
 147  *                      '<ul>' +\r
 148  *                              '<li><strong>' + lang.dialogName + '</strong> : ' + dialog.getName() + '</li>' +\r
 149  *                              '<li><strong>' + lang.tabName + '</strong> : ' + tabName + '</li>';\r
 150  *\r
 151  *      if ( element )\r
 152  *              str += '<li><strong>' + lang.elementId + '</strong> : ' + element.id + '</li>';\r
 153  *\r
 154  *      str += '<li><strong>' + lang.elementType + '</strong> : ' + link + '</li>';\r
 155  *\r
 156  *      return str + '</ul>';\r
 157  * }\r
 158  */\r
 159 \r
 160 /**\r
 161  * A setting that stores CSS rules to be injected into the page with styles to be applied to the tooltip element.\r
 162  * @name CKEDITOR.config.devtools_styles\r
 163  * @since 3.6\r
 164  * @type String\r
 165  * @default (see example)\r
 166  * @example\r
 167  * // This is actually the default value.\r
 168  * CKEDITOR.config.devtools_styles = &quot;\r
 169  *  #cke_tooltip { padding: 5px; border: 2px solid #333; background: #ffffff }\r
 170  *  #cke_tooltip h2 { font-size: 1.1em; border-bottom: 1px solid; margin: 0; padding: 1px; }\r
 171  *  #cke_tooltip ul { padding: 0pt; list-style-type: none; }\r
 172  * &quot;;\r
 173  */\r