Create Web Push Notifications With JavaScript – NoticeZ.js

Category: Javascript , Notification | October 19, 2018
Author:ZeroX-DG
Views Total:781 views
Official Page:Go to website
Last Update:October 19, 2018
License:MIT

Preview:

Create Web Push Notifications With JavaScript – NoticeZ.js

Description:

NoticeZ.js is a small and CSS-less JavaScript web push notification used for creating highly customizable, stackable, non-blocking notification messages on the web page. Supports both node.js and browser.

How to use it:

Install and import the NoticeZ.js into your module.

# NPM
$ npm install noticez --save
// for nodejs
let NoticeZ = require('noticez');
NoticeZ('hello', 'this is a notification');

For browser, just include the NoticeZ.js on the html page and you’re ready to go.

<script src="NoticeZ.js"></script>

Create a default web push notification on the screen.

NoticeZ ( 'Default Message' , 'A default message here' )

To config the notification, just pass the options array as the third parameter to the NoticeZ() function.

NoticeZ ( 'Default Message' , 'A default message here',{
  // top left
  // top right
  // bottom left
  // bottom right
  position: "bottom right",
  // auto close after 3 seoncs
  time: 3000,
  // in pixels
  padding: 10,
  // is closeable?
  closeAble: false,
  // shows an image inside the notification
  image: ''
  
} )

The default styles. Override or modify the CSS classes as shown below to create your own styles.

let styles = {
    notification: {
      background: "#3498db",
      width: "350px",
      height: "150px",
      boxSizing: "border-box",
      background: "#3498db",
      padding: "20px",
      color: "white",
      borderRadius: "8px",
      boxShadow: "0px 10px 20px -2px rgba(0, 0, 0, 0.24)",
      transition: "all 0.4s",
      position: "fixed",
      fontFamily: "Tahoma"
    },
    title: {
      fontSize: "1.5rem",
      marginBottom: "20px",
      fontFamily: "Tahoma",
      marginTop: "0px"
    },
    content: {
      fontSize: "1.1rem",
      lineHeight: "1.5rem",
      fontFamily: "Tahoma"
    }
  };

Event handlers.

let events = {
  OnMouseOver: () => {
     alert ( 'mouse on' );
  },
  OnMouseLeave: () => {
     alert ( 'mouse off' );
  },
  OnDisappear: () => {
     alert ( 'good bye' );
  }
  OnClick: () => {
     alert ( 'click' );
  }
}
NoticeZ ( 'Default Message' , 'A default message here' , {} , events )

Changelog:

v1.2.0 (10/19/2018)

  • fixed merge conflict from develop

You Might Be Interested In:


Leave a Reply