[Resolved] Close Canva Menu with Back button

[Luiz Guilherme]

Hello.

During my tests with Menu Off Canva, I noticed something that maybe could be improved.

When users open a screen on their smartphone, we instinctively click the BACK button to exit this screen.

The Off Canva Menu, when it fills the entire screen, induces us to click on the back button to close it.

However, in doing so,
what happens is that we go back to the previous window of the site, or sometimes the site is closed.

What if when clicking the back button on the Smartphone, the Canva Menu was closed?

[David]

Hi there,

are you suggesting that when the Off Canvas is open we hijack the Back Button to just close the Off Canvas panel ?

[Luiz Guilherme]

Exactly.

Take a test (on android).

Access any app that has a menu, and see that this is a default behavior in apps.

That is, instinctively, users do this often, but the experience is unpleasant, because instead of closing the menu, the site returns to the previous page.

Or, if you have opened Canva right after entering the site, the back button exits the site.

This will definitely improve the user experience when using Canva Menu.

I Found This:
https://gearside.com/close-mmenu-using-back-button-history-api-popstate/

Maybe work?

[David]

I am not sure its possible with the scripts we use.
Looking at the one you linked to you could rewrite to just remove the classes that define the off canvas open state.

const ofc = document.querySelector('#generate-slideout-menu');
const ofcHTML = document.querySelector('HTML');

if (window.history && window.history.pushState) {
	window.addEventListener("popstate", function(e) {
        if ( ofcHTML.classList.contains('slide-opened') ) {
            ofc.classList.remove('is-open');
            ofcHTML.classList.remove('slide-opened');
            e.stopPropagation();
        }
	}, false);
}

I can’t test on a physical android device, but it don’t work on iOS or MacOS – I think Apple are quite protective over these kinds of things.

[Luiz Guilherme]

Hello David.
Thanks for your help.

With your help I managed to develop this code, it closes the menu when the mouse leaves the window:

OBS:
By entering the 2 codes below,
the snippet: buttons [ i ] .click();”
was transformed into: botoes.click();
Which made the code useless, so I updated this post by adding the 2 codes in pastebin

/* Close menu when mouse out of windows */
function mouse_out_close_menu_f() {
	echo' <script>

	// mouse traking
	function addEvent(obj, evt, fn) {
		if (obj.addEventListener) {
			obj.addEventListener(evt, fn, false);
		} else if (obj.attachEvent) {
			obj.attachEvent("on" + evt, fn);
		}
	}
	
	const canva_menu = document.querySelector("#generate-slideout-menu");

	// When mouse leaves window
	addEvent(document, "mouseout", function(evt) {
		if (evt.toElement == null && evt.relatedTarget == null) {
			// Verify if menu is open
			if ( canva_menu.classList.contains("is-open") ) {
				// close menu
				var botoes = document.querySelectorAll("button.slideout-exit");
				for (var i = 0; i < botoes.length; i++) {
					botoes[i].click(); 
				}
			}
		}
	});

	</script> ';
}
add_action('wp_footer', 'mouse_out_close_menu_f');

Above code in Pastebin: https://pastebin.com/HudhkVuq

Then I tried to develop another one, where the menu is closed when the back button is clicked.
but it didn’t work.
Look:

/* Close canva menu when try back previous page  */
function back_button_close_menu_f() {
	echo' <script>
	
	const canva_menu = document.querySelector("#generate-slideout-menu");
	
	if (window.history && window.history.pushState){
		window.addEventListener("popstate", function(e){
			
			// Verify if menu is open
			if ( canva_menu.classList.contains("is-open") ){
				// close menu
				var botoes = document.querySelectorAll("button.slideout-exit");
				for (var i = 0; i < botoes.length; i++){
					botoes[i].click(); 
				}
				e.stopPropagation();
			}
		}, false);
	}

	</script> ';
}
add_action('wp_footer', 'back_button_close_menu_f');

Above code in Pastebin: https://pastebin.com/6Brzjqnq

Can you verify this? maybe you understand why it’s not working.

Note:
No need to use android for testing
just reduce the screen width to less than 768px. and the canva menu will appear.

[David]

Do you have this setup on a site ? Can you share a link to it ?

[Luiz Guilherme]

David, I added a note to the codes I had previously entered, because for some reason after publishing, the [ i ] part was removed.

About the test link, I’m sending it in the private area.
At the end of the functions file are the 3 tests.
I did and the observations of the behavior of each one.

[Luiz Guilherme]

Hi David.

I managed to close the Menu and the Search field by clicking back.

This is the code:
https://pastebin.com/cUNTtrZF

But I’m having a problem with the search field.
The snippet below IS RUNNING when the Open Search and Close Search buttons are clicked.
document.querySelector("#mobile-header span.search-item")

However, it only needs to be executed when the OPEN SEARCH button is clicked.

Take a test,
I added some alerts and you will see that they are displayed the moment the search is closed.
what shouldn’t happen.

[David]

Instead of using this selector: #mobile-header span.search-item
You can do: #mobile-header span.search-item:not(.active)

That should only select the element without the active class, which gets appended after the search is opened.

[Luiz Guilherme]

Thanks for the feedback David.

01 – I had tried this method before, and it didn’t work.

I tested it again now, and for some reason it doesn’t work.
document.querySelector("#mobile-header span.search-item:not(.active)").onclick = function() {myFunction()};

The behavior when pressing the open and close search button is the same as before adding your suggestion.

02 – I thought about adding an “if” and putting inside the snippet that checks if the search button was pressed, but I didn’t find anything in the code to use as a conditional, so it only executes the code when OPENing the search.

03 – Were you able to access the admin panel with the credentials I provided earlier?
Feel free to test what you want.

[Luiz Guilherme]

I noticed something now:

What if, the code was executed when the cursor is in the search fill field.

I noticed that whenever the search button is clicked, the courses are taken there automatically and the mobile keyboard is opened.
That is, It is possible to detect that the cursor is in a typing field.

<input type=”search” class=”search-field” value=”” name=”s” title=”Pesquisar”>

[David]

you could check whether the element contains() the active class before firing your function:

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains

[Luiz Guilherme]

David, Got it.

I used option 02 that I mentioned earlier and added an if to check if the active class did not exist before calling the function that clears the history.

Here’s the complete code for those who want to use it in their projects.
https://pastebin.com/iNLgE3pj

Thanks for all the help.
I also had a lot of help from my friend Kaique Garcia,
https://www.kaiquegarcia.dev

[David]

Awesome – glad to hear you found a solution, and thank you to you and your friend for sharing it!

[Author]

Posts