ComunicWeb/assets/js/components/menuBar/authenticated.js

/**
 * Menubar for authenticated users complements
 * 
 * @author Pierre HUBERT
 */

ComunicWeb.components.menuBar.authenticated = {
	/**
	 * Add authenticated user specific elements
	 * 
	 * @param {HTMLElement} container The container element of the Menubar
	 */
	addElements: function(container){
		//Create an auto-collapsed element
		var navbarCollapse = createElem("div", container);
		navbarCollapse.id = "navbar-collapse";
		navbarCollapse.className = "navbar-collapse pull-left collapse";

		//Create navbar elements list
		var navbarCollapseElemList = createElem("ul", navbarCollapse);
		navbarCollapseElemList.className = "nav navbar-nav";

		//Add search form
		this.addSearchForm(navbarCollapseElemList);

		//Navbar right elements
		var navbarRight = createElem("div", container);
		navbarRight.className = "navbar-custom-menu";
		var navbarRightElemList = createElem("ul", navbarRight);
		navbarRightElemList.className = "nav navbar-nav";

		//Add user name
		this.addUserName(navbarRightElemList);

		//Alternate latest posts button
		this.addAlternateLatestPostsButton(navbarRightElemList);

		//Add friends list button
		this.addFriendListButton(navbarRightElemList);

		//Add notifications dropdown
		ComunicWeb.components.notifications.dropdown.display(navbarRightElemList);

		//Add dropdown menu
		this.addDropdown(navbarRightElemList);
		
	},

	/**
	 * Add dropdown menu
	 * 
	 * @param {HTMLElement} navbarElem The target navbarlist element 
	 * @return {HTMLElement} The dropdown content element
	 */
	addDropdown: function(navbarElem){
		//Create dropdown menu
		var dropdown = createElem("li", navbarElem);
		dropdown.className = "dropdown dropdown-user-menu-action";

		//Add dropdown button
		var dropdownButton = createElem("a", dropdown);
		dropdownButton.className = "dropdown-toggle";
		dropdownButton.setAttribute("data-toggle", "dropdown");
		
		//Add dropdown button icon
		var dropdownButtonIcon = createElem("i", dropdownButton);
		dropdownButtonIcon.className = "fa fa-gear";

		//Add space
		dropdownButton.innerHTML += " ";

		//Add dropdown button arrow
		var dropdownButtonArrow = createElem("span", dropdownButton);
		dropdownButtonArrow.className = "caret";

		//Create dropdown menu content
		var dropdownContent = createElem("ul", dropdown);
		dropdownContent.className = "dropdown-menu"
		dropdownContent.setAttribute("role", "menu");


		//Add conversations link
		var conversationsButton = createElem2({
			appendTo: dropdownContent,
			type: "li"
		});
		var conversationsLink = createElem2({
			appendTo: conversationsButton,
			type: "a",
			innerLang: "menu_bar_action_conversations"
		});
		conversationsButton.onclick = function(){
			openPage("conversations");
		};

		//Add groups link
		var groupsButton = createElem2({
			appendTo: dropdownContent,
			type: "li"
		});
		createElem2({
			appendTo: groupsButton,
			type: "a",
			innerLang: "menu_bar_action_groups"
		});
		groupsButton.onclick = function(){
			openPage("groups");
		}

		//Add settings link
		var settingsButton = createElem2({
			appendTo: dropdownContent,
			type: "li"
		});
		var settingsLink = createElem2({
			appendTo: settingsButton,
			type: "a",
			innerLang: "menu_bar_action_settings"
		});
		settingsButton.onclick = function(){
			openPage("settings");
		};

		//Add dark theme button
		this.addDarkThemeButton(dropdownContent);

		//Add logout link
		var logoutButton = createElem("li", dropdownContent);
		var logoutButtonLink = createElem("a", logoutButton);
		logoutButtonLink.innerHTML = lang("_menu_bar_action_logout");
		logoutButton.onclick = function(){openPage("logout")};

		//Return dropdown content element
		return dropdownContent;
	},

	/**
	 * Add DarkTheme for the button
	 * 
	 * @param {HTMLElement} target The target for the button
	 */
	addDarkThemeButton: function(target){

		var darkThemeButton = createElem2({
			appendTo: target,
			type: "li"
		});

		var darkThemeLink = createElem2({
			appendTo: darkThemeButton,
			type: "a",
		});
		
		var darkThemeIcon = createElem2({
			appendTo: darkThemeLink,
			type: "span"
		});

		createElem2({
			appendTo: darkThemeLink,
			type: "span",
			innerHTML: "Dark Theme"
		});
		
		/**
		 * Refresh icon states accordingly to
		 * dark theme status
		 */
		var RefreshIcon = function(){
			darkThemeIcon.className =  "fa " + (ComunicWeb.components.darkTheme.isEnabled() ? "fa-moon-o" : "fa-sun-o");
		}
		RefreshIcon();

		darkThemeLink.addEventListener("click", function(){
			ComunicWeb.components.darkTheme.setEnabled(!ComunicWeb.components.darkTheme.isEnabled());
			RefreshIcon();
		});
	},

	/**
	 * Add alternate latest posts button 
	 * (if the screen is too small to display "Comunic")
	 * 
	 * @param {HTMLElement} target The target for the button
	 */
	addAlternateLatestPostsButton: function(target){
		//Create button
		var button = createElem2({
			type: "li", 
			appendTo: target,
			class: "alternate-latest-posts-button"
		});

		//Create link
		var link = createElem("a", button);
		createElem2({
			type: "i",
			appendTo: link,
			class: "fa fa-history"
		});

		//Makes link lives
		link.addEventListener("click", function(){
			openPage("latest");
		});
	},

	/**
	 * Add friendsList toggle button
	 * 
	 * @param {HTMLElement} navbarElem The target navbarlist element 
	 * @return {HTMLElement} The button element
	 */
	addFriendListButton: function(navbarElem){
		//Create button
		var friendButton = createElem("li", navbarElem);
		friendButton.className = "friendToggleButton";

		//Create link
		var friendButtonLink = createElem("a", friendButton);
		var friendIcon = createElem("i", friendButtonLink);
		friendIcon.className = "fa fa-users";

		//Makes link live
		friendButtonLink.onclick = function(){
			ComunicWeb.components.friends.bar.toggleShowHide();
		};

		return friendButtonLink;
	},

	/**
	 * Add user name element
	 * 
	 * @param {HTMLElement} navbarElem The target navbarlist element 
	 * @return {HTMLElement} The user element
	 */
	addUserName: function(navbarElem){
		//Create user element
		var userelement = createElem("li", navbarElem);
		userelement.className = "user-menu";

		//Add user link element
		var userlinkelement = createElem("a", userelement);

		//Add user image
		var userimage = createElem("img", userlinkelement);
		userimage.className = "user-image";
		userimage.src = ComunicWeb.__config.assetsURL + "img/defaultAvatar.png";

		//Add user name
		var userNameElem = createElem("span", userlinkelement);
		userNameElem.className = "hidden-xs";
		userNameElem.innerHTML = lang("_loading");

		//Make a request to get informations about the user
		ComunicWeb.user.userInfos.getUserInfos("current", (function(userInfos){

			//Change user name
			userNameElem.innerHTML = userInfos.firstName + " "+ userInfos.lastName;

			//Change avatar url
			userimage.src = userInfos.accountImage;

			userlinkelement.onclick = function(){
				openUserPage(userInfos);
			}

		}), true);
	},

	/**
	 * Add search form element
	 * 
	 * @param {HTMLElement} navbarElem The target navbarlist element 
	 * @return {HTMLElement} The user element
	 */
	addSearchForm: function(navbarElem){

		//Create form element (large screens)
		var searchForm = createElem("li", navbarElem);
		searchForm.className = "dropdown navbar-form navbar-left messages-menu hidden-xs";
		searchForm.setAttribute("role", "search");

		//Create form group
		var formGroup = createElem("div", searchForm);
		formGroup.className = "form-group";

		//Create search input
		var searchInput = createElem("input", formGroup);
		searchInput.className = "form-control";
		searchInput.placeholder = lang("_menu_bar_search_placeholder");
		searchInput.type = "text";
		searchInput.id = "navbar-search-input";

		//Create dropdown container
		var dropdownContainer = createElem("ul", searchForm);
		dropdownContainer.className = "dropdown-menu";

		//Initializate menu
		ComunicWeb.components.search.form.init(searchInput, dropdownContainer);

		//Create search link (small screen)
		var searchLinkLi = createElem2({
			appendTo: navbarElem,
			type: "li",
			class: "navbar-left visible-xs"
		});

		var searchLink = createElem2({
			appendTo: searchLinkLi,
			type: "a",
			innerHTML: "Search"
		});

		searchLink.addEventListener("click", function(){
			openPage("search");
			$(navbarElem.parentNode).collapse("toggle");
		});
		
	}
};