Issues

Please note the indicated page is now running a modified version of Pliska. (Should I still credit Nasio Themes at the bottom, or shall I remove this so you do not get blamed for my errors?)

I discovered a bug in the mobile slide menu code. If a user clicks inside the burger BUTTON but outside the LABEL the function toggleMobileMenu() will apply the toggled class and modal-open to the body, then immediately remove toggled because of the code which closes the mobile menu when you click outside certain elements. (It will leave modal-open applied to the body.)

To fix this, you should add BUTTON to the list tagNames at assets/js/navigation.js:49.

Another issue.

On Chrome, in mobile mode, both on actual mobile and on desktop in responsive mode, on homepage: open the navigation menu, click a page, then Back: burger is checked, but navigation menu is closed. (Clicking the X mark opens the menu, but unchecks the burger, so the states are reversed.) Expectation: either burger is checked and menu is open, or burger is unchecked and menu is closed.

In contrast, on Firefox, clicking Back in this situation brings you back to the homepage, but the burger is checked and the navigation menu is open. (I think it would be better if the menu were closed too, so that you can see the page directly after you click Back, but the behavior is at least consistent.)

I found the source of the last issue above, and added a fix.

The problem seems to be that Firefox has a back-forward cache (“bfcache”) which maintains the DOM state if you press back, while Chrome does not. But both browsers maintain the form state of the burger checkbox, so when you hit Back on Chrome the box is checked but the menu is closed, while on Firefox the box is checked and the menu is open.

I solved this by unchecking the burger checkbox on every page unload.

window.addEventListener('unload',function(e) {
    document.getElementById('burger-check').checked = false;
})

This both ensures that the behavior is consistent across browsers, since the presence of any unload handler invalidates the bfcache, and ensures that the menu is closed when the user goes Back, so they are looking at the page content and not the open navigation menu.

• This reply was modified 3 years ago by frankatan.

I discovered that WebKit does not always unload a page when the user navigates away. So I just removed A from the list of tags which Pliska checks when the user clicks inside the mobile menu, and also added an explicit check for submenu toggles. This gave me the behavior I wanted.

document.addEventListener('click', function (e) {
    // make a list of elements that will keep modal from closing
    var tagNames = ['LABEL', 'INPUT', 'I', 'svg'];
    var isClickInside = false;
    for (var i = 0; i < tagNames.length; i++) {
        if (tagNames[i] == e.target.tagName) {
            isClickInside = true;
	}
	if (e.target.className.indexOf('sub-menu-toggle')!==-1) {
            isClickInside = true;
        }
    }
    ...

I also discovered what appears to be a typo near the beginning of navigation.js:

if (mainMenu.className.indexOf('nav-menu' == -1)) {
    mainMenu.className += ' nav-menu';
}

The condition always evaluates to false. I guess this should be

if (mainMenu.className.indexOf('nav-menu') == -1)

but I don’t understand under which circumstances it would be necessary.

@frankatan , thank you for this thread. It seems that you have made some valuable contributions here. I will revise the code when I have the time and provide an update. These changes will be evaluated and probably included in the next theme update. Cheers!

• This reply was modified 3 years ago by Atanas Yonkov.