Implement a photo carousel

The layout of this is all CSS with scroll-snap. (Neat!) Also implement a
JavaScript scroll event listener that detects when photos scroll and
updates the caption and photo data.

Refactor a few parts of the photo_exif_table into partials so they can
be reused for the carousel items.

layouts/partials/photo_exif_table.html

@@ -9,10 +9,8 @@
       <tr>
         {{ if and .Lat .Long }}
         <td colspan="2" class="location">
-          {{ $lat := float .Lat }}{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
-          <data class="latitude" value="{{ $lat }}">{{ .Lat | lang.FormatNumber (cond (ne $lat 0) 3 0) }}º{{ $latDir }}</data>,
-          {{ $long := float .Long }}{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
-          <data class="longitude" value="{{ $long }}">{{ .Long | lang.FormatNumber (cond (ne $long 0) 3 0) }}º{{ $longDir }}</data>
+          <data class="latitude">{{ partial "photos/latitude.html" . }}</data>,
+          <data class="longitude">{{ partial "photos/longitude.html" . }}</data>
         </td>
         {{ end }}
         {{ if and .Tags.PixelXDimension .Tags.PixelYDimension }}
@@ -20,8 +18,8 @@
           {{ $widthpx := .Tags.PixelXDimension }}
           {{ $heightpx := .Tags.PixelYDimension }}
           {{ if and (gt $widthpx 0) (gt $heightpx 0) }}
-          {{ $megapixels := div (mul $widthpx $heightpx) 1e6 }}
-          <data value="{{ $megapixels }}">{{ $megapixels | lang.FormatNumber 0 }} MP</data> • {{ $widthpx }} × {{ $heightpx }}
+          <data class="megapixels">{{ partial "photos/megapixels.html" .Tags }}</data> • <data class="width">{{
+            $widthpx }}</data> × <data class="height">{{ $heightpx }}</data>
           {{ end }}
         </td>
         {{ end }}

layouts/partials/photos/latitude.html

@@ -0,0 +1,4 @@
+{{ $lat := float .Lat }}
+{{ $latDir := cond (eq $lat 0) "" (cond (gt $lat 0) "N" "S") }}
+{{ $formattedLat := printf "%sº%s" (.Lat | lang.FormatNumber (cond (ne $lat 0) 3 0)) $latDir }}
+{{ return $formattedLat }}

layouts/partials/photos/longitude.html

@@ -0,0 +1,4 @@
+{{ $long := float .Long }}
+{{ $longDir := cond (eq $long 0) "" (cond (gt $long 0) "E" "W") }}
+{{ $formattedLong := printf "%sº%s" (.Long | lang.FormatNumber (cond (ne $long 0) 3 0)) $longDir }}
+{{ return $formattedLong }}

layouts/partials/photos/megapixels.html

@@ -0,0 +1,8 @@
+{{ $widthpx := .PixelXDimension }}
+{{ $heightpx := .PixelYDimension }}
+{{ $megapixels := 0 }}
+{{ if and (gt $widthpx 0) (gt $heightpx 0) }}
+  {{ $megapixels = div (mul $widthpx $heightpx) 1e6 }}
+{{ end }}
+{{ $formattedMegapixels := printf "%.0f MP" $megapixels }}
+{{ return $formattedMegapixels }}

layouts/photos/single.html

@@ -12,29 +12,56 @@
   {{ errorf "Missing photo from photos page %q" .Path }}
 {{ end }}
 
+{{- $firstImage := index $photos 0 -}}
 {{ if eq (len $photos) 1 }}
-  {{- $img := index $photos 0 -}}
-  <figure><img src="{{ $img.RelPermalink }}"{{ with $img.Params.alt }} alt="{{ . }}"{{ end }}></figure>
-
-  {{ .Content }}
-
-  {{- if .Params.photo_details | default true -}}
-    {{- partial "photo_exif_table.html" $img.Exif -}}
-
-    {{- if in ($.Site.BaseURL | string) "localhost" -}}
-      {{- partial "development/photo_exif_table.html" $img.Exif -}}
-    {{- end -}}
-  {{- end -}}
-{{ else }}
   <figure>
-    <ul class="carousel">
+    <img src="{{ $firstImage.RelPermalink }}"{{ with $firstImage.Params.alt }} alt="{{ . }}"{{ end }}>
+  </figure>
+{{ else }}
+  <figure class="carousel">
+    <div class="shadow left"></div>
+    <div class="shadow right"></div>
+    <ul>
       {{- range $photos -}}
-        <li>{{ . }}</li>
+      <li data-title="{{ .Title }}"
+          {{- with .Exif -}}
+          data-latitude="{{ partial "photos/latitude.html" . }}"
+          data-longitude="{{ partial "photos/longitude.html" . }}"
+          {{- with .Tags -}}
+          data-make="{{ .Make }}"
+          data-model="{{ .Model }}"
+          data-iso="{{ .ISOSpeedRatings }}"
+          data-focal-length="{{ .FocalLengthIn35mmFilm }}"
+          data-f-number="{{ .FNumber }}"
+          data-exposure-time="{{ .ExposureTime }}"
+          data-megapixels="{{ partial "photos/megapixels.html" . }}"
+          data-width="{{ .PixelXDimension }}"
+          data-height="{{ .PixelYDimension }}"
+          {{- end -}}
+          {{- end -}}
+          >
+        <img src="{{ .RelPermalink }}"{{ with .Params.alt }} alt="{{ . }}"{{ end }}>
+      </li>
       {{- end -}}
     </ul>
+    <figcaption>
+      {{ $firstImage.Title }}
+    </figcaption>
   </figure>
 {{ end }}
 
+<section id="content">
+  {{ .Content }}
+</section>
+
+{{- if .Params.photo_details | default true -}}
+  {{- partial "photo_exif_table.html" $firstImage.Exif -}}
+
+  {{- if in ($.Site.BaseURL | string) "localhost" -}}
+    {{- partial "development/photo_exif_table.html" $firstImage.Exif -}}
+  {{- end -}}
+{{- end -}}
+
 <footer>
   {{ partial "footer_tags.html" . }}
 </footer>
@@ -43,3 +70,12 @@
 {{ define "footer" }}
   {{ partial "footer.html" . }}
 {{ end }}
+
+{{ define "scripts" }}
+{{- $photos := partial "photos/list.html" . -}}
+{{ if gt (len $photos) 1 }}
+    {{ with resources.Get "scripts/photo_carousel.js" | fingerprint "md5" }}
+        <script src="{{ .RelPermalink }}"></script>
+    {{ end }}
+{{ end }}
+{{ end }}