source: trunk/admin/inc/ckeditor/_source/plugins/devtools/plugin.js@ 240

Last change on this file since 240 was 239, checked in by luc, 9 years ago

Admin: correzione visulaizzazione immissione dati spoglio per Chrome e Safari - Aggiornamento dell'editor da FCKeditor a CKeditor , accessibili anche a Chrome e Safari.
  • Property svn:executable set to *
File size: 5.5 KB
Line 
1/*
2Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3For licensing, see LICENSE.html or http://ckeditor.com/license
4*/
5
6CKEDITOR.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 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 = &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 */
Note: See TracBrowser for help on using the repository browser.