-
Notifications
You must be signed in to change notification settings - Fork 196
/
Copy pathindex.html
175 lines (167 loc) · 7.25 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
<!doctype html>
<html>
<head>
<title>humane.js</title>
<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: #f0f0f0;
}
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;
background-color: #fff;
border: 1px solid #aaa;
border-radius: 6px;
padding: 10px;
text-decoration: none;
}
blockquote {
font-size: 0.8em
}
</style>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link id='theme' rel='stylesheet' href='themes/libnotify.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='document.getElementById("theme").href = "themes/" + this.options[this.selectedIndex].value + ".css"'>
<option selected>libnotify</option>
<option>bigbox</option>
<option>boldlight</option>
<option>jackedup</option>
<option>original</option>
</select>
</h3>
<p>Click a code sample below to see it in action:</p>
<a href='javascript:humane.log("Welcome Back")'>
<pre>humane("Welcome Back");
humane.log("Welcome Back");</pre>
</a>
<a href='javascript:humane.info("Record <b>392</b> has been updated")'>
<pre>humane.info("Record <b>392</b> has been updated");</pre>
</a>
<a href='javascript:humane.error("Invalid Username and/or Password")'>
<pre>humane.error("Invalid Username and/or Password");</pre>
</a>
<a href='javascript:humane.success(["List","of","Items"])'>
<pre>humane.success(["List","of","Items"]);</pre>
</a>
<a href='javascript:humane("The background color will change when finished",function(){document.body.style.backgroundColor="#6699FF"})'>
<pre>humane("Second parameter takes a callback that's fired when finished", function(){
document.body.style.backgroundColor="#6699FF";
});</pre>
</a>
<h3>Options</h3>
<pre>humane.timeout = (number of milliseconds);</pre>
<blockquote>
<p>Sets the delay before a message fades out.</p>
<p>
Try It:
<input type='radio' name='timeout' onclick='humane.timeout = 2500' checked> 2500 <small>(2s - default)</small>
<input type='radio' name='timeout' onclick='humane.timeout = 5000'> 5000 <small>(5s)</small>
<input type='radio' name='timeout' onclick='humane.timeout = 500'> 500 <small>(0.5s)</small>
<input type='radio' name='timeout' onclick='humane.timeout = 0'> 0 <small>(no timeout)</small>
</p>
</blockquote>
<pre>humane.waitForMove = (true|false);</pre>
<blockquote>
<p>Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)</p>
<p>
Try It:
<input type='radio' name='waitformove' onclick='humane.waitForMove = true'> true
<input type='radio' name='waitformove' onclick='humane.waitForMove = false' checked> false <small>(default)</small>
</p>
</blockquote>
<pre>humane.clickToClose = (true|false);</pre>
<blockquote>
<p>Click or touch the notification to close</p>
<p>
Try It:
<input type='radio' name='clickToClose' onclick='humane.clickToClose = true'> true
<input type='radio' name='clickToClose' onclick='humane.clickToClose = false' checked> false <small>(default)</small>
</p>
</blockquote>
<h3>Customizing Options Per Type</h3>
<p>All the options are also customizable by type. For example, say you wanted errors to always stay up until the user moved the mouse.</p>
<pre>
humane.error.waitForMove = true;
humane.error('Stays up a until mouse move');
humane.log('Gets removed after timeout');</pre>
<p>Or say you want success messages to remain up forever unless a user clicks them:</p>
<pre>
humane.success.timeout = 0;
humane.success.clickToClose = true;
humane.success('Will stay up forever until click or humane.remove()');</pre>
humane.remove(); // force remove
<p>Or you want all messages to have 3s timeout (3000) but 'info' messages to have shorter timeout of 1s (1000)</p>
<pre>
humane.timeout = 3000;
humane.info.timeout = 1000;
humane.log('I'm up for 3 seconds');
humane.info('I'm up for 1 second');</pre>
<h3>Events</h3>
<p>humane.js provides some events more intended for plumbing purposes, say you wanted to implement stacking or logging:</p>
<pre>humane.on(<b>'add'</b>, function(type, message) { ... });</pre>
<blockquote>
<p>Fires when a new message is added to the queue</p>
</blockquote>
<pre>humane.on(<b>'show'</b>, function(type, message) { ... });</pre>
<blockquote>
<p>Fires when a message is about to be shown</p>
</blockquote>
<pre>humane.on(<b>'hide'</b>, function(type, message) { ... });</pre>
<blockquote>
<p>Fires when a message is hidden and removed</p>
</blockquote>
<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>
</body>
</html>