Skip to content

Commit 216d74d

Browse files
robnymanrobnyman
committed
Added rendering, changed structure
1 parent 71a3850 commit 216d74d

File tree

3 files changed

+223
-0
lines changed

3 files changed

+223
-0
lines changed

‎telephone-sms/css/base.css

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
/* General font styles */
2+
html {
3+
font: 100%/1.3 Verdana, Helvetica, Arial, sans-serif;
4+
height: 100%;
5+
}
6+
7+
body {
8+
font: 70%/1.3 Verdana, Helvetica, Arial, sans-serif;
9+
}
10+
11+
h1 {
12+
font: bold 2em Arial, sans-serif;
13+
}
14+
15+
h2 {
16+
font: bold 1.5em Arial, sans-serif;
17+
}
18+
19+
h3 {
20+
font: bold 1.25em Arial, sans-serif;
21+
}
22+
23+
h4 {
24+
font: bold 1.1em Arial, sans-serif;
25+
}
26+
27+
/* Default resetting */
28+
html, body, form, fieldset, legend, dt, dd {
29+
margin: 0;
30+
padding: 0;
31+
}
32+
33+
h1, h2, h3, h4, h5, h6, p, ul, ol, dl {
34+
margin: 0 0 1em;
35+
padding: 0;
36+
}
37+
38+
h1, h2, h3, h4, h5, h6 {
39+
margin-bottom: 0.5em;
40+
}
41+
42+
h2 {
43+
margin-top: 20px;
44+
}
45+
46+
pre {
47+
font-size: 1.5em;
48+
}
49+
50+
li, dd {
51+
margin-left: 1.5em;
52+
}
53+
54+
img {
55+
border: none;
56+
vertical-align: middle;
57+
}
58+
59+
/* Basic element styles */
60+
a {
61+
color: #000;
62+
}
63+
64+
a:hover {
65+
text-decoration: underline;
66+
}
67+
68+
html {
69+
color: #000;
70+
min-height: 100%;
71+
}
72+
73+
body {
74+
min-height: 100%;
75+
background-image: -moz-linear-gradient(top, #ccc, #fff);
76+
background-image: -webkit-linear-gradient(top, #ccc, #fff);
77+
padding-top: 20px;
78+
}
79+
80+
81+
body {
82+
margin-bottom: 30px;
83+
}
84+
85+
ul {
86+
margin: 10px 0;
87+
}
88+
89+
90+
/* Structure */
91+
.container {
92+
width: 560px;
93+
min-height: 600px;
94+
background: #fff;
95+
border: 1px solid #ccc;
96+
border-top: none;
97+
margin: 0 auto;
98+
padding: 20px;
99+
-moz-border-radius: 10px;
100+
-webkit-border-radius: 10px;
101+
border-radius: 10px;
102+
-moz-box-shadow: 1px 1px 10px #000;
103+
-webkit-box-shadow: 1px 1px 5px #000;
104+
box-shadow: 1px 1px 10px #000;
105+
}
106+
107+
@media screen and (max-width: 320px) {
108+
#container {
109+
width: 280px;
110+
padding: 10px;
111+
}
112+
}
113+
114+
button {
115+
display: block;
116+
margin-bottom: 20px;
117+
}
118+
119+
#battery-supported {
120+
color: #f00;
121+
}
122+
123+
.footer {
124+
border-top: 1px solid #000;
125+
margin-top: 30px;
126+
padding-top: 10px;
127+
}

‎telephone-sms/index.html

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Telephony API and SMP API</title>
6+
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
7+
</head>
8+
9+
<body>
10+
11+
<div class="container">
12+
<h1>
13+
Telephony API and SMP API
14+
</h1>
15+
16+
<section class="main-content">
17+
18+
</section>
19+
20+
<p class="footer">All the code is on <a href="https://github.com/robnyman/robnyman.github.com/tree/master/">GitHub</a>.</p>
21+
</div>
22+
23+
24+
<script src="js/telephone-sms.js"></script>
25+
26+
27+
</body>
28+
</html>

‎telephone-sms/js/telephone-sms.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Telephony object
2+
var tel = navigator.mozTelephony;
3+
4+
// Check if the phone is muted (read/write property)
5+
console.log(tel.muted);
6+
7+
// Check if the speaker is enabled (read/write property)
8+
console.log(tel.speakerEnabled);
9+
10+
// Place a call
11+
var call = tel.dial("123456789");
12+
13+
// Events for that call
14+
call.onstatechange = function (event) {
15+
/*
16+
Possible values for state:
17+
"dialing", "ringing", "busy", "connecting", "connected",
18+
"disconnecting", "disconnected", "incoming"
19+
*/
20+
console.log(event.state);
21+
};
22+
23+
// Above options as direct events
24+
call.onconnected = function () {
25+
// Call was connected
26+
};
27+
28+
call.ondisconnected = function () {
29+
// Call was disconnected
30+
};
31+
32+
33+
34+
// Receiving a call
35+
tel.onincoming = function (event) {
36+
var incomingCall = event.call;
37+
38+
// Get the number of the incoming call
39+
console.log(incomingCall.number);
40+
41+
// Answer the call
42+
incomingCall.answer();
43+
};
44+
45+
// Disconnect a call
46+
call.hangUp();
47+
48+
49+
// Iterating over calls, and taking action depending on their changed status
50+
tel.oncallschanged = function (event) {
51+
tel.calls.forEach(function (call) {
52+
// Log the state of each call
53+
console.log(call.state);
54+
});
55+
};
56+
57+
58+
// SMS object
59+
var sms = navigator.mozSMS;
60+
61+
// Send a message
62+
sms.send("123456789", "Hello world!");
63+
64+
// Receive a message
65+
sms.onreceived = function (event) {
66+
// Read message
67+
console.log(event.message);
68+
};

0 commit comments

Comments
 (0)