source: extensions/gally/gally-default/js/simpleTip.js @ 8528

Last change on this file since 8528 was 8528, checked in by grum, 13 years ago

Release 1.4.0
Rewrite some JS
fix bug bug:1983
  • Property svn:executable set to *
File size: 10.5 KB
Line 
1/**
2 * -----------------------------------------------------------------------------
3 * file: simpleTip.js
4 * file version: 1.0.1
5 * date: 2010-12-23
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 * | 1.0.1   | 2010-12-23 | fix minor bugs
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: '',
73      arrowWidth: 12,
74      arrowHeight: 12
75    },
76    options
77  );
78}
79
80
81function simpleTip()
82{
83  var items = new Array(),
84      itemIndexInc = 0,
85      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=$('#iSimpleTipContent'+options.name).outerWidth();
309    stHeight=$('#iSimpleTipContent'+options.name).outerHeight();
310    stWidthI=$('#iSimpleTipContent'+options.name).innerWidth();
311    stHeightI=$('#iSimpleTipContent'+options.name).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=-items[itemIndex].options.arrowHeight+bwY;
324        arrowModel='up';
325        break;
326
327      case 'top-middle':
328        x-=stWidth/2;
329        y+=items[itemIndex].options.offsetY;
330        arrowX=(stWidthI-items[itemIndex].options.arrowWidth)/2;
331        arrowY=-items[itemIndex].options.arrowHeight+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-items[itemIndex].options.arrowWidth+bwX;
339        arrowY=-items[itemIndex].options.arrowHeight+bwY;
340        arrowModel='up';
341        break;
342
343      case 'middle-left':
344        x+=items[itemIndex].options.offsetX;
345        y-=stHeight/2;
346        arrowX=-items[itemIndex].options.arrowWidth+bwX;
347        arrowY=(stHeightI-items[itemIndex].options.arrowHeight)/2+bwY;
348        arrowModel='left';
349        break;
350
351      case 'middle-middle':
352        x-=stWidth/2;
353        y-=stHeight/2;
354        break;
355
356      case 'middle-right':
357        x-=stWidth+items[itemIndex].options.offsetX;
358        y-=stHeight/2;
359        arrowX=stWidthI+bwX;
360        arrowY=(stHeightI-items[itemIndex].options.arrowHeight)/2+bwY;
361        arrowModel='right';
362        break;
363
364      case 'bottom-left':
365        x+=items[itemIndex].options.offsetX;
366        y-=stHeight+items[itemIndex].options.offsetY;
367        arrowX=-bwX;
368        arrowY=stHeightI+bwY;
369        arrowModel='down';
370        break;
371
372      case 'bottom-middle':
373        x-=stWidth/2;
374        y-=stHeight+items[itemIndex].options.offsetY;
375        arrowX=(stWidthI-items[itemIndex].options.arrowWidth)/2+bwX;
376        arrowY=stHeightI+bwY;
377        arrowModel='down';
378        break;
379
380      case 'bottom-right':
381        x-=stWidth+items[itemIndex].options.offsetX;
382        y-=stHeight+items[itemIndex].options.offsetY;
383        arrowX=stWidthI-items[itemIndex].options.arrowWidth+bwX;
384        arrowY=stHeightI+bwY;
385        arrowModel='down';
386        break;
387    }
388
389    if(items[itemIndex].options.drawArrow & arrowModel!='')
390    {
391      $('#iSimpleTipArrow'+options.name).css(
392        {
393          display: 'block',
394          background: 'url("'+items[itemIndex].options.arrowImgDir+'/arrow_'+arrowModel+'.png") no-repeat scroll 0 0 transparent',
395          marginLeft: arrowX+'px',
396          marginTop: arrowY+'px',
397          width: items[itemIndex].options.arrowWidth+'px',
398          height: items[itemIndex].options.arrowHeight+'px'
399        }
400      );
401    }
402    else
403    {
404      $('#iSimpleTipArrow'+options.name).css('display', 'none');
405    }
406
407
408    $('#iSimpleTip'+options.name)
409      .css(
410        {
411          left: x+'px',
412          top:  y+'px',
413          display: 'none'
414        }
415      )
416      .removeClass()
417      .addClass(items[itemIndex].options.classes);
418
419  };
420
421  var show = function ()
422  {
423    $('#iSimpleTip'+options.name).css('display', 'block');
424  };
425
426  var hide = function ()
427  {
428    $('#iSimpleTip'+options.name).css('display', 'none');
429  };
430
431
432  var init = function ()
433  {
434    if($('#iSimpleTip'+options.name).length==0)
435    {
436      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>";
437      $('body').append(text);
438    }
439  };
440
441
442  init();
443}
Note: See TracBrowser for help on using the repository browser.