Skip to content

Instantly share code, notes, and snippets.

@andyxmas
Last active August 29, 2015 14:04
Show Gist options
  • Save andyxmas/ca98de6231b668ee80b1 to your computer and use it in GitHub Desktop.
Save andyxmas/ca98de6231b668ee80b1 to your computer and use it in GitHub Desktop.
Output template for Contact Details
<form id="contact-drop">
<select name="titles">
#foreach ($cur_title1 in $title.getSiblings())
#set ($item-title1 = $cur_title1.getData())
<option value="$velocityCount" data-contact="$velocityCount">$item-title1</option>
#end
</select>
</form>
#if (!$title.getSiblings().isEmpty())
#foreach ($cur_title in $title.getSiblings())
#set ($item-title = $cur_title.getData())
#foreach ($itemData in $cur_title.getChildren())
#if ($itemData.getName() == "telephone")
#set ($item-telephone = $itemData.getData())
#end
#if ($itemData.getName() == "fax")
#set ($item-fax = $itemData.getData())
#end
#if ($itemData.getName() == "email")
#set ($item-email = $itemData.getData())
#end
#if ($itemData.getName() == "location")
#set ($item-location = $itemData.getData())
#end
#if ($itemData.getName() == "location-link")
#set ($item-location-link = $itemData.getData())
#end
#if ($itemData.getName() == "opening-times")
#set ($item-opening-times = $itemData.getData())
#end
#if ($itemData.getName() == "web-url")
#set ($item-web-url = $itemData.getData())
#end
#if ($itemData.getName() == "web-title")
#set ($item-web-title = $itemData.getData())
#end
#end
<div class="contact-details" id="contact-details-$velocityCount">
## #if (!$item-title.isEmpty())
## <h3>$item-title</h3>
## #end
<ul>
#if (!$item-telephone.isEmpty())
<li><i class="fa fa-phone"></i>
<p>
<span class="contact-title">Telephone:</span>
<span class="contact-value">$item-telephone</span>
</p>
</li>
#end
#if (!$item-fax.isEmpty())
<li><i class="fa fa-fax"></i>
<p>
<span class="contact-title">Fax:</span>
<span class="contact-value">$item-fax</span>
</p>
</li>
#end
#if (!$item-email.isEmpty())
<li><i class="fa fa-send"></i>
<p>
<span class="contact-title">Email:</span>
<span class="contact-value">
<a href="mailto:$item-email">$item-email</a>
</span>
</p>
</li>
#end
#if (!$item-location.isEmpty())
<li><i class="fa fa-location-arrow"></i>
<p>
<span class="contact-title">Location:</span>
<span class="contact-value">
<a href="$item-location-link">$item-location</a>
</span>
</p>
</li>
#end
#if (!$item-opening-times.isEmpty())
<li><i class="fa fa-clock-o"></i>
<p>
<span class="contact-title">Opening Times:</span>
<span class="contact-value">$item-opening-times</span>
</p>
</li>
#end
#if ((!$item-web-url.isEmpty()) && ($item-web-url !="http://" ))
<li><i class="fa fa-flink"></i>
<p>
<span class="contact-title">Web:</span>
<span class="contact-value">
<a href="$item-web-url">$item-web-title</a>
</span>
</p>
</li>
#end
</ul>
</div>
#end
#end
<style type="text/css">
.contact-details ul{margin-left:0;}
.contact-details ul li{list-style: none; margin-bottom:5px;}
.contact-details img, .contact-details i.fa{
vertical-align: bottom;
width:20px;
height:20px;
margin-right:5px;
float:left;
font-size:19px;
}
.contact-title{font-weight: 700;}
/*sort out dodgy email address wrapping...*/
.contact-value{
max-width: 170px;
display: inline-block;
}
.contact-value a {
overflow-wrap: break-word;
}
.aui form#contact-drop{
padding: 0 0 10px 0;
}
.aui form#contact-drop select{
width: 100%;
}
.contact-title, .contact-value, .journal-content-article .contact-value a{
color: #fff!important;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script>
$('.contact-details').hide();
$('#contact-details-1').show();
$('#contact-drop select').change(function(){
$('.contact-details').hide();
var val = ($(this).children('option:selected').data('contact'));
$('#contact-details-' + val ).show();
});
</script>
#if (!$title.getSiblings().isEmpty())
#foreach ($cur_title in $title.getSiblings())
#set ($item-title = $cur_title.getData())
#foreach ($itemData in $cur_title.getChildren())
#if ($itemData.getName() == "telephone")
#set ($item-telephone = $itemData.getData())
#end
#if ($itemData.getName() == "fax")
#set ($item-fax = $itemData.getData())
#end
#if ($itemData.getName() == "email")
#set ($item-email = $itemData.getData())
#end
#if ($itemData.getName() == "location")
#set ($item-location = $itemData.getData())
#end
#if ($itemData.getName() == "location-link")
#set ($item-location-link = $itemData.getData())
#end
#if ($itemData.getName() == "web-url")
#set ($item-web-url = $itemData.getData())
#end
#if ($itemData.getName() == "web-title")
#set ($item-web-title = $itemData.getData())
#end
#end
<div class="contact-details">
#if (!$item-title.isEmpty())
<h3>$item-title</h3>
#end
<ul>
#if (!$item-telephone.isEmpty())
<li><img alt="" src="/documents/6207125/6422706/phone+icon+2.png/1a95afc4-20f9-46c1-83a8-00525b902b18?t=1404396119018" />
<p>
<span class="contact-title">Telephone:</span>
<span class="contact-value">$item-telephone</span>
</p>
</li>
#end
#if (!$item-fax.isEmpty())
<li><img alt="" src="/documents/6207125/6379209/Fax/a32905c3-8bb4-4ff2-b26b-0ddb3b388105?t=1405080729044" />
<p>
<span class="contact-title">Fax:</span>
<span class="contact-value">$item-fax</span>
</p>
</li>
#end
#if (!$item-email.isEmpty())
<li><img alt="" src="/documents/6207125/6422706/email+icon+2.png/66acb897-d773-460e-b4d5-521eca3cd513?t=1404396119549" />
<p>
<span class="contact-title">Email:</span>
<span class="contact-value">
<a href="mailto:$item-email">$item-email</a>
</span>
</p>
</li>
#end
#if (!$item-location.isEmpty())
<li><img alt="" src="/documents/6207125/6422706/location+icon+2.png/a6ac2ec0-1e63-4398-b8aa-6a61183b165c?t=1404396119313" />
<p>
<span class="contact-title">Location:</span>
<span class="contact-value">
<a href="$item-location-link">$item-location</a>
</span>
</p>
</li>
#end
#if (!$item-web-url.isEmpty())
<li><img alt="" src="/documents/6207125/6379209/web.png/4283b0cb-95b2-4c9a-9d86-50efcfee262b?t=1405080894583" />
<p>
<span class="contact-title">Web:</span>
<span class="contact-value">
<a href="$item-web-url">$item-web-title</a>
</span>
</p>
</li>
#end
</ul>
</div>
#end
#end
<style type="text/css">
.contact-details ul{margin-left:0;}
.contact-details ul li{list-style: none; margin-bottom:5px;}
.contact-details img{vertical-align: bottom; width:20px; height:20px; margin-right:5px; float:left;}
.contact-title{font-weight: 700;}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment