7ae362d818ce086625665e57d4055ac4c6057f15
[Packages/TYPO3.CMS.git] / t3lib / js / extjs / 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 tip.setTitle(response.title);
104 tip.doAutoWidth();
105 }
106
107
108 return {
109 /**
110 * Constructor
111 */
112 init: function() {
113 tip = new Ext.ToolTip({
114 title: 'CSH', // needs a title for init because of the markup
115 html: '',
116 // The tooltip will appear above the label, if viewport allows
117 anchor: 'bottom',
118 minWidth: 160,
119 maxWidth: 240,
120 target: Ext.getBody(),
121 delegate: 'span.t3-help-link',
122 renderTo: Ext.getBody(),
123 cls: 'typo3-csh-tooltip',
124 shadow: false,
125 dismissDelay: 0, // tooltip stays while mouse is over target
126 autoHide: true,
127 showDelay: 1000, // show after 1 second
128 hideDelay: 300, // hide after 0.3 seconds
129 closable: true,
130 isMouseOver: false,
131 listeners: {
132 beforeshow: showToolTipHelp,
133 render: function(tip) {
134 tip.body.on({
135 'click': {
136 fn: function(event) {
137 event.stopEvent();
138 if (tip.moreInfo) {
139 try {
140 top.TYPO3.ContextHelpWindow.open(tip.cshLink);
141 } catch(e) {
142 // do nothing
143 }
144 }
145 tip.hide();
146 }
147 }
148 });
149 tip.el.on({
150 'mouseover': {
151 fn: function() {
152 if (tip.moreInfo) {
153 tip.isMouseOver = true;
154 }
155 }
156 },
157 'mouseout': {
158 fn: function() {
159 if (tip.moreInfo) {
160 tip.isMouseOver = false;
161 tip.hide.defer(tip.hideDelay, tip, []);
162 }
163 }
164 }
165 });
166 },
167 hide: function(tip) {
168 tip.setTitle('');
169 tip.body.dom.innerHTML = '';
170 },
171 beforehide: function(tip) {
172 return !tip.isMouseOver;
173 },
174 scope: this
175 }
176 });
177
178 Ext.getBody().on({
179 'keydown': {
180 fn: function() {
181 tip.hide();
182 }
183 },
184 'click': {
185 fn: function() {
186 tip.hide();
187 }
188 }
189 });
190
191 /**
192 * Adds a sequence to Ext.TooltTip::showAt so as to increase vertical offset when anchor position is 'botton'
193 * This positions the tip box closer to the target element when the anchor is on the bottom side of the box
194 * 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
195 *
196 */
197 Ext.ToolTip.prototype.showAt = Ext.ToolTip.prototype.showAt.createSequence(
198 function() {
199 var ap = this.getAnchorPosition().charAt(0);
200 if (this.anchorToTarget && !this.trackMouse) {
201 switch (ap) {
202 case 'b':
203 var xy = this.getPosition();
204 this.setPagePosition(xy[0]-10, xy[1]+5);
205 break;
206 case 't':
207 var xy = this.getPosition();
208 this.setPagePosition(xy[0]-10, xy[1]);
209 break;
210 }
211 }
212 }
213 );
214
215 },
216
217 /**
218 * Opens the help window, triggered from click event handler
219 *
220 * @param {Event} event
221 * @param {Node} link
222 */
223 openHelpWindow: function(event, link) {
224 var id = link.getAttribute('data-table') + '.' + link.getAttribute('data-field');
225 event.stopEvent();
226 top.TYPO3.ContextHelpWindow.open(id);
227 }
228 }
229 }();
230
231 /**
232 * Calls the init on Ext.onReady
233 */
234 Ext.onReady(TYPO3.ContextHelp.init, TYPO3.ContextHelp);