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

Solved
rumleydev
Excursionist
13 1 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
13 1 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

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes
rumleydev
Excursionist
13 1 1

This helped a lot, thanks!