complete rewrite of this project

layouts/shortcodes/figure.html

@@ -1,33 +1,83 @@
 <!--
-  SPDX-FileCopyrightText: 2019 Li-Wen Yip <liwen.yip@gmail.com>
-  SPDX-FileCopyrightText: 2019 Max Mehl <mail@mehl.mx>
+  SPDX-FileCopyrightText: 2020 Max Mehl <mail@mehl.mx>
   SPDX-License-Identifier: MIT
-
-  Put this file in /layouts/shortcodes/figure.html
-  NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
-  Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
 -->
 <!-- count how many times we've called this shortcode; load the css if it's the first time -->
 {{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/snap-gallery.css" />{{ end }}
 {{- $.Page.Scratch.Add "figurecount" 1 -}}
-<!-- use either src or link-thumb for thumbnail image -->
-{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
-<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
-  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
-    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
-      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
-    </div>
-    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+<!-- use src image -->
+{{- $thumb := .Get "src" -}}
+
+<!-- set unique ID depending on whether part of gallery or alone -->
+{{- $figid := "" -}}
+{{- $galid := "" -}}
+{{- $id := "" -}}
+{{- $previd := "" -}}
+{{- $nextid := "" -}}
+{{- if .Parent -}} <!-- gallery -->
+  {{- $galid = .Page.Scratch.Get "gallery" -}}
+  {{- if not $galid }}{{ $galid = 0 }}{{ end -}}
+  {{- $galid = add $galid 1 -}}
+  {{- $.Page.Scratch.Add "thisgalfig" 1 -}}
+  {{- $figid = .Page.Scratch.Get "thisgalfig" -}}
+{{- else -}} <!-- standalone figure -->
+  {{- $.Page.Scratch.Add "nogalfig" 1 -}}
+  {{- $figid = .Page.Scratch.Get "nogalfig" -}}
+{{- end -}}
+{{- if $galid -}} <!-- gallery -->
+  {{- $id = print "gal" $galid "-" "fig" $figid -}}
+  {{- $previd = print "gal" $galid "-" "fig" (sub $figid 1) -}}
+  {{- $nextid = print "gal" $galid "-" "fig" (add $figid 1) -}}
+{{- else -}} <!-- standalone figure -->
+  {{- $id = print "fig" $figid -}}
+{{- end -}}
+
+<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
+  {{ if (.Get "link") -}}
+    <a href="{{ .Get "link" }}"
+       {{- with .Get "target" }} target="{{ . }}"{{ end -}}
+       {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
+       >
+  {{ else -}}
+    <a href="#{{ $id }}">
+  {{- end -}}
+  <!-- THUMBNAIL -->
+    <img src="{{ $thumb | relURL }}" class="snap-thumb"
+    {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
+    {{- with .Get "title" }} title="{{ . }}"{{ end -}}
+    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+     />
+    {{- if or (.Get "caption") (.Get "attr")}}
       <figcaption>
-        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
-        {{- if or (.Get "caption") (.Get "attr")}}
-          <p>
-            {{- .Get "caption" -}}
-            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
-          </p>
-        {{- end }}
+        {{- .Get "caption" | markdownify -}}
+        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
       </figcaption>
     {{- end }}
-  </figure>
-</div>
+  </a>
+  <!-- FULL IMAGE; HIDDEN -->
+  <div class="snap-lightbox" id="{{ $id }}">
+    <a href="#_" class="snap-lightbox-close"></a>
+    <div class="snap-lightbox-inner">
+      <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
+      <p>
+      {{- if or (.Get "caption") (.Get "attr") -}}
+        {{- .Get "caption" | markdownify -}}
+        {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
+        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
+        {{- with .Get "attrlink" }}</a>{{- end -}}
+      {{- end }}
+      </p>
+    </div>
+    <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
+    {{- if .Parent -}}
+      {{- if not (eq $figid 1) -}}
+        <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
+      {{- else -}}
+        <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
+      {{- end -}}
+      <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
+      <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
+    {{- end }}
+  </div>
+</figure>