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

Last change on this file since 24865 was 16458, checked in by grum, 12 years ago

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