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

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

feature:2664- compatibility with Piwigo 2.4
  • Property svn:executable set to *
File size: 20.6 KB
Line 
1/* -----------------------------------------------------------------------------
2  GALLY
3  Template for Piwigo
4  ------------------------------------------------------------------------------
5  file: gally/gallyjs-tpp.js
6  file release: 1.4.4
7  ------------------------------------------------------------------------------
8  author: grum at piwigo.org
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
18var gallyPP=null;
19
20$(document).ready(
21  function()
22  {
23    gallyPP=new GallyPP();
24  }
25);
26
27function GallyPP () {
28  var tabs={
29        show:'n',
30        current:-1,
31        selected:-1
32      },
33      interface={
34        visible:false,
35        initialized:0,
36        timerDelay:null
37      },
38      image={
39        isScrollable:false,
40        highWidth:0,
41        highHeight:0,
42        leftPos:0,
43        zoomMode:''
44      },
45      container=null,
46      initialThumbPos=null,
47
48  /**
49   * initialize the object
50   */
51  init = function()
52  {
53    var regexp = /[1234567]\./i;
54
55    if(jQuery.browser.msie && jQuery.browser.version.match(regexp))
56    {
57      // this features don't work with the f*****g msie browser version <= 7.0
58      // it seems to be functionnal with ie 8.0
59      options.interfaceAnimated="none";
60      options.imageAutoScroll=false;
61    }
62
63    if(options.imageAutoScroll)
64    {
65      $("html").css("overflow-x", "hidden");
66    }
67    else
68    {
69      $("html").css("overflow-x", "scroll");
70    }
71
72    if(options.imageCenterTopBorder == "imageHeaderBar")
73    {
74      options.imageCenterTopMin+=$("#imageHeaderBar").get(0).offsetTop+$("#imageHeaderBar").get(0).offsetHeight;
75    }
76
77    if(!options.interfaceCanSwitch)
78    {
79      options.interfaceHidden=false;
80    }
81
82    image.zoomMode=options.defaultZoomSize;
83
84    switchInterface('0', true);
85    initializeImageMode("init");
86
87
88    if((options.interfaceOnImage=="always" || (options.interfaceOnImage=="noscroll" && !image.isScrollable)) && options.interfaceCanSwitch)
89    {
90      $("#theMainImage").bind("mouseenter", function () { switchInterface('y', true); } )
91                        .bind("mouseleave", function () { switchInterface('n', true); } )
92                        .bind("mousemove", function () { switchInterface('y', true); } );
93    }
94
95    if(options.interfaceCanSwitch)
96    {
97      $("#imageHeaderBar").bind("mouseenter", function () { switchInterface('y', false); } )
98                          .bind("mousemove", function () { switchInterface('y', false); } );
99      $("#imageToolBar").bind("mouseenter", function () { switchInterface('y', true); } )
100                        .bind("mouseleave", function () { switchInterface('n', true); } )
101                        .bind("mousemove", function () { switchInterface('y', true); } );
102
103
104      $("#navThumbPrev").bind("mouseenter", function () { switchInterface('Y', true); } )
105                        .bind("mouseleave", function () { switchInterface('n', true); } )
106                        .bind("mousemove", function () { switchInterface('y', true); } );
107
108      $("#navThumbNext").bind("mouseenter", function () { switchInterface('Y', true); } )
109                        .bind("mouseleave", function () { switchInterface('n', true); } )
110                        .bind("mousemove", function () { switchInterface('y', true); } );
111    }
112
113    $("#contentid").attr("rows", options.commentRows);
114
115    /* fx duration option set to 0 doesn't work so... */
116    if(options.animateDelay>0)
117    {
118      $("#theTabs").tabs({ fx: { opacity: 'toggle', duration:options.animateDelay } } );
119    }
120    else
121    {
122      $("#theTabs").tabs();
123    }
124    switchTabs('n');
125
126
127    if(options.interfaceCanSwitch)
128    {
129      $('#theTabsContainer').bind("mouseenter", function () { switchInterface('Y', false); } )
130                            .bind("mouseleave", function () { switchInterface('n'); } )
131                            .bind("mousemove", function () { switchInterface('y', false); } );
132    }
133
134    $("#theTabs").bind('tabsselect', function(event, ui)
135      {
136        /* The "collapsible" option don't work with jQuery 1.2.6
137         * This function aims to reproduct this functionnality
138        */
139        tabs.selected=ui.index;
140      }
141    );
142
143    $('.tab a').click(function()
144      {
145        /* The "collapsible" option don't work with jQuery 1.2.6
146         * This function aims to reproduct this functionnality
147        */
148        $(this).get(0).blur();
149        if(tabs.selected == tabs.current)
150        {
151          if (tabs.current!=-1) switchTabs('n');
152          tabs.current=-1;
153          tabs.selected=-1;
154        }
155        else
156        {
157          if(tabs.current==-1) switchTabs('y');
158          tabs.current=tabs.selected;
159        }
160      }
161    );
162
163    $("#icon_derivatives").click(function()
164      {
165        var elt = $("#derivativeSwitchBox");
166
167        elt.css("left", Math.min( $(this).position().left + $('#tabRandomButtons').outerWidth(true), $(window).width() - elt.outerWidth(true) - 5))
168          .css("top", $(this).position().top)
169          .toggle();
170          $('#iSimpleTip').css('display', 'none'); // if tip activated, hide it..
171      }
172    );
173    $("#derivativeSwitchBox, #privacyLevelBox").on("mouseleave click", function()
174      {
175        $(this).hide();
176      }
177    );
178
179    $('#iPrivacyLevelLink').click(function ()
180      {
181        var elt = $("#privacyLevelBox"),
182            ePos = $("#privacyLevelLink");
183
184        elt.css("left", $(this).position().left)
185           .css("top", $(this).position().top)
186           .toggle();
187      }
188    );
189
190    $(window).resize( function () { initializeImageMode("resize"); } );
191
192    interface.initialized=1;
193    $(document).trigger('gallyInterfaceReady');
194  },
195
196  simulateHighRes = function ()
197  {
198    if(image.isScrollable && options.imageHaveHighRes==false && options.imageSimulateHighRes)
199    {
200      $('#theImgContainer').bind('click', function ()
201        {
202          openDisplayHigh($('#theMainImage').attr('src'));
203        }
204      ).addClass('pointer');
205    }
206
207  },
208
209  /**
210   * mode = "init" or "resize"
211   */
212  initializeImageMode = function (mode)
213  {
214    var thumbWidth=0,
215        imgTop=0,
216        imgPos='',
217        cssValues = new Object;
218
219    cssValues.height = $("#theMainImage").prop("height")+"px";
220
221    // autoscroll
222    if(options.imageAutoScroll && ($("#theMainImage").prop("scrollWidth")>($("#theImage").prop("clientWidth")-2*options.marginContainer)))
223    {
224      cssValues.width = ($("#theImage").prop("clientWidth")- 2*(options.marginContainer+options.paddingContainer))+"px";
225
226      $("#theImage").bind("mousemove",
227        function(event){
228          if($("#navThumbPrev").length>0) thumbWidth=$("#navThumbPrev").prop("clientWidth");
229          deadArea = Math.max(options.imageScrollMinDeadArea, thumbWidth*1.2);
230          mouse=Math.max(Math.min(event.clientX-image.leftPos, this.clientWidth - deadArea), deadArea);
231          $("#theMainImage")
232            .css("left",Math.round(($("#theMainImage").prop("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
233            .trigger('scrolled');
234        }
235      );
236      image.isScrollable=true;
237    }
238    else
239    {
240      $("#theImage").unbind("mousemove");
241      $("#theMainImage").css("left", "0px");
242      cssValues.width = $("#theMainImage").prop("scrollWidth")+"px";
243      image.isScrollable=false;
244    }
245    $("#theImgContainer").css(cssValues);
246
247    // imagecenter
248    if($("#copyright").css("position")=="fixed")
249    {
250      $("#theImage").css("padding-bottom", $("#copyright").prop("offsetHeight")+"px");
251    }
252    switch(options.imageCenterMode)
253    {
254      case "img":
255        imgTop = $("#theImgContainer").prop('offsetHeight');
256        break;
257      case "all":
258        imgTop = $("#theImage").prop('offsetHeight');
259        break;
260      default:
261        imgTop = -10000;
262        break;
263    }
264    imgTop = ($("#copyright").prop("offsetTop") - ($("#imageHeaderBar").prop("offsetTop") + $("#imageHeaderBar").prop("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
265
266    switch($("#theImage").css("position"))
267    {
268      case "static":
269          $("#theImage").css("padding-top", imgTop);
270        break;
271      /*
272      case "fixed":
273      case "absolute":
274      case "relative":
275      */
276      default:
277          if(imgTop<options.imageCenterTopMin)
278          {
279            imgTop=options.imageCenterTopMin;
280          }
281          imgTop=imgTop+"px";
282          $("#theImage").css("top", imgTop);
283        break;
284    }
285
286    image.leftPos=$('#theImage').offset().left;
287
288
289    if(mode=="init")
290    {
291      theHeaderHeight=$("#theHeader").prop("offsetHeight")+$("#theHeaderAlt").prop("offsetHeight");
292
293      $("#imageToolBar").css("top", $("#imageToolBar").prop("offsetTop")+theHeaderHeight+$("#imageHeaderBar").prop("offsetHeight")+"px");
294
295      if($("#navThumbPrev").length>0)
296      {
297        initialThumbPos=$("#navThumbPrev").position().top;
298      }
299      else if($("#navThumbNext").length>0)
300      {
301        initialThumbPos=$("#navThumbNext").position().top;
302      }
303      else
304      {
305        initialThumbPos=-1;
306      }
307    }
308
309    switch(options.tabsPosition)
310    {
311      case "top":
312          toolBarArea = $("#imageToolBar").prop("offsetTop")+$("#imageToolBar").prop("offsetHeight");
313          $("#theTabsContainer").css("top", toolBarArea+"px");
314        break;
315      case "bottom":
316          copyrightArea = $("#copyright").prop("clientHeight")+1;
317          $("#theTabsContainer").css("bottom", copyrightArea+"px");
318        break;
319      case "pictureTop":
320        $("#theTabsContainer").css(
321          {
322            top: $("#theMainImage").prop("offsetTop")+"px",
323            left:$("#theMainImage").prop("offsetLeft")+"px",
324            width:$('#theImgContainer').innerWidth()+"px"
325          }
326        );
327        break;
328      case "pictureBottom":
329        pictureArea = $("#theMainImage").prop("offsetTop")+$("#theMainImage").prop("offsetHeight");
330        $("#theTabsContainer").css(
331          {
332            top: pictureArea+"px",
333            left:$("#theMainImage").prop("offsetLeft")+"px",
334            width:$("#theMainImage").prop("offsetWidth")+"px"
335          }
336        );
337        break;
338    }
339
340    imgTop=initialThumbPos;
341    //if position equals -1, mean top calculate it automatically - valid for "#navThumbPrev" & "#navThumbNext"
342    if(imgTop==-1)
343    {
344      imgTop=$("#theImage").prop("offsetTop")+$("#theHeader").prop("offsetHeight")+$("#theHeaderAlt").prop("offsetHeight")+($("#theImgContainer").height()-$("#navThumbPrev").height())/2;
345    }
346
347    $("#navThumbPrev")
348        .css("top", imgTop)
349        .css("height", $("#copyright").prop("offsetTop")-$("#navThumbPrev").prop("offsetTop")-options.tabsHidden+"px");
350
351    $("#navThumbNext")
352        .css("top", imgTop)
353        .css("height", $("#copyright").prop("offsetTop")-$("#navThumbNext").prop("offsetTop")-options.tabsHidden+"px");
354
355
356    $("#theImage").css("top", $("#theImage").prop("offsetTop")+$("#theHeader").prop("offsetHeight")+$("#theHeaderAlt").prop("offsetHeight")+"px");
357
358    simulateHighRes();
359  },
360
361  switchInterface = function (show, resetTimer)
362  {
363    if((interface.initialized==1)&&(options.interfaceHidden))
364    {
365      interface.initialized=2;
366      if(show=="Y") return('');
367    }
368
369    if(!options.interfaceHidden && show=="0")  { show="1"; }
370
371    // works with jQuery 1.2.6 (support function need jQuery 1.3)
372    if(options.interfaceAnimated=="fade")
373    {
374      switch(show)
375      {
376        case '0':
377          $(".uiImg").css({opacity: 0, visibility:"hidden"});
378          interface.visible=false;
379          break;
380        case '1':
381          if(!interface.visible) $(".uiImg").css({opacity: 1, visibility:"visible"});
382          interface.visible=true;
383          if(resetTimer) resetInterfaceTimer();
384          break;
385        case '2':
386          //if(interface.visible) break;
387        case 'Y':
388        case 'y':
389          if(!interface.visible) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
390          interface.visible=true;
391          if(resetTimer) resetInterfaceTimer();
392          break;
393        default:
394          $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
395            {
396              this.style.visibility="hidden";
397              interface.visible=false;
398            }
399          );
400          clearInterfaceTimer();
401          break;
402      }
403    }
404    else
405    {
406      //other value....
407      switch(show)
408      {
409        case 'y':
410        case 'Y':
411        case '1':
412        case '2':
413          if(!interface.visible) $(".uiImg").css("visibility", "visible");
414          interface.visible=true;
415          if(resetTimer) resetInterfaceTimer();
416          break;
417        default:
418          $(".uiImg").css("visibility", "hidden");
419          interface.visible=false;
420          clearInterfaceTimer();
421          break;
422      }
423    }
424  },
425
426  switchTabs = function(show)
427  {
428    if(show!='')
429    {
430      tabs.show=show;
431    }
432    else
433    {
434      if(tabs.show!='n')
435      {
436        tabs.show='n';
437      }
438      else
439      {
440        tabs.show='y';
441      }
442    }
443
444    if(options.tabsAnimated)
445    {
446      if(tabs.show=='y')
447      {
448        $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
449      }
450      else
451      {
452        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
453        $('#theTabs li').removeClass("ui-tabs-selected");
454        $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
455      }
456    }
457    else
458    {
459      if(tabs.show=='y')
460      {
461        $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
462      }
463      else
464      {
465        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
466        $('#theTabs li').removeClass("ui-tabs-selected");
467        $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
468      }
469    }
470  },
471
472  clearInterfaceTimer = function()
473  {
474    if(interface.timerDelay!=null)
475    {
476      window.clearInterval(interface.timerDelay);
477      interface.timerDelay=null;
478    }
479  },
480
481  resetInterfaceTimer = function()
482  {
483    clearInterfaceTimer();
484    if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interface.timerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
485  },
486
487  openDisplayHigh = function(url)
488  {
489    $('#theImageHigh').css(
490      {
491        width:$("html").get(0).scrollWidth+"px",
492        height:$("html").get(0).scrollHeight+"px",
493        display:"block"
494      }
495    );
496
497    if($("#theImgHigh").attr('src')=="")
498    {
499      p = new Object();
500      p.left = (($(window).width()-$("#theImgHighContainer").prop("clientWidth")-options.paddingContainer*2)/2)+"px";
501      p.top = (($(window).height()-$("#theImgHighContainer").prop("clientHeight")-options.paddingContainer*2)/2)+"px";
502
503
504      $('#theImgHighContainer')
505        .css(
506          {
507            left:p.left,
508            top:p.top,
509            padding:options.paddingContainer+"px"
510          }
511        );
512
513
514      $("#theImgHigh")
515        .load(
516          function ()
517          {
518            image.highWidth=$("#theImgHigh").width();
519            image.highHeight=$("#theImgHigh").height();
520
521            p=calcImgHighPositionAndSize(image.zoomMode);
522
523            $('#theImgHighContainer').css("background-image", "none");
524            displayZoomHigh();
525            $("#theImgHigh").css( {display:"block"} );
526          }
527        )
528        .attr('src', url);
529
530      if(options.highResClickMode=='close')
531      {
532        $("#theImgHigh").bind('click', closeDisplayHigh);
533      }
534      else
535      {
536        // switch zoom
537        $("#theImgHigh").bind('click', switchZoomHigh);
538      }
539    }
540    else
541    {
542      p=calcImgHighPositionAndSize(image.zoomMode);
543
544      $('#theImgHighContainer')
545        .css(
546          {
547            left:p.left+"px",
548            top:p.top+"px",
549            width:p.width+"px",
550            height:p.height+"px"
551          }
552        );
553    }
554  },
555
556  calcImgHighPositionAndSize = function(zoom)
557  {
558    var p = {
559          left:options.marginContainer,
560          top:options.marginContainer,
561          width:0,
562          height:0
563        },
564        margins = (options.marginContainer+options.paddingContainer)*2;
565
566    if(zoom=='full')
567    {
568      p.width = $("html").get(0).clientWidth-margins;
569      p.height = $("html").get(0).clientHeight-margins;
570    }
571    else
572    {
573      //zoom = 'fit'
574      ratioImg = image.highWidth / image.highHeight;
575      ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;
576
577      if((ratioPage > 1 && (ratioPage > ratioImg)) ||
578         (ratioPage < 1 && (ratioPage < ratioImg)))
579      {
580        p.height = $("html").get(0).clientHeight-margins;
581        p.width = p.height*ratioImg;
582      }
583      else
584      {
585        p.width = $("html").get(0).clientWidth-margins;
586        p.height = p.width/ratioImg;
587      }
588      p.left = ($("html").get(0).clientWidth-p.width)/2-options.paddingContainer;
589      p.top = ($("html").get(0).clientHeight-p.height)/2-options.paddingContainer;
590    }
591
592    if(p.width>image.highWidth)
593    {
594      p.width = image.highWidth;
595      p.left = ($("html").get(0).clientWidth-p.width)/2;
596    }
597    if(p.height>image.highHeight)
598    {
599      p.height = image.highHeight;
600      p.top = ($("html").get(0).clientHeight-p.height)/2;
601    }
602
603    return(p);
604  },
605
606  displayZoomHigh = function()
607  {
608    var container=calcImgHighPositionAndSize(image.zoomMode);
609
610    $('#theImgHighContainer').css(
611        {
612          left:container.left+"px",
613          top:container.top+"px",
614          width:container.width+"px",
615          height:container.height+"px"
616        }
617      );
618
619
620
621      if(image.zoomMode=="full")
622      {
623        $("#theImgHigh")
624          .css(
625            {
626              width:image.highWidth+"px",
627              height:image.highHeight+"px"
628            }
629          );
630        $('#theImgHighContainer').bind("mousemove",
631            function(event)
632            {
633              var deadArea = Math.max(options.marginContainer*2, options.imageScrollMinDeadArea)
634                  mouseX=Math.max(Math.min(event.clientX-container.left, container.width - deadArea), deadArea),
635                  mouseY=Math.max(Math.min(event.clientY-container.top, container.height - deadArea), deadArea);
636              $("#theImgHigh")
637                .css("left",Math.round((image.highWidth-container.width) * -(mouseX-deadArea)/(container.width-2*deadArea))+"px")
638                .css("top",Math.round((image.highHeight-container.height) * -(mouseY-deadArea)/(container.height-2*deadArea))+"px");
639            }
640          );
641      }
642      else
643      {
644        $("#theImgHigh")
645          .css(
646            {
647              width:container.width+"px",
648              height:container.height+"px",
649              left:"0px",
650              top:"0px"
651            }
652          );
653        $('#theImgHighContainer').unbind("mousemove");
654      }
655  },
656
657  closeDisplayHigh = function()
658  {
659    $('#theImageHigh').css('display', 'none');
660  },
661
662  switchZoomHigh = function()
663  {
664    if(image.zoomMode=='full')
665    {
666      image.zoomMode="fit";
667    }
668    else
669    {
670      image.zoomMode="full";
671    }
672
673    $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');
674
675    displayZoomHigh();
676  };
677
678  function changeImgSrc(url,typeSave,typeMap,cookiePath)
679  {
680    $("#theMainImage")
681      .removeAttr("width height")
682      .attr("src", url)
683      .load(function ()
684        {
685          initializeImageMode("resize");
686        }
687      );
688
689    $('#derivativeSwitchBox .switchCheck').css('visibility','hidden');
690    $('#derivativeChecked'+typeSave).css('visibility','visible');
691
692    document.cookie = 'picture_deriv='+typeSave+';path='+cookiePath;
693  }
694
695  function setPrivacyLevel(rootUrl, id, level)
696  {
697    var y = new PwgWS(rootUrl);
698
699    y.callService(
700      "pwg.images.setPrivacyLevel",
701      {image_id: id, level:level} ,
702      {
703        method: "POST",
704        onFailure: function(num, text) { alert(num + " " + text); },
705        onSuccess: function(result) {
706          jQuery('#privacyLevelBox .switchCheck').css('visibility','hidden');
707          jQuery('#levelCheck'+level).css('visibility','visible');
708        }
709      }
710    );
711  }
712
713  this.closeDisplayHigh = function () { closeDisplayHigh(); };
714  this.switchZoomHigh = function () { switchZoomHigh(); };
715  this.getImageProp = function () { return image; };
716  this.getInterfaceProp = function () { return interface; };
717  this.getTabsProp = function () { return tabs; };
718  this.openDisplayHigh = function (url) { openDisplayHigh(url); };
719  this.changeImgSrc = function (url,typeSave,typeMap,cookiePath) { changeImgSrc(url,typeSave,typeMap,cookiePath); };
720  this.setPrivacyLevel = function (rootUrl, id, level) { setPrivacyLevel(rootUrl, id, level); };
721
722  init();
723
724}
725
726
727
728
Note: See TracBrowser for help on using the repository browser.