change custom admin page topnav button on/active state

[Marc]

I have added a custom settings page to my admin using the ready.php method described here. The page I added under admin has the ProcessPageEdit process and its ID get swapped with another page in ready.php. This works fine but when I click on the new button, it does not get the 'active' state, unlike the standard admin buttons like 'pages', 'settings', etc, which get a CSS class making them white (depending on default theme settings) so you can see where you are in the topnav menu. I would like this for my custom button as well, but how? Is there perhaps an API call to do this in ready.php?

Here's my ready.php:

if ($page->template == "admin" && $page->name == "settings-appearance")
{
    $input->get->id = $pages->get("/settings-appearance/")->id;
}

Screenshot:

[BitPoet]

The only way I could see this working would be by adding a custom piece of javascript (using AdminCustomFiles) that adds the CSS class "on" for your entry, as PW's built-in logic tries to match the id of /admin/appearance/ in the link against the id of the current page (that of /settings-appearance/). You'd have to check the URL for your settings page in that custom code, something like (untested):

$(document).ready(function() {
  // Page id of /admin/settings/
  var pageid = 28;
  var regex = new RegExp("^http://[^/]+/admin/appearance/");
  if(regex.text(window.location.href)) {
    $("#topnav-page-" + pageid).addClass("on");
  }
});

If you have PW in a subdirectory, you'll have to insert the path in the RegExp pattern and adapt it if you move your installation.

In the long run, using AdminCustomPages might be a better approach. Create your settings-appearance page just as before, and create a /admin/appearance/ page with a custom admin template that displays the current settings and outputs an edit link for settings-appearance with the CSS class pw-modal. Also output a short JS snippet that listens for the pw-modal-closed event on that link and calls window.location.reload when triggered, to make sure you're not displaying stale settings. This way, the navbar highlighting will work without hassles.

[tpr]

Is there a unique class on the body element that you could use to style the element? Eg. "ProcessPageEdit-id-1005" or similar?

[Marc]

13 hours ago, tpr said:

Is there a unique class on the body element that you could use to style the element? Eg. "ProcessPageEdit-id-1005" or similar?

Indeed there is  In fact, the button I want to style has almost the same class, so I suppose I could use javascript as mentioned by @BitPoet and match the body class with the element in the topnav and act accordingly. Good suggestion! So here's what I came up with, a working example:

ready.php

if ($page->template == "admin" && $page->name == "settings-appearance")
{
    $input->get->id = $pages->get("/settings-appearance/")->id;
    $config->scripts->append($config->urls->templates."scripts/admin.topnav.js"); // Give nav button active state.
}

admin.topnav.js

$(function() {
    /* Make the topnav navigation button active that points to the current page that
    was added to the topnav manually.
    Search for a class on the body element that starts with 'id-' and add the 'on' class
    to the button if the button has a similar class. */
    var bodyClasses = $('body').attr('class');
    var pageClass = bodyClasses.split(" ").filter(getPageClass);

    function getPageClass(value) {
        return value.indexOf("id-") === 0;
    }

    // The navigation button in the topnav element should have a class name like 'page-id-1058-'.
    var btnClass = '.page-' + pageClass + '-';
    $('#topnav').find(btnClass).attr('class', 'on');
});

The javascript should work for any page you add to the top navigation bar since it matches page ID's from the body element's class attribute to the page ID in the navigation button's class attribute. So you don't have to set any page ID's manually in the javascript.

Note that this only applies to the default admin theme. On Reno theme it is not necessary.