// Used to scroll our tabbed view, display our download popup, and display the giant dialog. // Scroll: Setup Scrolling Stuff // exemple : source html /*
1
2
ScrollArrow('left'); -> suivant ScrollArrow('right'); -> précédent ScrollSection('files-pane',); ---> aller au prochain désigné //pour l'appeler initSliderPage("books-pane","-tab","-pane","sites-pane","scroller","toolbar","20","horizontal"); */ var currentSection; //onglet par defaut var tabTag //prefixe de l'onget qui change var paneTag //prefixe des pages var scrollanim = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null}; //css pour les onglet pour voir qui est actif ou pas var cssOngletActif='active'; var cssOngletInactif='inactive'; var directionSlide; //direction vertical ou horizontal var offset; //nom de la div qui commence var scrollArea; //id de la zone scrollé .... var toolbar //id du div qui contient les onglets ... function initSliderPage(ongletDefaut,prefixOnglet,prefixPage,offsetId,scrollId,zoneOnglet,duree,direction,cssActif,cssInactif){ tabTag = prefixOnglet; paneTag = prefixPage; scrollanim.duration = duree; directionSlide=direction; offset=offsetId; scrollArea=scrollId; toolbar=zoneOnglet; if(cssActif && cssActif!='') cssOngletActif=cssActif; if(cssInactif && cssInactif!='') cssOngletInactif=cssInactif; ScrollSection(ongletDefaut); } // Scroll the page manually to the position of element "link", passed to us. function ScrollSection(link){ // Store the last section, and update the current section if (currentSection == link) return; lastSection = currentSection; if(lastSection) id_precedent=lastSection.substring(5,6); currentSection = link; // Change the section highlight. // Extract the root section name, and use that to change the background image to 'top', revealing the alt. state sectionTab = currentSection.split("-")[0] + tabTag; id_suivant=sectionTab.substring(5,6); if(document.getElementById(sectionTab)) document.getElementById(sectionTab).className = "onglet"+id_suivant+" actif"+id_suivant; //alert("onglet"+id_suivant+" actif"+id_suivant); if (lastSection) { lastTab = lastSection.split("-")[0] + tabTag; if(document.getElementById(lastTab)) document.getElementById(lastTab).className = "onglet"+id_precedent; //alert("onglet"+id_suivant); } // Get the element we want to scroll, get the position of the element to scroll to theScroll = document.getElementById(scrollArea); position = findElementPos(document.getElementById(link)); // Get the position of the offset div -- the div at the far left. // This is the amount we compensate for when scrolling if(directionSlide=="horizontal"){ if (offset != "") { offsetPos = findElementPos(document.getElementById(offset)); position[0] = position[0] - offsetPos[0]; } scrollStart(theScroll, theScroll.scrollLeft, position[0], "horiz"); }else{ if (offset != "") { offsetPos = findElementPos(document.getElementById(offset)); position[0] = position[1] - offsetPos[1]; } scrollStart(theScroll, theScroll.scrollTop, position[0], "vert"); } // return false; } // Scroll the page using the arrows function ScrollArrow(direction) { toolbarElem = document.getElementById(toolbar); toolbarNames = new Array(); // Find all the
  • elements in the toolbar, and extract their id's into an array. if (toolbarElem.hasChildNodes()) { var children = toolbarElem.childNodes; for (var i = 0; i < children.length; i++) { if (toolbarElem.childNodes[i].tagName == "LI") { toolbarNames.push(toolbarElem.childNodes[i].id.split("-")[0]); } } } // Now iterate through our array of tab names, find matches, and determine where to go. for (var i = 0; i < toolbarNames.length; i++) { if (toolbarNames[i] == currentSection.split("-")[0]) { if (direction == "left") { if (i - 1 < 0) { gotoTab = toolbarNames[toolbarNames.length - 1]; } else { gotoTab = toolbarNames[i - 1]; } } else { if ((i + 1) > (toolbarNames.length - 1)) { gotoTab = toolbarNames[0]; } else { gotoTab = toolbarNames[i + 1]; } } } } // Go to the section name! ScrollSection(gotoTab+paneTag); document.location.href='#etapeSuivante='+gotoTab+paneTag; if(histoRef) histoRef('etapeSuivante',gotoTab+paneTag) } // // Animated Scroll Functions // Scrolls are synchronous -- only one at a time. // function scrollStart(elem, start, end, direction){ //console.log("scrollStart from "+start+" to "+end+" in direction "+direction); if (scrollanim.timer != null) { clearInterval(scrollanim.timer); scrollanim.timer = null; } scrollanim.time = 0; scrollanim.begin = start; scrollanim.change = end - start; //scrollanim.duration = 20; scrollanim.element = elem; if (direction == "horiz") { scrollanim.timer = setInterval("scrollHorizAnim();", 15); } else { scrollanim.timer = setInterval("scrollVertAnim();", 15); } } // pour scroller verticalment function scrollVertAnim(){ if (scrollanim.time > scrollanim.duration) { clearInterval(scrollanim.timer); scrollanim.timer = null; } else { move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration); scrollanim.element.scrollTop = move; scrollanim.time++; } } // pour scroller horizontalement function scrollHorizAnim() { if (scrollanim.time > scrollanim.duration) { clearInterval(scrollanim.timer); scrollanim.timer = null; } else { move = sineInOut(scrollanim.time, scrollanim.begin, scrollanim.change, scrollanim.duration); scrollanim.element.scrollLeft = move; scrollanim.time++; } } // Find the Y position of an element on a page // Return Y and X as an array function findElementPos(elemFind) { var elemX = 0; var elemY = 0; do { elemX += elemFind.offsetLeft; elemY += elemFind.offsetTop; } while ( elemFind = elemFind.offsetParent ) return Array(elemX, elemY); } // Utility: Math functions for animation calucations - From http://www.robertpenner.com/easing/ // // t = time, b = begin, c = change, d = duration // time = current frame, begin is fixed, change is basically finish - begin, duration is fixed (frames), function sineInOut(t, b, c, d){ return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }