source: extensions/gally/gallyjs-tpp.js @ 4446

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

[Template:Gally] Add template to subversion
  • Property svn:executable set to *
File size: 9.9 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;
22
23$("document").ready(
24  function(){ inittoolbar(); }
25);
26
27function inittoolbar()
28{
29  $(document).data("initialized", 0);
30  $(document).data("interface", false);
31
32  if(jQuery.browser.msie)
33  {
34    //this features don't work with the f*****g msie browser
35    options.interfaceAnimated="none";
36    options.imageAutoScroll=false;
37  }
38
39  if(options.imageAutoScroll)
40  {
41    $("html").css("overflow-x", "hidden");
42  }
43  else
44  {
45    $("html").css("overflow-x", "scroll");
46  }
47
48  if(options.imageCenterTopBorder == "imageHeaderBar")
49  {
50    options.imageCenterTopMin+=$("#imageHeaderBar").get(0).offsetTop+$("#imageHeaderBar").get(0).offsetHeight;
51  }
52
53  currentTab=-1;
54  selectedTab=-1;
55  interfaceTimerDelay = null;
56
57  switchInterface('0', true);
58  initializeImageMode();
59
60
61  $("#theCommentList").css("height", options.comments_visible-42+"px");
62
63  if(options.interfaceOnImage)
64  {
65    $("#theImg").bind("mouseenter", function () { switchInterface('y', true); } )
66                .bind("mouseleave", function () { switchInterface('n', true); } )
67                .bind("mousemove", function () { switchInterface('y', true); } );
68  }
69
70  $("#imageHeaderBar").bind("mouseenter", function () { switchInterface('y', false); } )
71                      .bind("mousemove", function () { switchInterface('y', false); } );
72  $("#imageToolBar").bind("mouseenter", function () { switchInterface('y', true); } )
73                    .bind("mouseleave", function () { switchInterface('n', true); } )
74                    .bind("mousemove", function () { switchInterface('y', true); } )
75                    .css("top", $("#imageToolBar").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#imageHeaderBar").attr("offsetHeight")+"px");
76
77  $("#navThumbPrev").bind("mouseenter", function () { switchInterface('Y', true); } )
78                    .bind("mouseleave", function () { switchInterface('n', true); } )
79                    .bind("mousemove", function () { switchInterface('y', true); } )
80                    .css("top", $("#navThumbPrev").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+"px");
81
82  $("#navThumbNext").bind("mouseenter", function () { switchInterface('Y', true); } )
83                    .bind("mouseleave", function () { switchInterface('n', true); } )
84                    .bind("mousemove", function () { switchInterface('y', true); } )
85                    .css("top", $("#navThumbNext").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+"px");
86
87  $("#theImage").css("top", $("#theImage").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+"px");
88
89  $("#contentid").attr("rows", options.commentRows);
90
91  /* fx duration option set to 0 doesn't work so... */
92  if(options.animateDelay>0)
93  {
94    $("#theTabs").tabs({ fx: { opacity: 'toggle', duration:options.animateDelay } });
95  }
96  else
97  {
98    $("#theTabs").tabs();
99  }
100  switchTabs('n');
101
102  $('#theTabsContainer').bind("mouseenter", function () { switchInterface('Y', false); } )
103                        .bind("mouseleave", function () { switchInterface('n'); } )
104                        .bind("mousemove", function () { switchInterface('y', false); } );
105
106  $("#theTabs").bind('tabsselect', function(event, ui)
107    {
108      /* The "collapsible" option don't work with jQuery 1.2.6
109       * This function aims to reproduct this functionnality
110      */
111      selectedTab=ui.index;
112    }
113  );
114
115  $('.tab a').click(function()
116    {
117      /* The "collapsible" option don't work with jQuery 1.2.6
118       * This function aims to reproduct this functionnality
119      */
120      $(this).get(0).blur();
121      if(selectedTab == currentTab)
122      {
123        if (currentTab!=-1) switchTabs('n');
124        currentTab=-1;
125        selectedTab=-1;
126      }
127      else
128      {
129        if(currentTab==-1) switchTabs('y');
130        currentTab=selectedTab;
131      }
132    }
133  );
134
135  $(window).resize( function () { initializeImageMode(); } );
136
137  $(document).data("initialized", 1);
138}
139
140function initializeImageMode()
141{
142  copyrightArea = $("#copyright").attr("clientHeight")+1;
143  $("#theTabsContainer").css("bottom", copyrightArea+"px");
144
145  $("#navThumbPrev").css("height", $("#copyright").attr("offsetTop")-$("#navThumbPrev").attr("offsetTop")-options.tabsHidden+"px");
146  $("#navThumbNext").css("height", $("#copyright").attr("offsetTop")-$("#navThumbNext").attr("offsetTop")-options.tabsHidden+"px");
147
148  cssValues = new Object;
149  cssValues.height = $("#theImg").attr("height")+"px";
150
151  // autoscroll
152  if(options.imageAutoScroll && ($("#theImg").attr("scrollWidth")>($("#theImage").attr("clientWidth")-2*options.margin_container)))
153  {
154    cssValues.width = ($("#theImage").attr("clientWidth")- 2*options.margin_container)+"px";
155
156    $("#theImage").bind("mousemove",
157      function(event){
158        deadArea = $("#navThumbPrev").attr("clientWidth")*1.2;
159        mouse=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
160        $("#theImg").css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px");
161      }
162    );
163  }
164  else
165  {
166    $("#theImage").unbind("mousemove");
167    $("#theImg").css("left", "0px");
168    cssValues.width = $("#theImg").attr("scrollWidth")+"px";
169  }
170  $("#theImgContainer").css(cssValues);
171
172  // imagecenter
173  $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
174  switch(options.imageCenterMode)
175  {
176    case "img":
177      imgTop = $("#theImgContainer").attr('offsetHeight');
178      break;
179    case "all":
180      imgTop = $("#theImage").attr('offsetHeight');
181      break;
182    default:
183      imgTop = -10000;
184      break;
185  }
186  imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;
187
188  if(imgTop<options.imageCenterTopMin)
189  {
190    imgTop=options.imageCenterTopMin;
191  }
192  imgTop=imgTop+"px";
193
194  $("#theImage").css("top", imgTop);
195
196}
197
198function switchInterface(show, resetTimer)
199{
200  /*
201  uiImg class is affected on this elements :
202  $("#imageToolBarContainer").stop(true, false).fadeTo(animateDelay, 1);
203  $("#imageInfosContainer").stop(true, false).fadeTo(animateDelay, 1);
204  $("#navThumbPrevContainer").stop(true, false).fadeTo(animateDelay, 1);
205  $("#navThumbNextContainer").stop(true, false).fadeTo(animateDelay, 1);
206  */
207
208  if(($(document).data("initialized")==1)&&(options.interfaceHidden))
209  {
210    $(document).data("initialized", 2);
211    if(show=="Y") return('');
212  }
213
214  if(!options.interfaceHidden && show=="0")  { show="1"; }
215
216  // works with jQuery 1.2.6 (support function need jQuery 1.3)
217  if(options.interfaceAnimated=="fade")
218  {
219    switch(show)
220    {
221      case '0':
222        $(".uiImg").css({opacity: 0, visibility:"hidden"});
223        $(document).data("interface", false);
224        break;
225      case '1':
226        if(!$(document).data("interface")) $(".uiImg").css({opacity: 1, visibility:"visible"});
227        $(document).data("interface", true);
228        if(resetTimer) resetInterfaceTimer();
229        break;
230      case '2':
231        //if($(document).data("interface")) break;
232      case 'Y':
233      case 'y':
234        if(!$(document).data("interface")) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
235        $(document).data("interface", true);
236        if(resetTimer) resetInterfaceTimer();
237        break;
238      default:
239        $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
240          {
241            this.style.visibility="hidden";
242            $(document).data("interface", false);
243          }
244        );
245        clearInterfaceTimer();
246        break;
247    }
248  }
249  else
250  {
251    //other value....
252    switch(show)
253    {
254      case 'y':
255      case 'Y':
256      case '1':
257      case '2':
258        if(!$(document).data("interface")) $(".uiImg").css("visibility", "visible");
259        $(document).data("interface", true);
260        if(resetTimer) resetInterfaceTimer();
261        break;
262      default:
263        $(".uiImg").css("visibility", "hidden");
264        $(document).data("interface", false);
265        clearInterfaceTimer();
266        break;
267    }
268  }
269}
270
271function switchTabs(show)
272{
273  if(show!='')
274  {
275    showtabs=show;
276  }
277  else
278  {
279    if(showtabs!='n')
280    {
281      showtabs='n';
282    }
283    else
284    {
285      showtabs='y';
286    }
287  }
288
289  if(options.tabsAnimated)
290  {
291    if(showtabs=='y')
292    {
293      $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay);
294    }
295    else
296    {
297      $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
298      $('#theTabs li').removeClass("ui-tabs-selected");
299      $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay);
300    }
301  }
302  else
303  {
304    if(showtabs=='y')
305    {
306      $("#theTabsContainer").css({height:options.tabsVisible+"px"});
307    }
308    else
309    {
310      $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
311      $('#theTabs li').removeClass("ui-tabs-selected");
312      $("#theTabsContainer").css({height:options.tabsHidden+"px"});
313    }
314  }
315}
316
317function clearInterfaceTimer()
318{
319  if(interfaceTimerDelay!=null)
320  {
321    window.clearInterval(interfaceTimerDelay);
322    interfaceTimerDelay=null;
323  }
324}
325
326function resetInterfaceTimer()
327{
328  clearInterfaceTimer();
329  if(options.interfaceTimerDelay>0) interfaceTimerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
330}
331
332
Note: See TracBrowser for help on using the repository browser.