To allow for themes to add specific CSS to the page body (like increasing padding on the top for position: absolute; elements), it would be nice to have a class (such as navbar-tray-closed) added to the body when the navbar tray is closed. Currently, I can only make the necessary theme padding adjustments when the tray is open.

Comments

jessebeach’s picture

Status: Active » Closed (works as designed)

If you need to know when the height of the navbar changes, you can key your JavaScript off an event rather than the presence of a class. Here's some stub code.

jQuery(document).bind('offsettopchange', function (e) {
  var offset = jQuery('[data-offset-top]').data('offset-top');
  // Do something with the top offset....
});

I'm tentatively closing this issue...

andregriffin’s picture

Status: Closed (works as designed) » Active

It's more so about letting the theme know a navbar exists at all. The current 7.x toolbar module adds a toolbar class when a user is logged in and can view the toolbar. This allows for themes to make the necessary CSS adjustments for other elements that may have position: fixed; top: 0; CSS. I think a CSS class on the body tag would be a simpler way to support this, rather than requiring the theme to always check if the navbar exists with JavaScript.

Though if I'm missing a more obvious solution, please let me know. I'm just trying to do things the way the 7.x core toolbar module allowed me to.

RKS’s picture

Status: Active » Closed (fixed)

If you update your module you will see a new class="navbar-tray-open" added to body. It also updates the padding on the body for open and closed status.

RKS’s picture

Status: Closed (fixed) » Active

Sorry, I misread your question. I thought you were asking for a class notification for open instead of closed. I've reopened in that case.

RKS’s picture

I do see what you mean. What I didn't notice I was doing is leaving the core toolbar installed and it has a setting to offset the top padding. Since it hides behind this navbar, I never could see it, but was still getting the benefit of the top offset when the navbar-tray was closed. Of course, no one wants two toolbars sitting on top of one another, so that functionality should be introduced into this module so it can be a *true* replacement for the core toolbar.

I've spent a lot of time on this module today trying to figure out other bugs, so I will keep this in mind and if I figure it out I will report back.

jessebeach’s picture

Status: Active » Closed (fixed)

[edit] I updated the example function. The previous one was old :)

This allows for themes to make the necessary CSS adjustments for other elements that may have position: fixed; top: 0; CSS. I think a CSS class on the body tag would be a simpler way to support this, rather than requiring the theme to always check if the navbar exists with JavaScript.

The navbar cannot be guaranteed to have a fixed height. Text sizes change and other modules can add content to it and change it's dimensions potentially.

I really encourage you to use the following function (or something like it) to determine the size of the navbar.

$(document)
  .on('drupalViewportOffsetChange', function (event, offsets) {
    /* Do stuff */
  });

Simply knowing that the navbar is on the page will not let you know its dimensions with certainty.

That warning given, I've added a navbar-administration class to the body tag in 7.x-1.x. I suggest you don't use it :)

andregriffin’s picture

Wonderful. Thanks for the explanation and fixes.