Active class about highway HOT 5 CLOSED

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

from highway.

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');
    }
  }
});

from highway.

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

from highway.

@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.

from highway.

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

from highway.