macOS Inspired Notification Plugin With Pure JavaScript – macOSNotifJS

Category: Javascript , Notification | November 12, 2018
Author: MattIPv4
Views Total: 927
Official Page: Go to website
Last Update: November 12, 2018
License: MIT

Preview:

macOS Inspired Notification Plugin With Pure JavaScript – macOSNotifJS

Description:

macOSNotifJS is a JavaScript plugin to display slim, customizable, growl-style notifications & alerts inspired by Apple macOS.

Features:

  • Slim and clean look.
  • Custom notification image.
  • Custom notification sound effect.
  • Custom action buttons.
  • Auto dismisses after a timeout.
  • Dismisses the notification manually by drag and swipe.

How to use it:

Upload the macOSNotif.js and res folder to your server and import the macOSNotifJS plugin’s files into the document.

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

Call the function macOSNotif() to display a default notification on the page.

macOSNotif()

Customize the notification.

macOSNotif({

  // delay in seconds
  delay: .5,

  // timeout in seconds
  // 0 = disable
  autoDismiss: 0,

  // swipe/drag to dismiss
  interactDismiss: true,

  // enables sound effect
  sounds: false, 

  // z-index
  zIndex: 5000,

  // custom notification image
  imageSrc: null,
  imageName: "", 
  imageLink: null,
  imageLinkNewTab: false,      

  // notification title
  title: "macOSNotifJS",

  // notification message
  subtitle: "Default notification text", 

  // link for the main text
  mainLink: null, 

  // button 1 text
  btn1Text: "Close",

  // button 1 link
  btn1Link: null, 

  // opens button 1 URL in a new tab
  btn1NewTab: false,

  // button 2 text
  btn2Text: "Go",

  // button 2 link
  btn2Link: null,

  // opens button 2 URL in a new tab
  btn2NewTab: false
  
})

Changelog:

11/12/2018

  • v0.0.4

11/11/2018

  • new tab options

07/13/2018

  • bug fix for quick triggered notifications

06/01/2018

  • CSS update

05/25/2018

  • minify some stuff

You Might Be Interested In:

Leave a Reply