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

Last change on this file was 16016, checked in by grum, 12 years ago

feature:2664- compatibility with Piwigo 2.4
  • Property svn:executable set to *
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://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      arrowWidth: 12,
73      arrowHeight: 12
74    },
75    options
76  );
77}
78
79
80function simpleTip()
81{
82  var items = new Array(),
83      itemIndexInc = 0,
84      options={
85          name:''
86        };
87
88  if(arguments.length>=1)
89  {
90    options.name=arguments[0];
91  }
92
93  /**
94   * action
95   *  - add   ("add", item, [options])
96   *  - remove ("remove", item)
97   *  - clear ("clear")
98   */
99  this.doAction = function(fct)
100  {
101    switch(fct)
102    {
103      case 'add':
104        if(arguments.length==2)
105        {
106          add(arguments[1], { } );
107        }
108        else
109        {
110          add(arguments[1], arguments[2]);
111        }
112        break;
113      case 'remove':
114        if(arguments.length==2)
115        {
116          remove(arguments[1]);
117        }
118        break;
119      case 'clear':
120        clear();
121        break;
122      case 'hide':
123        hide();
124        break;
125      case 'show':
126        show();
127        break;
128      case 'prepare':
129        if(arguments.length==4)
130        {
131          prepare(arguments[1], arguments[2], arguments[3]);
132        }
133        break;
134    }
135  };
136
137  var add = function (item, options)
138  {
139    index=getIndex(item);
140
141    if(index==-1 & item.title!='')
142    {
143      // process only items not already processed
144
145      tip=new tipItem(item, itemIndexInc, options);
146
147      $(item)
148        .attr(
149          {
150           title: '',
151           simpleTip: tip.index
152          }
153        )
154        .bind('mouseover', {index:tip.index}, function (event)
155          {
156            prepare($(this).offset().left, $(this).offset().top, $(this).innerWidth(), $(this).innerHeight(), event.data.index );
157            show();
158          }
159        )
160        .bind('mouseout', function (event)
161          {
162            hide();
163          }
164        );
165
166      items.push(tip);
167      itemIndexInc++;
168    }
169
170  };
171
172
173  var remove = function (item)
174  {
175    index=getIndex(item);
176
177    if(index!=-1)
178    {
179      $(item)
180        .attr(
181          {
182           title: items[index].content,
183           simpleTip: ''
184          }
185        )
186        .unbind('mouseover')
187        .unbind('mouseout');
188
189      items[index].item=null;
190      items.splice(index,1);
191    }
192  };
193
194
195  var clear = function ()
196  {
197    hide();
198
199    while(items.length>0)
200    {
201      if(items[0].item!=null)
202      {
203        $(items[0].item)
204          .attr(
205            {
206             title: items[0].content,
207             simpleTip: ''
208            }
209          )
210          .unbind('mouseover')
211          .unbind('mouseout');
212        items[0].item=null;
213      }
214      items.shift();
215    }
216    itemIndexInc=0;
217  };
218
219
220  var getIndex = function(item)
221  {
222    searched=$(item).attr('simpleTip');
223
224    for(i=0;i<items.length;i++)
225    {
226      if(items[i].index==searched) return(i);
227    }
228    return(-1);
229  };
230
231  /**
232   * prepare the tooltip
233   *
234   * @param Float posX : position X of the target
235   * @param Float posY : position Y of the target
236   * @param Float width  : width of the target
237   * @param Float height : height of the target
238   * @param String index : index of the target item
239   */
240  var prepare = function (posX, posY, width, height, index)
241  {
242    //itemIndex=getIndex(getFromIndex(index));
243    itemIndex=index;
244    arrowX=0;
245    arrowY=0;
246
247    $('#iSimpleTipContent'+options.name).html(items[itemIndex].content);
248
249    $('#iSimpleTip'+options.name)
250      .css(
251        {
252          left: '-1500px',
253          top:  '-1500px',
254          display: 'block'
255        }
256      );
257
258    switch(items[itemIndex].options.targetPos)
259    {
260      case 'top-left':
261        x=posX;
262        y=posY;
263        break;
264
265      case 'top-middle':
266        x=posX+width/2;
267        y=posY;
268        break;
269
270      case 'top-right':
271        x=posX+width;
272        y=posY;
273        break;
274
275      case 'middle-left':
276        x=posX;
277        y=posY+height/2;
278        break;
279
280      case 'middle-middle':
281        x=posX+width/2;
282        y=posY+height/2;
283        break;
284
285      case 'middle-right':
286        x=posX+width;
287        y=posY+height/2;
288        break;
289
290      case 'bottom-left':
291        x=posX;
292        y=posY+height;
293        break;
294
295      case 'bottom-middle':
296        x=posX+width/2;
297        y=posY+height;
298        break;
299
300      case 'bottom-right':
301        x=posX+width;
302        y=posY+height;
303        break;
304    }
305
306
307    stWidth=$('#iSimpleTipContent'+options.name).outerWidth();
308    stHeight=$('#iSimpleTipContent'+options.name).outerHeight();
309    stWidthI=$('#iSimpleTipContent'+options.name).innerWidth();
310    stHeightI=$('#iSimpleTipContent'+options.name).innerHeight();
311    bwX=(stWidth-stWidthI)/2;
312    bwY=(stHeight-stHeightI)/2;
313    arrowModel='';
314
315    switch(items[itemIndex].options.tipPos)
316    {
317      case 'top-left':
318        //nothing to do
319        x+=items[itemIndex].options.offsetX;
320        y+=items[itemIndex].options.offsetY;
321        arrowX=-bwX;
322        arrowY=-items[itemIndex].options.arrowHeight+bwY;
323        arrowModel='Up';
324        break;
325
326      case 'top-middle':
327        x-=stWidth/2;
328        y+=items[itemIndex].options.offsetY;
329        arrowX=(stWidthI-items[itemIndex].options.arrowWidth)/2;
330        arrowY=-items[itemIndex].options.arrowHeight+bwY;
331        arrowModel='Up';
332        break;
333
334      case 'top-right':
335        x-=stWidth+items[itemIndex].options.offsetX;
336        y+=items[itemIndex].options.offsetY;
337        arrowX=stWidthI-items[itemIndex].options.arrowWidth+bwX;
338        arrowY=-items[itemIndex].options.arrowHeight+bwY;
339        arrowModel='Up';
340        break;
341
342      case 'middle-left':
343        x+=items[itemIndex].options.offsetX;
344        y-=stHeight/2;
345        arrowX=-items[itemIndex].options.arrowWidth+bwX;
346        arrowY=(stHeightI-items[itemIndex].options.arrowHeight)/2+bwY;
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-items[itemIndex].options.arrowHeight)/2+bwY;
360        arrowModel='Right';
361        break;
362
363      case 'bottom-left':
364        x+=items[itemIndex].options.offsetX;
365        y-=stHeight+items[itemIndex].options.offsetY;
366        arrowX=-bwX;
367        arrowY=stHeightI+bwY;
368        arrowModel='Down';
369        break;
370
371      case 'bottom-middle':
372        x-=stWidth/2;
373        y-=stHeight+items[itemIndex].options.offsetY;
374        arrowX=(stWidthI-items[itemIndex].options.arrowWidth)/2+bwX;
375        arrowY=stHeightI+bwY;
376        arrowModel='Down';
377        break;
378
379      case 'bottom-right':
380        x-=stWidth+items[itemIndex].options.offsetX;
381        y-=stHeight+items[itemIndex].options.offsetY;
382        arrowX=stWidthI-items[itemIndex].options.arrowWidth+bwX;
383        arrowY=stHeightI+bwY;
384        arrowModel='Down';
385        break;
386    }
387
388    if(items[itemIndex].options.drawArrow & arrowModel!='')
389    {
390      switch(arrowModel)
391      {
392        case 'Up':
393          bgp='0px -'+items[itemIndex].options.arrowHeight+'px';
394          break;
395        case 'Left':
396          bgp='-'+items[itemIndex].options.arrowWidth+'px 0px';
397          break;
398        case 'Down':
399          bgp='0px 0px';
400          break;
401        case 'Right':
402          bgp='-'+items[itemIndex].options.arrowHeight+'px -'+items[itemIndex].options.arrowWidth+'px';
403          break;
404      }
405      $('#iSimpleTipArrow'+options.name).css(
406        {
407          display: 'block',
408          backgroundPosition: bgp,
409          marginLeft: arrowX+'px',
410          marginTop: arrowY+'px',
411          width: items[itemIndex].options.arrowWidth+'px',
412          height: items[itemIndex].options.arrowHeight+'px'
413        }
414      );
415    }
416    else
417    {
418      $('#iSimpleTipArrow'+options.name).css('display', 'none');
419    }
420
421
422    $('#iSimpleTip'+options.name)
423      .css(
424        {
425          left: x+'px',
426          top:  y+'px',
427          display: 'none'
428        }
429      )
430      .removeClass()
431      .addClass(items[itemIndex].options.classes);
432
433  };
434
435  var show = function ()
436  {
437    $('#iSimpleTip'+options.name).css('display', 'block');
438  };
439
440  var hide = function ()
441  {
442    $('#iSimpleTip'+options.name).css('display', 'none');
443  };
444
445
446  var init = function ()
447  {
448    if($('#iSimpleTip'+options.name).length==0)
449    {
450      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>";
451      $('body').append(text);
452    }
453  };
454
455
456  init();
457}
Note: See TracBrowser for help on using the repository browser.