Dawn Theme: Where is the 'click' event listener for the header menu dropdowns?

Solved
rumleydev
Excursionist
21 4 1

I'm trying to change the menus from opening on 'click' to on 'mouseenter'. It appears that around line 247 in global.js there is a function that adds the event listener to <summary> tags that add an 'open' attribute to the <details> tag wrapping them. See below:

 

bindEvents() {
    this.querySelectorAll('summary').forEach(summary => summary.addEventListener('click', this.onSummaryClick.bind(this)));
    this.querySelectorAll('button').forEach(button => button.addEventListener('click', this.onCloseButtonClick.bind(this)));
  }

 


However, then I changed the 'click' listener on summary to 'mouseenter' I'm not seeing a change. So I'm not sure I'm looking at the right thing or for something else. 

Any ideas?

0 Likes
rumleydev
Excursionist
21 4 1

Bump

0 Likes

This is an accepted solution.

@rumleydev 

I believe it would be easier (and arguably more well organized) to create additional functions for customizations. This way you can always scroll down to the bottom of the javascript file and find all the customizations that theme has.

Also, in this particular case, I do not think that redundancy will have any negative impacts in performance.

Personally this is how I'd achieve this:

function handleHeaderDropdownHover(){
var $dropdowns = document.querySelectorAll(`.header .list-menu li > * > details`);

if (!$dropdowns){
return;
}
for (var $dropdown of $dropdowns){
$dropdown.addEventListener('mouseenter', function(e){
const $this = e.target;
const  $button = $this.querySelector(`.header__menu-item`);

$button.click();
});

$dropdown.addEventListener('mouseleave', function(e){
const $this = e.target;
$this.removeAttribute('open');
});
}

}

handleHeaderDropdownHover();


Kind regards,
Diego

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
rumleydev
Excursionist
21 4 1

This helped a lot, thanks!

Bazza1
New Member
1 0 0

I am also looking to implement this but I'm a bit confused where to even begin. I have tried to establish where the 'click' event is generating but have not been successful. Even with the 'solved' script I cannot find where to link this.

Can anyone help and give me an idiots guide to solve this?

0 Likes
rumleydev
Excursionist
21 4 1

The bottom of global.js is where I put it and it worked.

0 Likes