js, css and pods template for safely displaying clickable emails addresses in wordpress sites using pods

ls_hide_email_css.css

/* since the php template outputs the email text backwards, we need to flip it back around for display*/
.xmail {
unicode-bidi: bidi-override;
direction: rtl;
}

ls_hide_email_js.js

// mail obfuscation script for somecorp.net. Each case must be unique. If users share first two letters, consider modifying to three letters. That mod would also need to be reflected in the PODS "xa" field.
function xmail(name) {
	var obj = document.getElementsByClassName('xmail');
	var i;
	for (i = 0; i < obj.length; i++) {
		if (obj[i]) {
			switch(name) {
				case 'sa': name += 'les'; break;
				case 'fi': name += 'rst.last'; break;
				case 'jo': name += 'hn.doe'; break;
				case 'ja': name += 'ne.doe'; break;
				case 'ma': name += 'rk.miller'; break;
				case 'st': name += 'eve.smith'; break;
			}
		var domain = new Array('net','.','e','m','o','s').reverse().toString();
		domain = domain.replace(/,/g,'').replace(/(e)/g,'$1corp');
		obj[i].href = 'mailto:' + name + '@' + domain + '?subject=Website%20Inquiry';
		}
	}
	return true;
}

ls_hide_email_pods_template.php

<!-- WordPress PODS setup - Requires a custom post type (such as People or Team) with additional fields "position", "extention", "email" and "xa". The {@post_title} is the name of the person and the Featured Image ( {@post_thumbnail.post_image} ) is the person's photo. "Postion" is the job title to be displayed. "Extention" is the phone extention added after a shared main phone number. "Email" is the part of the email address before the "@" symbol. "xa" is the first two letters of the email match up with the same two letters in the js portion of the solution. Yes that one was lazy. It probably should have been just a regex to read the first two characters of "email" field, but alas. It is what it is. -->
<div class="person col-4">
	{@post_thumbnail.post_image}
	<div class="card-copy noborder">
		<h3>{@post_title}</h3>
		<ul>
			<li>{@position}</li>
			<li>(800) 555-0000 *{@extension}</li>
			<li><a class="xmail" target="_blank" onmouseover="xmail('{@xa}');" onfocus="xmail('{@xa}');" href="../../contact">ten.procemos@{@email,strrev}</a></li> <!-- grabs the email & write it backwards -->
		</ul>
	</div>
</div>