Email Signature Generator

Brand Site

by storebox

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div>
  <h2>Storebox Email-Signaturen-Generator:</h2>
  <ol>
    <li>Füllen Sie alle zutreffenden Felder aus (Richtiline Telefonnummer: <a target="_blank" href="https://yourstorebox.atlassian.net/wiki/spaces/AO/pages/1320124417/Telefonnummer+f+r+Visitenkarten+Signaturen">https://yourstorebox.atlassian.net/wiki/spaces/AO/pages/1320124417/Telefonnummer+f+r+Visitenkarten+Signaturen</a>).</li>
    <li>Fahren Sie mit den Anweisungen für Ihren Client (Google Mail) unter "Email client instructions" fort.</li>
  </ol>
</div>
<div>
<h3>Deine Informationen:</h3>

<div id='inputs'>
  <table>
    <tr>
      <td>
        <label for='name'>Name*:</label>
      </td>
      <td>
        <input id='name' placeholder='Vor- & Nachname'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='position'>Position*:</label>
      </td>
      <td>
        <input id='position' placeholder='Meine Position bei Storebox'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='email'>Email*:</label>
      </td>
      <td>
        <input id='email' placeholder='[email protected]'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='fpCity'>FP City:</label>
      </td>
      <td>
        <input id='fpCity' placeholder='Wien'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='fpAddress'>FP Address:</label>
      </td>
      <td>
        <input id='fpAddress' placeholder='Grohgasse 9, 1050 Wien'/>
      </td>
    </tr>
    <tr>
      <td>
        <label for='phone1'><a target="_blank" href="https://yourstorebox.atlassian.net/wiki/spaces/AO/pages/1320124417/Telefonnummer+f+r+Visitenkarten+Signaturen">Telefon(AT)</a>:</label>
      </td>
      <td>
        <input id='phone1' value='' placeholder='0800 366 644'/>
      </td>
      <td>Bsp: 0800 366 644</td>
    </tr>
    <tr>
      <td>
        <label for='phone2'><a target="_blank"...

CSS

body { font-family: sans-serif; }
#inputs {
  /* width: 250px; */
}
#inputs input {
  padding:10px 20px; 
}
hr {
  margin: 30px 0;
}
h3 + hr {
  margin-top: -5px;
}
hr + h3 {
  margin-top: -15px;
}
.controls {
  float: right;
  line-height: 35px;
  margin-top: 30px;
}
.controls .select, .controls .save, .controls a {
  border: none;
  background: #82bf3a;
  color: #fff;
  cursor: pointer;
  font-family: Helvetica;
  font-size: 13px;
  padding: 7px 15px;
  text-decoration: none;
}
.controls a {
  background: green;
  display: none;
}
.underline {
  text-decoration: underline;
}
.hidden {
  display: none;
}
select {
  width: 194px;
  height: 38px;
}

JavaScript

function minify_html(htmlString) {
  var myHtmlString = htmlString.replace(/(<(pre|script|style|textarea)[^]+?<\/\2)|(^|>)\s+|\s+(?=<|$)/g, "$1$3");
  return myHtmlString.replace(/style=\"\"/gm, '');
}; 

// from SO: http://stackoverflow.com/a/987376/1592915
function selectText(element) {
  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();        
    range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

$('.controls > .select').click( function() {
  var signature_id = $($(this).parents('.controls')[0]).data('sig');
  console.log(signature_id);
  console.log($('#' + signature_id));
  console.log($('#' + signature_id)[0]);  
  selectText($('#' + signature_id)[0]);
});

$('.controls > .save').click(function() {
  var link = $(this).siblings('a')[0];
  var sig_div = $('#' + $(this).parents('.controls').data('sig') + '_container');
  var sig_html = minify_html($(sig_div).html());
  sig_html = sig_html.replace(' id="signature_2_container"','');
  sig_html = sig_html.replace(' id="signature_2"', '');
  $(link).attr('href', 'data:text/html, ' + sig_html);
  $(this).hide();
  $(link).show();
});

$('.addressDe').hide();
$('select[name="country"]').change(function(e) {
  if(this.value == "germany"){
  	$('.addressDe').show();
    $('.addressAt').hide();
  }
  if(this.value == "austria"){
  	$('.addressDe').hide();
    $('.addressAt').show();
  }
  if(this.value == "no-country"){
  	$('.addressDe').hide();
    $('.addressAt').hide();
  }  
});

// FP City Info
$('#fp-city-row').hide();
$('#f-logo').hide();
$('#fpCity').keyup(function(e) {
  var val = $(this).val();
  if(val != ""){
		$('#fp-city-row').show();
    $('.fp-addressr-row').show();
    $('.addressDe').hide();
    $('.addressAt').hide();
    $('#logo').hide();
   ...