Choose Between Displaying Multiple Toasts Or Just One #108
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…he use of only a single toast at a time I still need to test the code, but the basics are there. The class Toastify will have a class variable multiple, and when set to false, will only allow one toast to appear on the screen at a time. To accomplish this, there is a class variable activeToasts that is an array of all the toasts that are currently shown on the screen. In the showToast function, check if the multiple variable is false, if it is, call the hideToast function on each toast that is showing, then add the current toast to the activeToasts array. In hideToast, we now also remove the current toast from the activeToasts array.
Looking at the code again, I am not sure what toastiy-es.js is used for, but I figured it wouldnt hurt to add the code to both files.
Only the UI is finished, currently toggling does nothing, but that will change soon.
…he use of only a single toast at a time I still need to test the code, but the basics are there. The class Toastify will have a class variable multiple, and when set to false, will only allow one toast to appear on the screen at a time. To accomplish this, there is a class variable activeToasts that is an array of all the toasts that are currently shown on the screen. In the showToast function, check if the multiple variable is false, if it is, call the hideToast function on each toast that is showing, then add the current toast to the activeToasts array. In hideToast, we now also remove the current toast from the activeToasts array.
Looking at the code again, I am not sure what toastiy-es.js is used for, but I figured it wouldnt hurt to add the code to both files.
…iple when a checkbox is clicked There is a small bug, if I declare Toastify.multiple = true to start, then later switch it to false, it will allow 2 toasts on the screen at the same time. But it works as expected if Toast.multiple = false is set from the start... I will look into this bug
…Toastify.multiple = false In my previous commit I mentioned there was a bug where more than one toast would appear even when Toastify.multiple = false. This is because I thought that the hideToast() function was called every time a toast "ended". After looking into it, it is actually the "removeElement" function that gets called everytime, so I moved my code to that function and now everything is running how it should.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR will allow users to choose between displaying a single toast on the screen vs. displaying multiple toasts, with one line of code.
Displaying multiple toasts is still the default setting, so anyone using Toastify wouldn't be affected by these changes. The only difference is that with the new "single toast" approach, the toast duration is not honored. Meaning, if a new toast is about to appear, any toast(s) that are currently on the screen are then removed, regardless of how long they were supposed to be displayed for.
How To Use
Super easy! It can be toggled back and forth if it needs to be, but it only needs to be set once at the top of the script, before any toasts are created.
Testing
I want to start off by saying I have not tested this on all browsers. However, can confirm that it is working on these browsers:
The code I added is very short and sweet so I would not worry too much about compatibility issues. The only functions I use that are worth looking into are:
Based on the results from caniuse.com, I don't think this will cause any issues.
Additional Comments
I took the liberty of updating the demo to include this "toggle" feature by adding a checkbox to toggle between the 2 states. Toggling the checkbox also updates the code displayed in the box. It can be viewed at https://trevorslobodnick.github.io/toastify-js/
I also updated the readme so the documentation now includes
Toastify.multiple = true;at the top, and I also added myself to the contributors list.Im new to this so please let me know if I need to add, edit, or remove anything.
Thanks,
Trevor Slobodnick