Based on URL how to set Global navigation nodes (CSOM) node as active - javascript

Question

I want to use the same navigation everywhere (mysite, teamsites ..) So I'm fetching the (managed navigation) global navigation by csom in the masterpage. The global navigation is only going to show one level.

The problem is that when I'm in a subsubsite the navigation do not set any of the rootnode as active. So I can not use css to style the element. I need to set the right "node" as active programatically, where ever you are down the structure

-root
  -sitecoll (internalinfo)
  -subsite (organisation)
  -sitecoll (social)

What I want is to set the active node, below you can see some example of some urls.

http://dev.site.com/InternalInfo/.../../../SitePages/home.aspx (set InternalInfo as active)
http://dev.site.com/InternalInfo/Organization/SitePages/home.aspx (set organization as active)
http://dev.site.com/Social/../../../../SitePages/home.aspx (set social as active)

As you can see

What's the best way to do this, javascript? What's the best way to check "sub pathname"? ex: http:/site.com/sub1/sub2/ ..

Could I do something like this?

var currentLocation = window.location;
var pathArray = window.location.pathname.split( '/' );

if(pathArray[2] == "Organisazion")
  setAsActive("Orgainzation");

if(pathArray[1] == "InternalInfo")
  setAsActive("InternalInfo");

If you got a better way please give an example.

Answer 1

I build something similar.

I just checked if the current url contains the path of my navigation element. In your case the URLs would cause that multiple links are marked as active. But with a ordered set of URLs you can avoid this.

// URLs ordered by length to ensure correct results
var orderesNodes = [];
orderesNodes[0] = "http://dev.site.com/InternalInfo/Organization/";
orderesNodes[1] = "http://dev.site.com/InternalInfo/";
orderesNodes[2] = "http://dev.site.com/Social/";

$.each(orderesNodes, function(index, current){
     if(CheckIfContains(current)){
        //mark as active
        return false; //dont process the rest
     }
});

function CheckIfContains(href) {
    if (window.location.href.indexOf(href) > -1) {
        return true;
    }
    return false;
}

Access Browser Storage

    SetValue: function (key, value) {
        /// <summary>
        /// Saves data in the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value. Previous value under that key will be overwritten.</param>
        /// <param name="value">Value paired with the key.</param>
        //JSON is used to save container in the storage, which is by default string only
        localStorage.setItem(key, JSON.stringify(value));
    },
    GetValue: function (key) {
        /// <summary>
        /// Gets data from the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value.</param>
        /// <returns>Value or null if there is no value at the key</returns>
        //JSON is used to save container in the storage, which is by default string only
        return JSON.parse(localStorage.getItem(key));
    },
    DeleteValue: function (key) {
        /// <summary>
        /// Deletes data from the browsers localstorage
        /// </summary>
        /// <param name="key">Key paired with the value.</param>
        localStorage.removeItem(key);
    }