The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Choose what links to display in the toolbar menu

View previous topic View next topic Go down

Choose what links to display in the toolbar menu

Post by Ange Tuteur on September 4th 2015, 11:48 am

Choose what links to display in the toolbar menu


This tutorial will teach you how to add new links or move / remove existing links in the toolbar menu.



1. Installing the JavaScript


Firstly you need to install a bit of JavaScript so you can modify the contents of the toolbar menu. Go to Administration Panel > Modules > JavaScript codes management and create a new JavaScript with the following settings.

Title : Toolbar Menu Manager
Placement : In all the pages
Code:
$(function() {
  var submenus = {
   
    See_my_profile : ['/u' + _userdata.user_id, 0],
    Edit_profile : ['/profile?mode=editprofile&page_profil=preferences', 0],
    'Separator 1' : ['|', 0],
   
    All_Topics : ['/sta/' + _userdata.username, 0],
    All_Messages : ['/spa/' + _userdata.username, 0],
    js_topics_followed : ['/search?search_id=watchsearch', 0],
    All_PMs : ['/privmsg?folder=inbox', 0],
    'Separator 2' : ['|', 0],
   
    'Reports' : ['/report', 2],
    'Archived Reports' : ['/report?mode=archive', 2],
    'Separator 3' : ['|', 2],
   
    Admin_panel : ['/admin', 1],
    Logout : ['/login?logout=1', 0]

  },
  i, j, li, menu;
 
  $(function() {
    menu = document.getElementById('fa_menulist');
    if (menu) {
      for (li = menu.getElementsByTagName('LI'), i = 0, j = li.length; i < j; i++) li[i].style.display = 'none'; // hide old menu links
      for (i in submenus) {
        li = document.createElement('LI');
       
        // check and correct incorrect data types
        if (submenus[i].constructor != Array) submenus[i] = [];
        if (submenus[i][0] == undefined) submenus[i][0] = '|';
        if (submenus[i][1] == undefined) submenus[i][1] = 0;
       
        // assign element attributes based on the string value
        submenus[i][0] == '|' ? li.className = 'fa_separator' : li.innerHTML = '<a href="' + submenus[i][0] + '" ' + (submenus[i][2] ? 'target="_blank"' : '') + '>' + (_lang[i] ? _lang[i] : i) + '</a>';
       
        // append the new item to the menu based on permissions
        if (_userdata.user_level == 1 || _userdata.user_level >= submenus[i][1] && submenus[i][1] != 1) menu.appendChild(li);
      }
    }
  });
});

You can save the script now ( it will add two new links for moderators ), or you can read the next section to find out how you can modify the links displayed in the menu. Smile


2. Modifying the toolbar menu links


To modify the links displayed in the toolbar menu, you will need to edit the submenus object. It's located at the top of the script and looks like this :
Code:
  var submenus = {
   
    See_my_profile : ['/u' + _userdata.user_id, 0],
    Edit_profile : ['/profile?mode=editprofile&page_profil=preferences', 0],
    'Separator 1' : ['|', 0],
   
    All_Topics : ['/sta/' + _userdata.username, 0],
    All_Messages : ['/spa/' + _userdata.username, 0],
    js_topics_followed : ['/search?search_id=watchsearch', 0],
    All_PMs : ['/privmsg?folder=inbox', 0],
    'Separator 2' : ['|', 0],
   
    'Reports' : ['/report', 2],
    'Archived Reports' : ['/report?mode=archive', 2],
    'Separator 3' : ['|', 2],
   
    Admin_panel : ['/admin', 1],
    Logout : ['/login?logout=1', 0]

  },

The default menu links contain underscores and aren't surrounded by quotes. You can move these around as you wish, or delete them and start fresh.


Creating a custom link


Now then, to create your own link you simply need to define a name that will be on the left of the colon, and then create an array on the right of the colon using brackets. ( [] ) Let's start simply and create an empty link named HTML Page :
Code:
'HTML Page' : []
Note : if the link you're creating is not the last in the object list, it's imperative that you place a comma at the end of the array. ( [], ) Otherwise, you can omit the comma if it's the last item in the object.

Inside the array you can place three values : [URL, PERMISSION_LEVEL, TARGET]

URL : This should be the URL that you want the link to take you to. Since in the example we're doing an HTML page, I'm going to put '/h1-my-html-page'. Note that your URL should be surrounded by quotes.

PERMISSION_LEVEL : This is the permission level that the link will be available to. It should be a number ranging from 0-2. Choose the level that is best suited for the link :

0 : Visible to anyone
1 : Visible to administrators only
2 : Visible to only moderators and admins

For my example I'm going to choose 0 so the HTML page link is visible to anyone.

TARGET : This is an optional third value. When set to true clicking the link will open it in a new window / tab. It would look like this for example : ['/h1-my-html-page', 0, true]


Now with all my values filled in, the completed link will look like this :
Code:
'HTML Page' : ['/h1-my-html-page', 0]
Tip : to make it easy for yourself, you can copy the above example and make any changes you want.

Then when I save the script it should display wherever I placed it in the submenus object.


Creating a separator


If you have multiple links and you want to create a separator it's quite simple ! Since you read the last section you should already know how to create new links, or "items." Follow the same routine, but give it a simple name such as "separator 1." The only difference is that you're going to put a bar ( | ) as the URL.

Code:
'separator 1' : ['|', 0]

The script will recognize this and the item will be placed in the menu as a separator instead of a link. The same permission rules apply to separators, so make sure you choose the correct permission level to avoid showing multiple separators side by side.

Furthermore, you cannot have multiple separators named "separator 1," the name is unique, so you must increment the number or change the name for each new separator.


Summary


With this script you will be able to change the links displayed in the menu as you see fit. You can also change the URLs and permissions of existing links, or create your own personalized list for your members.. the possibilities are endless, so get customizing ! Mr. Green


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum