-
Notifications
You must be signed in to change notification settings - Fork 4
/
demo.html
66 lines (62 loc) · 2.4 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>Dialer Demo</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
<link rel="stylesheet" href="dialpad.css">
<script src="vendor/att.phonenumber.js"></script>
<script src="dialpad.js"></script>
<script>
window.dialer = new Dialpad({
onPress: function (key) {
console.log('a key was pressed', key);
},
onCallableNumber: function (number) {
console.log('we have a number that seems callable', number);
},
onHide: function () {
console.log('removed it');
},
onCall: function (number) {
console.log('The call button was pressed', number);
}
});
document.addEventListener('DOMContentLoaded', function () {
document.body.insertBefore(dialer.render(), document.body.firstChild);
}, false);
</script>
</head>
<body>
<div class="container offset4 span8">
<h1>Dialer Demo</h1>
<p>dialer.js renders a dialer</p>
<p>It is meant to be used with phone-enabled web applications. It does not contain any call functionality, it's merely a self-contained UI piece meant to provide an easily customizable dialpad you can add to your app.</p>
<p>It also registers and unregisters handlers for keyboard events. So while the dialer is visible you can still use the keyboard to type in the number.</p>
<h4>How to use it:</h4>
<pre>
var dialer = new Dialer({
onPress: function (key) {
console.log('a key was pressed', key);
},
onCallableNumber: function (number) {
console.log('we have a number that seems callable', number);
},
onHide: function () {
console.log('removed it');
},
onCall: function (number) {
console.log('The call button was pressed', number);
}
});
// calling render returns the rendered dialer
// as a DOM element with all the right handlers
dialer.render();
// OPTIONALLY: you can also add event listeners later if you prefer.
dialer.on('call', function (number) {
// assuming you've created a phone object..
phone.dial(number);
});
</pre>
</div>
</body>
</html>