62 lines
2.7 KiB
HTML
62 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head></head>
|
|
<body>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var tabs = document.querySelectorAll('.tabbed-media-content-media-item[data-tab-id="tabbed-content-0"]');
|
|
if(tabs.length > 0) tabs[0].classList.add('is-active');
|
|
|
|
var panels = document.querySelectorAll('#tabbed-content-0.tab-content-panel');
|
|
if(panels.length > 0) panels[0].classList.add('is-active');
|
|
|
|
var labels = document.querySelectorAll('a.tab-label[aria-controls="tabbed-content-0"]');
|
|
if(labels.length > 0) labels[0].setAttribute('aria-selected', 'true');
|
|
|
|
var allLabels = document.querySelectorAll('.tab-labels-inner .tab-label');
|
|
allLabels.forEach(function(label) {
|
|
label.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
allLabels.forEach(function(l) { l.setAttribute('aria-selected', 'false'); });
|
|
this.setAttribute('aria-selected', 'true');
|
|
|
|
var targetId = this.getAttribute('aria-controls');
|
|
document.querySelectorAll('.tab-content-panel').forEach(function(p) { p.classList.remove('is-active'); });
|
|
document.querySelectorAll('.tabbed-media-content-media-item').forEach(function(m) {
|
|
m.classList.remove('is-active');
|
|
var img = m.querySelector('.f--image');
|
|
if(img) img.style.display = 'block';
|
|
var btnContainer = m.querySelector('.f--field.f--button');
|
|
if(btnContainer) btnContainer.style.display = 'block';
|
|
var iframe = m.querySelector('iframe');
|
|
if(iframe) iframe.removeAttribute('src'); // Stop video playing if they switch tabs
|
|
});
|
|
|
|
var targetPanel = document.getElementById(targetId);
|
|
if(targetPanel) targetPanel.classList.add('is-active');
|
|
var targetMedia = document.querySelector('.tabbed-media-content-media-item[data-tab-id="' + targetId + '"]');
|
|
if(targetMedia) targetMedia.classList.add('is-active');
|
|
});
|
|
});
|
|
|
|
var playButtons = document.querySelectorAll('.tabbed-media-content-media-item .button-play');
|
|
playButtons.forEach(function(btn) {
|
|
btn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
var mediaItem = this.closest('.tabbed-media-content-media-item');
|
|
var img = mediaItem.querySelector('.f--image');
|
|
var btnContainer = mediaItem.querySelector('.f--field.f--button');
|
|
var iframe = mediaItem.querySelector('iframe');
|
|
|
|
if(img) img.style.display = 'none';
|
|
if(btnContainer) btnContainer.style.display = 'none';
|
|
if(iframe && iframe.getAttribute('data-src')) {
|
|
iframe.setAttribute('src', iframe.getAttribute('data-src'));
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|