-
Notifications
You must be signed in to change notification settings - Fork 196
/
Copy pathindex.html
148 lines (142 loc) · 6.02 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
<!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>
</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>
</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.forceNew = (true|false);</pre>
<blockquote>
<p>Force new messages to appear immediately</p>
<p>
Try It:
<input type='radio' name='forceNew' onclick='humane.forceNew = true'> true
<input type='radio' name='forceNew' onclick='humane.forceNew = 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>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 (experimental support)</li>
<li>Android (experimental support)</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>