Highlighting default view in Telescope app

Question

When you set the default view in admin settings, and you have multiple views checked to be available for user to switch, the default view doesn't get highlighted as "active".

To achieve this, in previous versions of Telescope (before RefactorScope) I modified the file client/components/menu/menu_component.js adding this (I had TOP as my default view, so I shamefully hardcoded it):

if (currentPath === "/" && getRoute(this) === "/top") {
  itemClass += " item-active"
}

I understand, that editing Telescope source files was not wise thing to do, but it was the quickest and simplest solution. Now, after the big Telescope refactor, I would like to do it the right way.

But the ultimate question is, what ist the right way to do this?

Answer 1

After some digging in Telescope source, I came to this solution:

Create a file named i.e. custom_view_menu.js in your custom package with this content:

getRoute = function (item) {
  // if route is a Function return its result, else apply Router.path() to it
  return typeof item.route == "function" ? item.route() : Router.path(item.route);
}

Template.menuItem.helpers({
  itemClass: function () {
    var itemClass = "";
    var currentPath = Router.current().location.get().path;

    if (this.adminOnly) {
      itemClass += " item-admin";
    }
    if (getRoute(this) === currentPath || getRoute(this) === Meteor.absoluteUrl() + currentPath.substr(1)) {
      // substr(1) is to avoid having two "/" in the URL
      itemClass += " item-active";
    }
    if (this.label === Settings.get("defaultView") && currentPath === "/") {
      itemClass += " item-active";
    }
    if (this.itemClass) {
      itemClass += " "+this.itemClass;
    }

    return itemClass;
  }
});

It's essentials copied from original source (https://github.com/TelescopeJS/Telescope/blob/master/packages/telescope-core/lib/client/templates/menu/menu_component.js) with this snipped added:

if (this.label === Settings.get("defaultView") && currentPath === "/") {
  itemClass += " item-active";
}

I hope that it will help someone and I wasn't the only one trying to do this :)