Permalink
Fetching contributors…
Cannot retrieve contributors at this time
191 lines (175 sloc) 7.58 KB
<!doctype html>
<html>
<head>
<title>humane.js</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset='utf-8'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu&v2' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:700&v2' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Ubuntu, sans-serif;
padding: 80px;
background-color: #60D6A7;
}
h1,h3 {
font-family: 'Cabin Sketch', serif;
text-shadow: -1px 0px 1px #aaa;
}
h1 {
font-size: 4em;
margin: 0
}
h3 {
font-size: 2em;
margin: 0
}
select {
font-size: 0.8em;
}
a {
text-decoration: none;
color: #a13;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
pre {
font-family: "Ubuntu Mono";
font-size: 0.9em;
width: 75%;
background-color: #007143;
border-radius: 6px;
padding: 5px 10px;
color: #fff;
cursor: pointer;
text-shadow: -1px 1px 1px #333;
box-shadow: 0px 8px 8px -8px #333;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
pre:hover {
background-color: #00ae68;
}
blockquote {
font-size: 0.8em
}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel='stylesheet' href='themes/bigbox.css'/>
<link rel='stylesheet' href='themes/boldlight.css'/>
<link rel='stylesheet' href='themes/jackedup.css'/>
<link rel='stylesheet' href='themes/libnotify.css'/>
<link rel='stylesheet' href='themes/original.css'/>
<link rel='stylesheet' href='themes/flatty.css'/>
<script src='humane.js'></script>
</head>
<body>
<a href="http://github.com/wavded/humane-js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<h1>humane.js</h1>
<p>
<strong>A simple, modern, framework-independent, well-tested, unobtrusive, notification system.</strong>
<br/>Utilizes CSS transitions when available, falls back to JS animation when not. Includes mobile support.
</p>
<h3>Select a theme:
<select onchange='humane.baseCls="humane-"+this.options[this.selectedIndex].value'>
<option selected>libnotify</option>
<option>bigbox</option>
<option>boldlight</option>
<option>jackedup</option>
<option>original</option>
<option>flatty</option>
</select>
</h3>
<p>Click a code sample below to see it in action:</p>
<pre>humane.log("Welcome Back")</pre>
<pre>humane.log("Record <b>392</b> has been updated")</pre>
<pre>humane.log(["List","of","Items"])</pre>
<pre>humane.log("Callback when finished", function(){ document.body.style.backgroundColor="#a66000" })</pre>
<pre>humane.log("Options can be passed", { timeout: 4000, clickToClose: true, addnCls: 'humane-error' })</pre>
<h3>Options</h3>
<p>Options can be specified in a variety of ways. Either by the entire instance as shown below, or per notification, as shown above:</p>
<pre>humane.timeout = 5000 // default: 2500</pre>
<blockquote>
<p>Sets the delay before a message fades out (set to <b>0</b> for no timeout).</p>
</blockquote>
<pre>humane.waitForMove = true // default: false</pre>
<blockquote>
<p>Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)</p>
</blockquote>
<pre>humane.clickToClose = true // default: false</pre>
<blockquote>
<p>Click or touch the notification to close</p>
</blockquote>
<pre>humane.timeoutAfterMove = 2000 // default: 0</pre>
<blockquote>
<p>Delay before notification disappears (useful in conjunction with waitForMove)</p>
</blockquote>
<pre>humane.addnCls = 'humane-info' // default: ''</pre>
<blockquote>
<p>Specify an additional class to apply when notifying (nice when you only want to change just a little bit of the style)</p>
</blockquote>
<h3>Create instances with humane.create</h3>
<p>Create a completely new instance of humane using <b>humane.create()</b>.</p>
<pre>
var notify = humane.create({ timeout: 4000, baseCls: 'humane-bigbox' })
notify.log('Custom Notifier')</pre>
<p>There are a options that can also be applied when creating an instance:</p>
<pre>humane.baseCls = 'humane' // default: 'humane'</pre>
<blockquote>
<p>Specify an base class</p>
</blockquote>
<h3>Spawn notifiers with humane.spawn</h3>
<p>Create a custom notifier using <b>humane.spawn()</b>.</p>
<pre>
humane.info = humane.spawn({ addnCls: 'humane-libnotify-info', timeout: 1000 })
humane.info('Info Themed Notifier')</pre>
<pre>
humane.error = humane.spawn({ addnCls: 'humane-libnotify-error', timeout: 1000 })
humane.error('Error Themed Notifier')</pre>
<h3>Force remove current notification</h3>
<pre>humane.remove(function(){ alert('removed') })</pre>
<blockquote>
<p>Force remove current notification, takes an optional callback fired when finished (note each instance has its own remove)</p>
</blockquote>
<h3>Go crazy</h3>
<p>With all this power, you are bound to go CRAZY! Click the sample below to go crazy:</p>
<pre>
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!")</pre>
<h3>Browser Support</h3>
<p>Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.</p>
<ul>
<li>Internet Explorer 7+</li>
<li>Firefox 3+</li>
<li>Chrome 9+</li>
<li>Safari 3+</li>
<li>Opera 10+</li>
<li>iOS 4+</li>
<li>Android 2+</li>
</ul>
<h3>Create A Custom Theme</h3>
<p>Humane is easily themable using <a href="http://learnboost.github.com/stylus">Stylus</a>. There are currently a few <a href='https://github.com/wavded/humane-js/wiki/Themes'>themes</a>, but I hope this grows. Send me a pull request and update the wiki with your favorite look and feel.</p>
<h3>Download and Usage</h3>
<p>Visit <a href='http://github.com/wavded/humane-js'>github page</a> to download and get more details.</p>
<script>
humane.baseCls = 'humane-libnotify'
var pretags = document.getElementsByTagName('pre')
for (var i = 0; i < pretags.length; i++) { (function(el){
el.onclick = function () {
eval(el.innerHTML)
}
}(pretags[i])) }
</script>
</body>
</html>