-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
225 lines (192 loc) · 8.33 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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Load a couple fonts from Google Fonts (https://www.google.com/fonts) chosen via http://fontpair.co/ -->
<link href='https://fonts.googleapis.com/css?family=Lato|Merriweather' rel='stylesheet' type='text/css'>
<style>
@media (min-device-width: 375px) and (max-device-width: 667px) {
/* When we're on an iPhone (see https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries for more on media queries, and http://stephen.io/mediaqueries/#iPhone for the calibration for iPhones) */
h1,
.message {
width: 100%;
}
}
@media (min-device-width: 668px) {
/* Set our width to 100% when we're one a device bigger than 668px */
h1,
.message {
width: 50%;
}
}
#messageDisplay {
/* Styling for when we have a no data message… */
font-family: 'Merriweather', serif;
text-align: center;
}
/* Making our "no data" message pulsate */
@keyframes pulse-fade {
0% {
opacity: 0.25;
}
100% {
opacity: 1;
}
}
.nodata {
animation-name: pulse-fade;
animation-duration: 2s;
animation-timing-function: linear;
animation-direction: alternate;
animation-iteration-count: infinite;
font-size: 2em;
}
h1 {
font-family: 'Lato', sans-serif;
}
.message {
font-family: 'Merriweather', serif;
}
h1,
.message {
/* Style our message and header, device independent */
text-align: center;
margin-left: auto;
margin-right: auto;
}
.message > div {
/* Styling our cells */
color: #333;
/* Check out https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow; we use it to truncate messages that are too long and replace with an ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Geometry */
max-height: 1em;
width: calc(100%/3 - 2em);
padding: 1em;
display: inline-block;
}
/* We use the nth-child pseudoclass to style even and odd rows differently; you can read more at https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child */
.message:nth-child(even) {
/* Color even rows */
background-color: #FFF5E1;
opacity: 0.875;
}
.message:nth-child(odd) {
/* Color odd rows */
background-color: #F4D8E1;
}
html {
background-color: #9D95B7;
}
#sms {
/*Styling our number*/
color: #58488A;
}
</style>
</head>
<body>
<h1>If you're interested, text <span id='sms'>(617) 870–0392</span></h1>
<div id='messageDisplay'>
</div>
<!-- Load the Firebase library, see https://www.firebase.com/docs/web/quickstart.html for more -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>
<script>
// An object for the Messages we receive— we need a unique id, a number, a name, and the message
var prettyifyName = function(rawName) {
var prettyName = rawName.split(' '); // Get the first and last name as an array
prettyName = prettyName.map(function(name) { // Replace each element of the array with a properly capitalized word
name = name.toLowerCase(); // First convert it to lowercase
name = name[0].toUpperCase() + name.slice(1); // Then uppercase the first letter; see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt for more
return name;
});
return prettyName.reverse().join(' '); // Then flip our array (since we get the information as last/first) and rejoin the array to make a string
};
var prettyifyNumber = function(number) {
// Make our number look pretty by formatting it with an area code and en-dash
var prettyNum = number.replace(/^\+1/, ''); // Delete the `+1` at the beginning; see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace for more
prettyNum = Array.prototype.slice.call(prettyNum); // Convert prettyNum to an Array so we can use `splice` (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) to insert characters
[
[0, '('], // Insert a `(` at the 0th element…
[4, ') '],
[8, '-']
].forEach(function(splicePair) { // For each of those pairs
prettyNum.splice(splicePair[0], 0, splicePair[1]); // Insert the second element of the pair at the index indicated by the first element
});
return prettyNum.join(''); // Rejoin our array to make it a string
};
// A small helper function which we can give some text and a dictionary of attributes and get back a div with those attributes (for making our cells)
var divWrap = function(innerText, attrs) {
// Make a div
var div = document.createElement('div');
// Set its innerText
div.innerText = innerText;
// For each attribute
Object.keys(attrs).forEach(function(attr) {
div.setAttribute(attr, attrs[attr]); // Set the div's attribute
});
return div;
};
var Message = function(messageSid, fromNum, fromName, body) {
var self = this;
// Store the messageSid twilio gives us
self.messageSid = messageSid;
// And our number, prettyified
self.fromNum = prettyifyNumber(fromNum);
// And our name, prettyified
self.fromName = prettyifyName(fromName);
// And whatever message they send us
self.body = body;
// Make an empty `div` with the class of `message` which will act as our row
self.rowDiv = divWrap('', {
class: 'message'
});
[ // For each of our cells, create a div with a particular class for formatting
[self.fromName, 'name'], // e.g. create a div with `self.fromName` as its content, with the class `name`
[self.fromNum, 'number'],
[self.body, 'body']
].forEach(function(cellPair) {
var content = cellPair[0];
var attrList = {
class: cellPair[1]
};
// And append a div with the right attributes for each cell
self.rowDiv.appendChild(divWrap(content, attrList));
});
};
// Grab where we'll display our messages…
var messageDisplay = document.getElementById('messageDisplay');
// Initialize an empty array to store all our Message objects
var messages = [];
// Connect to our Firebase app
var fb = new Firebase("https://sms-web.firebaseio.com/");
fb.on('value', function(snapshot) { // Whenever there is data and/or the data changes
var data = snapshot.val(); // Grab the database as JSON
if (data) { // If we have any data
messageDisplay.innerHTML = ''; // Clear out the innerHTML
// Grab all the currently loaded messages's messageSid's so we can skip over rendering them
var messageSids = messages.map(function(m) {
return m.messageSid
});
Object.keys(data).forEach(function(mid) { // Go through each record (whose key is the messageSid twilio gives us)
// Check if the messageSid we're looking at is already in the Message objects in our message array
var isNewSid = messageSids.indexOf(mid == -1);
if (isNewSid) { // If the messageSid is new
// Create a new Message object
var newMessage = new Message(mid, data[mid].from, data[mid].name, data[mid].body)
// Add it to our array
messages.push(newMessage);
// And then add its `div` to our `messageDisplay` `div`
messageDisplay.appendChild(newMessage.rowDiv);
}
});
} else {
// If we don't have any data, say so
messageDisplay.innerHTML = "<span class='nodata'>Sorry, no data yet…</span>";
}
});
</script>
</body>
</html>