42b10a3ba4cadb9699a8a2bd31c6c771e02eaa34
[Packages/TYPO3.CMS.git] / t3lib / js / extjs / contexthelp.js
1 /***************************************************************
2 * Copyright notice
3 *
4 * (c) 2010 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 var table = link.getAttribute('data-table');
51 var field = link.getAttribute('data-field');
52 var key = table + '.' + field;
53 var response = cshHelp.key(key);
54 tip.target = tip.triggerElement;
55 if (response) {
56 updateTip(response);
57 } else {
58 // If a table is defined, use ExtDirect call to get the tooltip's content
59 if (table) {
60 // Clear old tooltip contents
61 updateTip({
62 description: top.TYPO3.LLL.core.csh_tooltip_loading,
63 cshLink: '',
64 moreInfo: '',
65 title: ''
66 });
67 // Load content
68 TYPO3.CSH.ExtDirect.getContextHelp(table, field, function(response, options) {
69 cshHelp.add(response);
70 updateTip(response);
71 // Need to re-position because the height may have increased
72 tip.show();
73 }, this);
74
75 // No table was given, use directly title and description
76 } else {
77 updateTip({
78 description: link.getAttribute('data-description'),
79 cshLink: '',
80 moreInfo: '',
81 title: link.getAttribute('data-title')
82 });
83 }
84 }
85 }
86
87 /**
88 * Update tooltip message
89 *
90 * @param {Object} response
91 */
92 function updateTip(response) {
93 tip.body.dom.innerHTML = response.description;
94 tip.cshLink = response.id;
95 tip.moreInfo = response.moreInfo;
96 tip.setTitle(response.title);
97 tip.doAutoWidth();
98 }
99
100
101 return {
102 /**
103 * Constructor
104 */
105 init: function() {
106 tip = new Ext.ToolTip({
107 title: 'CSH', // needs a title for init because of the markup
108 html: '',
109 // The tooltip will appear above the label, if viewport allows
110 anchor: 'bottom',
111 minWidth: 160,
112 maxWidth: 240,
113 target: Ext.getBody(),
114 delegate: 'span.t3-help-link',
115 renderTo: Ext.getBody(),
116 cls: 'typo3-csh-tooltip',
117 shadow: false,
118 dismissDelay: 0, // tooltip stays while mouse is over target
119 autoHide: true,
120 showDelay: 1000, // show after 1 second
121 hideDelay: 300, // hide after 0.3 seconds
122 closable: true,
123 isMouseOver: false,
124 listeners: {
125 beforeshow: showToolTipHelp,
126 render: function(tip) {
127 tip.body.on({
128 'click': {
129 fn: function(event) {
130 event.stopEvent();
131 if (tip.moreInfo) {
132 try {
133 top.TYPO3.ContextHelpWindow.open(tip.cshLink);
134 } catch(e) {
135 // do nothing
136 }
137 }
138 tip.hide();
139 }
140 }
141 });
142 tip.el.on({
143 'mouseover': {
144 fn: function() {
145 tip.isMouseOver = true;
146 }
147 },
148 'mouseout': {
149 fn: function() {
150 tip.isMouseOver = false;
151 tip.hide.defer(200, tip, []);
152 }
153 }
154 });
155 },
156 hide: function(tip) {
157 tip.setTitle('');
158 tip.body.dom.innerHTML = '';
159 },
160 beforehide: function(tip) {
161 return !tip.isMouseOver;
162 },
163 scope: this
164 }
165 });
166
167 Ext.getBody().on({
168 'keydown': {
169 fn: function() {
170 tip.hide();
171 }
172 },
173 'click': {
174 fn: function() {
175 tip.hide();
176 }
177 }
178 });
179
180 /**
181 * Adds a sequence to Ext.TooltTip::showAt so as to increase vertical offset when anchor position is 'botton'
182 * This positions the tip box closer to the target element when the anchor is on the bottom side of the box
183 * 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
184 *
185 */
186 Ext.ToolTip.prototype.showAt = Ext.ToolTip.prototype.showAt.createSequence(
187 function() {
188 var ap = this.getAnchorPosition().charAt(0);
189 if (this.anchorToTarget && !this.trackMouse) {
190 switch (ap) {
191 case 'b':
192 var xy = this.getPosition();
193 this.setPagePosition(xy[0]-10, xy[1]+5);
194 break;
195 case 't':
196 var xy = this.getPosition();
197 this.setPagePosition(xy[0]-10, xy[1]);
198 break;
199 }
200 }
201 }
202 );
203
204 },
205
206 /**
207 * Opens the help window, triggered from click event handler
208 *
209 * @param {Event} event
210 * @param {Node} link
211 */
212 openHelpWindow: function(event, link) {
213 var id = link.getAttribute('data-table') + '.' + link.getAttribute('data-field');
214 event.stopEvent();
215 top.TYPO3.ContextHelpWindow.open(id);
216 }
217 }
218 }();
219
220 /**
221 * Calls the init on Ext.onReady
222 */
223 Ext.onReady(TYPO3.ContextHelp.init, TYPO3.ContextHelp);