Recalculate only works on Y axis

[leandroreiswiz]

Hey there,

I was having some problems with the plugin, where it only updated an horizontal scroll when using the scrollbar.

Upon inspecting the source code, I realised that the "recalculate" function will only update the "Y" axis, never the "X". I changed the code to allow both axis to be recalculated, but Is there any particular reason why recalculate is not written to work on the "X" axis?

If not, I think it´s something that should be looked upon.

[Grsmto]

What version are you looking at? It should call recalculate on any change to the DOM regardless the axis.

[leandroreiswiz]

Hey,

I'm using version 2.0.1.

Let's see if i'm getting the implementation right. I'm using the plugin like this:

test = new window.SimpleBar($('.slideshow .slides')[0], {
        autoHide: false, 
        forceEnabled: true
});

and then calling recalculate like this:

test.recalculate()

From my understanding of the source code, it calls recalculate as such:

recalculate() {
        if (!this.enabled) return;

        this.resizeScrollContent();
        this.resizeScrollbar();
}

The problem, in my case, is that 'resizeScrollbar' expects arguments to be passed, and if not, it uses "y" as the default argument.

resizeScrollbar(axis = 'y') {
        let track;
        let scrollbar;

        if (axis === 'x') {
            track = this.trackX;
            scrollbar = this.scrollbarX;
        } else { // 'y'
            track = this.trackY;
            scrollbar = this.scrollbarY;
     }

As recalculate doesn't pass any argument to the 'resizeScrollbar' function, it will always use the "Y" axis to recalculate.

As soon as I click on the scrollbar, it calls for the 'flashScrollbar' function that passes arguments to the resizeScrollbar for both "x" and "y" axis.

flashScrollbar() {
        this.resizeScrollbar('x');
        this.resizeScrollbar('y');
        this.showScrollbar('x');
        this.showScrollbar('y');
}

[Grsmto]

Yes you are right. There is an issue with the implementation of the manual call to recalculate function.
To be honest my goal was to avoid users to have to use recalculate at all, that's why it's using Mutation Observer that should take care of that automatically.
Can I ask you what type of update you are doing to the DOM that doesn't trigger the resizing of Simplebar automatically (the reason you have to use recalculate I guess) ?

[leandroreiswiz]

Hey,
I've been testing the plugin further. From my tests, the Mutation Observer does trigger, so the manual call is not necessary. I wanted to make sure that recalculate was being called, hence why I was calling it manually.

The project I'm working uses vue.js for DOM manipulation. I need to test further to check if there are some problems with using simplebar with vue.js.

If I'm understanding the code correctly (I need to read more about how a Mutation Observer works), this should be one of the mutation initiations.

if (typeof MutationObserver !== 'undefined') {
            // create an observer instance
            this.observer = new MutationObserver(mutations => {
                mutations.forEach(mutation => {
                    if (mutation.target === this.el || mutation.addedNodes.length) {
                        this.recalculate();
                    }
                });
            });

            // pass in the target node, as well as the observer options
            this.observer.observe(this.el, { attributes: true, childList: true, characterData: true, subtree: true });
        }

For what I tested, this recalculate is the one that is called when I'm changing the DOM, and that's why when I'm changing the content, the horizontal scroll is not updating as expected.

[Grsmto]

Hey, just had a look and you are completely right!
Thanks very much for the time you spent in this and your very clear explanation! I didn't experienced this before! I don't know I missed this bug! :p
I will fix that asap!
Thanks again

[leandroreiswiz]

Glad I could help. Thanks for your time and keep up the good work. :)