I’m creating a team page with modal popups for bio.
I’m using Hugo with Babel JS as the framework. There is no bootstrap on this project.
HTML
<div class="team-ui">
{{ with .Params.executive_team }}
{{ range . }}
{{ partial "components/modalTeammate.html" . }}
{{ end }}
{{ end }}
</div>
{{ with .Params.executive_team }}
{{ range . }}
{{ partial "components/modalTeammateBio.html" . }}
{{ end }}
{{ end }}
modalTeammate.html
<div class="teammate-card trigger" data-id="#myBio-{{ .modal_id }}" data-toggle="modal" data-target="myBio-{{ .modal_id }}" id="trigger">
<img src="{{ if .img_overwrite }}/uploads/headshot-{{ .img_overwrite }}.png{{ else }}/uploads/headshot-{{ .name }}.png{{ end }}" alt="{{ .name }} | {{ .job_title }}" loading="lazy" class="teammate-img">
<p class="teammate-name">{{ .name }}</p>
<p class="teammate-jobtitle">{{ .job_title }}</p>
</div>
modalTeammateBio.html
<div class="modal myBio-{{ .modal_id }}" tabindex="-1" role="dialog" aria-hidden="true" id="myBio-{{ .modal_id }}">
<div class="modal-content">
<div class="modal-body">
<div class="bio-box">
<div class="bio-box-sidebar">
<img src="{{ if .img_overwrite }}/uploads/headshot-{{ .img_overwrite }}.png{{ else }}/uploads/headshot-{{ .name }}.png{{ end }}" alt="{{ .name }} | {{ .job_title }}" loading="lazy" class="teammate-img">
<p class="teammate-name">{{ .name }}</p>
<p class="teammate-jobtitle">{{ if .job_title_long }}{{ .job_title_long }}{{ else }}{{ .job_title }}{{ end }}</p>
</div>
<div class="bio-box-content">
{{ with .bio }}
{{ range . }}
<p class="has-margin-bottom-half">{{ .p }}</p>
{{ end }}
{{ end }}
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</div>
</div>
</div>
Current JS
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var videoID = trigger.getAttribute('data-id');
var closeButton = document.querySelector(".modal-close");
// YouTube Player API Reference
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoID
});
}
function toggleModal(e) {
if (!modal.classList.contains("is-active")) {
modal.classList.add("is-active");
player.playVideo()
}
else {
modal.classList.remove("is-active");
player.pauseVideo()
}
}
function windowOnClick(e) {
if (e.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
I know I’m missing something, but I’m not sure what else I can do.
I’m using this oringal code as an example and a base.
<a href="#" data-id="{{.Get "youtube"}}" class="button is-warning trigger" data-toggle="modal" id="trigger">Watch the Video</a>
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="modal-body" id="player">
Content
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script src="/js/modal.js"></script>
