macOSNotifJS
A simple Javascript plugin to create simulated macOS notifications on your website.
macOSNotifJS is a plugin created by Matt Cowley.

Package Version License Dev Dependencies JS Size

Installation:

To use the plugin, copy the dist folder from the macOSNotifJS GitHub repository to your website.

To then have the plugin available on a page, in your head tag have the following to load the notification styling:

<link href="dist/macOSNotif.min.css" rel="stylesheet"/>

At the bottom of your body, you then need to have the following to load the notification script:

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

Usage:

To get started, simply call the function macOSNotif.
To customise your notification, you can supply an object containing any of the options listed below:

options = {
    delay: 0.5,                             // Delay before display (in seconds)
    autoDismiss: 0,                         // Delay till automatic dismiss (0 = Never, in seconds)
    interactDismiss: true,                  // Toggle swipe/drag to dismiss

    sounds: false,                          // Play sounds for notification
    dark: false,                            // Use dark mode style for notification
    zIndex: 5000,                           // CSS z-index value of the notification (will be adjusted for stacked notifications)

    imageSrc: null,                         // Link of the icon to display (null to hide icon)
    imageName: "",                          // Alt/Title text of the icon
    imageLink: null,                        // Link for icon click (null for no link, '#' for dismiss)
    imageLinkNewTab: false,                 // Open Image Link in New Tab (ignored if link is set to dismiss)

    title: "macOSNotifJS",                  // Main Notif Title
    subtitle: "Default notification text",  // Main Notif Sub Title

    mainLink: null,                         // Link for the main text body (null for no link, '#' for dismiss)
    mainLinkNewTab: false,                  // Open Main Link in New Tab (ignored if link is set to dismiss)

    btn1Text: "Close",                      // Text for Button 1 (null to hide all buttons)
    btn1Link: null,                         // Link for Button 1 (null or '#' for dismiss only)
    btn1Dismiss: true,                      // Dismiss notification after Button 1 pressed (useful if link is function)
    btn1NewTab: false,                      // Open Button 1 Link in New Tab (ignored if link is set to dismiss)

    btn2Text: "Go",                         // Text for Button 2 (null to hide second button)
    btn2Link: null,                         // Link for Button 2 (null or '#' for dismiss only)
    btn2Dismiss: true,                      // Dismiss notification after Button 2 pressed (useful if link is function)
    btn2NewTab: false,                      // Open Button 2 Link in New Tab (ignored if link is set to dismiss)
}

Example Usage:

macOSNotif({
    title:'Dual button notification',
    subtitle:'Two buttons; dismiss and a link (opens in a new tab)',
    btn1Text:'Close',
    btn1Link:null,
    btn2Link:'Author',
    btn2Link:'https://mattcowley.co.uk/',
    btn2NewTab:true
})

macOSNotif({
    title:'Single button notification',
    subtitle:'A single button to dismiss the notification',
    btn2Text:null
})

macOSNotif({
    title:'Main body link notification',
    subtitle:'The main notification body is a link (opens in a new tab)',
    mainLink:'https://mattcowley.co.uk/',
    mainLinkNewTab:true
})

macOSNotif({
    title:'No button notification',
    subtitle:'The main body link dismisses the notification',
    mainLink:'#',
    btn1Text:null
})

macOSNotif({
    title:'Image (icon) notification with link',
    subtitle:'Has an icon which also has a link',
    imageSrc:'https://mattcowley.co.uk/me.png',
    imageLink:'https://mattcowley.co.uk/',
    imageLinkNewTab:true
})

macOSNotif({
    title:'Dark mode notification',
    subtitle:'Emulates the macOS dark mode styling',
    dark:true,
    mainLink:'#',
    btn1Text:'Dark',
    btn1Dismiss:false,
    btn1Link:function(n){n.dark();},
    btn2Text:'Light',
    btn2Dismiss:false,
    btn2Link:function(n){n.light();}
})

macOSNotif({
    title:'Sound (alert) notification',
    subtitle:'Requires user interaction first on some browsers',
    sounds:true
})

macOSNotifJS
macOSNotifJS is a plugin created by Matt Cowley.

macOSNotifJS - v0.0.4 - 2018-11-12