Difference between revisions of "Template:Toronto/js/scripts"

Revision as of 21:09, 27 October 2017

// Set and unset the active class function setActive(elem) {

 var sideNav = document.getElementsByClassName('sidebar-minibox');
 // console.log(sideNav);
 var ul = sideNav[0].getElementsByTagName('ul');
 console.log(ul);
 var li = ul[0].getElementsByTagName('li');

 for (i=0; i<li.length; i++) {
   li[i].classList.remove('active');
 }

 elem.classList.add('active');

}

// Build the list items of the sideNav function build(item, id) {

 var li = document.createElement('li');
 var anchor = document.createElement('a');
 var text = document.createTextNode(item.innerText);

 anchor.appendChild(text)
 anchor.setAttribute('href', '#'+id);
 li.appendChild(anchor);
 li.setAttribute('onclick', 'setActive(this)');

 return li;

}

function scrollWatch(scrollHeights, sectionContent) {

 var header = document.getElementsByClassName('header')[0];
 var sideNav = document.getElementsByClassName('sidebar-minibox')[0];
 var content = document.getElementsByClassName('content-page')[0];
 var footer = document.getElementsByClassName('footer')[0];
 var sideNavItems = sideNav.getElementsByTagName('li');

 window.addEventListener('scroll', function() {
   var mainNavScrollHeight = header.scrollHeight;
   var windowPageYOffset = window.pageYOffset;
   var windowInnerHeight = window.innerHeight;
   var documentBodyHeight = document.body.offsetHeight;
   // var footerScrollHeight = footer.scrollHeight;
   var footerScrollHeight = 0;
   var contentScroll = windowPageYOffset + mainNavScrollHeight;
   var bottom = documentBodyHeight - windowInnerHeight;

   // console.log(contentScroll);

   var currentView = scrollHeights.filter(function(arr) {
     // return arr < contentScroll;
     return arr < windowPageYOffset;
   });
   var currentViewLength = currentView.length;

   // Make sure that the seek class is removed from the top element of the
   // sideNav when the top of the page is scrolled to
   if (contentScroll > windowPageYOffset) {
     sideNavItems[0].classList.remove('active');
   }

   // Add the active class to the list button in sideNav when the corresponding
   // section is in view. Remove this class when it is not.
   if (currentViewLength > 0) {
     var index = currentViewLength - 1;
     for (i=0; i<scrollHeights.length; i++) {
       sideNavItems[i].classList.remove('active');
     }
     sideNavItems[index].classList.add('active');
   } else {

   // Fix the sideNav to the top of the page when the mainNav is scrolled past
   // Unfix otherwise
   if (windowPageYOffset > mainNavScrollHeight) {
     sideNav.classList.add('sideNavfixed');
     content.classList.add('contentScroll');
   } else {
     sideNav.classList.remove('sideNavfixed');
     content.classList.remove('contentScroll');
   }
 });

}

function buildNav() {

 var sections = document.getElementsByClassName('subsection');
 var numberOfSections = sections.length;
 var sideNav = document.getElementsByClassName('sidebar-minibox')[0];
 var titleList = [];
 var idList = [];
 var scrollHeights = [];
 // console.log(sideNav.getElementsByTagName('ul')[0]);

 // Make a list of titles and scroll heights
 for (i=0; i<numberOfSections; i++) {
   titleList.push(sections[i].getElementsByTagName('h2')[0]);
   idList.push(sections[i].id);
   scrollHeights.push(sections[i].offsetTop - 300);
 }
 console.log(scrollHeights);

 // Build the sideNav lists
 for (sec=0; sec<numberOfSections; sec++) {
   listItem = build(titleList[sec], idList[sec])
   sideNav.getElementsByTagName('ul')[0].appendChild(listItem);
 }

 scrollWatch(scrollHeights, sections);

}

sidebarFixed();

buildNav();