1 | //******************************************************** |
---|
2 | // Class Tooltip |
---|
3 | // Display a tooltip |
---|
4 | // |
---|
5 | // obj param: {target, [strContent], [msDelay] } |
---|
6 | // dom target: Beside wich dom object display the tooltip |
---|
7 | // [str strContent]: text to display in the tooltip |
---|
8 | // [int msDelay]: delay in millisecond to display the tooltip |
---|
9 | //******************************************************** |
---|
10 | |
---|
11 | var Tooltip = Class.create( { |
---|
12 | initialize: function( param ) |
---|
13 | { |
---|
14 | this.parent = window.document.body; |
---|
15 | this.target = param.target; |
---|
16 | |
---|
17 | var safeLanguage = false; |
---|
18 | if( "undefined" != typeof(language) ) |
---|
19 | { |
---|
20 | safeLanguage = language; |
---|
21 | } |
---|
22 | this.language = param.language || safeLanguage || "en"; |
---|
23 | this.content = param.content || false; |
---|
24 | this.msDelay = 100; |
---|
25 | if( param.msDelay != undefined ) |
---|
26 | this.msDelay = param.msDelay; |
---|
27 | this.sizeX = param.sizeX || false; |
---|
28 | this.sizeY = param.sizeY || false; |
---|
29 | this.isDisplayed = false; |
---|
30 | this.isDisabled = false; |
---|
31 | this.timerDelay = false; |
---|
32 | this.moveX = 0; |
---|
33 | this.moveY = 2; |
---|
34 | this.margin = 2; |
---|
35 | this.position = param.position || "bottom"; |
---|
36 | this.align = param.align || "ltr"; |
---|
37 | |
---|
38 | // Save callback as Event.observe needs the exact callback to be destroyed |
---|
39 | this.onMouseOverObserver = this.onMouseHover.bindAsEventListener( this ); |
---|
40 | this.onMouseOutObserver = this.onMouseOut.bindAsEventListener( this ); |
---|
41 | |
---|
42 | Event.observe( this.target, 'mouseover', this.onMouseOverObserver ); |
---|
43 | Event.observe( this.target, 'mouseout', this.onMouseOutObserver ); |
---|
44 | }, |
---|
45 | |
---|
46 | // Public Actions ******************************************************** |
---|
47 | |
---|
48 | enable : function() |
---|
49 | { |
---|
50 | this.isDisabled = false; |
---|
51 | }, |
---|
52 | disable : function() |
---|
53 | { |
---|
54 | this.isDisabled = true; |
---|
55 | }, |
---|
56 | show: function() |
---|
57 | { |
---|
58 | }, |
---|
59 | hide: function() |
---|
60 | { |
---|
61 | }, |
---|
62 | setContent : function( content ) |
---|
63 | { |
---|
64 | this.content = content; |
---|
65 | }, |
---|
66 | destroyTooltip : function() |
---|
67 | { |
---|
68 | if( this.timerDelay ) |
---|
69 | clearTimeout( this.timerDelay ); |
---|
70 | |
---|
71 | Event.stopObserving( this.target, 'mouseover', this.onMouseOverObserver ); |
---|
72 | Event.stopObserving( this.target, 'mouseout', this.onMouseOutObserver ); |
---|
73 | this.removeToolTip(); |
---|
74 | }, |
---|
75 | |
---|
76 | // Private Actions ******************************************************** |
---|
77 | |
---|
78 | removeToolTip : function() |
---|
79 | { |
---|
80 | if( this.displayed == false ) |
---|
81 | return; |
---|
82 | |
---|
83 | this.displayed = false; |
---|
84 | if( this.container ) |
---|
85 | this.parent.removeChild( this.container ); |
---|
86 | }, |
---|
87 | createToolTip : function( event ) |
---|
88 | { |
---|
89 | if( this.isDisabled == true || this.content == false ) |
---|
90 | return; |
---|
91 | |
---|
92 | if( event ) |
---|
93 | this.event = event; |
---|
94 | |
---|
95 | this.displayed = true; |
---|
96 | |
---|
97 | this.container = document.createElement( "table" ); |
---|
98 | this.container.className = "container_toolTip"; |
---|
99 | this.container.atMe = this; |
---|
100 | this.parent.appendChild( this.container ); |
---|
101 | setTableBorderToZero( this.container ); |
---|
102 | if( this.sizeX ) |
---|
103 | this.container.style.width = this.sizeX + "px"; |
---|
104 | if( this.sizeY ) |
---|
105 | this.container.style.height = this.sizeY + "px"; |
---|
106 | |
---|
107 | var containerBody = document.createElement( "tbody" ); |
---|
108 | this.container.appendChild( containerBody ); |
---|
109 | |
---|
110 | // Display Top |
---|
111 | var top = document.createElement( "tr" ); |
---|
112 | containerBody.appendChild( top ); |
---|
113 | |
---|
114 | var top_left = document.createElement( "td" ); |
---|
115 | top_left.className = "toolTip_top_left"; |
---|
116 | top.appendChild( top_left ); |
---|
117 | |
---|
118 | var top_middle = document.createElement( "td" ); |
---|
119 | top_middle.className = "toolTip_top_middle"; |
---|
120 | top.appendChild( top_middle ); |
---|
121 | |
---|
122 | var top_right = document.createElement( "td" ); |
---|
123 | top_right.className = "toolTip_top_right"; |
---|
124 | top.appendChild( top_right ); |
---|
125 | |
---|
126 | // Display Middle |
---|
127 | var middle = document.createElement( "tr" ); |
---|
128 | containerBody.appendChild( middle ); |
---|
129 | |
---|
130 | var middle_left = document.createElement( "td" ); |
---|
131 | middle_left.className = "toolTip_middle_left"; |
---|
132 | middle.appendChild( middle_left ); |
---|
133 | |
---|
134 | this.middle_middle = document.createElement( "td" ); |
---|
135 | this.middle_middle.className = "toolTip_middle_middle"; |
---|
136 | if( this.content ) |
---|
137 | this.middle_middle.innerHTML = this.content; |
---|
138 | middle.appendChild( this.middle_middle ); |
---|
139 | |
---|
140 | var middle_right = document.createElement( "td" ); |
---|
141 | middle_right.className = "toolTip_middle_right"; |
---|
142 | middle.appendChild( middle_right ); |
---|
143 | |
---|
144 | // Display Bottom |
---|
145 | var bottom = document.createElement( "tr" ); |
---|
146 | containerBody.appendChild( bottom ); |
---|
147 | |
---|
148 | var bottom_left = document.createElement( "td" ); |
---|
149 | bottom_left.className = "toolTip_bottom_left"; |
---|
150 | bottom.appendChild( bottom_left ); |
---|
151 | |
---|
152 | var bottom_middle = document.createElement( "td" ); |
---|
153 | bottom_middle.className = "toolTip_bottom_middle"; |
---|
154 | bottom.appendChild( bottom_middle ); |
---|
155 | |
---|
156 | var bottom_right = document.createElement( "td" ); |
---|
157 | bottom_right.className = "toolTip_bottom_right"; |
---|
158 | bottom.appendChild( bottom_right ); |
---|
159 | |
---|
160 | // Display the tooltips on a element |
---|
161 | var offset = Element.cumulativeOffset( this.target ); |
---|
162 | var positionX = offset[0]; |
---|
163 | var positionY = offset[1]; |
---|
164 | var moveLeft = 0; |
---|
165 | var moveTop = 2; |
---|
166 | var elementHeight = this.target.getHeight(); |
---|
167 | var elementWidth = this.target.getWidth(); |
---|
168 | |
---|
169 | // Display the tooltips on a element |
---|
170 | this.setPosition( this.position, this.align ); |
---|
171 | |
---|
172 | this.container.style.visibility = "visible"; |
---|
173 | }, |
---|
174 | // setPosition : positions the toolip depending on two parameters |
---|
175 | // @position : either "bottom" or "side" |
---|
176 | // @align : either "rtl" or "ltr" |
---|
177 | setPosition: function( position, align ) |
---|
178 | { |
---|
179 | var offset = Element.cumulativeOffset( this.target ); |
---|
180 | var screenSize = getScreenSize(); |
---|
181 | var positionX = 0; |
---|
182 | var positionY = 0; |
---|
183 | |
---|
184 | if( "bottom" == position ) |
---|
185 | { |
---|
186 | // x position |
---|
187 | if( "ltr" == align ) |
---|
188 | { |
---|
189 | positionX = offset[0]; |
---|
190 | if( positionX + this.container.getWidth() > screenSize[0] ) // tooltip goes out of the screen |
---|
191 | positionX -= (positionX + this.container.getWidth() - screenSize[0]) |
---|
192 | } |
---|
193 | else |
---|
194 | { |
---|
195 | positionX = offset[0] - this.container.getWidth() + this.target.getWidth(); |
---|
196 | if( positionX < 0 ) // tooltip goes out of the screen |
---|
197 | positionX = 0; |
---|
198 | } |
---|
199 | |
---|
200 | // y position |
---|
201 | positionY = offset[1] + this.target.getHeight() + this.margin; |
---|
202 | |
---|
203 | if( positionY + this.container.getHeight() > screenSize[1] ) |
---|
204 | positionY = offset[1] - this.container.getHeight() - this.margin; |
---|
205 | } |
---|
206 | else // position = "side" |
---|
207 | { |
---|
208 | var positionX = 0; |
---|
209 | |
---|
210 | // x position |
---|
211 | if( "ltr" == align ) |
---|
212 | { |
---|
213 | positionX = offset[0] + this.target.getWidth() + this.margin; |
---|
214 | if( (positionX + this.container.getWidth() + this.margin) > screenSize[0] ) // tooltip goes out of the screen |
---|
215 | positionX = offset[0] - this.container.getWidth() - this.margin; |
---|
216 | |
---|
217 | } |
---|
218 | else |
---|
219 | { |
---|
220 | positionX = offset[0] - this.container.getWidth() - this.margin; |
---|
221 | if( (positionX + this.container.getWidth() + this.margin) < 0 ) // tooltip goes out of the screen |
---|
222 | positionX = offset[0] + this.target.getWidth() + this.margin; |
---|
223 | } |
---|
224 | |
---|
225 | // y position |
---|
226 | var positionY = offset[1] + this.margin; |
---|
227 | |
---|
228 | if( (positionY + this.container.getHeight()) > screenSize[1] ) // tooltip goes out of the screen |
---|
229 | positionY -= (positionY + this.container.getHeight() - screenSize[1]); |
---|
230 | if( positionY < 0 ) |
---|
231 | positionY = 0; |
---|
232 | } |
---|
233 | |
---|
234 | |
---|
235 | this.container.style.left = "100px"; |
---|
236 | |
---|
237 | this.container.style.top = "100px"; |
---|
238 | |
---|
239 | // this.container.style.left = positionX + "px"; |
---|
240 | // |
---|
241 | // this.container.style.top = positionY + "px"; |
---|
242 | |
---|
243 | }, |
---|
244 | // ** setPositionBottomLTR : deprecated ** |
---|
245 | setPositionBottomLTR: function() |
---|
246 | { |
---|
247 | var offset = Element.cumulativeOffset( this.target ); |
---|
248 | var screenSize = getScreenSize(); |
---|
249 | var positionX = offset[0] + this.moveX; |
---|
250 | var positionY = offset[1] + this.target.getHeight() + this.moveY; |
---|
251 | |
---|
252 | if( screenSize[0] > (positionX + this.container.getWidth() + this.moveX) ) |
---|
253 | { |
---|
254 | this.container.style.left = positionX + "px"; |
---|
255 | } |
---|
256 | else |
---|
257 | { |
---|
258 | this.container.style.left = screenSize[0] - this.container.getWidth() - this.moveX + "px"; |
---|
259 | } |
---|
260 | if( screenSize[1] > (positionY + this.container.getHeight()) ) |
---|
261 | { |
---|
262 | |
---|
263 | this.container.style.top = positionY + "px"; |
---|
264 | } |
---|
265 | else |
---|
266 | { |
---|
267 | this.container.style.top = offset[1] - this.container.getHeight() - this.moveY + "px"; |
---|
268 | } |
---|
269 | }, |
---|
270 | // ** setPositionBottomRTL : deprecated ** |
---|
271 | setPositionBottomRTL: function() |
---|
272 | { |
---|
273 | var offset = Element.cumulativeOffset( this.target ); |
---|
274 | var screenSize = getScreenSize(); |
---|
275 | var positionX = offset[0] - this.container.getWidth() + this.target.getWidth() - this.moveX; |
---|
276 | var positionY = offset[1] + this.target.getHeight() + this.moveY; |
---|
277 | |
---|
278 | if( 0 < positionX ) |
---|
279 | { |
---|
280 | this.container.style.left = positionX + "px"; |
---|
281 | } |
---|
282 | else |
---|
283 | { |
---|
284 | this.container.style.left = this.moveX + "px"; |
---|
285 | } |
---|
286 | if( screenSize[1] > (positionY + this.container.getHeight()) ) |
---|
287 | { |
---|
288 | |
---|
289 | this.container.style.top = positionY + "px"; |
---|
290 | } |
---|
291 | else |
---|
292 | { |
---|
293 | this.container.style.top = offset[1] - this.container.getHeight() - this.moveY + "px"; |
---|
294 | } |
---|
295 | }, |
---|
296 | |
---|
297 | // Events ******************************************************** |
---|
298 | |
---|
299 | onMouseHover : function( event ) |
---|
300 | { |
---|
301 | this.event = event; |
---|
302 | if( this.msDelay ) |
---|
303 | this.timerDelay = setTimeout( this.createToolTip.bind( this ), this.msDelay ); |
---|
304 | else |
---|
305 | this.createToolTip(); |
---|
306 | }, |
---|
307 | onMouseOut : function() |
---|
308 | { |
---|
309 | if( this.timerDelay ) |
---|
310 | clearTimeout( this.timerDelay ); |
---|
311 | this.removeToolTip(); |
---|
312 | } |
---|
313 | } ); |
---|
314 | |
---|
315 | // Functions which destroy all toolTips in the webpage |
---|
316 | function hideAllTooltips() |
---|
317 | { |
---|
318 | $$( ".container_toolTip" ).each( function ( divContainer ) |
---|
319 | { |
---|
320 | if( divContainer && divContainer.atMe ) |
---|
321 | divContainer.atMe.removeToolTip(); |
---|
322 | } ); |
---|
323 | } |
---|
324 | |
---|
325 | |
---|
326 | //******************************************************** |
---|
327 | // Class FormatProperties |
---|
328 | // Format properties of items |
---|
329 | // |
---|
330 | // dom item: Beside wich dom object display the tooltip |
---|
331 | // str content: text to display in the tooltip |
---|
332 | // [int msDelay]: delay in millisecond to display the tooltip |
---|
333 | // [bool isAlignRight]: side from the item where to display the tooltip |
---|
334 | //******************************************************** |
---|
335 | |
---|
336 | var FormatProperties = Class.create( { |
---|
337 | initialize: function() |
---|
338 | { |
---|
339 | // Init |
---|
340 | this.arrayExcludeCriterias = $A( [ "Class" ] ); |
---|
341 | this.units = { |
---|
342 | "MET_arms_CurrentLactate": "item.percent", |
---|
343 | "MET_legs_CurrentLactate": "item.percent", |
---|
344 | "MET_CurrentGlucose": "item.percent", |
---|
345 | "MET_CurrentFat": "item.percent", |
---|
346 | "MET_CurrentWater": "item.percent" |
---|
347 | }; |
---|
348 | this.valueScale = { |
---|
349 | "MET_arms_CurrentLactate":{min:0,max:100}, |
---|
350 | "MET_legs_CurrentLactate":{min:0,max:100}, |
---|
351 | "MET_CurrentGlucose":{min:0,max:100}, |
---|
352 | "MET_CurrentFat":{min:0,max:1000}, |
---|
353 | "MET_CurrentWater":{min:0,max:10} |
---|
354 | }; |
---|
355 | |
---|
356 | // Set sorter |
---|
357 | this.sorter = new Sort(); |
---|
358 | this.sorter.addCriteria( "asc", this.criteriaTranslatedCode.bind( this ) ); |
---|
359 | }, |
---|
360 | criteriaTranslatedCode: function( x ) |
---|
361 | { |
---|
362 | return x.translatedCode; |
---|
363 | }, |
---|
364 | sortProperties: function( arrayProperties ) |
---|
365 | { |
---|
366 | var arrayResult = $A(); |
---|
367 | |
---|
368 | // Exclude properties not displayed |
---|
369 | $H( arrayProperties ).each( function( objProperty ) |
---|
370 | { |
---|
371 | // Does not display empty properties |
---|
372 | if( 0 == objProperty.value ) |
---|
373 | return; |
---|
374 | // Exclude properties |
---|
375 | if( 0 == this.arrayExcludeCriterias.indexOf( objProperty.key ) ) |
---|
376 | return; |
---|
377 | |
---|
378 | arrayResult.push( objProperty.value ); |
---|
379 | }.bind( this ) ); |
---|
380 | |
---|
381 | // Sort properties |
---|
382 | return this.sorter.sort( arrayResult ); |
---|
383 | }, |
---|
384 | formatProperties: function( arrayProperties ) |
---|
385 | { |
---|
386 | arrayProperties.each( function( objProperty ) |
---|
387 | { |
---|
388 | var value = this.scalePropertyValue( objProperty.code, objProperty.value ); |
---|
389 | var unit = this.concatSuffix( objProperty.code ); |
---|
390 | var sign = this.concatSign( objProperty.value ); |
---|
391 | |
---|
392 | objProperty.bonus = sign + value + unit; |
---|
393 | }.bind( this ) ); |
---|
394 | |
---|
395 | return arrayProperties; |
---|
396 | }, |
---|
397 | toString: function( arrayProperties ) |
---|
398 | { |
---|
399 | var string = ""; |
---|
400 | arrayProperties.each( function( objProperty ) |
---|
401 | { |
---|
402 | string += translate( "item.carac", objProperty.translatedCode, "", objProperty.bonus ); |
---|
403 | }.bind( this ) ); |
---|
404 | |
---|
405 | return string; |
---|
406 | }, |
---|
407 | |
---|
408 | |
---|
409 | // Private ******************************************************************* |
---|
410 | |
---|
411 | scalePropertyValue: function( propertyCode, propertyValue ) |
---|
412 | { |
---|
413 | // Special conversion for MET item |
---|
414 | if( this.valueScale[propertyCode] && propertyCode.include( "MET_" ) ) |
---|
415 | { |
---|
416 | var scaleGui = 100; |
---|
417 | var scaleDB = this.valueScale[propertyCode].max - this.valueScale[propertyCode].min; |
---|
418 | propertyValue = propertyValue * scaleGui / scaleDB; |
---|
419 | propertyValue = this.valueScale[propertyCode].min + propertyValue; |
---|
420 | } |
---|
421 | return propertyValue; |
---|
422 | }, |
---|
423 | concatSuffix: function( propertyCode ) |
---|
424 | { |
---|
425 | if( this.units[propertyCode] ) |
---|
426 | return translate( this.units[propertyCode] ); |
---|
427 | else |
---|
428 | return ""; |
---|
429 | }, |
---|
430 | concatSign: function( propertyValue ) |
---|
431 | { |
---|
432 | if( 0 < propertyValue ) |
---|
433 | return "+"; |
---|
434 | else |
---|
435 | return ""; |
---|
436 | } |
---|
437 | } ); |
---|