libnotify
bigbox
boldlight
@@ -70,103 +86,70 @@ Select A Theme:
Click a code sample below to see it in action:
-
- humane("Welcome Back");
-humane.log("Welcome Back");
-
-
- humane.info("Record <b>392</b> has been updated");
-
-
- humane.error("Invalid Username and/or Password");
-
-
- humane.success(["List","of","Items"]);
-
-
- humane("Second parameter takes a callback that's fired when finished", function(){
- document.body.style.backgroundColor="#6699FF";
-});
-
+ humane.log("Welcome Back")
+ humane.log("Record 392 has been updated")
+ humane.log(["List","of","Items"])
+ humane.log("Callback when finished", function(){ document.body.style.backgroundColor="#a66000" })
+ humane.log("Options can be passed", { timeout: 4000, clickToClose: true, addnCls: 'humane-error' })
+
Options
- humane.timeout = (number of milliseconds);
+ Options can be specified in a variety of ways. Either by the entire instance as shown below, or per notification, as shown above:
+ humane.timeout = 5000 // default: 2500
- Sets the delay before a message fades out.
-
- Try It:
- (2s - default)
- (5s)
- (0.5s)
- (no timeout)
-
+ Sets the delay before a message fades out (set to 0 for no timeout).
- humane.waitForMove = (true|false);
+ humane.waitForMove = true // default: false
Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)
-
- Try It:
- (default)
-
- humane.clickToClose = (true|false);
+ humane.clickToClose = true // default: false
Click or touch the notification to close
-
- Try It:
- (default)
-
- humane.remove(callback);
+ humane.addnCls = 'humane-info' // default: ''
- Force remove current notification, takes an optional callback fired when finished
-
- Try It:
- humane.remove(function(){ alert('removed') })
-
+ Specify an additional class to apply when notifying (nice when you only want to change just a little bit of the style)
-
- Customizing Options Per Type
- All the options are also customizable by type. For example, say you wanted errors to always stay up until the user moved the mouse.
-
-humane.error.waitForMove = true;
-humane.error('Stays up a until mouse move');
-humane.log('Gets removed after timeout');
- Or say you want success messages to remain up forever unless a user clicks them:
+ Create instances with humane.create
+ Create a completely new instance of humane using humane.create() .
-humane.success.timeout = 0;
-humane.success.clickToClose = true;
-humane.success('Will stay up forever until click or humane.remove()');
-humane.remove(function() { // removed }); // force remove
- Or you want all messages to have 3s timeout (3000) but 'info' messages to have shorter timeout of 1s (1000)
-
-humane.timeout = 3000;
-humane.info.timeout = 1000;
-humane.log('I'm up for 3 seconds');
-humane.info('I'm up for 1 second');
-
- Creating a Custom Notifier
- You can create your own custom notifier that takes a type plus any of the options listed above (w/ those defaults unless overridden)
-
-var error = humane.create({ type: 'error', waitForMove: true });
-error('Yikes');
+var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })
+notify.log('Custom Notifier')
- Events
- humane.js provides some events more intended for plumbing purposes, say you wanted to implement stacking or logging:
- humane.on('add' , function(type, message) { ... });
-
- Fires when a new message is added to the queue
-
- humane.on('show' , function(type, message) { ... });
+ There are a options that can also be applied when creating an instance:
+ humane.baseCls = 'humane' // default: 'humane'
- Fires when a message is about to be shown
+ Specify an base class
- humane.on('hide' , function(type, message) { ... });
+
+ Spawn notifiers with humane.spawn
+ Create a custom notifier using humane.spawn() .
+
+humane.info = humane.spawn({ addnCls: 'humane-libnotify-info', timeout: 1000 })
+humane.info('Info Themed Notifier')
+
+humane.error = humane.spawn({ addnCls: 'humane-libnotify-error', timeout: 1000 })
+humane.error('Error Themed Notifier')
+
+ Force remove current notification
+ humane.remove(function(){ alert('removed') })
- Fires when a message is hidden and removed
+ Force remove current notification, takes an optional callback fired when finished (note each instance has its own remove)
+ Go crazy
+ With all this power, you are bound to go CRAZY! Click the sample below to go crazy:
+
+var bigbox = humane.create({baseCls: 'humane-bigbox', timeout: 1000})
+bigbox.error = bigbox.spawn({addnCls: 'humane-bigbox-error'})
+bigbox.log('Oh!').error('No!')
+
+var libnotify = humane.create({baseCls: 'humane-libnotify', addnCls: 'humane-libnotify-info'})
+libnotify.log('Notified')
+
+var jacked = humane.create({baseCls: 'humane-jackedup', addnCls: 'humane-jackedup-success'})
+jacked.log("What's up here!")
+
Browser Support
Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.
