Notification Positioning

[joelhickok]

Any plans to add positioning functionality to the component?

I know this involves a bit of work to setup containers for each corner of the window, but it would be nice to be able to use the notify function to add a position property.

Hopefully I can fork this when I wrap up a big project in the Spring, and maybe submit a pull request if "beyonk" hasn't had a chance to work on this.

// possible implementations

notifier({
  type: 'info',
  message: 'A top left positioned toast.',
  position: 'top-left',
})

notifier.success('A bottom left positioned toast.', {
  position: 'bottom-left',
  timeout: 3500,
})

With frameworks like Vue.js, you can put a CSS class directly on the component and it gets passed down to the component's outermost element. Svelte.js does not do this, however, so I cannot simply put the class to override positioning directly on the component, which is a hacky way to quickly add a class to the Toast container.

<!-- not possible with Svelte but works with Vue.js -->
<NotificationDisplay class="toast-top-left"/>


[joelhickok]

I forgot to provide a quick demo of how I am quickly handling this right now for a prototype I am trying to whip out.

Right after I programmatically call the notifier, I select the container element and add a class name to the element. Obviously, this repositions the container for all active toasts, which is not ideal.

// positioning override
.toast-top-left {
  left: 0;
}
.toast-bottom-left {
  bottom: 0;
  left: 0;
}
// and so on...

notifier.success('Notifications work!', 5000)
const el = document.querySelector('.toasts')


// replace existing overrides
el.className = el.className.replace(/ toast-bottom-right/g, '')

el.className = el.className.replace(/ toast-bottom-left/g, '')

el.className = el.className.replace(/ toast-top-left/g, '')

// add new class override
el.className += ' toast-bottom-left'

[antony]

Hi @joelhickok - I've not really had need for re-positioning, so I've not done any work to this effect. Also most of the CSS was rewritten by a contributor, so I'm not 100% sure how it works - but it looks like you've figured some of it out!

Happy to accept a PR on this if you get a chance!