<div class="text-block">
'
<section class="unistats">
<h2 id="unistats">Unistats</h2>
<section class="accordion">
<div class="accordion-tablist" role="tablist">
<div class="accordion-tab">
<a id="full-time-label" href="#full-time" class="accordion-tab-title-container collapse-toggle active" data-collapse data-group="" role="tab" aria-expanded="true" aria-controls="full-time">
<h4 class="accordion-tab-title">
Full time
<span class="accordion-tab-title-indicator">
<i class="uod-icons uod-icons-chevron-down"></i>
</span>
</h4>
</a>
<div id="full-time" class="accordion-tab-content collapse active" role="tabpanel" aria-labelledby="full-time-label">
<div class="accordion-tab-content-inner">
<div class="unistats-widget-wrapper">
<p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="0" data-course="G1203" data-mode="FullTime" class="unistats-widget"></iframe></p>
</div>
</div>
</div>
</div>
<div class="accordion-tab">
<a id="part-time-label" href="#part-time" class="accordion-tab-title-container collapse-toggle" data-collapse data-group="" role="tab" aria-expanded="false" aria-controls="part-time">
<h4 class="accordion-tab-title">
Part time
<span class="accordion-tab-title-indicator">
<i class="uod-icons uod-icons-chevron-down"></i>
</span>
</h4>
</a>
<div id="part-time" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="part-time-label">
<div class="accordion-tab-content-inner">
<div class="unistats-widget-wrapper">
<p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="1" data-course="G1203" data-mode="PartTime" class="unistats-widget"></iframe></p>
</div>
</div>
</div>
</div>
<div class="accordion-tab">
<a id="full-time-with-industrial-year-label" href="#full-time-with-industrial-year" class="accordion-tab-title-container collapse-toggle" data-collapse data-group="" role="tab" aria-expanded="false" aria-controls="full-time-with-industrial-year">
<h4 class="accordion-tab-title">
Full time with industrial year
<span class="accordion-tab-title-indicator">
<i class="uod-icons uod-icons-chevron-down"></i>
</span>
</h4>
</a>
<div id="full-time-with-industrial-year" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="full-time-with-industrial-year-label">
<div class="accordion-tab-content-inner">
<div class="unistats-widget-wrapper">
<p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="2" data-course="G1203S" data-mode="FullTime" class="unistats-widget"></iframe></p>
</div>
</div>
</div>
</div>
</div>
</section>
<style type="text/css">
#udol-course-taster-exercise .accordion-tab:after {
display: inline-block;
transform: translate(0, 0);
text-rendering: auto;
font: normal normal 400 14px/1 uod-icons;
font-size: inherit;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
content: "\ea0d";
font-size: 2em;
color: #101d49;
width: 100%;
text-align: center;
padding-top: 20px;
}
#udol-course-taster-exercise .accordion-tab:last-child:after {
content: '';
padding-top: 0;
}
</style>
</section>
</div>
{#
<script>
(function (d) {
"use strict";
var widgetScript = d.createElement('script');
widgetScript.id = 'unistats-widget-script';
widgetScript.src = '//discoveruni.gov.uk/widget/embed-script';
var scriptTags = d.getElementsByTagName('script')[0];
if (d.getElementById('unistats-widget-script')) { return; }
scriptTags.parentNode.insertBefore(widgetScript, scriptTags);
} (document));
</script>
<div class="kis-widget" data-institution="10007851" data-course="G1203" data-kismode="FullTime" data-orientation="responsive" data-language="en-GB"></div>
#}
<div class="text-block">'
<section class="unistats">
<h2 id="unistats">Unistats</h2>
{% set contents = [] %}
{% for index, course in courses %}
{% set content %}
<div class="unistats-widget-wrapper">
{% if course.code %}
<p><iframe id="unistats-widget-frame" title="Unistats KIS Widget" src="about:blank" scrolling="no" data-index="{{index}}" data-course="{{course.code}}" data-mode="{{course.mode}}" class="unistats-widget"></iframe></p>
{% else %}
<p>For this combination Unistats does not have enough data to publish a widget. It is important to note that this is not a reflection on the quality of the course.</p>
{% endif %}
{% if course.courseUrl %}
<p>
{% include '@button' with {
label: 'View course',
href: course.courseUrl,
title: 'View ' ~ course.label,
} %}
</p>
{% endif %}
</div>
{% endset %}
{% set contents = contents|merge([{ label: course.label, tag: course.label|lower|replace({' ':'-'}), expanded: index == 0, content: content }]) %}
{% endfor %}
{% include '@accordion' with {
contents: contents,
modal: modal
} %}
</section>
</div>
{
"courses": [
{
"code": "G1203",
"mode": "FullTime",
"label": "Full time"
},
{
"code": "G1203",
"mode": "PartTime",
"label": "Part time"
},
{
"code": "G1203S",
"mode": "FullTime",
"label": "Full time with industrial year"
}
],
"modal": true
}
// Kick off the load on page open to load any open accordion items
(function(){
$('.unistats').find('.accordion-tab').each(function() {
if ($(this).find('.accordion-tab-content').first().height()) {
loadUnistats($(this));
}
});
})();
$('.unistats').find('.accordion-tab').on('click', function(e) {
if ($(this).find('.unistats-widget').first().attr('src') === 'about:blank') {
loadUnistats($(this));
}
});
/**
* loadUnitstats - lazy load the Unistats iframe by changing the src attribute.
* This needs to be set to "about:blank" initially as a blank src is not valid
* and will result in the iframe loading the containing page.
*
* @param tab - Object - jQuery element representing the accorion tab
*/
function loadUnistats(tab) {
var target = $(tab).find('.unistats-widget').first();
var course = target.data('course');
var mode = target.data('mode');
var targetUri = 'https://discoveruni.gov.uk/widget/10007851/' + course + '/responsive/small/en_GB/' + mode;
target.attr('src', targetUri);
}
.unistats-widget {
overflow: hidden;
border: 0px none transparent;
width: 100%;
background: $mid-grey;
&-wrapper {
width: 100%;
}
}
.unistats {
.accordion-tab-content-inner {
display: flex;
justify-content: center
}
}
Displays the Unistats banners for a course in an Accordion component, and automatically switches between the horizontal and vertical version of the banner according to the viewport dimensions. Must be supplied the unique course code and valid modes for the course.