mattipv4 / macosnotifjs

A simple Javascript plugin to create simulated macOS notifications on your website.

A simple Javascript plugin to create simulated macOS notifications on your website.

---

Installation, Usage and About

Please use the macOSNotifJS website for information on installation & usage:
macosnotif.js.org

Huge thanks to @Spring3 for refactoring this whole project from my original mess into a functional, distributable plugin.

Contributing

Contributions are always welcome to this project!
Take a look at any existing issues on this repository for starting places to help contribute towards, or simply create your own new contribution to the project.

Please make sure to follow the existing standards within the project such as code styles, naming conventions and commenting/documentation.

When you are ready, simply create a pull request for your contribution and I will review it whenever I can!

Donating

You can also help me and the project out by contributing through a donation on PayPal or by supporting me monthly on my Patreon page.

Discussion, Support and Issues

Need support with this project, have found an issue or want to chat with others about contributing to the project?

Please check the project's issues page first for support & bugs!

Not found what you need here?

• If you have an issue, please create a GitHub issue here to report the situation, include as much detail as you can!
• or, You can join our Slack workspace to discuss any issue, to get support for the project or to chat with contributors and myself:

macosnotifjs's Issues

When click Dismiss, how to Ajax ?

Hello Guys,
Please, how can i make ajax request, when user click @ DISMISS btn ?
I should use that make the notification read by the user.
Thanks !
Guilherme

Support button customisation for 'alert' type notification

Currently the 'alert' notification has two buttons with limited control.
Allow for the buttons to both do anything and add support for only having one large button.

Additionally, add support for an icon for the 'alert' notification type.

Multiple notifications leads to old ones being non-draggable

If multiple notifications are triggered and displayed, only the top one is dismiss-able via a drag. All notifications below it appear to lose their events and will no longer be drag-able.

Add notification sound

Add the macOS notification sound as an option when the notification shows.

JS function as a link for a button

Expected Behaviour

Within the documentation, it should be explained that the Link options can also be a JavaScript function instead of a URL string, which will be called when the user presses the button.

Current Behaviour

This is not documented and only shown through one example on the site (theme switching notification).

Development Environment

N/A

Steps to Reproduce

1. https://macosnotif.js.org

Context

#18

Additional Comments

N/A

Proper issue templates

Expected Behaviour

The project should make use of the newer GitHub issues workflow to provide issue templates for bug reports, feature requests and general help questions.

Current Behaviour

Currently we have a generic issue template with a focus on bug reporting.

Development Environment

N/A

Steps to Reproduce

N/A

Context

N/A

Additional Comments

N/A

Notification overflow

Expected Behaviour

When too many notifications are generated than can fit on the page and the threshold is set to allow this, the system should allow for vertical scrolling through the notifications.

Current Behaviour

They overflow beyond the viewport and aren't accessible until higher up notifications are dismissed.

Development Environment

Safari Version 13.0 (15608.1.24.40.4)

Steps to Reproduce

1. Load a test page with macOSNotifJS present.
2. Set the threshold for the notifications to 100 before they will fade away.
   macOSNotifFadeThreshold = 100
3. Spawn 100 notifications.
   for (var i = 0; i < 100; i++) { macOSNotif() }

Context

N/A

Additional Comments

N/A

Title-Subtitle For Long Text- Multiline

Hi,
Thanks for this library, basic and useful for me. But I want to notify some long text or long title, ellipsis word wrap or static height dont allow to multiline subtitle, so user can not see all text for notification. Multiline and auto heighted for long text option will be favorable. Or "More" button can be helpful for user seeing all notification text.
Regards

JSDoc & improved site docs

Feature request

Feature description

The plugin needs to be fully documented with jsdoc in the code (this can be made an ESLint rule). Further, the site should not only document the options but all public methods for an instance of the class and also any static methods.

How the feature is useful

Allow contributors to understand how everything works internally far more easily and enable any developer using the plugin to far more easily understand the controls.

ES6 to minified ES5

Currently the JS plugin (macOSNotif.js) is unminified and written with ES6.
It also relies on relative resources to run correctly.
Really this needs to be compiled to ES5 and minified.

I think babel & webpack need to be used for this but I frankly have no idea how to do it.

Support two finger dismiss swipe

Currently the two finger dismiss swipe has no threshold.

A threshold for the two finger swipe should be implemented to reduce accidental dismissal whilst scrolling. This most likely needs to be done through some tracking as the scroll event is called multiple time on mac due to its smooth scrolling.
Further, this needs to be a capturing event to stop accidental navigation away from the current page.

Drag to dismiss jumping bug

Expected Behavior

When the notification is dragged off screen to dismiss, it should ignore further interaction whilst dismissing.

Current Behavior

If you drag the notification most of the way off, let it begin to dismiss then click on it again, it will go back to its default position and not animate, then fading away.

Steps to Reproduce

1. Open demo site
2. Drag notification most of the way off screen
3. Let go of the notification to allow it to begin dismissing
4. Click and hold on notification again
5. Observe how it jumps back to default position then fades away

Additional Comments

During dismiss, the notification seems to also allow click events. It may be best to just disable all pointer interaction (click, drag, touch) whilst it is dismissing.

Add 'banner' notification type

Add the banner notification type from macOS.
Has no buttons, just icon + title + subtitle.

Section links to each title of website documentation

Expected Behaviour

The site should provide section links to each main title of the website documentation so that users can easily be linked to specific parts of the site relevant to their query.

Current Behaviour

No anchor name elements are present currently, so this doesn't work.

Development Environment

N/A

Steps to Reproduce

1. https://macosnotif.js.org

Context

N/A

Additional Comments

N/A

Distribution via NPM

Expected Behavior

Ability to load the library via NPM without the need to manually bring in the dist folder.

Current Behavior

Requires the manual copying of dist.

Development Environment

N/A

Steps to Reproduce

N/A

Context

It should be perfectly do-able to publish via NPM, it just needs the CSS file in the page as well as the script file. The user can then make calls as documented on the website.

Additional Comments

N/A

Notification Like Desktop

Hello,

Is there any possibility to display notification like desktop because I have to display this notification like desktop if I am not on current notification screen then also get notification.

Thanks.

Dark mode

With the release of 10.14 macOS now has a system wide dark mode.

This includes the native notifications which now follow the dark colour scheme if the user has dark mode enabled. Whilst a website couldn't detect this, we should implement a flag in the options for dark mode styles and have the ability for notifications to be in dark mode.