Active class

[RoyVeldman]

I created a contextual transition, but the links that use them, I can't change the active class on them. I used both the previews from the documentation on the contextual links aswell as changing the active class while navigating in.

When I log it in the console, I can see the correct link with the right classes, but my DOM does not update.

Is this because I use the contextual transition? Or is there a way around it to set the active classes to the corresponding menu item.

[Anthodpnt]

Hi @RoyVeldman,

Can you give us a more solid description by including pieces of code so we can have an idea about how you deal with your links ?

Best regards, Anthodpnt

[RoyVeldman]

Yes sorry,

These are the links

<div class="indicators">
       {% for item in craft.entries.section('products').all() %}
             <a href="{{ item.url }}" class="cool-btn" data-transition="productPage">
                  <span>{{ loop.index }}</span>
                  <span>{{ item.title }}</span>
             </a>
     {% endfor %}
 </div>

My app.js

const H = new Highway.Core({
   renderers: {

   },
   transitions: {
      default: Fade,
      contextual: {
         productPage: productPageTransition
      }
   }
});

For the nav active class I use your code, I only changed the querySelector

// Get all menu links
const links = document.querySelectorAll('.indicators a');

// Listen the `NAVIGATE_IN` event
// This event is sent everytime a `data-router-view` is added to the DOM Tree
H.on('NAVIGATE_IN', ({ to, location }) => {
  // Check Active Link
  for (let i = 0; i < links.length; i++) {
    const link = links[i];

    // Clean class
    link.classList.remove('is-active');

    // Active link
    if (link.href === location.href) {
      link.classList.add('is-active');
    }
  }
});

[Anthodpnt]

Hi @RoyVeldman,

The only issue I could see would be that your links might be in the data-router-view meaning that you have to select them inside the NAVIGATE_IN event to make sure that you get the right links from the right data-router-view.

In the documentation the example is based on a list of links outside the data-router-wrapper meaning that they stay the same during navigation and so they can be selected once outside the NAVIGATE_IN event. But if the links are located inside the data-router-view elements that are swapped during navigation you have to get them back every time the DOM change using the events.

It's hard to be more precise but I suppose this is that kind of issue you get here since the documentation has been tested multiple times and is even running on the documentation website without any problem. Unfortunately this is more a problem related to your code than a problem coming for Highway.

Keep me in touch if I spotted the issue or if you find it yourself. Best regards, Anthodpnt

[RoyVeldman]

@Anthodpnt Thanks for replying so quick, but yes I guess that was the issue indeed, my links are inside my data-router-view. I am switching the active class now with adding and removing the classes based on to and from querySelector in my contextual transition file.

[Anthodpnt]

@RoyVeldman So I assume that your problem is resolved and that I can close this issue.