Add some basic support for offset as requested on #48

Usage:

Toastify({
  text: "This is a toast with offset",
  offset: {
    x: 50, // horizontal axis - can be a number or a string indicating unity. eg: '2em'
    y: 10 // vertical axis - can be a number or a string indicating unity. eg: '2em'
  },
}).showToast();

Toast will be pushed 50px from right in x axis and 10px from top in y axis.

Example:

If position is equals to left, it will be pushed from left. If gravity is equals to bottom, it will be pushed from bottom.

Example:

Also updated the docs.

Hello, I have the problem that the toast is coming from the bottom of the top of the page and not top or bottom of the screen so if I am scrolling the page or using it on a tall page, I cannot see the toast anymore, is there a fix? Currently, the website using it is embedded within an iframe thought I am not sure if that is matter or not. Please kindly advise,

... because of the style background: linear-gradient(135deg, #73a5ff, #5477f5) applied by default.

TailwindCSS uses the bg- utility class to change the background color. Passing the option className doesn't work of course, because of the background property:

This is annoying because most of the time the primary purpose is to change the background color. Is there a way to unset (maybe using some options) the background itself, and use my bg-green-500 class?

Toastify({ style: { backgroundColor: '#dc3545' } }).showToast(); Not Working...

default: background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); background: linear-gradient(135deg, #73a5ff, #5477f5);

For ultimate control and styling, I would like to optionally pass HTML div with arbitrary content as arg. In my case I'd like to include small chart or buttons, small table etc. Any plans for such a feature?

I think we should leave that as an option for people who like to require CSS files and have a build system and process that allows that. For all other cases, it should be an option not to.

I am currently creating a single chrome extension. One of its functions is to send a toast to the user. I want to do this using this library, can you help?

I am pulling Toastify JS from the CDN. Just now I've realized that the property style.background is no longer working, and my toasts are using the built-in style from toastify.css instead. (I did force reload all my resources to ensure that it wasn't a stale version.) The property backgroundColor still works, but this gives me a deprecation warning.

ES6 Conversion + Features

Resolves #15 Added a new file (toastify-es.js) which contains an ES6 compliant version of Toastify.
Few improvements and changes to behavior:

• Based off comments, positionLeft was finally removed
• Expanded functionality for selector that allows you to pass in an element as well (defaults to document.body)

Notable changes to code:

• Made use of arrow functions to keep context the same (replaced (function(){...}).bind(this))
• let instead of var
• Toastify class rather than function. Exported function creates an instance of Toastify
• When checking classes, use the built in classList functionality on elements
• rootElement is now stored on the class so when we remove toasts we know where to look specifically (this enhanced the ability of putting toasts inside elements and allows you to use Toastify inside shadowDom nodes)
• Added ability to use escapeMarkup to allow optionally unsafe innerHTML
• Added ability to use the HTML DOM style property to directly style the toast (this further extends backgroundColor functionality, and therefore backgroundColor should be deprecated in the future in favor of using style.background). Note, since previous functionality took backgroundColor and applied it to the elements background style (which changes all background styles), to prevent breaking changes, backgroundColor takes precedence over style.backgroundColor.

Things that should still happen:

• [x] Get maintainer feedback (I'm only human and spent a few hours quickly changing things, don't want to miss something)
• [x] Prevent XSS issues when we pass text into the innerHTML of the toast (probably just want to use innerText, as there's already node for when you want to pass in an element)
• [x] Cleanup of default values and states
• [x] Adequate testing of all use cases
• [x] Test across browsers
• [x] Include added functionality in legacy versions

If I show one message it disappears. No problem but if i show multiple messages then only first one disappears rest are keeps alive.

here is my message below

toast.lib.init({ text: message, duration: 3000, newWindow: false, close: true, gravity: "top", position: 'right', backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)", stopOnFocus: true, }).showToast();

Hi there, greetings from https://github.com/nextcloud/nextcloud-dialogs/issues/255 We are in the process of doing an A11y validation and one of the remarks was that or errors and messages (which are using toastify) are not read by screen readers. This can be easily achieved by setting aria-live="polite" on the HTMLElement.

For errors and important information it is even recommended to use aria-live="assertive", however this interrupts whatever is currently being read out by the screenreader, so it should be "opt in" so it can be used for errors and similar stuff, but is not forced for "Your message was posted" kind of messages.

Currently I implemented a PR in our lib which just manipulates the HTMLElement afterwards: https://github.com/nextcloud/nextcloud-dialogs/pull/622/files

But of course it would be better if the library would allow this directly, so all users of the lib benefit from it.

Are you interested in fixing this and would accept a pull request + publish a new version afterwards?

Fixes #110. This adds a new option, stopOnWindowBlur, that - similarly to the stopOnFocus option - stops the timeout timer if the user navigates away from the page and restarts the timer once the window regains focus. This prevents notifications from disappearing without the user actually having seen it. I set it to be enabled by default.

Actual behavior

You provide a useful feature for shadow roots which is the selector property, however the reposition function is not working due to shadow roots. You are using document.getElementsByClassName which gets blocked by the shadow roots so whenever we use shadow roots nothing get selected, so nothing is repositioned.

Expected behavior

I expect the reposition function to work in shadow root by checking if a selector is passed to the toast and using it to do the getElements located here. I have managed to make it work locally by doing the following (I haven't tested any other usecases so it may broke other usecases but it's a good track of solution) :

I have passed the this object as props to the reposition function to get access to the selector and check if any is provided, if so we do the equivalent of getElementsByClassName but with shadow roots way, which is the querySelectorAll.

We get the following for the lime 363: var allToasts = toast.options.selector ? toast.options.selector.querySelectorAll('.toastify') : document.getElementsByClassName("toastify");

Don't hesitate if you need more information.

Actual behaviour

I'm using this library with the Drupal module. This module shows messages e.g. after saving a page. It happens often that I save the page and while waiting for the new page to load, I navigate to another tab. Once I come back to the previous tab where the toast appeared, I notice that the toast has already disappeared.

Expected behaviour

Only start the countdown timer if the tab where the toast appears is open. This way, no messages can be missed. Could be made an option instead of the default behaviour.

Implemented the progress bar that shows the time until the toast closes (#94)

How to use:

Toastify({
        progressBar: true,
        progressBarColor: 'coral',
        text: "With progress bar",
        gravity: "top",
        position: 'left'
    }).showToast();

Animation is done with CSS animation property.

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

Toastify.multiple = true; // Allows multiple toasts (default)
Toastify.multiple = false; // Only one toast can be on the screen
Toastify({
    ...
}).showToast()

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:

• Google Chrome (version 104.0.5112.102)
• Firefox (version 80.0.1)

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:

indexOf  - https://caniuse.com/?search=indexOf
splice   - https://caniuse.com/?search=splice
forEach  - https://caniuse.com/?search=forEach

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