Comunic/ComunicWeb
1
0
Fork 0
mirror of https://github.com/pierre42100/ComunicWeb synced 2024-12-24 18:08:50 +00:00
Code Issues Projects Releases Wiki Activity

Splited main menu links list and rendering.

Browse Source
This commit is contained in:
Pierre HUBERT 2019-01-11 11:38:55 +01:00
parent fba7937d02
commit dc7fd44b67
4 changed files with 90 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/common/utils.js
View File

@ -40,6 +40,7 @@ function createElem(nodeType, appendTo){
* @info {String} placeholder The placeholder of the new element
* @info {String} innerHTML Specify the html content of the newly created element
* @info {String} innerLang Specify the key of the lang to use to fill the element
* @info {String} innerHTMLprefix Specify prefix to add at the begining of the content of the element
* @info {boolean} disabled Set whether the field should be disabled or not (input only)
* @return {HTMLElement} The newly created element
*/
@ -105,6 +106,9 @@ function createElem2(infos){
if(infos.innerLang)
newElem.innerHTML = lang(infos.innerLang);
if(infos.innerHTMLprefix)
newElem.innerHTML = infos.innerHTMLprefix + newElem.innerHTML;
//Set field state
if(infos.disabled)

166
assets/js/components/menuBar/authenticated.js
View File

@ -5,6 +5,46 @@
*/
ComunicWeb.components.menuBar.authenticated = {
/**
* Dropdown menu links list
*/
dropdownMenuLinksList: [
//Conversations
{
innerLang: "menu_bar_action_conversations",
targetPage: "conversations"
},
//Groups list
{
innerLang: "menu_bar_action_groups",
targetPage: "groups",
},
//Dark theme
{
innerLang: "menu_bar_action_dark_theme",
onclick: function(b){ComunicWeb.components.menuBar.authenticated.darkThemeButtonClicked(true, b)},
oninit: function(b){ComunicWeb.components.menuBar.authenticated.darkThemeButtonClicked(false, b)},
icon: "fa-sun-o"
},
//Settings list
{
innerLang: "menu_bar_action_settings",
targetPage: "settings"
},
//Logout link
{
innerLang: "_menu_bar_action_logout",
targetPage: "logout"
}
],
/**
* Add authenticated user specific elements
*
@ -79,102 +119,64 @@ ComunicWeb.components.menuBar.authenticated = {
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");
};
//Process links list
this.dropdownMenuLinksList.forEach(function(entry){
//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");
}
var linkButton = createElem2({
appendTo: dropdownContent,
type: "li"
});
//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");
};
var link = createElem2({
appendTo: linkButton,
type: "a",
innerLang: entry.innerLang,
innerHTML: entry.innerHTML,
innerHTMLprefix: entry.icon ? "<i class='fa " + entry.icon + "'></i> " : undefined,
});
//Add dark theme button
this.addDarkThemeButton(dropdownContent);
if(entry.targetPage){
linkButton.onclick = function(){
openPage(entry.targetPage);
};
}
//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")};
if(entry.onclick){
linkButton.addEventListener("click", function(){
entry.onclick(link);
});
}
if(entry.oninit){
entry.oninit(link);
}
});
//Return dropdown content element
return dropdownContent;
},
/**
* Add DarkTheme for the button
* Called this method each time the dark theme button
* is clicked
*
* @param {HTMLElement} target The target for the button
* @param {Boolean} invert Specify whether dark theme mode should
* be inverted or not
* @param {HTMLElement} button Button element that has been
* clicked
*/
addDarkThemeButton: function(target){
darkThemeButtonClicked: function(invert, button){
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(){
if(invert)
ComunicWeb.components.darkTheme.setEnabled(!ComunicWeb.components.darkTheme.isEnabled());
RefreshIcon();
});
//Update icon
button.getElementsByTagName("i")[0].className =
"fa " + (ComunicWeb.components.darkTheme.isEnabled() ? "fa-moon-o" : "fa-sun-o");
},
/**

1
assets/js/langs/en.inc.js
View File

@ -53,6 +53,7 @@ ComunicWeb.common.langs.en = {
_menu_bar_search_placeholder: "Search...",
menu_bar_action_conversations: "Conversations",
menu_bar_action_groups: "Groups",
menu_bar_action_dark_theme: "Dark theme",
menu_bar_action_settings: "Settings",
_menu_bar_action_logout: "Logout",

1
assets/js/langs/fr.inc.js
View File

@ -54,6 +54,7 @@ ComunicWeb.common.langs.fr = {
_menu_bar_search_placeholder: "Recherche...",
menu_bar_action_conversations: "Conversations",
menu_bar_action_groups: "Groupes",
menu_bar_action_dark_theme: "Th&egrave;me sombre",
menu_bar_action_settings: "Param&egrave;tres",
_menu_bar_action_logout: "Déconnexion",