-
Notifications
You must be signed in to change notification settings - Fork 196
/
index.html
190 lines (175 loc) · 7.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!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>