https://www.mwlnhscharity.org/themes/default/assets/js/mobile-navigation.js

1if (window.NodeList && !NodeList.prototype.forEach) {
2    NodeList.prototype.forEach = Array.prototype.forEach;
3  }
4  
5$(document).ready(function () {   
6
7
8    var ccore_nav_mobile_setting_APPEND_TO = "body"; // change to any DOM element - default: body
9    var ccore_nav_mobile_ccore_menu_button = ".burger-menu" // Change to selector of the burger icon / menu button
10
11
12    // call the function
13    ccore_nav_mobile_init();
14
15    function ccore_nav_mobile_init()
16    {
17        var ccore_burger = $(ccore_nav_mobile_ccore_menu_button);
18
19        if( !ccore_burger.length ) return;
20
21     
22        ccore_nav_build_container();
23        ccore_nav_build_clear_container();
24
25        ccore_burger.on("click",function(){
26            if($(this).hasClass("open")){
27                ccore_nav_build_clear_container(); 
28                $(ccore_nav_mobile_ccore_menu_button).removeClass("open");
29            }else{
30                ccore_nav_load('NULL');
31                $(ccore_nav_mobile_ccore_menu_button).addClass("open");
32            }
33           
34        });
35
36        $("body").on("click","#ccore-nav-mobile-navigation-container ul li button",function(event){
37            event.preventDefault();
38            ccore_nav_load(parseInt($(this).attr("data-id")));
39        });
40
41        $("body").on("click","#ccore-nav-mobile-navigation-container > a.go_back",function(event)
42        {
43            event.preventDefault();
44
45            if( $(this).attr("data-id") == "NaN" )
46            {
47                ccore_nav_build_clear_container();
48                return;
49            }
50
51            ccore_nav_load(parseInt($(this).attr("data-id")));
52        });
53        
54    }
55
56    // clear the container
57    function ccore_nav_build_clear_container()
58    {
59        $("#ccore-nav-mobile-navigation-container").html("").removeClass("open");
60        $(ccore_nav_mobile_ccore_menu_button).focus();
61    }
62
63    // build the mobile navigation bar container
64    function ccore_nav_build_container()
65    {
66        let content = "<div id='ccore-nav-mobile-navigation-container' class='mobile-only'></div>";
67        $(ccore_nav_mobile_setting_APPEND_TO).append(content);
68    }
69
70    // load the next level
71    function ccore_nav_load(parent)
72    {
73        $.ajax({
74            url: "/cc_api/navigations/public/subpages/primary/"+parent,
75            context: document.body
76        }).done(function(data) {
77
78            console.log(data);
79                        
80            let theData = JSON.parse(data);
81            
82            let output = "<a href='#' class='go_back'></a>";
83
84            output += "<ul>";
85            
86            theData.forEach(function(elem){
87                let base_url = window.location.origin;
88
89                output += "<li><a href='"+base_url+'/'+elem.url+"'>"+elem.title+"</a>";
90                if( elem.has_children==true )
91                {
92                    output += '<button data-id="'+parseInt(elem.id)+'"><svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path  style="fill: white;" d="M3.4 81.7c-7.9 15.8-1.5 35 14.3 42.9L280.5 256 17.7 387.4C1.9 395.3-4.5 414.5 3.4 430.3s27.1 22.2 42.9 14.3l320-160c10.8-5.4 17.7-16.5 17.7-28.6s-6.8-23.2-17.7-28.6l-320-160c-15.8-7.9-35-1.5-42.9 14.3z"/></svg></button>';
93                }                
94                output += "</li>";
95            });
96
97            output += "</ul>";
98            $("#ccore-nav-mobile-navigation-container").html(output).addClass("open");
99
100            $("#ccore-nav-mobile-navigation-container").find(':focusable').eq(0).focus();
101
102            $.ajax({
103                url: "/cc_api/navigations/public/onelevelup/"+parent,
104                context: document.body
105            }).done(function(data) {
106                if( data )
107                {
108                    let theData = JSON.parse(data);
109                    if( theData['id'] )
110                    {
111                        $("#ccore-nav-mobile-navigation-container a.go_back").attr("data-id",parseInt(theData['id']));
112                    } else {
113                        $("#ccore-nav-mobile-navigation-container a.go_back").attr("data-id","NULL");    
114                    }
115                } else {
116                    $("#ccore-nav-mobile-navigation-container a.go_back").attr("data-id","NaN");
117                }
118            });
119
120        });
121    }
122
123});