XF 2.0 Toggle Storage Class

[Russ]

Is there a way of changing the class 'is-active' on the: XF.ToggleClick = XF.Click.newHandler({ using a data-attribute somehow?

Similar to how you can set a custom storage key:

data-storage-key="_key-ID"

Sidenote... I'm noticing a delay when using the data-xf-click="toggle" only on Chrome, FF seems to load flawlessly. Is that on my own or normal with how Chrome handles it?

 

[Chris D]

Do you mean use a class other than is-active? If so, yes, data-active-class="blah".

For info, here's the default list of options:

target: null,
container: null,
hide: null,
activeClass: 'is-active',
activateParent: null,
scrollTo: null

All of those can be changed with data attributes.

You have to "un-camel case" them, e.g. activeClass becomes data-active-class and scrollTo becomes data-scroll-to etc.

Can't say I've noticed any delays in Chrome. The only delay would be if it has to perform an AJAX request to load its contents (like the edit history link on posts).

 

[Russ]

So weird... I could of sworn I tried data-active-class before posting here. Thanks Chris.

The delay is noticeable if you stick the toggle on say... the sidebar. Chrome seems to show the elements for short time (under a second) while Firefox has no delays. I’ll see if I can’t replicate it easier and come back with a video.

 

[Russ]

Ya it's easy to notice the flicker with something like this:

find: <div class="p-body-sidebar"> and add below

<span class="customTrigger is-active"
          data-xf-click="toggle"
          data-target=".customBox"
          data-xf-init="toggle-storage"
          data-hide="true"
          data-storage-key="_custombar"
          id="_cbt">
        <i class="fa fa-close"></i>
    </span>
<div class="customBox is-active">
        test
</div>

extra:

.customBox
{
    background-color: red;
    color: white;
    padding: 10px 0;
    display: none;
    &.is-active
    {
        display: block;
    }
    .m-transitionFadeDown();
}
.customTrigger
{
    background-color: green;
    color: white;
    padding: 10px;
    display: inline-block;
}

Chrome flickers and loads the red box for a split second, firefox you don't see it loaded at all (if collapsed). Not sure if it's my end or just kind of normal for Chrome.