Template:ETH Zurich/templateJS

var expContainers; var menu; var menuGenerated = false; var yOffset = 50; var maxTop; var menuHeaders; var menuHeaderTargetNames = []; var menuHeaderTargets; var jPM; var hasMenu = false; var noSidemenu; var stickyTop; var windowLastHeight = 0; var windowLastWidth = 0;

/* Used to make expContainers bigger when clicking on their buttons */ function expand(obj) {

   var objParent = obj.parentNode;
   if (objParent.className == "info open-info") {
       objParent.className = "info";
   } else {
       objParent.className = "info open-info";
   }
   maxTop = $('#footerContainer').offset().top - menu.offsetHeight - yOffset;

}

$(function() {

   var viewPortTag=document.createElement('meta');
   viewPortTag.id="viewport";
   viewPortTag.name = "viewport";
   viewPortTag.content = "width=device-width, initial-scale=1,maximum-scale=1.0";
 /*  document.getElementsByTagName('head')[0].appendChild(viewPortTag);*/
   
   expContainers = $('.expContainer');
   menu = document.getElementById('sidemenu');
   midStyle = document.getElementById('sidemenuMid');
   botStyle = document.getElementById('sidemenuBot');
   noSidemenu = document.getElementById('noMenu');
   midStyle.disabled = true;
   botStyle.disabled = true;
   jPM = $.jPanelMenu({
       menu: '#mobileMenu',
       trigger: '#menuButtonLink',
       direction: 'right',
       clone: 'false',
       openPosition: '80%'
   });
   
   if (!(menuGenerated)) {
       console.log('generate menu');
       var items = expContainers.find("h1,h2,h3,h4");
       var menuCount = 0;
       var menuText = "";
       var itemtext = "";

       var cur = 0,next=0,count=0;
       var removeLinks = new RegExp( '</?a ?[^>]*>', 'g' );
       for (var i=0; i<items.length; i++) {
           itemtext = items[i].innerHTML.replace(removeLinks,);
           if (items[i].id == "") {
               itemId = (items[i].textContent || items[i].innerText).replace(/\W/g,'_');
               if (document.getElementById(itemId) == null) {
                   items[i].id=itemId;
               } else {
                   items[i].id=itemId+"a";
               }
           } else {
               itemId = items[i].id;
           }
           var headingNum = parseInt(items[i].tagName.substring(1,2));
           if ((headingNum <= 2) || (items[i].className == "inMenu")) {
               menuCount += 1;
               next = headingNum;
               if (next > cur) {

menuText += "

"; count = count + 1; } if (next < cur) { menuText += "

";

                   count = count - 1;
               }
               cur = next;

menuText += "

" + "<a class=\"\" href=\"#" + itemId + "\">" + itemtext + "</a>

";

           }
       }
       while (count--) {
           menuText += "</ul>";
       }
       if (menuCount > 1 && menuText != "") {
           menu.innerHTML = "<a href=\"#\" style=\"float:right\">top</a>" + menuText;
           hasMenu = true;
           menuHeaders = $(menu).find('li a[href^="#"]');
           for (var i=0;i<menuHeaders.length;i++) {
               menuHeaderTargetNames.push(menuHeaders[i].getAttribute('href'));
           }
           menuHeaderTargets = expContainers.find(menuHeaderTargetNames.join(','));
           menuHeaderTargets[0].className = "current";
           noSidemenu.disabled = true;
       } else {

/* document.getElementById('sidemenuContainer').style.display = "none";

           expContainers.css('width','92%');*/
       }
       menuGenerated = true;
   }
   if (window.outerWidth > 480) {
   } else {
   }

   /* Add magnifying box to Wiki-style images (those in an imgBox tag) */

/* var items = expContainers.find('.imgBox');

   for (var i=0;i<items.length;i++) {
       var curLink = items[i].getElementsByTagName('a')[0];

$("

<a href=\"" + curLink.href + "\"><img src=\"\"></a>

").insertAfter($(curLink));

   }*/

}); $(window).load(function() { /* var expanders = expContainers.find('.info a.expander');

   expanders.parent().removeAttr('style');
   for (var i=0;i<expanders.length;i++) {
       expand(expanders[i]);
   }*/
   window.addEventListener('resize',adjustWidth);
   adjustWidth();
   windowLastHeight = $(window).height();
   windowLastWidth = $(window).width();

});

function adjustWidth() {

   var newHeight = $(window).height();
   var newWidth = $(window).width();
   if (newHeight != windowLastHeight || newWidth != windowLastWidth) {
   windowLastHeight = newHeight;
   windowLastWidth = newWidth;
   stickyTop = $('#sidemenuContainer').offset().top;
   console.log('adjusting width');
   if (window.outerWidth > 480) {
       console.log('desktop mode');
       if (hasMenu) {
           setSidemenuMidWidth();
           maxTop = $('#footerContainer').offset().top - menu.offsetHeight - yOffset;
           window.addEventListener('scroll',setSidemenuState);
           setSidemenuState();
       }
       jPM.off();
   } else {
       console.log('mobile mode');
       jPM.on();
       $('.hideMenu li.sub').unbind('mouseenter mouseleave');
       $('.hideMenu li.sub').on('touchend',function(event) {
           event.preventDefault();
           $(event.target).find('ul').toggle();
       }).on('touchend','ul',function(event) {
           event.stopPropagation();
       });
   }

} }

function setSidemenuMidWidth() {

   console.log('set sidemenu width');
   var sidemenuContainerWidth = document.getElementById('sidemenuContainer').offsetWidth;
   sidemenu.style.width = (sidemenuContainerWidth*0.77).toString() + "px";
   sidemenu.style.padding = (sidemenuContainerWidth*0.11).toString() + "px";

}

function setSidemenuState() { /* var stickyTop = menu.getBoundingClientRect().top;*/

   var windowTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

/* var windowTop = $(this).scrollTop();*/

   if (stickyTop >= windowTop + yOffset) {
       midStyle.disabled = true;
       botStyle.disabled = true;
   } else {
       if (windowTop <= maxTop) {
           midStyle.disabled = false;
           botStyle.disabled = true;
       } else {
           midStyle.disabled = true;
           botStyle.disabled = false;
       }
   }
   menuHeaders.removeClass("current");
   for (var i=0;i<menuHeaders.length-1;i++) {
       if (menuHeaderTargets[0].offsetTop > windowTop) {
           menuHeaders[0].className = "current";
           break;
       }
       if (menuHeaderTargets[i].offsetTop <= windowTop && menuHeaderTargets[i+1].offsetTop > windowTop) {
           menuHeaders[i].className = "current";
           break;
       }
   }
   if (i == menuHeaders.length-1) {
       menuHeaders[menuHeaders.length-1].className = "current";
   }

}