Is there a way to add .active to a button it if is links to the page we are currently on?

1
Hi g'uys,   most of you are familier with the Menu that has active states, Tabs that have active states. Is it possible to create a custom menu that has active state. (no tabs due to performance)  is there a way to use buttons but give the button an active state? Based on  page name? or last clicked? Having the menu in a single snippet is also a scalability requirement (atm this has been solved by having 7 snippets, but if naming changes, having to change 7 snippets isnt the best solution) Becuase the button open a new page, The best solution that I can quickly think of is "if button links to the current page we are on give it class "active". is this possible? Maybe with microflow?  
asked
3 answers
2

Thanks for the tip Jason.

 

I ended giving the container “active-1” until “active-6” classes in the modeler depending on the active page and then indeed use a Sass for loop to adapt the styling. 

 

// Style links based on active page
$links: 6;
$class-slug: active !default

// Create custom nth-child selectors for each active value
@for $i from 1 through $links {
  .#{$class-slug}-#{$i} {
    .ps_left-menu-link:nth-child(#{$i}) {
      & span a{
        text-decoration: underline;
      }
    }
  }
}

 

answered
1

Hi Jason,

Perhaps you can do something with javascript. here is a short snippet that does what you want

for ( var widget of dijit.registry.toArray() ) {
   if ( widget.action && 
        widget.action.config &&
        widget.domNode &&
        widget.mxform && 
        widget.action.type == "openPage" && 
        widget.action.config.name == widget.mxform.path  ) {
       widget.domNode.classList.add("active");
   }
}

The idea is to check the widget if it is an openPage button and that it is configured opens the current page (on which the button is). You can wrap this in a custom widget or put it in HTML/Snippet or in index.html.

-Andrej

 

PS: It might bet that it needs some tweeking for different Mx versions, this one is for Mx7.14

answered
0

Thx Andrej,

 

Your answer is awesome, and what I was afraid of.
We are going to have 8 unique snippets instead, due to future maintainability.

I hope we get conditional classes soon.

answered