Canvas Scrolling Side Menu

Canvas-Sidebar-Lesson-Menu.js

 //////////////////////////
        // waypoint Sidebar menu//
        //////////////////////////
        //waypoint: http://imakewebthings.com/waypoints/
        //CSS Styles: .sidebar-menu /.sidebar-menu .card-body /.sidebar-show
        /*
            Roadmap:
            1) Grab all the concept blocks and waypoint div elements
            2) Create waypoints for each waypoint found in the dom
            3) If user scrolling down then show sidebar
            4) If user scrolling up then hide sidebar
            5) Users current waypoint position is highlighted in the sidebar
            6) If user clicks on the "close course menu" hamburger, then hide the sidebar
        */

        //Look for a data-waypoint which signals that there is a sidebar on this page
        $('[data-waypoint]').ready(function () {
            // Grab all the divs with a concept class, which will have the headers needed for the sidebar
            var conceptEls = document.querySelectorAll('.concept');
            //Grab all the waypoint divs
            var waypoints = document.querySelectorAll('[data-waypoint]');
            var sidebar = document.querySelector('.sidebar-menu .card-body');
            sidebar.innerHTML = "";
            
            //For each concept block, grab the inner text which is a title and then append that to the sidebar
            conceptEls.forEach((concept)=>{
                var newLi = document.createElement('li');
                newLi.appendChild(document.createTextNode(concept.innerText));
                sidebar.appendChild(newLi);
            })

            // Create the waypoints
            if (waypoints) {    
                waypoints.forEach(function (waypoint) {
                    //Grabs the data-wpnum so I can style the sidebar li that correlates with the user's current scroll
                    var wpNumber = Number(waypoint.dataset.wpnum);
                    new Waypoint({
                        element: document.querySelector(`[data-waypoint="${waypoint.dataset.waypoint}"]`),
                        handler: function (direction) { //direction is a built in property of waypoint "up" "down"
                            //If first waypoint and user scrolling down, show the sidebar
                            if(wpNumber === 0 && direction === "down"){ 
                                document.querySelector('.sidebar-menu').classList.add('sidebar-show');
                            //else if user scrolling up past first waypoint then hide the sidebar
                            }else if(wpNumber === 0 && direction === "up"){
                                document.querySelector('.sidebar-menu').classList.remove('sidebar-show');
                            }
                            
                            // Set the styling of the LI elements in the sidebar
                            var cNodes = sidebar.childNodes;
                            cNodes.forEach((node)=>{
                                if(node.nodeName !== "#text"){
                                    node.style.cssText = "color:#373d3f; font-weight:normal;";
                                }
                            })

                            // Highlights the LI in the sidebar where the user is current scrolled to
                            if(direction === "down"){
                                var cHeading = sidebar.querySelector(`:nth-child(${wpNumber+1})`);
                                cHeading.style.cssText = "color:#0786a0; font-weight:bold;";
                            }else if(wpNumber !== 0){
                                var cHeading = sidebar.querySelector(`:nth-child(${wpNumber})`);
                                cHeading.style.cssText = "color:#0786a0; font-weight:bold;";
                            }                         
                        }
                    })
                })
            }

            // 'shown.bs.tab' listens for the user to click on the bootstrap tab.  Then waypoint is refreshed in order to fix the vertical scroll heights of activation based on the new content.
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                Waypoint.refreshAll();
            })

            //Hide sidebar if user closes course menu
            //There's a course menu on the left side.  If the user hides that menu, then the sidebar menu will run into the content.  Therfore if that course menu is hidden, then the sidebar also needs to be hidden.
            $('#courseMenuToggle').on('click', (e)=>{
                const bodyElement = document.querySelector('body');
                const sidebarElement = document.querySelector('.sidebar-menu');
                
                if(bodyElement.classList.contains('course-menu-expanded')){
                    sidebarElement.style.display = 'none';
                }else{
                    sidebarElement.style.display = '';
                }
            })

        })
        //end waypoint