From b436c1aabd6e076e4e3b6bb671e85de458d741e5 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Sat, 11 May 2019 16:19:13 +0200 Subject: [PATCH] Updated navbar --- assets/js/common/page.js | 2 +- assets/js/common/utils.js | 8 ++++ assets/js/components/menuBar/authenticated.js | 29 +++++++++++- assets/js/components/menuBar/common.js | 47 ++----------------- .../js/components/menuBar/notAuthenticated.js | 40 +++++++++++++++- 5 files changed, 79 insertions(+), 47 deletions(-) diff --git a/assets/js/common/page.js b/assets/js/common/page.js index e6de2715..c0b5bd52 100644 --- a/assets/js/common/page.js +++ b/assets/js/common/page.js @@ -247,7 +247,7 @@ ComunicWeb.common.page = { //Set body class - document.body.className="hold-transition fixed skin-blue layout-top-nav"; + document.body.className="hold-transition fixed skin-blue " + (signed_in() ? "" : "layout-top-nav"); //We load the menubar ComunicWeb.components.menuBar.common.display(); diff --git a/assets/js/common/utils.js b/assets/js/common/utils.js index 8620c2e8..83329abe 100644 --- a/assets/js/common/utils.js +++ b/assets/js/common/utils.js @@ -34,6 +34,7 @@ function createElem(nodeType, appendTo){ * @info {String} title The title of the new element * @info {String} src The src attribute of the new element * @info {String} href href attribute for the src element + * @info {String} internalHref Link to application page * @info {string} name The name of the new element * @info {String} elemType The type attribute of the new element * @info {String} value The value of the new element @@ -83,6 +84,13 @@ function createElem2(infos){ newElem.src = infos.src; if(infos.href) newElem.href = infos.href; + + if(infos.internalHref){ + newElem.addEventListener("click", function(e){ + e.preventDefault(); + openPage(infos.internalHref); + }); + } //Specify the name of the new element if(infos.name) diff --git a/assets/js/components/menuBar/authenticated.js b/assets/js/components/menuBar/authenticated.js index 4639bc7a..54ca6bc6 100644 --- a/assets/js/components/menuBar/authenticated.js +++ b/assets/js/components/menuBar/authenticated.js @@ -55,8 +55,33 @@ ComunicWeb.components.menuBar.authenticated = { * @param {HTMLElement} container The container element of the Menubar */ addElements: function(container){ + + // Site logo + createElem2({ + appendTo: container, + type: "a", + class: "logo", + internalHref: "#", + innerHTML: "CComunic" + }); + + // Navbar + var navBar = createElem2({ + appendTo: container, + type: "nav", + class: "navbar navbar-static-top" + }); + + // Sidebar toggle + createElem2({ + appendTo: navBar, + type: "a", + class: "sidebar-toggle", + href: "#", + }).setAttribute("data-toggle", "offcanvas"); + //Create an auto-collapsed element - var navbarCollapse = createElem("div", container); + var navbarCollapse = createElem("div", navBar); navbarCollapse.id = "navbar-collapse"; navbarCollapse.className = "navbar-collapse pull-left collapse"; @@ -68,7 +93,7 @@ ComunicWeb.components.menuBar.authenticated = { this.addSearchForm(navbarCollapseElemList); //Navbar right elements - var navbarRight = createElem("div", container); + var navbarRight = createElem("div", navBar); navbarRight.className = "navbar-custom-menu"; var navbarRightElemList = createElem("ul", navbarRight); navbarRightElemList.className = "nav navbar-nav"; diff --git a/assets/js/components/menuBar/common.js b/assets/js/components/menuBar/common.js index d7ffb238..7e7cf67f 100644 --- a/assets/js/components/menuBar/common.js +++ b/assets/js/components/menuBar/common.js @@ -38,6 +38,7 @@ ComunicWeb.components.menuBar.common = { var menuBar = createElem("header"); byId("wrapper").insertBefore(menuBar, byId("wrapper").childNodes[0]); menuBar.id = "menuBar"; + menuBar.className = "main-header"; //Initializate the menubar return this.init(menuBar); @@ -52,45 +53,7 @@ ComunicWeb.components.menuBar.common = { init: function(menuContainer){ //Log action ComunicWeb.debug.logMessage("Info: Initializate a menuBar in element : '"+menuContainer.id+"'"); - - //Change menu container informations - menuContainer.className = "main-header"; - - //Create main menu - var menuElem = createElem("div", menuContainer); - menuElem.className = "navbar navbar-static-top"; - - //Create nav element - var navElem = createElem("nav", menuElem); - navElem.className = "navbar navbar-static-top"; - - //Create conatiner - var containerElem = createElem("div", navElem); - containerElem.className = "container"; - - //Create navbar header - var navbarHeader = createElem("div", containerElem); - navbarHeader.className = "navbar-header"; - - //Create site name link - var siteNameElem = createElem("a", navbarHeader); - siteNameElem.className = "navbar-brand"; - siteNameElem.innerText = "Comunic"; - siteNameElem.onclick = (function(){ - ComunicWeb.common.page.openPage("home"); - }); - - //Create navbar collapsed button - var navbarCollapsedButton = createElem("button", navbarHeader); - navbarCollapsedButton.type = "button"; - navbarCollapsedButton.className = "navbar-toggle collapsed"; - navbarCollapsedButton.setAttribute("data-toggle", "collapse"); - navbarCollapsedButton.setAttribute("data-target", "#navbar-collapse"); - - //Create navbar icon - var navbarCollapsIcon = createElem("i", navbarCollapsedButton); - navbarCollapsIcon.className = "fa fa-bars"; - + //Save login information in menubar before continuing menuContainer.setAttribute("forActiveUser", signed_in()); @@ -98,11 +61,11 @@ ComunicWeb.components.menuBar.common = { //Call specific menu if(signed_in()){ //Call authenticated menubar - ComunicWeb.components.menuBar.authenticated.addElements(containerElem); + ComunicWeb.components.menuBar.authenticated.addElements(menuContainer); } - else{ + else { //Call not-logged-in menubar - ComunicWeb.components.menuBar.notAuthenticated.addElements(containerElem); + ComunicWeb.components.menuBar.notAuthenticated.addElements(menuContainer); } }, diff --git a/assets/js/components/menuBar/notAuthenticated.js b/assets/js/components/menuBar/notAuthenticated.js index 456cb1d9..1c6dc8bd 100644 --- a/assets/js/components/menuBar/notAuthenticated.js +++ b/assets/js/components/menuBar/notAuthenticated.js @@ -8,9 +8,45 @@ ComunicWeb.components.menuBar.notAuthenticated = { /** * Add not-authenticated user specific elements * - * @param {HTMLElement} container The container element of the Menubar + * @param {HTMLElement} menuHeader The container element of the Menubar */ - addElements: function(container){ + addElements: function(menuHeader){ + + //Create main menu + var menuElem = createElem("div", menuHeader); + menuElem.className = "navbar navbar-static-top"; + + //Create nav element + var navElem = createElem("nav", menuElem); + navElem.className = "navbar navbar-static-top"; + + //Create conatiner + var container = createElem("div", navElem); + container.className = "container"; + + //Create navbar header + var navbarHeader = createElem("div", container); + navbarHeader.className = "navbar-header"; + + //Create site name link + var siteNameElem = createElem("a", navbarHeader); + siteNameElem.className = "navbar-brand"; + siteNameElem.innerText = "Comunic"; + siteNameElem.onclick = (function(){ + ComunicWeb.common.page.openPage("home"); + }); + + //Create navbar collapsed button + var navbarCollapsedButton = createElem("button", navbarHeader); + navbarCollapsedButton.type = "button"; + navbarCollapsedButton.className = "navbar-toggle collapsed"; + navbarCollapsedButton.setAttribute("data-toggle", "collapse"); + navbarCollapsedButton.setAttribute("data-target", "#navbar-collapse"); + + //Create navbar icon + var navbarCollapsIcon = createElem("i", navbarCollapsedButton); + navbarCollapsIcon.className = "fa fa-bars"; + //Create an auto-collapsed element var navbarCollapse = createElem("div", container);