PNotify -- 通知彈窗的使用的部分問題

問題：

         使用pnotify構建消息彈窗（web應用下）

參考：

         官網

         GitHub

         npm倉庫

         個人推薦看npm倉庫

過程：

         在使用pnotify的過程中，最重要的也就是stack配置，設置彈出的位置、動畫等。

         簡單看一下PNotify的使用

const stackBottomModal = {
  dir1: "up", // With a dir1 of "up", the stacks will start appearing at the bottom.
  // Without a `dir2`, this stack will be horizontally centered, since the `dir1` axis is vertical.
  firstpos1: 25, // The notices will appear 25 pixels from the bottom of the context.
  // Without a `spacing1`, this stack's notices will be placed 25 pixels apart.
  push: "top",
  dir2: "left",
  firstpos2: 25, // Each new notice will appear at the bottom of the screen, which is where the "top" of the stack is. Other notices will be pushed up.
  modal: true, // When a notice appears in this stack, a modal overlay will be created.
  overlayClose: true, // When the user clicks on the overlay, all notices in this stack will be closed.
  context: document.getElementById("page-container")  // The notices will be placed in the "page-container" element.
};

function notice() {
  PNotify.alert({
    title: "Alert",
    text: "This is an alert.",
    width: "auto",
    type: ['notice', 'info', 'success', 'error'][Math.floor(Math.random() * 3.9999)],
    stack: stackBottomModal,
    hide: false 
  });
}

function timer() {
  setTimeout(() => {
    notice();
    timer();
  }, (Math.random() * 4000) + 4000);
}

notice();
//timer();

          這是一個簡單的消息彈窗，要理解的關鍵是stack的配置

          指出幾個重要的屬性：dir1,firstpos1,dir2,fistpos2,push

Stack properties:

dir1 - The primary stacking direction. Can be 'up', 'down', 'right', or 'left'.
firstpos1 - Number of pixels from the edge of the context, relative to dir1, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
spacing1 - Number of pixels between notices along dir1. If undefined, 25 will be used.
dir2 - The secondary stacking direction. Should be a perpendicular direction to dir1. The notices will continue in this direction when they reach the edge of the viewport along dir1.
firstpos2 - Number of pixels from the edge of the context, relative to dir2, the first notice will appear. If undefined, the current position of the notice, whatever that is, will be used.
spacing2 - Number of pixels between notices along dir2. If undefined, 25 will be used.
push - Where, in the stack, to push new notices. Can be 'top' or 'bottom'.
modal - Whether to create a modal overlay when this stack's notices are open.
overlayClose - Whether clicking on the modal overlay should close the stack's notices.
context - The DOM element this stack's notices should appear in. If undefined, document.body will be used.

          這裏的理解就很有趣（腦殘）了

The firstpos* values are relative to an edge determined by the corresponding dir* value.
dirX === 'up' - firstposX is relative to the bottom edge.
dirX === 'down' - firstposX is relative to the top edge.
dirX === 'left' - firstposX is relative to the right edge.
dirX === 'right' - firstposX is relative to the left edge.

          dirX的位置與與dirX方向按相反的方向理解，因爲dir指的是活動（包含如果彈出過多數量的彈窗，超出屏幕寬度，向旁邊換行）指向的方向。

          然後push指的是推送的方向。

          在使用過程，可能碰到一個問題。就是設置距離底部某高度（我設置爲50px）時，css並不生效，反而是默認的css生效爲距離頂端36px，通過控制檯查看到top:36px的默認配置生效。

          在作者推薦的sandbox中，發現並沒有這個問題，仔細想來可能是css和js加載順序的問題，但是反覆調整，就是不行，然後還是選擇在源文件中把默認的top註釋掉。（有個問題：爲什麼right:36px就沒有生效，反而是top生效了？求解）

總結：

個人感覺其實pnotify並不是一個簡單的推送消息的方式，我下次可能考慮使用其他的

           1.文檔沒有中文，雖然英文能看起來也沒有什麼問題

           2.在中國使用的人數不是太多，如果有點小問題，確實不好找到解決的方案

           3.pnotify本身確實很完善，細節很多，但是一般人用不了這麼多，反而加重了理解的難度