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 }}