Add fade-out effect to slides

[dennisklad]

Also formatted the code :)

Solves #95 .This was easier to do that I though.

Basically the only code you need is this after the selectWrapper definition:

// First, hide all modules before showing the new ones
for (let i = 0; i < this.length; i += 1) {
    this[i].hide(this.slideTransitionSpeed, false, { lockString: "mmmc" }); // Hide all modules
}

setTimeout(() => {
    /* The existing code for processing the slides */
    for (let i = 0; i < this.length; i += 1) {
        /*
        * There is currently no easy way to discover whether a module is ALREADY shown/hidden
        * In testing, calling show/hide twice seems to cause no issues
        */
        Log.log(`Processing ${this[i].name}`)
        [.....]
        } else {
            // We aren't using slides and this module shouldn't be shown.
            this[i].hide(0, false, { lockString: "mmmc" });
        }
    }
}, this.slideTransitionSpeed);

Disclaimer:
This works as expected for my configuration with two slides, but should be tested with other modes as well.

[KristjanESPERANTO]

Thanks for the PR! 😃

Also formatted the code :)

This makes it hard to review. We use ESLint to lint and format the code 🙂 Please run npm run lint:fix to apply the ESLint rules.

[dennisklad]

This makes it hard to review.

You are right, I am sorry - this was not the smartest commit. I will push again.

[dennisklad]

The formatting with npm run lint:fix ended with 40 problems.

You basically only need the code after the selectWrapper definition:

// First, hide all modules before showing the new ones
for (let i = 0; i < this.length; i += 1) {
    this[i].hide(this.slideTransitionSpeed, false, { lockString: "mmmc" }); // Hide all modules
}

setTimeout(() => {
    /* The existing code for processing the slides */
    for (let i = 0; i < this.length; i += 1) {
        /*
        * There is currently no easy way to discover whether a module is ALREADY shown/hidden
        * In testing, calling show/hide twice seems to cause no issues
        */
        Log.log(`Processing ${this[i].name}`)
        [.....]
        } else {
            // We aren't using slides and this module shouldn't be shown.
            this[i].hide(0, false, { lockString: "mmmc" });
        }
    }
}, this.slideTransitionSpeed);

[KristjanESPERANTO]

OK, I tested it and checked your changes. I really like the fade-out! 👏

But before merging:

1. What do you think, should there be a separate config option to set the fade-out? Maybe some people want to configure it asynchronously or like the current behaviour.
2. The README needs updating.

The formatting with npm run lint:fix ended with 40 problems.

I will take care of it as soon as we are done with this PR.

[dennisklad]

Glad you like it! Sure, that is a good point. Why not have two variables: `SlideFadeInTransition` and `SlideFadeOutTransition`. We can set them both with the same default value and update the README.

…

On Mon, Oct 21, 2024, 21:07 Kristjan ESPERANTO ***@***.***> wrote: OK, I tested it and checked your changes. I really like the fade-out! 👏 But before merging: 1. What do you think, should there be a separate config option to set the fade out? Maybe some people want to configure it asynchronously or like the current behaviour. 2. The README needs updating. The formatting with npm run lint:fix ended with 40 problems. I will take care of it as soon as we are done with this PR. — Reply to this email directly, view it on GitHub <#96 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AM2WT4P7WI2J435FTPSM3DDZ4VGFJAVCNFSM6AAAAABQI4XJ7WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRXGUYDGMJTGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>