forked from pulseenergy/enernoc-email-signature-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
385 lines (359 loc) · 18.3 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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>EnerNOC email signature generator</title>
<meta name="description" content="this github page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font: 11px/1.4 Arial, sans-serif; color: #333; text-align: center; -webkit-font-smoothing: antialiased;}
.container {width: 760px; margin: 30px auto; text-align: left;}
section.content-box {padding-left: 0px; border-left: 0px solid #eee; margin-bottom: 20px; position: relative;}
fieldset {padding: 12px 15px; border: 1px solid #e8e8e8; margin: 0 0 20px; border-radius: 2px;}
fieldset, label, button, h3 {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
fieldset.closed > p {display: none;}
h1 {font-size: 13px; margin-bottom: 0;}
h3 {background: #003e74; padding: .3em .5em; color: #fff; font-weight: bold; margin: 0 0 25px; font-size: 11px; border-radius: 2px;}
h4 {margin: 0;}
fieldset p {margin: 0;}
fieldset legend {display: block; font-weight: bold; padding: 0 6px; margin-left: -8px;}
fieldset legend label {font-weight: normal; margin-left: 5px;}
input {outline: none; box-sizing: border-box;}
.check-email {color: #003e74; display: inline-block; margin-left: 10px;}
.label {width: 80px; display: inline-block; padding: 0.3em 0; margin-top: 2px;}
.sig-input {margin-bottom: 5px; width: auto; padding: 0.3em;}
.select-address {width: 600px;}
.sig-inputs-wrapper {}
.sig-preview {margin: -25px 0 10px;}
.sig-source {padding: 0.3em; margin: 0; font-size: 11px; font-family: courier new, monospace;}
hr {border: 0; border-top: 1px solid #ddd; margin: 20px 0 0;}
textarea {width: 100%; height: 120px; border: 1px solid #ddd; outline: none; box-sizing: border-box;}
button {margin-top: 20px; cursor: pointer;}
.copy-success {color: forestgreen; display: inline-block; margin-left: 10px; visibility: hidden; opacity: 0; transition: opacity 0.5s, visibility 0.5s;}
.copy-success.visible {opacity: 1; visibility: visible; transition-duration: 0s;}
.if-zeroclipboard-enabled {display: none;}
a, a:hover {color: #003e74; text-decoration: none;}
footer a {text-decoration: underline;}
footer {color: #999; clear: both; margin: 30px 0;}
.credits {}
.footer-links {float: right;}
</style>
<script src="//cdn.jsdelivr.net/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
<script>
window.onload = function () {
var auto = {
email: true
};
var preview = document.querySelector('.sig-preview');
var source = document.querySelector('.sig-source');
var success = document.querySelector('.copy-success');
source.onfocus = function () {
source.select();
};
source.onmouseup = function () {
return false;
};
function updateSource() {
source.textContent = preview.innerHTML.replace(/^\s+/, '').replace(/\n\s+/g, '\n');
}
function formatPhoneNumber(text) {
if (!text) {
text = '';
}
var stripped = text.replace(/[-.() ]/g, '');
var match = stripped.match(/^(\+1)?(\d{3})(\d{3})(\d{4})$/);
if (match) {
text = ['+1', '(' + match[2] + ')', match[3], match[4]].join(' ');
}
return text;
}
function bindInput(name, fallback) {
input[name] = document.querySelector('[name=' + name + ']');
input[name].onchange = input[name].oninput = function (e) {
var placeholder = false;
var text = input[name].value;
if (auto.hasOwnProperty(name) && e) {
auto[name] = !text;
}
if (!text) {
text = typeof fallback === 'function' ? fallback() : fallback;
placeholder = !!text;
}
if (name === 'name' && auto['email']) {
input['email'].value = placeholder ? '' : (text.toLowerCase().replace(/ /g, '.') + '@enernoc.com');
input['email'].oninput();
}
if (name === 'address') {
var selected = input['address'].options[input['address'].selectedIndex];
input['office'].value = formatPhoneNumber(selected.getAttribute('data-office'));
input['office'].oninput();
input['fax'].value = formatPhoneNumber(selected.getAttribute('data-fax'));
input['fax'].oninput();
}
if (name === 'email') {
var check = auto['email'] && !placeholder;
document.querySelector('.check-email').style.visibility = check ? 'visible' : 'hidden';
}
if (input[name].type === 'tel') {
// format phone numbers consistently
text = formatPhoneNumber(text);
output[name].href = 'tel:' + encodeURIComponent(text);
}
if (input[name].type === 'email') {
output[name].href = 'mailto:' + text;
}
if (placeholder && input[name].getAttribute('placeholder') !== text) {
input[name].setAttribute('placeholder', text);
}
if (name === 'tagline-link-dest') {
output[name].href = 'http://' + text;
} else {
output[name].textContent = text;
}
updateSource();
};
}
var input = {};
var output = {
name: document.querySelector('.sig-preview div:nth-of-type(1) > strong'),
title: document.querySelector('.sig-preview div:nth-of-type(1) > span'),
address: document.querySelector('.sig-preview div:nth-of-type(2)'),
office: document.querySelector('.sig-preview div:nth-of-type(3) > a:nth-of-type(1)'),
mobile: document.querySelector('.sig-preview div:nth-of-type(3) > a:nth-of-type(2)'),
fax: document.querySelector('.sig-preview div:nth-of-type(3) > a:nth-of-type(3)'),
email: document.querySelector('.sig-preview div:nth-of-type(3) > a:nth-of-type(4)'),
'tagline-text': document.querySelector('.sig-preview div:nth-of-type(5) > :first-child').nextSibling, // can't css for a text node
'tagline-link': document.querySelector('.sig-preview div:nth-of-type(5) > a'),
'tagline-link-dest': document.querySelector('.sig-preview div:nth-of-type(5) > a')
};
bindInput('name', 'Michael Ellis');
bindInput('email', '[email protected]');
bindInput('title', 'Widget Supervisor');
bindInput('address');
bindInput('office', '+1 (555) 555 0199');
bindInput('mobile');
bindInput('fax');
bindInput('tagline-text', 'EnerNOC - Get more from energy');
bindInput('tagline-link', 'Read more');
bindInput('tagline-link-dest', 'www.enernoc.com');
output['tagline-text'].parentNode.insertBefore(document.createTextNode('» '), output['tagline-text']);
insertAfter(output['tagline-text'], document.createTextNode(': '));
function insertAfter(previous, node) {
if (previous.nextSibling) {
previous.parentNode.insertBefore(node, previous.nextSibling);
} else {
previous.parentNode.appendChild(node);
}
}
function toggler(removed) {
var orphan = null;
return function (show) {
if (show && orphan) {
insertAfter(orphan.anchor, orphan.node);
if (orphan.text) {
orphan.anchor.textContent = orphan.text;
}
orphan = null;
}
if (!show && !orphan) {
var previous = removed.previousSibling;
removed.parentNode.removeChild(removed);
orphan = { anchor: previous, node: removed };
if (previous.nodeType === 3) {
orphan.text = previous.textContent;
previous.textContent = '';
}
}
updateSource();
}
}
function bindToggle(checkbox, hide, fn) {
var t = toggler(hide);
checkbox.onchange = function () {
t(checkbox.checked);
fn && fn(checkbox.checked);
};
checkbox.onchange();
}
function autoToggle(name) {
var t = toggler(output[name]);
var old = input[name].oninput;
input[name].oninput = function () {
old.apply(this, arguments);
t(!!input[name].value);
}
}
autoToggle('mobile');
autoToggle('fax');
bindToggle(document.querySelector('#toggle-tagline-link'), output['tagline-link']);
var taglineInputs = document.querySelector('.tagline-inputs');
bindToggle(document.querySelector('#toggle-tagline'), output['tagline-text'].parentNode, function (checked) {
taglineInputs.classList[checked ? 'remove' : 'add']('closed');
});
var button = document.querySelector('#sig-copy-button');
if (typeof ZeroClipboard !== 'undefined') {
ZeroClipboard.config({
forceEnhancedClipboard: true
});
ZeroClipboard.on('ready', function () {
var hidden = document.querySelectorAll('.if-zeroclipboard-enabled');
for (var i = 0; i < hidden.length; i++) {
hidden[i].classList.remove('if-zeroclipboard-enabled')
}
});
var clip = new ZeroClipboard(button);
var hide;
clip.on('copy', function (event) {
var clipboard = event.clipboardData;
clipboard.setData('text/plain', source.value);
clipboard.setData('text/html', source.value);
success.classList.add('visible');
clearTimeout(hide);
hide = setTimeout(function () {
success.classList.remove('visible');
}, 2000);
});
}
// handle auto-filled inputs on page reload
Object.keys(input).forEach(function (key) {
input[key].oninput();
});
input['name'].focus();
};
</script>
</head>
<body>
<div class="container">
<section class="content-box">
<h3>Details</h3>
<fieldset class="sig-inputs-wrapper">
<legend>Personal</legend>
<p>
<label for="name">
<span class="label">Name:</span>
<input type="text" size="30" class="sig-input" id="name" name="name" value="" spellcheck="false" placeholder="Michael Ellis">
</label>
</p>
<p>
<label for="title">
<span class="label">Title:</span>
<input type="text" size="50" class="sig-input" id="title" name="title" value="" placeholder="Widget Supervisor">
</label>
</p>
<p>
<label for="address">
<span class="label">Address:</span>
<select class="sig-input select-address" id="address" name="address">
<optgroup label="Corporate Headquarters">
<option data-office="+1 617 224 9900" data-fax="+1 617 224 9910">EnerNOC, Inc. / One Marina Park Drive, Suite 400, Boston, MA 02210</option>
</optgroup>
<optgroup label="US">
<option data-office="+1 443 524 2880" data-fax="+1 443 524 2887">EnerNOC, Inc. / 1414 Key Highway, Suite 200-M, Baltimore, MD 22130</option>
<option data-office="+1 208 947 9503" data-fax="">EnerNOC, Inc. / Boise Research Center, 5771 N. Discovery Way, Boise, ID 83713</option>
<option data-office="+1 773 724 4000" data-fax="+1 847 745 0423">EnerNOC, Inc. / President's Plaza, 8700 W. Bryn Mawr Ave, Suite 650 North, Chicago, IL 60631</option>
<option data-office="+1 615 732 6151" data-fax="+1 615 732 6101">EnerNOC, Inc. / 725 Cool Springs Blvd, Suite 600, Franklin, TN 37067</option>
<option data-office="+1 949 851 2100" data-fax="+1 949 851 5136">EnerNOC, Inc. / 10 Corporate Park, Suite 120, Irvine, CA 92606</option>
<option data-office="+1 617 224 9900" data-fax="+1 212 624 0001">EnerNOC, Inc. / 100 Park Avenue, Suite 1600, New York, NY 10017</option>
<option data-office="+1 503 224 9506" data-fax="">EnerNOC, Inc. / 625 Southwest Stark Street, Suite 446, Portland, OR 97205-3719</option>
<option data-office="+1 415 343 9500" data-fax="+1 415 227 1645">EnerNOC, Inc. / 116 New Montgomery Street, Suite 700, San Francisco, CA 94105</option>
</optgroup>
<optgroup label="Canada">
<option data-office="+1 403 444 6639" data-fax="">EnerNOC, Inc. / 1000-888 Third Street SW, Bankers Hall, Calgary, AB T2P 5C5</option>
<option data-office="+1 416 800 0948" data-fax="+1 289 291 4001">EnerNOC, Inc. / 11-1155 North Service Road West, Oakville, ON L6M 3E3</option>
<option data-office="+1 613 567 5115" data-fax="+1 613 482 4722">EnerNOC, Inc. / 275 Slater Street, Suite 900, Ottawa, ON K1P 5H9</option>
<option data-office="+1 778 331 0500" data-fax="+1 778 331 0501">EnerNOC, Inc. / 576 Seymour Street, Suite 600, Vancouver, BC V6B 3K1</option>
</optgroup>
<optgroup label="South America">
<option data-office="+55 15 4009 2063" data-fax="">EnerNOC, Inc. / Rua: Romeu do Nascimento, 247 CEP: 18047-410, Jardim Portal da Colina-Sorocaba/SP</option>
</optgroup>
<optgroup label="Europe">
<option data-office="" data-fax="">EnerNOC, Inc. / Reinhardstr. 47, 10117 Berlin</option>
<option data-office="+49 69 3085 58" data-fax="+49 69 3085 5100">EnerNOC, Inc. / Post Office Box 58, Mainzer Landtr. 49, D-60329 Frankfurt am Main</option>
<option data-office="+49 89 552 9968-0" data-fax="">EnerNOC, Inc. / Claudius-Keller Str. 3c, 81669 Munich</option>
<option data-office="+353 1 442 8801" data-fax="">EnerNOC, Inc. / Fitzwilliam Business Center, 77 Sir John Rogerson's Quay, Dublin 2</option>
<option data-office="+44 113 234 4048" data-fax="+44 113 394 3824">EnerNOC, Inc. / No 3 The Bourse Boar Lane, Leeds LS1 5EN</option>
<option data-office="+44 20 7833 3353" data-fax="+44 20 7014 9486">EnerNOC, Inc. / 360-364 City Road, London EC1V 2PY</option>
<option data-office="+41 78 785 20 06" data-fax="">EnerNOC, Inc. / Seefeldstr. 4, CH-8008 Zürich</option>
</optgroup>
<optgroup label="Australia and New Zealand">
<option data-office="+61 3 8643 5900" data-fax="">EnerNOC, Inc. / 535 Bourke Street, Level 18, Melbourne VIC 3000</option>
<option data-office="+61 8 6313 3500" data-fax="+61 8 6313 3599">EnerNOC, Inc. / 359 Oxford Street, Mount Hawthorn WA 6016</option>
<option data-office="+61 2 8248 2600" data-fax="+61 2 8248 2699">EnerNOC, Inc. / Suite 805, 70 Pitt Street, Sydney NSW 2000</option>
<option data-office="+64 4 909 7546" data-fax="+64 4 909 7549">EnerNOC, Inc. / 2 Collina Terrace, PO Box 12-202 Thorndon, Wellington NZ 6144</option>
</optgroup>
<optgroup label="Asia">
<option data-office="+86 21 6418 3050" data-fax="+91 21 3416 0290">EnerNOC, Inc. / 17 G Hai Xing Plaza, 1 Rui Jin Road S, Shanghai 200023</option>
<option data-office="+91 22 4028 7450" data-fax="+91 22 2351 5460">EnerNOC, Inc. / B-25, Jaywant Ind. Estate, 62 Tardeo Road, Mumbai 400034</option>
<option data-office="+81 3 3282 4004" data-fax="">EnerNOC, Inc. / 4-2 Ohtemachi 1-Chome, Chiyoda-ku, Tokyo 100-8088</option>
<option data-office="+82 2 3452 1840" data-fax="">EnerNOC, Inc. / 7F AIA Tower, Tongil-ro 2-gil, Jung-gu, Seoul, South Korea</option>
</optgroup>
</select>
</label>
</p>
<p>
<label for="office">
<span class="label">Office #:</span>
<input type="tel" size="20" class="sig-input" id="office" name="office" value="">
</label>
</p>
<p>
<label for="mobile">
<span class="label">Mobile #:</span>
<input type="tel" size="20" class="sig-input" id="mobile" name="mobile" value="">
</label>
</p>
<p>
<label for="fax">
<span class="label">Fax #:</span>
<input type="tel" size="20" class="sig-input" id="fax" name="fax" value="">
</label>
</p>
<p>
<label for="email">
<span class="label">Email:</span>
<input type="email" size="40" class="sig-input" id="email" name="email" value="" placeholder="[email protected]"><span class="check-email">← Probably a good idea to double-check this.</span>
</label>
</p>
</fieldset>
<fieldset class="tagline-inputs">
<legend>Tagline <label><input id="toggle-tagline" type="checkbox">Include</label></legend>
<p>
<label for="tagline-text">
<span class="label">Text:</span>
<input type="text" size="60" class="sig-input" id="tagline-text" name="tagline-text" value="">
</label>
</p>
<p>
<label for="tagline-link">
<span class="label">Link text:</span>
<input type="text" size="20" class="sig-input" id="tagline-link" name="tagline-link" value=""> <label><input id="toggle-tagline-link" type="checkbox">Include</label>
</label>
</p>
<p>
<label for="tagline-link-dest">
<span class="label">Link target:</span>
http:// <input type="text" size="70" class="sig-input" id="tagline-link-dest" name="tagline-link-dest" value="">
</label>
</p>
</fieldset>
</section><!-- /.content-box -->
<section class="content-box">
<h3>Preview</h3>
<div class="sig-preview">
<div style="font-family: arial, sans-serif; font-size: 13px; line-height: 1.3; color: #999999;"> <br> <br><strong style="color: #003e74;">Michael Ellis</strong> / <span style="color: #003e74;">Widget Supervisor</span></div><div style="font-family: arial, sans-serif; font-size: 12px; line-height: 1.3; color: #999999;">EnerNOC, Inc. / 576 Seymour Street, Suite 600, Vancouver, BC V6B 3K1</div><div style="font-family: arial, sans-serif; font-size: 12px; line-height: 1.3; color: #999999;">t: <a href="tel:%2B1%20%28778%29%20331%200500" style="color: #999999; font-family: arial, sans-serif; text-decoration: none;">+1 (778) 331 0500</a> / m: <a href="tel:%2B1%20%28604%29%20555%200199" style="color: #999999; font-family: arial, sans-serif; text-decoration: none;">+1 (604) 555 0199</a> / f: <a href="tel:%2B1%20%28778%29%20331%200501" style="color: #999999; font-family: arial, sans-serif; text-decoration: none;">+1 (778) 331 0501</a> / <a href="mailto:[email protected]" style="color: #003e74; text-decoration: none;">[email protected]</a></div><div style="font-family: arial, sans-serif; font-size: 12px; line-height: 1.3; color: #999999;"><a href="http://www.enernoc.com" style="color: #003e74; text-decoration: none;">www.enernoc.com</a> / <a href="http://energysmart.enernoc.com" style="color: #003e74; text-decoration: none;">energysmart.enernoc.com</a></div><div style="font-family: arial, sans-serif; font-size: 12px; line-height: 1.3; color: #999999;"><br>» EnerNOC - Get more from energy <a href="http://www.enernoc.com" style="color: #003e74; text-decoration: none;">Read more</a></div>
</div>
<button id="sig-copy-button" class="if-zeroclipboard-enabled">Copy to clipboard</button>
<span class="copy-success if-zeroclipboard-enabled">✔ Copied to clipboard</span>
</section><!-- /.content-box -->
<section class="content-box">
<h3>HTML</h3>
<textarea cols="60" rows="4" class="sig-source" spellcheck="false"></textarea>
</section><!-- /.content-box -->
<footer>
<span class="credits">The <a href="https://github.com/pulseenergy/enernoc-email-signature-generator"> EnerNOC email signature generator</a> was hastily assembled by <a href="https://github.com/nigelzor"> Neil Gentleman</a> and <a href="https://github.com/tylerfawcett"> Tyler Fawcett</a>.</span>
<span class="footer-links"></span>
</footer>
</div>
</body>
</html>