Updated navbar

This commit is contained in:
Pierre HUBERT 2019-05-11 16:19:13 +02:00
parent 409349f114
commit b436c1aabd
5 changed files with 79 additions and 47 deletions

View File

@ -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();

View File

@ -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)

View File

@ -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: "<span class='logo-mini'>C</span><span class='logo-lg'>Comunic</span>"
});
// 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";

View File

@ -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);
}
},

View File

@ -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);