source: extensions/gally/gally-default/js/gallyjs-tpp.js @ 7337

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

fix bug:1948

  • Property svn:executable set to *
File size: 16.2 KB
Line 
1/* -----------------------------------------------------------------------------
2  GALLY
3  Template for Piwigo
4  ------------------------------------------------------------------------------
5  file: gally/gallyjs-tpp.js
6  file release: 1.3.4
7  ------------------------------------------------------------------------------
8  author: grum at grum.dnsalias.com
9  << May the Little SpaceFrog be with you >>
10  ------------------------------------------------------------------------------
11  JS for the pictures pages
12
13  need jQuery 1.2.6
14
15  see the release_notes.txt file for more informations
16----------------------------------------------------------------------------- */
17
18
19var showtabs;
20var selectedTab;
21var interfaceTimerDelay;
22var isScrollable;
23var zoomMode;
24
25$("document").ready(
26  function()
27  {
28    inittoolbar();
29  }
30);
31
32function inittoolbar()
33{
34  $(document).data("initialized", 0);
35  $(document).data("interface", false);
36  $(document).data("highWidth", 0);
37  $(document).data("highHeight", 0);
38
39  regexp = /[1234567]\./i;
40
41  if(jQuery.browser.msie && jQuery.browser.version.match(regexp))
42  {
43    // this features don't work with the f*****g msie browser version <= 7.0
44    // it seems to be functionnal with ie 8.0
45    options.interfaceAnimated="none";
46    options.imageAutoScroll=false;
47  }
48
49  if(options.imageAutoScroll)
50  {
51    $("html").css("overflow-x", "hidden");
52  }
53  else
54  {
55    $("html").css("overflow-x", "scroll");
56  }
57
58  if(options.imageCenterTopBorder == "imageHeaderBar")
59  {
60    options.imageCenterTopMin+=$("#imageHeaderBar").get(0).offsetTop+$("#imageHeaderBar").get(0).offsetHeight;
61  }
62
63  if(!options.interfaceCanSwitch)
64  {
65    options.interfaceHidden=false;
66  }
67
68  zoomMode=options.defaultZoomSize;
69  currentTab=-1;
70  selectedTab=-1;
71  interfaceTimerDelay = null;
72  switchInterface('0', true);
73  initializeImageMode("init");
74
75
76  if((options.interfaceOnImage=="always" || (options.interfaceOnImage=="noscroll" && !isScrollable)) && options.interfaceCanSwitch)
77  {
78    $("#theImg").bind("mouseenter", function () { switchInterface('y', true); } )
79                .bind("mouseleave", function () { switchInterface('n', true); } )
80                .bind("mousemove", function () { switchInterface('y', true); } );
81  }
82
83  if(options.interfaceCanSwitch)
84  {
85    $("#imageHeaderBar").bind("mouseenter", function () { switchInterface('y', false); } )
86                        .bind("mousemove", function () { switchInterface('y', false); } );
87    $("#imageToolBar").bind("mouseenter", function () { switchInterface('y', true); } )
88                      .bind("mouseleave", function () { switchInterface('n', true); } )
89                      .bind("mousemove", function () { switchInterface('y', true); } );
90
91
92    $("#navThumbPrev").bind("mouseenter", function () { switchInterface('Y', true); } )
93                      .bind("mouseleave", function () { switchInterface('n', true); } )
94                      .bind("mousemove", function () { switchInterface('y', true); } );
95
96    $("#navThumbNext").bind("mouseenter", function () { switchInterface('Y', true); } )
97                      .bind("mouseleave", function () { switchInterface('n', true); } )
98                      .bind("mousemove", function () { switchInterface('y', true); } );
99  }
100
101
102  $("#navThumbPrev").css("top", $("#navThumbPrev").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
103  $("#navThumbNext").css("top", $("#navThumbNext").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
104
105  $("#theImage").css("top", $("#theImage").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
106
107  $("#contentid").attr("rows", options.commentRows);
108
109  /* fx duration option set to 0 doesn't work so... */
110  if(options.animateDelay>0)
111  {
112    $("#theTabs").tabs({ fx: { opacity: 'toggle', duration:options.animateDelay } } );
113  }
114  else
115  {
116    $("#theTabs").tabs();
117  }
118  switchTabs('n');
119
120
121  if(options.interfaceCanSwitch)
122  {
123    $('#theTabsContainer').bind("mouseenter", function () { switchInterface('Y', false); } )
124                          .bind("mouseleave", function () { switchInterface('n'); } )
125                          .bind("mousemove", function () { switchInterface('y', false); } );
126  }
127
128  $("#theTabs").bind('tabsselect', function(event, ui)
129    {
130      /* The "collapsible" option don't work with jQuery 1.2.6
131       * This function aims to reproduct this functionnality
132      */
133      selectedTab=ui.index;
134    }
135  );
136
137  $('.tab a').click(function()
138    {
139      /* The "collapsible" option don't work with jQuery 1.2.6
140       * This function aims to reproduct this functionnality
141      */
142      $(this).get(0).blur();
143      if(selectedTab == currentTab)
144      {
145        if (currentTab!=-1) switchTabs('n');
146        currentTab=-1;
147        selectedTab=-1;
148      }
149      else
150      {
151        if(currentTab==-1) switchTabs('y');
152        currentTab=selectedTab;
153      }
154    }
155  );
156
157  $(window).resize( function () { initializeImageMode("resize"); } );
158
159  $(document).data("initialized", 1).trigger('gallyInterfaceReady');
160}
161
162function simulateHighRes()
163{
164  if(isScrollable && options.imageHaveHighRes==false && options.imageSimulateHighRes)
165  {
166    $('#theImgContainer').bind('click', function ()
167      {
168        openDisplayHigh($('#theImg').attr('src'));
169      }
170    ).addClass('pointer');
171  }
172
173}
174
175function initializeImageMode(mode)
176{
177  if(mode=="init")
178  {
179    theHeaderHeight=$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight");
180
181    $("#imageToolBar").css("top", $("#imageToolBar").attr("offsetTop")+theHeaderHeight+$("#imageHeaderBar").attr("offsetHeight")+"px");
182
183    if(options.tabsPosition=="bottom")
184    {
185      copyrightArea = $("#copyright").attr("clientHeight")+1;
186      $("#theTabsContainer").css("bottom", copyrightArea+"px");
187    }
188    else if(options.tabsPosition=="top")
189    {
190      toolBarArea = $("#imageToolBar").attr("offsetTop")+$("#imageToolBar").attr("offsetHeight");
191      $("#theTabsContainer").css("top", toolBarArea+"px");
192    }
193
194    if($("#navThumbPrev").length>0)
195    {
196      $("#navThumbPrev").css("height", $("#copyright").attr("offsetTop")-$("#navThumbPrev").attr("offsetTop")-options.tabsHidden+"px");
197    }
198    if($("#navThumbNext").length>0)
199    {
200      $("#navThumbNext").css("height", $("#copyright").attr("offsetTop")-$("#navThumbNext").attr("offsetTop")-options.tabsHidden+"px");
201    }
202  }
203
204  cssValues = new Object;
205  cssValues.height = $("#theImg").attr("height")+"px";
206
207  // autoscroll
208  if(options.imageAutoScroll && ($("#theImg").attr("scrollWidth")>($("#theImage").attr("clientWidth")-2*options.marginContainer)))
209  {
210    cssValues.width = ($("#theImage").attr("clientWidth")- 2*options.marginContainer)+"px";
211
212    $("#theImage").bind("mousemove",
213      function(event){
214        deadArea = $("#navThumbPrev").attr("clientWidth")*1.2;
215        mouse=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
216        $("#theImg")
217          .css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
218          .trigger('scrolled');
219      }
220    );
221    isScrollable=true;
222  }
223  else
224  {
225    $("#theImage").unbind("mousemove");
226    $("#theImg").css("left", "0px");
227    cssValues.width = $("#theImg").attr("scrollWidth")+"px";
228    isScrollable=false;
229  }
230  $("#theImgContainer").css(cssValues);
231
232  // imagecenter
233  if($("#copyright").css("position")=="fixed")
234  {
235    $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
236  }
237  switch(options.imageCenterMode)
238  {
239    case "img":
240      imgTop = $("#theImgContainer").attr('offsetHeight');
241      break;
242    case "all":
243      imgTop = $("#theImage").attr('offsetHeight');
244      break;
245    default:
246      imgTop = -10000;
247      break;
248  }
249  imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
250
251  if(imgTop<options.imageCenterTopMin)
252  {
253    imgTop=options.imageCenterTopMin;
254  }
255  imgTop=imgTop+"px";
256
257  $("#theImage").css("top", imgTop);
258
259  simulateHighRes();
260
261}
262
263function switchInterface(show, resetTimer)
264{
265  /*
266  uiImg class is affected on this elements :
267  $("#imageToolBarContainer").stop(true, false).fadeTo(animateDelay, 1);
268  $("#imageInfosContainer").stop(true, false).fadeTo(animateDelay, 1);
269  $("#navThumbPrevContainer").stop(true, false).fadeTo(animateDelay, 1);
270  $("#navThumbNextContainer").stop(true, false).fadeTo(animateDelay, 1);
271  */
272
273  if(($(document).data("initialized")==1)&&(options.interfaceHidden))
274  {
275    $(document).data("initialized", 2);
276    if(show=="Y") return('');
277  }
278
279  if(!options.interfaceHidden && show=="0")  { show="1"; }
280
281  // works with jQuery 1.2.6 (support function need jQuery 1.3)
282  if(options.interfaceAnimated=="fade")
283  {
284    switch(show)
285    {
286      case '0':
287        $(".uiImg").css({opacity: 0, visibility:"hidden"});
288        $(document).data("interface", false);
289        break;
290      case '1':
291        if(!$(document).data("interface")) $(".uiImg").css({opacity: 1, visibility:"visible"});
292        $(document).data("interface", true);
293        if(resetTimer) resetInterfaceTimer();
294        break;
295      case '2':
296        //if($(document).data("interface")) break;
297      case 'Y':
298      case 'y':
299        if(!$(document).data("interface")) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
300        $(document).data("interface", true);
301        if(resetTimer) resetInterfaceTimer();
302        break;
303      default:
304        $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
305          {
306            this.style.visibility="hidden";
307            $(document).data("interface", false);
308          }
309        );
310        clearInterfaceTimer();
311        break;
312    }
313  }
314  else
315  {
316    //other value....
317    switch(show)
318    {
319      case 'y':
320      case 'Y':
321      case '1':
322      case '2':
323        if(!$(document).data("interface")) $(".uiImg").css("visibility", "visible");
324        $(document).data("interface", true);
325        if(resetTimer) resetInterfaceTimer();
326        break;
327      default:
328        $(".uiImg").css("visibility", "hidden");
329        $(document).data("interface", false);
330        clearInterfaceTimer();
331        break;
332    }
333  }
334}
335
336function switchTabs(show)
337{
338  if(show!='')
339  {
340    showtabs=show;
341  }
342  else
343  {
344    if(showtabs!='n')
345    {
346      showtabs='n';
347    }
348    else
349    {
350      showtabs='y';
351    }
352  }
353
354  if(options.tabsAnimated)
355  {
356    if(showtabs=='y')
357    {
358      $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
359    }
360    else
361    {
362      $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
363      $('#theTabs li').removeClass("ui-tabs-selected");
364      $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
365    }
366  }
367  else
368  {
369    if(showtabs=='y')
370    {
371      $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
372    }
373    else
374    {
375      $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
376      $('#theTabs li').removeClass("ui-tabs-selected");
377      $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
378    }
379  }
380}
381
382function clearInterfaceTimer()
383{
384  if(interfaceTimerDelay!=null)
385  {
386    window.clearInterval(interfaceTimerDelay);
387    interfaceTimerDelay=null;
388  }
389}
390
391function resetInterfaceTimer()
392{
393  clearInterfaceTimer();
394  if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interfaceTimerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
395}
396
397function openDisplayHigh(url)
398{
399  $('#theImageHigh').css(
400    {
401      width:$("html").get(0).scrollWidth+"px",
402      height:$("html").get(0).scrollHeight+"px",
403      display:"block"
404    }
405  );
406
407  if($("#theImgHigh").attr('src')=="")
408  {
409    p = new Object();
410    p.left = (($(window).width()-$("#theImgHighContainer").attr("clientWidth")-options.paddingContainer*2)/2)+"px";
411    p.top = (($(window).height()-$("#theImgHighContainer").attr("clientHeight")-options.paddingContainer*2)/2)+"px";
412
413
414    $('#theImgHighContainer')
415      .css(
416        {
417          left:p.left,
418          top:p.top,
419          padding:options.paddingContainer+"px"
420        }
421      );
422
423
424    $("#theImgHigh")
425      .load(
426        function ()
427        {
428          $(document).data("highWidth", $("#theImgHigh").width());
429          $(document).data("highHeight", $("#theImgHigh").height());
430
431          p=calcImgHighPositionAndSize(zoomMode);
432
433          $('#theImgHighContainer').css("background-image", "none")
434          displayZoomHigh();
435          $("#theImgHigh").css( {display:"block"} );
436        }
437      )
438      .attr('src', url);
439
440    if(options.highResClickMode=='close')
441    {
442      $("#theImgHigh").bind('click', closeDisplayHigh);
443    }
444    else
445    {
446      // switch zoom
447      $("#theImgHigh").bind('click', switchZoomHigh);
448    }
449  }
450  else
451  {
452    p=calcImgHighPositionAndSize(zoomMode);
453
454    $('#theImgHighContainer')
455      .css(
456        {
457          left:p.left+"px",
458          top:p.top+"px",
459          width:p.width+"px",
460          height:p.height+"px"
461        }
462      );
463  }
464}
465
466function calcImgHighPositionAndSize(zoom)
467{
468  p = new Object();
469
470  if(zoom=='full')
471  {
472    p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
473    p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
474    p.left=options.marginContainer;
475    p.top=options.marginContainer;
476
477    if(p.width>$(document).data("highWidth"))
478    {
479      p.width = $(document).data("highWidth")-options.paddingContainer*2;
480      p.left = ($("html").get(0).clientWidth-p.width)/2;
481    }
482
483    if(p.height>$(document).data("highHeight"))
484    {
485      p.height = $(document).data("highHeight")-options.paddingContainer*2;
486      p.top = ($("html").get(0).clientHeight-p.height)/2;
487    }
488  }
489  else
490  {
491    //zoom = 'fit'
492    ratioImg = $(document).data("highWidth") / $(document).data("highHeight");
493    ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;
494
495    if((ratioPage > 1 && (ratioPage > ratioImg)) ||
496       (ratioPage < 1 && (ratioPage < ratioImg)))
497    {
498      p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
499      p.width = p.height*ratioImg;
500    }
501    else
502    {
503      p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
504      p.height = p.width/ratioImg;
505    }
506    p.left = ($("html").get(0).clientWidth-p.width)/2;
507    p.top = ($("html").get(0).clientHeight-p.height)/2;
508  }
509
510  return(p);
511}
512
513function closeDisplayHigh()
514{
515  $('#theImageHigh').css('display', 'none');
516}
517
518function switchZoomHigh()
519{
520  if(zoomMode=='full')
521  {
522    zoomMode="fit";
523  }
524  else
525  {
526    zoomMode="full";
527  }
528
529  $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');
530
531  displayZoomHigh();
532}
533
534function displayZoomHigh()
535{
536  p=calcImgHighPositionAndSize(zoomMode);
537
538  $('#theImgHighContainer').css(
539      {
540        left:p.left+"px",
541        top:p.top+"px",
542        width:p.width+"px",
543        height:p.height+"px"
544      }
545    );
546
547
548
549    if(zoomMode=="full")
550    {
551      $("#theImgHigh")
552        .css(
553          {
554            width:$(document).data("highWidth")+"px",
555            height:$(document).data("highHeight")+"px"
556          }
557        );
558      $('#theImgHighContainer').bind("mousemove",
559          function(event)
560          {
561            deadArea = options.marginContainer*2;
562            mouseX=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
563            mouseY=Math.max(Math.min(event.clientY-this.offsetTop, this.clientHeight - deadArea), deadArea);
564            $("#theImgHigh")
565              .css("left",Math.round(($("#theImgHigh").attr("scrollWidth")-this.clientWidth) * -(mouseX-deadArea)/(this.clientWidth-2*deadArea))+"px")
566              .css("top",Math.round(($("#theImgHigh").attr("scrollHeight")-this.clientHeight) * -(mouseY-deadArea)/(this.clientHeight-2*deadArea))+"px");
567          }
568        );
569    }
570    else
571    {
572      $("#theImgHigh")
573        .css(
574          {
575            width:p.width+"px",
576            height:p.height+"px",
577            left:"0px",
578            top:"0px"
579          }
580        );
581      $('#theImgHighContainer').unbind("mousemove");
582    }
583}
584
585
586
587
Note: See TracBrowser for help on using the repository browser.