Change navbar activation menu

Activated menu is done with ul opening and li color Activation used to be triggered on menu item click. It is now triggered on page load thank to a specific span syntax.

Change navbar activation menu
Activated menu is done with ul opening and li color Activation used to be triggered on menu item click. It is now triggered on page load thank to a specific span syntax.
Anais Amato · hitier
1 parent a30b11ff
Showing 9 changed files with 41 additions and 37 deletions Show diff stats
app/main/templates/agent.html
app/main/templates/agents.html
app/main/templates/capacities.html
app/main/templates/charge.html
app/main/templates/periods.html
app/main/templates/project.html
app/main/templates/projects.html
app/main/templates/services.html
app/static/js/navbar.js
@@ -5,6 +5,10 @@
 {% endblock %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">agent,agents</span>
+
 <div id="projects_chart" class="charge_chart"></div>
 <table id="charge_table">
   <thead>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">agent,agents</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">agent,capacities</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">cds,charge/add</span>
+
   <form class="form-horizontal" id="new_affectation" action="#" method="post">
 <input name="utf8" type="hidden" value="✓">
 <input type="hidden" name="authenticity_token" value="NPVU9shCwiRt07EXMAroxTdsP61Et00VQjkBiit3MWeqQt3Eez9UdGK68RzZ6npLCFyg0gL+M1MR6VjK9WOCYw==">
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">admin,periods</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
@@ -5,6 +5,9 @@
 {% endblock %}
 {% block content %}
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">projet,projects</span>
+
 <div class="charge_chart" id="project_services_chart"></div>
 <hr/>
 <div class="charge_chart" id="project_capacities_chart"></div>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">projet,projects</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">service,services</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
-// Script used with the navbar to color the menu items and leave them visible
+/* Read the <span> with information about ul and li to active */
+const navbar_active = $("#nav_actived").html();
+const navbar_active_split = navbar_active.split(',');
+const ul_active = navbar_active_split[0];
+const a_active = navbar_active_split[1];
-// Check if an element of the navbar is stored in the local storage or not
-var collapseItem_ul = localStorage.getItem('collapseItem_ul');
-var collapseItem_a = localStorage.getItem('collapseItem_a');
-
-//
-var sublink_activate = $("a[href='" + collapseItem_a + "']");
-sublink_activate.addClass("sublink_activate");
-
-$("#" + collapseItem_ul).addClass("show");
-
-
-//store the id of the collapsible element
-$('.main-nav').click(function () {
-    localStorage.setItem('collapseItem_ul', $(this).next().attr("id"));
-});
-$('.sub_link').click(function (e) {
-    localStorage.setItem('collapseItem_a', $(this).attr("href"));
-})
-
-
-// a click to the connection bar or 'accueil' button desactivate the localstorage
-$('.link_connect').click(function() {
-    $("#" + collapseItem_ul).removeClass("show");
-    $("#" + collapseItem_ul).addClass("hide");
-    sublink_activate.removeClass("sublink_activate");
-    localStorage.removeItem('collapseItem_ul');
-    localStorage.removeItem('collapseItem_a');
-
-});
-$("#accueil").click(function (){
-    $("#" + collapseItem_ul).removeClass("show");
-    $("#" + collapseItem_ul).addClass("hide");
-    sublink_activate.removeClass("sublink_activate");
-    localStorage.removeItem('collapseItem_ul');
-    localStorage.removeItem('collapseItem_a');
-});
+/* Open the ul */
+$("#" + ul_active).addClass("show");
+/* Active the li */
+var sublink_activate = $("a[href='/" + a_active + "']");
+sublink_activate.addClass("sublink_activate");
 \ No newline at end of file