hugo-theme-relearn/layouts/partials/shortcodes/tabs.html

83 lines
4 KiB
HTML
Raw Normal View History

{{- $context := .context }}
{{- $groupid := .groupid | default (partial "make-random-md5.hugo" $context) }}
2023-06-05 21:18:12 +00:00
{{- $color := .color }}
{{- $style := .style }}
{{- $title := .title }}
{{- $icon := .icon }}
{{- $tabs := slice }}
{{- range $tab := (.content | default slice) }}
{{- if and (not $tab.title) $tab.name }}
{{- warnf "%s: parameter 'name' is deprecated for shortcode 'tab', use 'title' instead" $context.File.Path }}
{{- $tab = merge $tab (dict "title" .name) }}
{{- end }}
{{- with $tab }}
{{- $color := .color | default $color }}
{{- $style := .style | default $style | default (cond (ne .color "") "filled" "initial") }}
2023-06-05 21:18:12 +00:00
{{- $title := .title | default ($style | T) }}
{{- $title = trim $title " " }}
{{- $icon := .icon | default "" }}
{{- if and (not $icon) (eq (len $icon) 0) }}
{{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
{{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
{{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
{{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
{{- end }}
{{- $icon = trim $icon " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }}
{{- $tabs = $tabs | append (dict
"color" $color
"content" .content
"icon" $icon
"itemid" (printf "%s%s" ($title | $context.RenderString | plainify) ($icon | plainify))
"style" $style
"title" $title
) }}
{{- end }}
{{- end }}
{{- $color = .color | default "" }}
{{- $style = .style | default (cond (ne .color "") "filled" "initial") }}
2023-06-05 21:18:12 +00:00
{{- $title = .title | default ($style | T) }}
{{- $title = trim $title " " }}
{{- $icon = .icon | default "" }}
{{- if and (not $icon) (eq (len $icon) 0) }}
{{- if eq $style "info" }}{{ $icon = default "info-circle" }}{{ end }}
{{- if eq $style "warning" }}{{ $icon = default "exclamation-triangle" }}{{ end }}
{{- if eq $style "note" }}{{ $icon = default "exclamation-circle" }}{{ end }}
{{- if eq $style "tip" }}{{ $icon = default "lightbulb" }}{{ end }}
{{- end }}
{{- $icon = trim $icon " " }}
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }}
{{- with $context }}
<div class="tab-panel" data-tab-group="{{ $groupid }}">
<div class="tab-nav">
2023-06-06 17:54:12 +00:00
<div class="tab-nav-title">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | $context.RenderString }}{{ if (not $title) }}&#8203;{{ end }}</div>
{{- range $idx, $tab := $tabs }}
<button
2023-06-05 21:18:12 +00:00
data-tab-item="{{ .itemid }}"
class="tab-nav-button tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}
onclick="switchTab('{{ $groupid }}','{{ .itemid }}')"
2023-01-29 15:45:42 +00:00
>
2023-06-06 16:15:08 +00:00
<div>
<div class="tab-nav-hidden">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div>
<div class="tab-nav-text">{{ if .icon }}<i class="{{ .icon }}"></i>{{ end }}{{ if and .icon .title }} {{ end }}{{ .title | $context.RenderString }}{{ if (not .title) }}&#8203;{{ end }}</div>
</div>
</button>
{{- end }}
</div>
<div class="tab-content-container">
{{- range $idx, $tab := $tabs }}
2023-01-29 15:45:42 +00:00
<div
2023-06-05 21:18:12 +00:00
data-tab-item="{{ .itemid }}"
class="tab-content tab-panel-style cstyle {{ .style }}{{ cond (eq $idx 0) " active" ""}}"{{ if .color }} style="--VARIABLE-BOX-color: {{ .color }};"{{ end }}>
<div class="tab-content-text">
{{ if ne "<" (substr (strings.TrimLeft " " .content) 0 1) }}<p>{{ end }}<!-- we add a DOM element here if there is none to make collapsing marings work -->
{{ .content | safeHTML }}</div><!-- no line break allowed here because of awkward behavior of Hugo 110 or this theme when tag shortcode is called standalone outside of tags shortcode ? -->
</div>
{{- end }}
</div>
</div>
{{- end }}