ja1984 / jackbox Goto Github PK

View Code? Open in Web Editor NEW

17.0 5.0 6.0 1.05 MB

Javascript library to display notifications

Home Page: https://ja1984.github.io/jackbox/

License: GNU General Public License v3.0

HTML 16.22% JavaScript 38.06% CSS 45.73%

jackbox's Introduction

Jackbox

Display timed notifications easy

Getting started is easy

<script>
    Jackbox.init();
</script>

Adding notifications is just as easy

<script>
    Jackbox.error("Oh noes, something went wrong!");

    Jackbox.warning("Yeah, you might want to check in to that");

    Jackbox.success("Woop woop!");

    Jackbox.information("I'm only here because I can");
</script>

Adding notifications with custom settings

<script>
    var notificationCustomSettings = {
		time : 20,
		classNames: ["long-notification-class"]
	};
	
	Jackbox.information('Im a custom setting message!',notificationCustomSettings);
</script>

Customization is a breeze

<script>
    var customSettings = {
        notification: {
            time : 10, //in seconds, default is set to 5
            classNames : ["custom-class-name", "another-class-name"] //Array of classes
        }
    }
    Jackbox.init(customSettings);
</script>

Browser support

The file jackbox.polyfills.js can be used for modern browser support. IE8 and less, needs to use polyfill for Array.prototype.forEach

jackbox's People

Contributors

Stargazers

Watchers

Forkers

fredrik-oberg godric3 vish21 deawx heirema adwaitkulkarni58

jackbox's Issues

Add per notification customizable settings

Should be able to add custom settings per each notification.

var notificationSettings = {
   time: 5, 
   classNames: "custom-class-name"
}
Jackbox.error("message", notificationSettings):

Update demo button wording

Everything currently says Im a success message. It should say the type of message for an improved demo experience.

Minified files

Make sure that jackbox.min.js is based on latest updates.
Make minified version of css

Use classList for adding/removing class

Current implementation of adding and removing class is very ugly with replace.
Look in to changing to use classList, support is not 100% on all browsers so this needs to be taken care of.

Browser support
http://caniuse.com/#search=classlist

Information about classList
https://developer.mozilla.org/en/docs/Web/API/Element/classList

Existing pollyfill to look into
https://github.com/eligrey/classList.js/blob/master/classList.js

Bug: Multiple notifications, throws failed to execute 'removeChild'

To reproduce :

Open two notifications
Close one of them manually

Notifications sometimes stop counting down

Affected device
Desktop computer (Windows 10)

Browser
Chrome, latest version

Steps to reproduce
I haven't been able to reproduce at will, what I have done is open chrome dev tools, add a bunch of notifications and just drag mouse over them and sometimes they just seem to get stuck.

Add settings to readme.md

Show how to change settings globally and per notification.

Use flexbox to render notifications

Change how notifications is rendered to flexbox
Add an oldBrowserSupport-mode to render notifications as table

Steps to reproduce
I haven't been able to reproduce at will, it seems to be very random

Move buttons higher up in demo

I think getting rid of that .gif and moving the buttons up to that spot would clean things up a bit. In my opinion the .gif is good for the project readme, but the actual demo site feels redundant.

Change code to remove need for pollyfill

Should be fairly easy since we don't use forEach and classList that much.