(function(){
var $ = function(id){ return document.getElementById(id); };
var inName = $('in-name'), inRole = $('in-role'),
inPhone = $('in-phone'), inEmail = $('in-email');
var sigName = $('sig-name'), sigRole = $('sig-role'),
sigPhone = $('sig-phone'), sigEmail = $('sig-email');
function telHref(v){ return 'tel:' + (v || '').replace(/[^\d+]/g, ''); }
function render(){
var name = inName.value.trim() || 'Your Name';
var role = inRole.value.trim() || 'Your Title';
var phone = inPhone.value.trim() || '';
var email = inEmail.value.trim() || '';
sigName.textContent = name;
sigRole.textContent = role;
sigPhone.textContent = phone;
sigPhone.setAttribute('href', telHref(phone));
sigEmail.textContent = email;
sigEmail.setAttribute('href', 'mailto:' + email);
}
[inName, inRole, inPhone, inEmail].forEach(function(el){
el.addEventListener('input', render);
});
render();
// ---- copy ----
var note = $('copyNote');
function flash(msg){
note.textContent = msg;
setTimeout(function(){ note.textContent = ''; }, 2500);
}
$('copyBtn').addEventListener('click', function(){
var el = $('sig');
var html = el.outerHTML;
var text = el.innerText;
function fallback(){
try{
var range = document.createRange();
range.selectNode(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand('copy');
sel.removeAllRanges();
flash('Copied! Paste into your Gmail signature.');
}catch(e){
flash('Press Ctrl/Cmd+C to copy the selected signature.');
}
}
if (navigator.clipboard && window.ClipboardItem){
navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([html], {type:'text/html'}),
'text/plain': new Blob([text], {type:'text/plain'})
})
]).then(function(){
flash('Copied! Paste into your Gmail signature.');
}).catch(fallback);
} else {
fallback();
}
});
})();