From 1fc55c430257e4df3760024624919f96caa2a09e Mon Sep 17 00:00:00 2001
From: Baron Schwartz <xaprb@users.noreply.github.com>
Date: Sun, 2 Jun 2019 19:49:21 -0400
Subject: Add ability to embed slides/video on talks pages

---
 exampleSite/content/talks/adirondack.md |  1 +
 layouts/talks/single.html               | 32 ++++++++++++++++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/exampleSite/content/talks/adirondack.md b/exampleSite/content/talks/adirondack.md
index da3c3b3..7c99ead 100644
--- a/exampleSite/content/talks/adirondack.md
+++ b/exampleSite/content/talks/adirondack.md
@@ -5,6 +5,7 @@ event: "RemarkConf 2018"
 location: "Mount Remarkable, 6346+F7 Wilmington, South Australia, Australia"
 site: "https://www.environment.sa.gov.au/parks/find-a-park/Browse_by_region/flinders-ranges-outback/mount-remarkable-national-park"
 slides: slides/adirondack/
+video: "https://www.youtube.com/watch?v=aVS4W7GZSq0"
 image: "slides/adirondack/leo-serrat-533922-unsplash.jpg"
 description: "Story's Remark frameworks help you create sophisticated slides with simple, clean Markdown. There are predefined layouts for most presentation needs, beautiful typography and colors, precise image control, and a simple modular way to create custom layouts."
 thumbnail: slides/adirondack/thumbnail.jpg
diff --git a/layouts/talks/single.html b/layouts/talks/single.html
index cf86620..978951d 100644
--- a/layouts/talks/single.html
+++ b/layouts/talks/single.html
@@ -3,10 +3,10 @@
 <article class="center bg-white br-3 pv1 ph4 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide">
 		{{ .Content }}
 		{{ with .Params.slides }}
-		<p><a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . | absURL }}">Slides</a>
+		<p><a id="slides_link" class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . | absURL }}">Slides</a>
 		{{ end }}
 		{{ with .Params.video }}
-		<a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . }}">Video</a>
+		<a id="video_link" class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . }}">Video</a>
 		{{ end }}
 		{{ with .Params.site }}
 		<a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . }}">Website</a>
@@ -15,6 +15,34 @@
 		<a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="https://www.google.com/maps/place/{{ . }}">Venue</a>
 		{{ end }}
 </article>
+<script type="text/javascript">
+// Add event handlers to slide and video links, to open them in an iframe popup.
+$( function() {
+	if ( $( "#slides_link" ).length ) {
+		$("#slides_link").click(function(eventObject) {
+			eventObject.preventDefault();
+			var elem = $( this );
+			elem.parent().after($("<iframe class='h5 w-100 bn' src='" + elem.attr("href") + "'></iframe>"));
+		});
+	}
+	if ( $( "#video_link" ).length ) {
+		$("#video_link").click(function(eventObject) {
+			var elem = $( this );
+			var href = elem.attr("href");
+			switch(true) {
+				case /youtube.com/.test(href):
+					eventObject.preventDefault();
+					href = href.replace("watch?v=", "embed/");
+					elem.parent().after($("<iframe class='h5 w-100 bn' src='" + href + "' allow='accelerometer; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>"));
+				// default is just to follow the link.
+				// TODO: add a vimeo embedder here? If you're reading this source code, please submit a PR
+				// for other video sources you want to be supported here.
+			}
+		});
+	}
+});
+
+</script>
 {{ end }}
 
 {{ define "social" }}
-- 
cgit v1.2.3