pepl/progressive_enhancement_jobs_mail.html

## progressive_enhancement_jobs_mail.html
<html>
<body data-domain="geizhals.at">

<span class="m">jobs</span>

<style>
  [data-domain="geizhals.at"] span.m::after
     { content: "@" "geizhals" ".at"; }
     /* @document is not widely supported */
  [data-domain="geizhals.de"] span.m::after
     { content: "@" "geizhals" ".de"; }
</style>

<script>
  var d=document;
  function m_inject(e)
  { try {
      var domain=d.body.getAttribute('data-domain');
      if (!domain) throw '@data-domain missing';
      var txt=e.textContent;
      var clone=e.cloneNode(true);
          clone.classList.remove('m');
      var link=d.createElement('a');
          link.href='mailto:'+txt+'@'+domain;
          link.classList.add('m');
          link.appendChild(clone);
          link.appendChild(d.createTextNode('@'+domain));
      e.parentNode.replaceChild(link,e);
    } catch(e) { console.log('Oops') }
  }

  function enable_m_inject()
  { var ms=Array.prototype.slice.call(
           d.querySelectorAll('span.m'));
    ms.forEach(function (m) { m_inject(m) })
  }

  d.addEventListener("load", enable_m_inject, false);
  d.addEventListener("DOMContentLoaded", enable_m_inject, false);
</script>
</body>
</html>
	<html>
	<body data-domain="geizhals.at">

	<span class="m">jobs</span>

	<style>
	[data-domain="geizhals.at"] span.m::after
	{ content: "@" "geizhals" ".at"; }
	/* @document is not widely supported */
	[data-domain="geizhals.de"] span.m::after
	{ content: "@" "geizhals" ".de"; }
	</style>

	<script>
	var d=document;
	function m_inject(e)
	{ try {
	var domain=d.body.getAttribute('data-domain');
	if (!domain) throw '@data-domain missing';
	var txt=e.textContent;
	var clone=e.cloneNode(true);
	clone.classList.remove('m');
	var link=d.createElement('a');
	link.href='mailto:'+txt+'@'+domain;
	link.classList.add('m');
	link.appendChild(clone);
	link.appendChild(d.createTextNode('@'+domain));
	e.parentNode.replaceChild(link,e);
	} catch(e) { console.log('Oops') }
	}

	function enable_m_inject()
	{ var ms=Array.prototype.slice.call(
	d.querySelectorAll('span.m'));
	ms.forEach(function (m) { m_inject(m) })
	}

	d.addEventListener("load", enable_m_inject, false);
	d.addEventListener("DOMContentLoaded", enable_m_inject, false);
	</script>
	</body>
	</html>