e98d5345fe29b25ade63a5fdcf84c24b012a9c59
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / contexthelp.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2010-2011 Steffen Kamper <steffen@typo3.org>
5 * All rights reserved
6 *
7 * This script is part of the TYPO3 project. The TYPO3 project is
8 * free software; you can redistribute it and/or modify
9 * it under the terms of the GNU General Public License as published by
10 * the Free Software Foundation; either version 2 of the License, or
11 * (at your option) any later version.
12 *
13 * The GNU General Public License can be found at
14 * http://www.gnu.org/copyleft/gpl.html.
15 * A copy is found in the textfile GPL.txt and important notices to the license
16 * from the author is found in LICENSE.txt distributed with these scripts.
17 *
18 *
19 * This script is distributed in the hope that it will be useful,
20 * but WITHOUT ANY WARRANTY; without even the implied warranty of
21 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
22 * GNU General Public License for more details.
23 *
24 * This copyright notice MUST APPEAR in all copies of the script!
25 ***************************************************************/
26
27 Ext.ns('TYPO3', 'TYPO3.CSH.ExtDirect');
28
29 /**
30 * Class to show tooltips for links that have the css t3-help-link
31 * need the tags data-table and data-field (HTML5)
32 */
33
34
35 TYPO3.ContextHelp = function() {
36
37 /**
38 * Cache for CSH
39 * @type {Ext.util.MixedCollection}
40 */
41 var cshHelp = new Ext.util.MixedCollection(true),
42 tip;
43
44 /**
45 * Shows the tooltip, triggered from mouseover event handler
46 *
47 */
48 function showToolTipHelp() {
49 var link = tip.triggerElement;
50 if (!link) {
51 return false;
52 }
53 var table = link.getAttribute('data-table');
54 var field = link.getAttribute('data-field');
55 var key = table + '.' + field;
56 var response = cshHelp.key(key);
57 tip.target = tip.triggerElement;
58 if (response) {
59 updateTip(response);
60 } else {
61 // If a table is defined, use ExtDirect call to get the tooltip's content
62 if (table) {
63 // Clear old tooltip contents
64 updateTip({
65 description: top.TYPO3.LLL.core.csh_tooltip_loading,
66 cshLink: '',
67 moreInfo: '',
68 title: ''
69 });
70 // Load content
71 TYPO3.CSH.ExtDirect.getTableContextHelp(table, function(response, options) {
72 Ext.iterate(response, function(key, value){
73 cshHelp.add(value);
74 if (key === field) {
75 updateTip(value);
76 // Need to re-position because the height may have increased
77 tip.show();
78 }
79 });
80 }, this);
81
82 // No table was given, use directly title and description
83 } else {
84 updateTip({
85 description: link.getAttribute('data-description'),
86 cshLink: '',
87 moreInfo: '',
88 title: link.getAttribute('data-title')
89 });
90 }
91 }
92 }
93
94 /**
95 * Update tooltip message
96 *
97 * @param {Object} response
98 */
99 function updateTip(response) {
100 tip.body.dom.innerHTML = response.description;
101 tip.cshLink = response.id;
102 tip.moreInfo = response.moreInfo;
103 if (tip.moreInfo) {
104 tip.addClass('tipIsLinked');
105 }
106 tip.setTitle(response.title);
107 tip.doAutoWidth();
108 }
109
110 return {
111 /**
112 * Constructor
113 */
114 init: function() {
115 tip = new Ext.ToolTip({
116 title: 'CSH', // needs a title for init because of the markup
117 html: '',
118 // The tooltip will appear above the label, if viewport allows
119 anchor: 'bottom',
120 minWidth: 160,
121 maxWidth: 240,
122 target: Ext.getBody(),
123 delegate: 'span.t3-help-link',
124 renderTo: Ext.getBody(),
125 cls: 'typo3-csh-tooltip',
126 shadow: false,
127 dismissDelay: 0, // tooltip stays while mouse is over target
128 autoHide: true,
129 showDelay: 1000, // show after 1 second
130 hideDelay: 300, // hide after 0.3 seconds
131 closable: true,
132 isMouseOver: false,
133 listeners: {
134 beforeshow: showToolTipHelp,
135 render: function(tip) {
136 tip.body.on({
137 'click': {
138 fn: function(event) {
139 event.stopEvent();
140 if (tip.moreInfo) {
141 try {
142 top.TYPO3.ContextHelpWindow.open(tip.cshLink);
143 } catch(e) {
144 // do nothing
145 }
146 }
147 tip.hide();
148 }
149 }
150 });
151 tip.el.on({
152 'mouseover': {
153 fn: function() {
154 if (tip.moreInfo) {
155 tip.isMouseOver = true;
156 }
157 }
158 },
159 'mouseout': {
160 fn: function() {
161 if (tip.moreInfo) {
162 tip.isMouseOver = false;
163 tip.hide.defer(tip.hideDelay, tip, []);
164 }
165 }
166 }
167 });
168 },
169 hide: function(tip) {
170 tip.setTitle('');
171 tip.body.dom.innerHTML = '';
172 },
173 beforehide: function(tip) {
174 return !tip.isMouseOver;
175 },
176 scope: this
177 }
178 });
179
180 Ext.getBody().on({
181 'keydown': {
182 fn: function() {
183 tip.hide();
184 }
185 },
186 'click': {
187 fn: function() {
188 tip.hide();
189 }
190 }
191 });
192
193 /**
194 * Adds a sequence to Ext.TooltTip::showAt so as to increase vertical offset when anchor position is 'botton'
195 * This positions the tip box closer to the target element when the anchor is on the bottom side of the box
196 * When anchor position is 'top' or 'bottom', the anchor is pushed slightly to the left in order to align with the help icon, if any
197 *
198 */
199 Ext.ToolTip.prototype.showAt = Ext.ToolTip.prototype.showAt.createSequence(
200 function() {
201 var ap = this.getAnchorPosition().charAt(0);
202 if (this.anchorToTarget && !this.trackMouse) {
203 switch (ap) {
204 case 'b':
205 var xy = this.getPosition();
206 this.setPagePosition(xy[0]-10, xy[1]+5);
207 break;
208 case 't':
209 var xy = this.getPosition();
210 this.setPagePosition(xy[0]-10, xy[1]);
211 break;
212 }
213 }
214 }
215 );
216
217 },
218
219 /**
220 * Opens the help window, triggered from click event handler
221 *
222 * @param {Event} event
223 * @param {Node} link
224 */
225 openHelpWindow: function(event, link) {
226 var id = link.getAttribute('data-table') + '.' + link.getAttribute('data-field');
227 event.stopEvent();
228 top.TYPO3.ContextHelpWindow.open(id);
229 }
230 }
231 }();
232
233 /**
234 * Calls the init on Ext.onReady
235 */
236 Ext.onReady(TYPO3.ContextHelp.init, TYPO3.ContextHelp);