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

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

error on GallyFunctions::expandMenuEvent
'missing token' message when user try to change theme
+some minor bugs & improvements not referenced
bug:1714, bug:1864
  • Property svn:executable set to *
File size: 16.1 KB
Line 
1/* -----------------------------------------------------------------------------
2  GALLY
3  Template for Piwigo
4  ------------------------------------------------------------------------------
5  file: gally/gallyjs-tpp.js
6  file release: 1.2.0
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);
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").css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px");
217      }
218    );
219    isScrollable=true;
220  }
221  else
222  {
223    $("#theImage").unbind("mousemove");
224    $("#theImg").css("left", "0px");
225    cssValues.width = $("#theImg").attr("scrollWidth")+"px";
226    isScrollable=false;
227  }
228  $("#theImgContainer").css(cssValues);
229
230  // imagecenter
231  if($("#copyright").css("position")=="fixed")
232  {
233    $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
234  }
235  switch(options.imageCenterMode)
236  {
237    case "img":
238      imgTop = $("#theImgContainer").attr('offsetHeight');
239      break;
240    case "all":
241      imgTop = $("#theImage").attr('offsetHeight');
242      break;
243    default:
244      imgTop = -10000;
245      break;
246  }
247  imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
248
249  if(imgTop<options.imageCenterTopMin)
250  {
251    imgTop=options.imageCenterTopMin;
252  }
253  imgTop=imgTop+"px";
254
255  $("#theImage").css("top", imgTop);
256
257  simulateHighRes();
258
259}
260
261function switchInterface(show, resetTimer)
262{
263  /*
264  uiImg class is affected on this elements :
265  $("#imageToolBarContainer").stop(true, false).fadeTo(animateDelay, 1);
266  $("#imageInfosContainer").stop(true, false).fadeTo(animateDelay, 1);
267  $("#navThumbPrevContainer").stop(true, false).fadeTo(animateDelay, 1);
268  $("#navThumbNextContainer").stop(true, false).fadeTo(animateDelay, 1);
269  */
270
271  if(($(document).data("initialized")==1)&&(options.interfaceHidden))
272  {
273    $(document).data("initialized", 2);
274    if(show=="Y") return('');
275  }
276
277  if(!options.interfaceHidden && show=="0")  { show="1"; }
278
279  // works with jQuery 1.2.6 (support function need jQuery 1.3)
280  if(options.interfaceAnimated=="fade")
281  {
282    switch(show)
283    {
284      case '0':
285        $(".uiImg").css({opacity: 0, visibility:"hidden"});
286        $(document).data("interface", false);
287        break;
288      case '1':
289        if(!$(document).data("interface")) $(".uiImg").css({opacity: 1, visibility:"visible"});
290        $(document).data("interface", true);
291        if(resetTimer) resetInterfaceTimer();
292        break;
293      case '2':
294        //if($(document).data("interface")) break;
295      case 'Y':
296      case 'y':
297        if(!$(document).data("interface")) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
298        $(document).data("interface", true);
299        if(resetTimer) resetInterfaceTimer();
300        break;
301      default:
302        $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
303          {
304            this.style.visibility="hidden";
305            $(document).data("interface", false);
306          }
307        );
308        clearInterfaceTimer();
309        break;
310    }
311  }
312  else
313  {
314    //other value....
315    switch(show)
316    {
317      case 'y':
318      case 'Y':
319      case '1':
320      case '2':
321        if(!$(document).data("interface")) $(".uiImg").css("visibility", "visible");
322        $(document).data("interface", true);
323        if(resetTimer) resetInterfaceTimer();
324        break;
325      default:
326        $(".uiImg").css("visibility", "hidden");
327        $(document).data("interface", false);
328        clearInterfaceTimer();
329        break;
330    }
331  }
332}
333
334function switchTabs(show)
335{
336  if(show!='')
337  {
338    showtabs=show;
339  }
340  else
341  {
342    if(showtabs!='n')
343    {
344      showtabs='n';
345    }
346    else
347    {
348      showtabs='y';
349    }
350  }
351
352  if(options.tabsAnimated)
353  {
354    if(showtabs=='y')
355    {
356      $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
357    }
358    else
359    {
360      $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
361      $('#theTabs li').removeClass("ui-tabs-selected");
362      $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
363    }
364  }
365  else
366  {
367    if(showtabs=='y')
368    {
369      $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
370    }
371    else
372    {
373      $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
374      $('#theTabs li').removeClass("ui-tabs-selected");
375      $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
376    }
377  }
378}
379
380function clearInterfaceTimer()
381{
382  if(interfaceTimerDelay!=null)
383  {
384    window.clearInterval(interfaceTimerDelay);
385    interfaceTimerDelay=null;
386  }
387}
388
389function resetInterfaceTimer()
390{
391  clearInterfaceTimer();
392  if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interfaceTimerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
393}
394
395function openDisplayHigh(url)
396{
397  $('#theImageHigh').css(
398    {
399      width:$("html").get(0).scrollWidth+"px",
400      height:$("html").get(0).scrollHeight+"px",
401      display:"block"
402    }
403  );
404
405  if($("#theImgHigh").attr('src')=="")
406  {
407    p = new Object();
408    p.left = (($(window).width()-$("#theImgHighContainer").attr("clientWidth")-options.paddingContainer*2)/2)+"px";
409    p.top = (($(window).height()-$("#theImgHighContainer").attr("clientHeight")-options.paddingContainer*2)/2)+"px";
410
411
412    $('#theImgHighContainer')
413      .css(
414        {
415          left:p.left,
416          top:p.top,
417          padding:options.paddingContainer+"px"
418        }
419      );
420
421
422    $("#theImgHigh")
423      .load(
424        function ()
425        {
426          $(document).data("highWidth", $("#theImgHigh").width());
427          $(document).data("highHeight", $("#theImgHigh").height());
428
429          p=calcImgHighPositionAndSize(zoomMode);
430
431          $('#theImgHighContainer').css("background-image", "none")
432          displayZoomHigh();
433          $("#theImgHigh").css( {display:"block"} );
434        }
435      )
436      .attr('src', url);
437
438    if(options.highResClickMode=='close')
439    {
440      $("#theImgHigh").bind('click', closeDisplayHigh);
441    }
442    else
443    {
444      // switch zoom
445      $("#theImgHigh").bind('click', switchZoomHigh);
446    }
447  }
448  else
449  {
450    p=calcImgHighPositionAndSize(zoomMode);
451
452    $('#theImgHighContainer')
453      .css(
454        {
455          left:p.left+"px",
456          top:p.top+"px",
457          width:p.width+"px",
458          height:p.height+"px"
459        }
460      );
461  }
462}
463
464function calcImgHighPositionAndSize(zoom)
465{
466  p = new Object();
467
468  if(zoom=='full')
469  {
470    p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
471    p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
472    p.left=options.marginContainer;
473    p.top=options.marginContainer;
474
475    if(p.width>$(document).data("highWidth"))
476    {
477      p.width = $(document).data("highWidth")-options.paddingContainer*2;
478      p.left = ($("html").get(0).clientWidth-p.width)/2;
479    }
480
481    if(p.height>$(document).data("highHeight"))
482    {
483      p.height = $(document).data("highHeight")-options.paddingContainer*2;
484      p.top = ($("html").get(0).clientHeight-p.height)/2;
485    }
486  }
487  else
488  {
489    //zoom = 'fit'
490    ratioImg = $(document).data("highWidth") / $(document).data("highHeight");
491    ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;
492
493    if((ratioPage > 1 && (ratioPage > ratioImg)) ||
494       (ratioPage < 1 && (ratioPage < ratioImg)))
495    {
496      p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
497      p.width = p.height*ratioImg;
498    }
499    else
500    {
501      p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
502      p.height = p.width/ratioImg;
503    }
504    p.left = ($("html").get(0).clientWidth-p.width)/2;
505    p.top = ($("html").get(0).clientHeight-p.height)/2;
506  }
507
508  return(p);
509}
510
511function closeDisplayHigh()
512{
513  $('#theImageHigh').css('display', 'none');
514}
515
516function switchZoomHigh()
517{
518  if(zoomMode=='full')
519  {
520    zoomMode="fit";
521  }
522  else
523  {
524    zoomMode="full";
525  }
526
527  $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');
528
529  displayZoomHigh();
530}
531
532function displayZoomHigh()
533{
534  p=calcImgHighPositionAndSize(zoomMode);
535
536  $('#theImgHighContainer').css(
537      {
538        left:p.left+"px",
539        top:p.top+"px",
540        width:p.width+"px",
541        height:p.height+"px"
542      }
543    );
544
545
546
547    if(zoomMode=="full")
548    {
549      $("#theImgHigh")
550        .css(
551          {
552            width:$(document).data("highWidth")+"px",
553            height:$(document).data("highHeight")+"px"
554          }
555        );
556      $('#theImgHighContainer').bind("mousemove",
557          function(event)
558          {
559            deadArea = options.marginContainer*2;
560            mouseX=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
561            mouseY=Math.max(Math.min(event.clientY-this.offsetTop, this.clientHeight - deadArea), deadArea);
562            $("#theImgHigh")
563              .css("left",Math.round(($("#theImgHigh").attr("scrollWidth")-this.clientWidth) * -(mouseX-deadArea)/(this.clientWidth-2*deadArea))+"px")
564              .css("top",Math.round(($("#theImgHigh").attr("scrollHeight")-this.clientHeight) * -(mouseY-deadArea)/(this.clientHeight-2*deadArea))+"px");
565          }
566        );
567    }
568    else
569    {
570      $("#theImgHigh")
571        .css(
572          {
573            width:p.width+"px",
574            height:p.height+"px",
575            left:"0px",
576            top:"0px"
577          }
578        );
579      $('#theImgHighContainer').unbind("mousemove");
580    }
581}
582
583
584
585
Note: See TracBrowser for help on using the repository browser.