source: extensions/GrumPluginClasses/js/simpleTip.js @ 6732

Last change on this file since 6732 was 6732, checked in by grum, 14 years ago

some file forgotten in the previous commit...
File size: 10.0 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: simpleTip.js
4 * file version: 1.0.0
5 * date: 2010-07-10
6 *
7 * JS file provided by the piwigo's plugin "GrumPluginClasses"
8 *
9 * -----------------------------------------------------------------------------
10 * Author     : Grum
11 *   email    : grum@piwigo.com
12 *   website  : http://photos.grum.fr
13 *   PWG user : http://forum.phpwebgallery.net/profile.php?id=3706
14 *
15 *   << May the Little SpaceFrog be with you ! >>
16 * -----------------------------------------------------------------------------
17 *
18 * Why simpleTip ?
19 * I have tried the jQuery plugins 'tiptip' and 'qTip'
20 *  - 'tiptip' is a good solution, but bugged
21 *  - 'qTip' is excellent but too many options for my needs (and sometimes,
22 *    I have some 'not initialized value' error)
23 * I need something simple and light...
24 *
25 * constructor : myST = new simpleTip();
26 *
27 *
28 *
29 * :: HISTORY ::
30 *
31 * | release | date       |
32 * | 1.0.0   | 2010/07/10 | start to coding
33 * |         |            |
34 * |         |            |
35 * |         |            |
36 * |         |            |
37 * |         |            |
38 * |         |            |
39 *
40 */
41
42/**
43 * tipItem is an object to define tooltip properties
44 *
45 * - content : content for the tooltip
46 * - index   : index of the simpleTip object
47 * - options : object with theses properties
48 *              * targetPos : position of the tooltip relative to the target
49 *              * tipPos    : position of the tooltip relative to the target
50 *                            can take values : top-left,    top-middle,    top-right
51 *                                              middle-left, middle-middle, middle-right
52 *                                              bottom-left, bottom-middle, bottom-right
53 *              * drawArrow : draw an arrow (true) or not (false)
54 *              * offsetX   : apply an offset to the tooltip position X
55 *              * offsetY   : apply an offset to the tooltip position Y
56 *              * classes   : additionnal classes
57 *
58 */
59function tipItem(item, index, options)
60{
61  this.item=item;
62  this.content=item.title;
63  this.index=index;
64  this.options=jQuery.extend(
65    {
66      targetPos:'bottom-middle',
67      tipPos:'top-middle',
68      drawArrow:false,
69      offsetX:0,
70      offsetY:0,
71      classes:'',
72      arrowImgDir: './plugins/GrumPluginClasses/icons/',
73      arrowWidth: 12,
74      arrowHeight: 12,
75    },
76    options
77  );
78}
79
80
81function simpleTip()
82{
83  var items = new Array();
84  var itemIndexInc = 0;
85  var options={
86    name:'',
87  }
88
89  if(arguments.length>=1)
90  {
91    options.name=arguments[0];
92  }
93
94  /**
95   * action
96   *  - add   ("add", item, [options])
97   *  - remove ("remove", item)
98   *  - clear ("clear")
99   */
100  this.doAction = function(fct)
101  {
102    switch(fct)
103    {
104      case 'add':
105        if(arguments.length==2)
106        {
107          add(arguments[1], { } );
108        }
109        else
110        {
111          add(arguments[1], arguments[2]);
112        }
113        break;
114      case 'remove':
115        if(arguments.length==2)
116        {
117          remove(arguments[1]);
118        }
119        break;
120      case 'clear':
121        clear();
122        break;
123      case 'hide':
124        hide();
125        break;
126      case 'show':
127        show();
128        break;
129      case 'prepare':
130        if(arguments.length==4)
131        {
132          prepare(arguments[1], arguments[2], arguments[3]);
133        }
134        break;
135    }
136  }
137
138  var add = function (item, options)
139  {
140    index=getIndex(item);
141
142    if(index==-1 & item.title!='')
143    {
144      // process only items not already processed
145
146      tip=new tipItem(item, itemIndexInc, options);
147
148      $(item)
149        .attr(
150          {
151           title: '',
152           simpleTip: tip.index,
153          }
154        )
155        .bind('mouseover', {index:tip.index}, function (event)
156          {
157            prepare($(this).offset().left, $(this).offset().top, $(this).innerWidth(), $(this).innerHeight(), event.data.index );
158            show();
159          }
160        )
161        .bind('mouseout', function (event)
162          {
163            hide();
164          }
165        );
166
167      items.push(tip);
168      itemIndexInc++;
169    }
170
171  }
172
173
174  var remove = function (item)
175  {
176    index=getIndex(item);
177
178    if(index!=-1)
179    {
180      $(item)
181        .attr(
182          {
183           title: items[index].content,
184           simpleTip: ''
185          }
186        )
187        .unbind('mouseover')
188        .unbind('mouseout');
189
190      items[index].item=null;
191      items.splice(index,1);
192    }
193  }
194
195
196  var clear = function ()
197  {
198    hide();
199
200    while(items.length>0)
201    {
202      if(items[0].item!=null)
203      {
204        $(items[0].item)
205          .attr(
206            {
207             title: items[0].content,
208             simpleTip: ''
209            }
210          )
211          .unbind('mouseover')
212          .unbind('mouseout');
213        items[0].item=null;
214      }
215      items.shift();
216    }
217    itemIndexInc=0;
218  }
219
220
221  var getIndex = function(item)
222  {
223    searched=$(item).attr('simpleTip');
224
225    for(i=0;i<items.length;i++)
226    {
227      if(items[i].index==searched) return(i);
228    }
229    return(-1);
230  }
231
232  /**
233   * prepare the tooltip
234   *
235   * @param Float posX : position X of the target
236   * @param Float posY : position Y of the target
237   * @param Float width  : width of the target
238   * @param Float height : height of the target
239   * @param String index : index of the target item
240   */
241  var prepare = function (posX, posY, width, height, index)
242  {
243    //itemIndex=getIndex(getFromIndex(index));
244    itemIndex=index;
245    arrowX=0;
246    arrowY=0;
247
248    $('#iSimpleTipContent'+options.name).html(items[itemIndex].content);
249
250    $('#iSimpleTip'+options.name)
251      .css(
252        {
253          left: '-1500px',
254          top:  '-1500px',
255          display: 'block',
256        }
257      )
258
259    switch(items[itemIndex].options.targetPos)
260    {
261      case 'top-left':
262        x=posX;
263        y=posY;
264        break;
265
266      case 'top-middle':
267        x=posX+width/2;
268        y=posY;
269        break;
270
271      case 'top-right':
272        x=posX+width;
273        y=posY;
274        break;
275
276      case 'middle-left':
277        x=posX;
278        y=posY+height/2;
279        break;
280
281      case 'middle-middle':
282        x=posX+width/2;
283        y=posY+height/2;
284        break;
285
286      case 'middle-right':
287        x=posX+width;
288        y=posY+height/2;
289        break;
290
291      case 'bottom-left':
292        x=posX;
293        y=posY+height;
294        break;
295
296      case 'bottom-middle':
297        x=posX+width/2;
298        y=posY+height;
299        break;
300
301      case 'bottom-right':
302        x=posX+width;
303        y=posY+height;
304        break;
305    }
306
307
308    stWidth=$('#iSimpleTip').outerWidth();
309    stHeight=$('#iSimpleTip').outerHeight();
310    stWidthI=$('#iSimpleTip').innerWidth();
311    stHeightI=$('#iSimpleTip').innerHeight();
312    bwX=(stWidth-stWidthI)/2;
313    bwY=(stHeight-stHeightI)/2;
314    arrowModel='';
315
316    switch(items[itemIndex].options.tipPos)
317    {
318      case 'top-left':
319        //nothing to do
320        x+=items[itemIndex].options.offsetX;
321        y+=items[itemIndex].options.offsetY;
322        arrowX=-bwX;
323        arrowY=-10-bwY;
324        arrowModel='up';
325        break;
326
327      case 'top-middle':
328        x-=stWidth/2;
329        y+=items[itemIndex].options.offsetY;
330        arrowX=(stWidthI-10)/2;
331        arrowY=-10-bwY;
332        arrowModel='up';
333        break;
334
335      case 'top-right':
336        x-=stWidth+items[itemIndex].options.offsetX;
337        y+=items[itemIndex].options.offsetY;
338        arrowX=stWidthI-10+bwX;
339        arrowY=-10-bwY;
340        arrowModel='up';
341        break;
342
343      case 'middle-left':
344        y-=stHeight/2;
345        arrowX=-10-bwX;
346        arrowY=(stHeightI-10)/2;
347        arrowModel='left';
348        break;
349
350      case 'middle-middle':
351        x-=stWidth/2;
352        y-=stHeight/2;
353        break;
354
355      case 'middle-right':
356        x-=stWidth+items[itemIndex].options.offsetX;
357        y-=stHeight/2;
358        arrowX=stWidthI+bwX;
359        arrowY=(stHeightI-10)/2;
360        arrowModel='right';
361        break;
362
363      case 'bottom-left':
364        y-=stHeight+items[itemIndex].options.offsetY;
365        arrowX=-bwX;
366        arrowY=stHeightI+bwY;
367        arrowModel='down';
368        break;
369
370      case 'bottom-middle':
371        x-=stWidth/2;
372        y-=stHeight+items[itemIndex].options.offsetY;
373        arrowX=(stWidthI-10)/2;
374        arrowY=stHeightI+bwY;
375        arrowModel='down';
376        break;
377
378      case 'bottom-right':
379        x-=stWidth+items[itemIndex].options.offsetX;
380        y-=stHeight+items[itemIndex].options.offsetY;
381        arrowX=stWidthI-10+bwX;
382        arrowY=stHeightI+bwY;
383        arrowModel='down';
384        break;
385    }
386
387    if(items[itemIndex].options.drawArrow & arrowModel!='')
388    {
389      $('#iSimpleTipArrow'+options.name).css(
390        {
391          display: 'block',
392          background: 'url("'+items[itemIndex].options.arrowImgDir+'/arrow_'+arrowModel+'.png") no-repeat scroll 0 0 transparent',
393          marginLeft: arrowX+'px',
394          marginTop: arrowY+'px',
395          width: items[itemIndex].options.arrowWidth+'px',
396          height: items[itemIndex].options.arrowHeight+'px',
397        }
398      );
399    }
400    else
401    {
402      $('#iSimpleTipArrow'+options.name).css('display', 'none');
403    }
404
405
406    $('#iSimpleTip'+options.name)
407      .css(
408        {
409          left: x+'px',
410          top:  y+'px',
411          display: 'none',
412        }
413      )
414      .removeClass()
415      .addClass(items[itemIndex].options.classes);
416
417  }
418
419  var show = function ()
420  {
421    $('#iSimpleTip'+options.name).css('display', 'block');
422  }
423
424  var hide = function ()
425  {
426    $('#iSimpleTip'+options.name).css('display', 'none');
427  }
428
429
430  var init = function ()
431  {
432    if($('#iSimpleTip'+options.name).length==0)
433    {
434      text="<div id='iSimpleTip"+options.name+"' style='z-index:15000;display:none;position:absolute;left:0px;top:0px;'><div id='iSimpleTipShadow"+options.name+"' style='position:absolute;width:100%;height:100%;background:#000000;opacity:0.4;filter:alpha(opacity:40);display:block;z-index:-1;margin-left:2px;margin-top:2px;'></div><div id='iSimpleTipArrow"+options.name+"' style='position:absolute;'></div><div id='iSimpleTipContent"+options.name+"'></div></div>";
435      $('body').append(text);
436    }
437  }
438
439
440  init();
441}
Note: See TracBrowser for help on using the repository browser.