From a5066ad8a5e294105d10fe7366da8ed6a5a2f2bb Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 21 Feb 2018 16:37:02 +0100 Subject: [PATCH] Display the number of unread conversations --- .../js/components/notifications/dropdown.js | 92 ++++++++++++++++++- assets/js/components/notifications/service.js | 18 +++- 2 files changed, 108 insertions(+), 2 deletions(-) diff --git a/assets/js/components/notifications/dropdown.js b/assets/js/components/notifications/dropdown.js index 99b929cd..fb93db16 100644 --- a/assets/js/components/notifications/dropdown.js +++ b/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: '' + }); + 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; + }, } \ No newline at end of file diff --git a/assets/js/components/notifications/service.js b/assets/js/components/notifications/service.js index 8d1a2223..cdb57653 100644 --- a/assets/js/components/notifications/service.js +++ b/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"; + + } });