Display the number of unread conversations

assets/js/components/notifications/dropdown.js

@@ -16,8 +16,11 @@ ComunicWeb.components.notifications.dropdown = {
 		//Display the number of notifications
 		var notifs_number_elem = this.display_notifications_dropdown(target);
 
+		//Display the number of unread conversations
+		var conversations_number_elem = this.display_conversations_dropdown(target);
+
 		//Initialize service
-		ComunicWeb.components.notifications.service.init(notifs_number_elem, true);
+		ComunicWeb.components.notifications.service.init(notifs_number_elem, true, conversations_number_elem);
 	},
 
 	/**
@@ -190,4 +193,91 @@ ComunicWeb.components.notifications.dropdown = {
 
 	},
 
+	/**
+	 * Display unread conversations dropdown
+	 * 
+	 * @param {HTMLElement} target The target of the conversations dropdown
+	 * @return {HTMLElement} The HTML element that contains the number of unread conversations
+	 */
+	display_conversations_dropdown: function(target){
+
+		//Create the button
+		var dropdown = createElem2({
+			appendTo: target,
+			type: "li",
+			class: "dropdown messages-menu"
+		});
+
+		//Add dropdown toggle
+		var dropdownToggle = createElem2({
+			appendTo: dropdown,
+			type: "a",
+			class: "dropdown-toggle",
+			href: "#",
+			innerHTML: '<i class="fa fa-comments-o"></i>'
+		});
+		dropdownToggle.setAttribute("data-toggle", "dropdown");
+
+		//Add conversations number
+		var conversationsNumber = createElem2({
+			appendTo: dropdownToggle,
+			type: "span",
+			class: "label label-danger",
+			innerHTML: "0"
+		});
+
+		//Add dropdown menu
+		var dropdownMenu = createElem2({
+			appendTo: dropdown,
+			type: "ul",
+			class: "dropdown-menu"
+		});
+
+		//Add dropdown header
+		var dropdownHeader = createElem2({
+			appendTo: dropdownMenu,
+			type: "li",
+			class: "header",
+			innerHTML: "Unread conversations"
+		});
+
+		//Add conversations list
+		var conversationsListContener = createElem2({
+			appendTo: dropdownMenu,
+			type: "li"
+		});
+		var conversationsList = createElem2({
+			appendTo: conversationsListContener,
+			type: "ul",
+			class: "menu"
+		});
+
+		//Add dropdown bottom
+		var dropdownBottom = createElem2({
+			appendTo: dropdownMenu,
+			type: "li",
+			class: "footer"
+		});
+
+		//Add a button to offer the user to delete all his conversations
+		var openConversations = createElem2({
+			appendTo: dropdownBottom,
+			type: "a",
+			href: "#",
+			innerHTML: " "
+		});
+
+		//Enable slimscroll
+		$(conversationsList).slimScroll({
+			height: '100%'
+		});
+
+		//Refresh the unread conversations list if the user click the dropdown button
+		dropdownToggle.onclick = function(){
+			ComunicWeb.components.conversations.dropdown.refresh_list_conversations(conversationsList);
+		}
+		
+		//Return the number of conversations target
+		return conversationsNumber;
+	},
 }

assets/js/components/notifications/service.js

@@ -13,8 +13,10 @@ ComunicWeb.components.notifications.service = {
 	 * the number of unread notifications
 	 * @param {Bool} auto_hide Automatically hide the notifications 
 	 * number if there is not any new notification
+	 * @param {HTMLElement} target_conversations Optionnal, defins the target
+	 * for the number of conversations
 	 */
-	init: function(target, auto_hide){
+	init: function(target, auto_hide, target_conversations){
 
 		//Initialize interval
 		var interval = setInterval(function(){
@@ -38,6 +40,20 @@ ComunicWeb.components.notifications.service = {
 					target.style.display = "none";
 				else
 					target.style.display = "block";
+				
+				//Update the number of conversations if possible too
+				if(target_conversations){
+
+					//Update the target
+					target_conversations.innerHTML = response.conversations;
+
+					//If the number of notifications equals 0, hide the target if required
+					if(response.notifications == 0 && auto_hide)
+					target_conversations.style.display = "none";
+					else
+					target_conversations.style.display = "block";
+
+				}
 
 			});