diff options
Diffstat (limited to 'web/template/status_attachments.tmpl')
| -rw-r--r-- | web/template/status_attachments.tmpl | 184 |
1 files changed, 113 insertions, 71 deletions
diff --git a/web/template/status_attachments.tmpl b/web/template/status_attachments.tmpl index bd26c82a6..b257f2211 100644 --- a/web/template/status_attachments.tmpl +++ b/web/template/status_attachments.tmpl @@ -18,77 +18,119 @@ */ -}} {{- /* - Template for rendering a gallery of status media attachments. - To use this template, pass a web view status into it. + Template for rendering a gallery of status media attachments. + To use this template, pass a web view status into it. */ -}} -{{ with .MediaAttachments }} - <div class="media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{ else if eq (len .) 2 }}double{{- end -}}"> - {{- range $index, $media := . }} - <div class="media-wrapper"> - <details class="{{- $media.Type -}}-spoiler media-spoiler" {{- if not $media.Sensitive }} open{{ end -}}> - <summary> - <div class="show sensitive button" aria-hidden="true">Show sensitive media</div> - <span class="eye button" role="button" tabindex="0" aria-label="Toggle media"> - <i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> - <i class="show fa fa-fw fa-eye" aria-hidden="true"></i> - </span> - {{- if eq .Type "video" }} - <video {{- if .Description }} title="{{- $media.Description -}}" {{- end -}}> - <source type="video/mp4" src="{{- $media.URL -}}"/> - </video> - {{- else if eq .Type "image" }} - <img src="{{- $media.PreviewURL -}}" {{- if .Description }} title="{{- $media.Description -}}" {{- end }}/> - {{- end }} - </summary> - {{- if eq .Type "video" }} - <video - class="plyr-video photoswipe-slide" - controls - data-pswp-index="{{- $index -}}" - data-pswp-width="{{- $media.Meta.Original.Width -}}px" - data-pswp-height="{{- $media.Meta.Original.Height -}}px" - {{- if .Description }} - alt="{{- $media.Description -}}" - title="{{- $media.Description -}}" - {{- end }} - > - <source type="video/mp4" src="{{- $media.URL -}}"/> - </video> - {{- else if eq .Type "image" }} - <a - class="photoswipe-slide" - href="{{- $media.URL -}}" - target="_blank" - data-pswp-width="{{- $media.Meta.Original.Width -}}px" - data-pswp-height="{{- $media.Meta.Original.Height -}}px" - data-cropped="true" - {{- if .Description }} - title="{{- $media.Description -}}" - {{- end }} - > - <img src="{{$media.PreviewURL}}" {{if .Description}}alt="{{$media.Description}}" {{end}} /> - </a> - {{- else }} - <a - class="unknown-attachment" - href="{{- $media.RemoteURL -}}" - target="_blank" - {{- if .Description }} - title="Link to external media: {{ $media.Description -}} {{- $media.RemoteURL -}}" - {{- else }} - title="Link to external media. {{- $media.RemoteURL -}}" - {{- end }} - > - <div class="placeholder" aria-hidden="true"> - <i class="placeholder-external-link fa fa-external-link"></i> - <i class="placeholder-icon fa fa-file-text"></i> - <div class="placeholder-link-to">External media</div> - </div> - </a> - {{- end }} - </details> - </div> - {{- end }} - </div> +{{- define "imagePreview" }} +<img + src="{{- .PreviewURL -}}" + loading="lazy" + {{- if .Description }} + alt="{{- .Description -}}" + title="{{- .Description -}}" + {{- end }} + width="{{- .Meta.Original.Width -}}" + height="{{- .Meta.Original.Height -}}" +/> {{- end }} + +{{- define "videoPreview" }} +<video + {{- if .Description }} + alt="{{- .Description -}}" + title="{{- .Description -}}" + {{- end }} + width="{{- .Meta.Original.Width -}}" + height="{{- .Meta.Original.Height -}}" +> + <source type="video/mp4" src="{{- .URL -}}"/> +</video> +{{- end }} + +{{- /* Produces something like "1 attachment", "2 attachments", etc */ -}} +{{- define "attachmentsLength" -}} +{{- (len .) }}{{- if eq (len .) 1 }} attachment{{- else }} attachments{{- end -}} +{{- end -}} + +{{- /* Produces something like "media photoswipe-gallery odd single" */ -}} +{{- define "galleryClass" -}} +media photoswipe-gallery {{ (len .) | oddOrEven }} {{ if eq (len .) 1 }}single{{ else if eq (len .) 2 }}double{{ end }} +{{- end -}} + +{{- with .MediaAttachments }} +<div + class="{{- template "galleryClass" . -}}" + role="group" + aria-label="{{- template "attachmentsLength" . -}}" +> + {{- range $index, $media := . }} + <div class="media-wrapper"> + <details class="{{- $media.Type -}}-spoiler media-spoiler" {{- if not $media.Sensitive }} open{{- end -}}> + <summary> + <div class="show sensitive button" aria-hidden="true">Show sensitive media</div> + <span class="eye button" role="button" tabindex="0" aria-label="Toggle media"> + <i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> + <i class="show fa fa-fw fa-eye" aria-hidden="true"></i> + </span> + {{- if eq .Type "video" }} + {{- include "videoPreview" $media | indent 4 }} + {{- else if eq .Type "image" }} + {{- include "imagePreview" $media | indent 4 }} + {{- end }} + </summary> + {{- if eq .Type "video" }} + <video + class="plyr-video photoswipe-slide" + controls + data-pswp-index="{{- $index -}}" + data-pswp-width="{{- $media.Meta.Original.Width -}}px" + data-pswp-height="{{- $media.Meta.Original.Height -}}px" + {{- if .Description }} + alt="{{- $media.Description -}}" + title="{{- $media.Description -}}" + {{- end }} + > + <source type="video/mp4" src="{{- $media.URL -}}"/> + </video> + {{- else if eq .Type "image" }} + <a + class="photoswipe-slide" + href="{{- $media.URL -}}" + target="_blank" + data-pswp-width="{{- $media.Meta.Original.Width -}}px" + data-pswp-height="{{- $media.Meta.Original.Height -}}px" + data-cropped="true" + {{- if .Description }} + alt="{{- $media.Description -}}" + title="{{- $media.Description -}}" + {{- end }} + > + {{- with $media }} + {{- include "imagePreview" . | indent 4 }} + {{- end }} + </a> + {{- else }} + <a + class="unknown-attachment" + href="{{- $media.RemoteURL -}}" + rel="nofollow noreferrer noopener" + target="_blank" + {{- if .Description }} + title="Open external media: {{ $media.Description -}} {{- $media.RemoteURL -}}" + {{- else }} + title="Open external media. {{- $media.RemoteURL -}}" + {{- end }} + > + <div class="placeholder" aria-hidden="true"> + <i class="placeholder-external-link fa fa-external-link"></i> + <i class="placeholder-icon fa fa-file-text"></i> + <div class="placeholder-link-to">External media</div> + </div> + </a> + {{- end }} + </details> + </div> + {{- end }} +</div> +{{- end }}
\ No newline at end of file |