sass/scripts/navigatorComponents.js
/**
 * updatePosition is used in an EventListener (ie, a scroll event 
 * or a resize event) to fish up the current position of the 
 * x and y coordinants of the targeted element
 */
updatePosition is used in an EventListener  to fish up the current position of the
x and y coordinants of the targeted element
updatePosition is used in an EventListener to fish up the current position of the x and y coordinants of the targeted element
function updatePosition() {
  var positionOfAbout = getPosition(document.querySelector("#about"));
  var positionOfProjects = getPosition(document.querySelector("#projects"));
  var positionOfSkills = getPosition(document.querySelector("#skills"));
  var positionOfContact = getPosition(document.querySelector("#contact"));
  var scrollNavLink = document.getElementsByClassName("scrollnav-link");
  if (positionOfAbout.y <= 20 && positionOfProjects.y > 10) {
    for (i = 0; i < scrollNavLink.length; i++) {
      scrollNavLink[i].className = scrollNavLink[i].className.replace(" scrollnav-link--active", "");
    } 
    scrollNavLink[0].className += " scrollnav-link--active";
  } else if (positionOfProjects.y <= 20 && positionOfSkills.y > 10) {
    for (i = 0; i < scrollNavLink.length; i++) {
      scrollNavLink[i].className = scrollNavLink[i].className.replace(" scrollnav-link--active", "");
    }
    scrollNavLink[1].className += " scrollnav-link--active";      
  } else if (positionOfSkills.y <= 20 && positionOfContact.y > 10) {
    for (i = 0; i < scrollNavLink.length; i++) {
      scrollNavLink[i].className = scrollNavLink[i].className.replace(" scrollnav-link--active", "");
    }
    scrollNavLink[2].className += " scrollnav-link--active";      
  } else {
    if (positionOfContact.y <= 20) {
      for (i = 0; i < scrollNavLink.length; i++) {
        scrollNavLink[i].className = scrollNavLink[i].className.replace(" scrollnav-link--active", "");
      }       
      scrollNavLink[3].className += " scrollnav-link--active";                
    } else {
      for (i = 0; i < scrollNavLink.length; i++) {
        scrollNavLink[i].className = scrollNavLink[i].className.replace(" scrollnav-link--active", "");
      }               
    }   
  }       
}
function updatePosition ( ) { var positionOfAbout = getPosition ( document . querySelector ( "#about" ) ) ; var positionOfProjects = getPosition ( document . querySelector ( "#projects" ) ) ; var positionOfSkills = getPosition ( document . querySelector ( "#skills" ) ) ; var positionOfContact = getPosition ( document . querySelector ( "#contact" ) ) ; var scrollNavLink = document . getElementsByClassName ( "scrollnav-link" ) ; if ( positionOfAbout . y <= 20 && positionOfProjects . y > 10 ) { for ( i = 0 ; i < scrollNavLink . length ; i ++ ) { scrollNavLink [ i ] . className = scrollNavLink [ i ] . className . replace ( " scrollnav-link--active" , "" ) ; } scrollNavLink [ 0 ] . className += " scrollnav-link--active" ; } else if ( positionOfProjects . y <= 20 && positionOfSkills . y > 10 ) { for ( i = 0 ; i < scrollNavLink . length ; i ++ ) { scrollNavLink [ i ] . className = scrollNavLink [ i ] . className . replace ( " scrollnav-link--active" , "" ) ; } scrollNavLink [ 1 ] . className += " scrollnav-link--active" ; } else if ( positionOfSkills . y <= 20 && positionOfContact . y > 10 ) { for ( i = 0 ; i < scrollNavLink . length ; i ++ ) { scrollNavLink [ i ] . className = scrollNavLink [ i ] . className . replace ( " scrollnav-link--active" , "" ) ; } scrollNavLink [ 2 ] . className += " scrollnav-link--active" ; } else { if ( positionOfContact . y <= 20 ) { for ( i = 0 ; i < scrollNavLink . length ; i ++ ) { scrollNavLink [ i ] . className = scrollNavLink [ i ] . className . replace ( " scrollnav-link--active" , "" ) ; } scrollNavLink [ 3 ] . className += " scrollnav-link--active" ; } else { for ( i = 0 ; i < scrollNavLink . length ; i ++ ) { scrollNavLink [ i ] . className = scrollNavLink [ i ] . className . replace ( " scrollnav-link--active" , "" ) ; } } } }
updatePosition is used in an EventListener (ie, a scroll event
 or a resize event) to fish up the current position of the
 x and y coordinants of the targeted element
updatePosition is used in an EventListener ( ie a scroll event or a resize event ) to fish up the current position of the x and y coordinants of the targeted element
/**
   * With the help of the resize and scroll EventListener, getPosition
   * will fish up the most up-to-the-second position of the x and y 
   * coordinants of the targeted element 
   */ /**
   * The targeted CSS classes that will be updated 
   */ //var topNavLink = document.getElementsByClassName("topnav-link"); /**
   * positionOfAbout.y fish out the position of where "about" id is
   *
   * positionOfSkills.y fish out the position of where "skills" id is
   *
   * checking the position way ahead of the zero markers (ie, 
   * positionOfAbout.y <= 20 and positionOfSkills > 10) allows for 
   * the needed offset to enable the EventListener to instantly update
   * the css class "scrollnav-link--active" and thus instantly rendering 
   * the scrollspy links (ie, About, Projects, Skills and Contact)
   *
   * this if statement checks to see if the current view is in the "about"
   * section
   */ ////console.log("in the about section"); //for (i = 0; i < topNavLink.length; i++) { //  topNavLink[i].className = topNavLink[i].className.replace(" topnav-link--active", ""); //}        //topNavLink[0].className += " topnav-link--active"; /**
     * this for loop loops through the class name "scrollnav-link" and replace 
     * any class name "scrollnav-link--active" with an empty string --  in other words,
     * this loop reset all the links in scrollspy components 
     */ /**
     * since the current view is in the about section, add the active class
     * scrollnav-link--active so css can render it active
     */ /**
     * this if statement check if the current view is in the "projects" section
     */ ////console.log("in the skills section"); //for (i = 0; i < topNavLink.length; i++) { //  topNavLink[i].className = topNavLink[i].className.replace(" topnav-link--active", ""); //}        //topNavLink[1].className += " topnav-link--active"; /**
     * reset the scrollspy's link class
     */ /**
     * add the active class to the current section
     */ ////console.log("in the skills section"); //for (i = 0; i < topNavLink.length; i++) { //  topNavLink[i].className = topNavLink[i].className.replace(" topnav-link--active", ""); //}        //topNavLink[1].className += " topnav-link--active"; /**
     * reset the scrollspy's link class
     */ /**
     * add the active class to the current section
     */ /**
     * if statement to check if the current view is in the "contact" section
     */ ////console.log("in the contact"); //for (i = 0; i < topNavLink.length; i++) { //  topNavLink[i].className = topNavLink[i].className.replace(" topnav-link--active", ""); //}        //topNavLink[2].className += " topnav-link--active"; ////console.log("it's in neither one of the section"); //for (i = 0; i < topNavLink.length; i++) { //  topNavLink[i].className = topNavLink[i].className.replace(" topnav-link--active", ""); //} /**
       * reset the scrollspy's link class
       */