f3oall / awesome-notifications

Lightweight JavaScript Notifications Library
https://f3oall.github.io/awesome-notifications/
MIT License
286 stars 40 forks source link

⬆️ - Per-Call PositionOverride Bugged #55

Open Bug-Reaper opened 2 years ago

Bug-Reaper commented 2 years ago

Describe the bug Per Call position value override doesn't work as expected. Position set in the override options obj is disregarded in some cases. If multiple notifiers are used, the first position to get used (by either) becomes permanent after the first call regardless of position on all subsequent calls.

To Reproduce Here's a fun demo:

var notiLeft = new AWN({position:"top-left"});
var notiRight = new AWN({position:"top-right"});

// All notifications from notiRight show up on the left
function leftFirst(){
  notiLeft.warning("To the left to the left!")
  notiRight.warning("Everything you own")
  notiRight.warning("In a box on the Left")
}

// All notifications from notiLeft show up on the right.
function rightFirst(){
  notiRight.warning("That's Riggggght!")
  notiLeft.warning("This too!!!")
  notiLeft.warning("Wrong but also right!"))
}

//Position override fails on notiLeft
function overrideNotiLeft(){
  notiLeft("All my Homies use Right... But here I am stuck on the Left",{position:"top-right"})
}

//Postition override fails on notiRight
function overrideNotiRight(){
  notiRight("All my Homies use Left... But here I am stuck on the Right",{position:"top-left"})
}

setTimeout(()=>{
// leftFirst()
// rightFirst()
// overrideNotiLeft()
// overrideNotiRight()
},2000

Expected behavior Low effort solution, docs explain position can only be set once. Library console.warns you if you try.

Slightly cooler solution, dedicated containers for each position to support different notif locations/positions

Desktop (please complete the following information): Linux - Chromium/Electron - Latest-ish

💖 Love the lib, could maybe contribute in the future. In the meantime plan to kick over a $100 donation soon.

simonmaquilon commented 1 year ago

Solved with this:

  1. Add var AWNOptions = {}; on top, below var AWN;

  2. Add this one:

    image
  3. Add this code inside container function:

    image