PNotify stack positioning problem

[cape-dev]

Hi,

I am new with this library and have a problem with custom stacks. The problem is if I provide "stack" and "addclass" to the settings object of a new notification all of the notifications appear on the same spot. They just overlay each other instead of pushing them to "dir1" or "dir2". If I don't provide "stack" and "addclass" there are no problems with positioning of multiple notifications. This is the actual code I am using:

var PNotify = require('pnotify');
require('pnotify.buttons');
require('pnotify.history');
require('pnotify.nonblock');
require('pnotify.mobile');
require('pnotify.tooltip');

function add(arg) {
    var stack_bottomright = {
      dir1: 'up',
      dir2: 'left'
    };

    var notificationArgs = {
      title: arg.title,
      text: arg.text,
      stack: stack_bottomright,
      addclass: 'stack-bottomright'
    };
    new PNotify(notificationArgs);
}

I am trying to use this in an Angular service. (I think I have loaded the modules properly in writing the path to node_modules/pnotify/src/... for each module I am loading in the package.json in its "browser" tag. Further I load all the css files from pnotify manually so that also should not be the problem.)

What am I doing wrong? Please help!

[cape-dev]

Found the solution myself... The following comment in the docs are important:

Stack objects are used and manipulated by PNotify, and therefore, should be a variable when passed. So, calling something like new PNotify({stack: {"dir1": "down", "dir2": "left"}}); will NOT work. It will create a notice, but that notice will be in its own stack and may overlap other notices.

The problem in my code is that everytime the function is called a new stack object gets created. Therefor PNotify creates an completely new stack everytime! The above code should be like this:

var PNotify = require('pnotify');
require('pnotify.buttons');
require('pnotify.history');
require('pnotify.nonblock');
require('pnotify.mobile');
require('pnotify.tooltip');

var stack_bottomright = {
      dir1: 'up',
      dir2: 'left'
    };

function add(arg) {

    var notificationArgs = {
      title: arg.title,
      text: arg.text,
      stack: stack_bottomright,
      addclass: 'stack-bottomright'
    };
    new PNotify(notificationArgs);
}

[hperrin]

Yep, good catch. :)