source: ether_statistics/web/resources/js/ToolTip.js @ 648

Last change on this file since 648 was 569, checked in by vmipsl, 12 years ago

Nouveau projet
File size: 14.2 KB
Line 
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
11var 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
316function 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
336var 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} );
Note: See TracBrowser for help on using the repository browser.