Commit e3f1df86722a6d70ce4af7a45c59d62404c302a4
1 parent
9b951b58
Exists in
master
and in
111 other branches
Fix tooltip bug.
Showing
1 changed file
with
31 additions
and
39 deletions
Show diff stats
js/app/views/EpnTapUI.js
@@ -153,13 +153,16 @@ Ext.define('amdaUI.EpnTapUI', { | @@ -153,13 +153,16 @@ Ext.define('amdaUI.EpnTapUI', { | ||
153 | - the service name; | 153 | - the service name; |
154 | - the number of granules matching with the filter. | 154 | - the number of granules matching with the filter. |
155 | 155 | ||
156 | - Other informations are available through the tooltip `serviceTooltip`. | 156 | + Other informations are available through an ExtJS Tooltip, on each row: |
157 | + - short name; | ||
158 | + - title; | ||
159 | + - access URL. | ||
157 | 160 | ||
158 | A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the | 161 | A click on a service triggers `EpnTapModule.onServiceSelected()`, which basically fills `GranulesGrid` by the |
159 | service granules. | 162 | service granules. |
160 | */ | 163 | */ |
161 | var createServicesGrid = function() { | 164 | var createServicesGrid = function() { |
162 | - return new Ext.grid.Panel({ | 165 | + var epnTapServicesGrid = new Ext.grid.Panel({ |
163 | id: 'epnTapServicesGrid', | 166 | id: 'epnTapServicesGrid', |
164 | title: 'Services', | 167 | title: 'Services', |
165 | store: Ext.data.StoreManager.lookup('servicesStore'), | 168 | store: Ext.data.StoreManager.lookup('servicesStore'), |
@@ -176,24 +179,14 @@ Ext.define('amdaUI.EpnTapUI', { | @@ -176,24 +179,14 @@ Ext.define('amdaUI.EpnTapUI', { | ||
176 | }, | 179 | }, |
177 | renderTo: Ext.getBody() | 180 | renderTo: Ext.getBody() |
178 | }); | 181 | }); |
179 | - }; | ||
180 | 182 | ||
181 | - /** | ||
182 | - Create `epnTapServiceTooltip`, an ExtJS tooltip for the `servicesGrid` rows, in order to display additional | ||
183 | - information for each service, such as: | ||
184 | - - short name; | ||
185 | - - title; | ||
186 | - - access URL. | ||
187 | - */ | ||
188 | - var createServiceTooltip = function() { | ||
189 | - return new Ext.tip.ToolTip({ | ||
190 | - id: 'epnTapServiceTooltip', | ||
191 | - target: Ext.getCmp('epnTapServicesGrid').getView().el, | ||
192 | - delegate: Ext.getCmp('epnTapServicesGrid').getView().itemSelector, | 183 | + Ext.create('Ext.tip.ToolTip', { |
184 | + target: epnTapServicesGrid.getView().el, | ||
185 | + delegate: epnTapServicesGrid.getView().itemSelector, | ||
193 | trackMouse: true, | 186 | trackMouse: true, |
194 | listeners: { | 187 | listeners: { |
195 | beforeshow: function updateTipBody(tooltip) { | 188 | beforeshow: function updateTipBody(tooltip) { |
196 | - var service = Ext.getCmp('epnTapServicesGrid').getView().getRecord(tooltip.triggerElement); | 189 | + var service = epnTapServicesGrid.getView().getRecord(tooltip.triggerElement); |
197 | var ttContent = '<h3>' + service.get('shortName') + '</h3>'; | 190 | var ttContent = '<h3>' + service.get('shortName') + '</h3>'; |
198 | ttContent += '<p>' + service.get('title') + '</p>'; | 191 | ttContent += '<p>' + service.get('title') + '</p>'; |
199 | ttContent += '<p>' + service.get('accessURL') + '</p>'; | 192 | ttContent += '<p>' + service.get('accessURL') + '</p>'; |
@@ -202,6 +195,8 @@ Ext.define('amdaUI.EpnTapUI', { | @@ -202,6 +195,8 @@ Ext.define('amdaUI.EpnTapUI', { | ||
202 | }, | 195 | }, |
203 | renderTo: Ext.getBody() | 196 | renderTo: Ext.getBody() |
204 | }); | 197 | }); |
198 | + | ||
199 | + return epnTapServicesGrid; | ||
205 | }; | 200 | }; |
206 | 201 | ||
207 | /** | 202 | /** |
@@ -209,19 +204,21 @@ Ext.define('amdaUI.EpnTapUI', { | @@ -209,19 +204,21 @@ Ext.define('amdaUI.EpnTapUI', { | ||
209 | `epnTapServiceGrid`. | 204 | `epnTapServiceGrid`. |
210 | 205 | ||
211 | For each granule, this grid displays: | 206 | For each granule, this grid displays: |
212 | - - the row number; | ||
213 | - - the dataproduct type; | ||
214 | - - the target name; | ||
215 | - - the min and max times; | ||
216 | - - the format; | ||
217 | - - the UID (granule identifier); | ||
218 | - - the estimated size; | ||
219 | - - the URL; | ||
220 | - - the thumbnail. | 207 | + - the row number; |
208 | + - the dataproduct type; | ||
209 | + - the target name; | ||
210 | + - the min and max times; | ||
211 | + - the format; | ||
212 | + - the UID (granule identifier); | ||
213 | + - the estimated size; | ||
214 | + - the URL; | ||
215 | + - the thumbnail. | ||
221 | 216 | ||
222 | - For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters. | ||
223 | Each of these information are displayed in a specific rendering to improve user experience. | 217 | Each of these information are displayed in a specific rendering to improve user experience. |
224 | - Other informations are available through the tooltip `granuleTooltip`. | 218 | + For more information about these parameters, see https://voparis-confluence.obspm.fr/display/VES/EPN-TAP+V2.0+parameters. |
219 | + | ||
220 | + Other informations are available through an ExtJS Tooltip on each row: | ||
221 | + - currently only the granule thumbnail, in full size. | ||
225 | 222 | ||
226 | A click on a granule triggers `EpnTapModule.onGranuleSelected()`. | 223 | A click on a granule triggers `EpnTapModule.onGranuleSelected()`. |
227 | */ | 224 | */ |
@@ -254,7 +251,7 @@ Ext.define('amdaUI.EpnTapUI', { | @@ -254,7 +251,7 @@ Ext.define('amdaUI.EpnTapUI', { | ||
254 | } | 251 | } |
255 | }; | 252 | }; |
256 | 253 | ||
257 | - return new Ext.grid.Panel({ | 254 | + var epnTapGranulesGrid = new Ext.grid.Panel({ |
258 | id: 'epnTapGranulesGrid', | 255 | id: 'epnTapGranulesGrid', |
259 | title: 'Granules', | 256 | title: 'Granules', |
260 | store: Ext.data.StoreManager.lookup('granulesStore'), | 257 | store: Ext.data.StoreManager.lookup('granulesStore'), |
@@ -276,26 +273,21 @@ Ext.define('amdaUI.EpnTapUI', { | @@ -276,26 +273,21 @@ Ext.define('amdaUI.EpnTapUI', { | ||
276 | }, | 273 | }, |
277 | renderTo: Ext.getBody() | 274 | renderTo: Ext.getBody() |
278 | }); | 275 | }); |
279 | - }; | ||
280 | 276 | ||
281 | - /** | ||
282 | - Create `epnTapGranuleTooltip`, an ExtJS tooltip for the `granulesGrid` rows, in order to display additional | ||
283 | - information for each granule which is currently only the granule thumbnail, in full size. | ||
284 | - */ | ||
285 | - var createGranuleTooltip = function() { | ||
286 | - return new Ext.tip.ToolTip({ | ||
287 | - id: 'epnTapGranuleTooltip', | ||
288 | - target: Ext.getCmp('epnTapGranulesGrid').getView().el, | ||
289 | - delegate: Ext.getCmp('epnTapGranulesGrid').getView().itemSelector, | 277 | + Ext.create('Ext.tip.ToolTip', { |
278 | + target: epnTapGranulesGrid.getView().el, | ||
279 | + delegate: epnTapGranulesGrid.getView().itemSelector, | ||
290 | trackMouse: true, | 280 | trackMouse: true, |
291 | listeners: { | 281 | listeners: { |
292 | beforeshow: function updateTipBody(tooltip) { | 282 | beforeshow: function updateTipBody(tooltip) { |
293 | - var thumb = Ext.getCmp('epnTapGranulesGrid').getView().getRecord(tooltip.triggerElement).get('thumbnail_url'); | 283 | + var thumb = epnTapGranulesGrid.getView().getRecord(tooltip.triggerElement).get('thumbnail_url'); |
294 | tooltip.update('<img src="' + thumb + '">'); | 284 | tooltip.update('<img src="' + thumb + '">'); |
295 | } | 285 | } |
296 | }, | 286 | }, |
297 | renderTo: Ext.getBody() | 287 | renderTo: Ext.getBody() |
298 | }); | 288 | }); |
289 | + | ||
290 | + return epnTapGranulesGrid; | ||
299 | }; | 291 | }; |
300 | 292 | ||
301 | /** | 293 | /** |