mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-22 23:37:53 +00:00
resources: add expanded parameter #908
This commit is contained in:
Sören Weber
parent
33f9cb6e78
commit
86fa3c70f2
5 changed files with 88 additions and 41 deletions
|
|
@ -22,6 +22,8 @@ This document shows you what's new in the latest release and flags it with one o
|
|||
|
||||
- {{% badge style="note" title=" " %}}Change{{% /badge %}} If you now display a single code block in a `notice` box, its [margin and border will be removed](shortcodes/notice#code-with-collapsed-colored-borders) so only the colored notice border is visible.
|
||||
|
||||
- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`resources` shortcode](shortcodes/resources) has a new parameter `expanded` to make the resource list collapsible.
|
||||
|
||||
---
|
||||
|
||||
## 6.3.0 (2024-09-03) {#630}
|
||||
|
|
|
|||
|
|
@ -38,14 +38,15 @@ Multilanguage features are not supported directly by the shortcode but rely on H
|
|||
|
||||
### Parameter
|
||||
|
||||
| Name | Default | Notes |
|
||||
|-------------|-----------------|-------------|
|
||||
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: `Resources`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) |
|
||||
| **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. |
|
||||
| **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the resources [by name](https://gohugo.io/methods/resource/name/). For example:<br><br>- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)<br>- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` |
|
||||
| Name | Default | Notes |
|
||||
|-----------------------|-----------------|-------------|
|
||||
| **style** | `transparent` | The style scheme used for the box.<br><br>- by severity: `caution`, `important`, `info`, `note`, `tip`, `warning`<br>- by brand color: `primary`, `secondary`, `accent`<br>- by color: `blue`, `cyan`, `green`, `grey`, `magenta`, `orange`, `red`<br>- by special color: `default`, `transparent`, `code` |
|
||||
| **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching color for the severity<br>- for all other styles: the corresponding color |
|
||||
| **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.<br><br>- for severity styles: the matching title for the severity<br>- for all other styles: `Resources`<br><br>If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **icon** | see notes | [Font Awesome icon name](shortcodes/icon#finding-an-icon) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.<br><br>- for severity styles: a nice matching icon for the severity<br>- for all other styles: `paperclip`<br><br>If you want no icon, you have to set this parameter to `" "` (a non empty string filled with spaces) |
|
||||
| **expanded** | _<empty>_ | Whether to draw an expander and how the resource list is displayed.<br><br>- _<empty>_: no expander is drawn and the resource list is permanently shown<br>- `true`: the expander is drawn and the resource list is initially shown<br>- `false`: the expander is drawn and the resource list is initially hidden |
|
||||
| **sort** | `asc` | Sorting the output in `asc`ending or `desc`ending order. |
|
||||
| **pattern** | `.*` | A [regular expressions](https://en.wikipedia.org/wiki/Regular_expression), used to filter the resources [by name](https://gohugo.io/methods/resource/name/). For example:<br><br>- to match a file suffix of 'jpg', use `.*\.jpg` (not `*.\.jpg`)<br>- to match file names ending in `jpg` or `png`, use `.*\.(jpg\|png)` |
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
@ -73,6 +74,14 @@ Multilanguage features are not supported directly by the shortcode but rely on H
|
|||
|
||||
{{% resources color="fuchsia" icon="fa-fw fab fa-hackerrank" /%}}
|
||||
|
||||
### Expander with Initially Hidden Resource List
|
||||
|
||||
````go
|
||||
{{%/* resources style="primary" expanded="false" /*/%}}
|
||||
````
|
||||
|
||||
{{% resources style="primary" expanded="false" /%}}
|
||||
|
||||
### Style, Color, Title and Icons
|
||||
|
||||
For further examples for **style**, **color**, **title** and **icon**, see the [`notice` shortcode](shortcodes/notice) documentation. The parameter are working the same way for both shortcodes, besides having different defaults.
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
{{- $page = .context }}
|
||||
{{- warnf "%q: DEPRECATED parameter 'context' for shortcode 'notice' found, use 'page' instead; see https://mcshelby.github.io/hugo-theme-relearn/basics/migration#5180" $page.File.Filename }}
|
||||
{{- end }}
|
||||
{{- $class := .class | default "notices" }}
|
||||
{{- $containerstyle := .containerstyle | default "div" }}
|
||||
{{- $containerclass := .containerclass | default slice | append "box-content" }}
|
||||
{{- $color := .color | default "" }}
|
||||
{{- $content := trim .content "\n\r\t " }}
|
||||
{{- $hasContent := ne (strings.TrimLeft "<p>" $content) "" }}
|
||||
|
|
@ -46,9 +49,14 @@
|
|||
{{- end }}
|
||||
{{- end }}
|
||||
{{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
|
||||
{{- $idattribute := "" }}
|
||||
{{- if $expander }}
|
||||
{{- $containerclass = $containerclass | append "expand-content" }}
|
||||
{{- $idattribute = printf ` id="R-expandcontent-%s"` $id }}
|
||||
{{- end }}
|
||||
{{- with $page }}
|
||||
{{- if or $icon $title $hasContent -}}
|
||||
<div class="{{ if $expander }}expand {{ end }}box notices cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
|
||||
<div class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
|
||||
{{- if $expander }}
|
||||
<input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}"{{ if $expanded }} checked{{ end }}>
|
||||
<label class="expand-label box-label" for="R-expand-{{ $id }}">
|
||||
|
|
@ -62,9 +70,9 @@
|
|||
</div>
|
||||
{{- end }}
|
||||
{{- if $hasContent }}
|
||||
<div{{ if $expander }} id="R-expandcontent-{{ $id }}"{{ end }} class="{{ if $expander }}expand-content {{ end }}box-content">
|
||||
{{ printf " <%s%s class=\"%s\">" $containerstyle $idattribute (delimit $containerclass " ") | safeHTML }}
|
||||
{{ $content | safeHTML }}
|
||||
</div>
|
||||
{{ printf " </%s>" $containerstyle | safeHTML }}
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -32,31 +32,58 @@
|
|||
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
|
||||
{{- $icon = printf "fa-fw fas fa-%s" $icon }}
|
||||
{{- end }}
|
||||
{{- $expander := false }}
|
||||
{{- $expanded := .expanded | default "" }}
|
||||
{{- if eq (printf "%T" $expanded) "string" }}
|
||||
{{- if ne (trim $expanded " ") "" }}
|
||||
{{- $expander = true }}
|
||||
{{- $expanded = (eq $expanded "true") }}
|
||||
{{- end }}
|
||||
{{- else }}
|
||||
{{- $expander = true }}
|
||||
{{- end }}
|
||||
{{- $sort := .sort | default "asc" }}
|
||||
{{- $pattern := .pattern | default "" }}
|
||||
{{- with $page }}
|
||||
{{- if eq .BundleType "" }}
|
||||
{{- if eq $page.BundleType "" }}
|
||||
{{- warnf "%q: UNSUPPORTED usage of 'resources' shortcode found, use a page bundle instead; see https://mcshelby.github.io/hugo-theme-relearn/shortcodes/resources" $page.File.Filename }}
|
||||
{{- end -}}
|
||||
<div class="box attachments cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
|
||||
<div class="box-label">{{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}</div>
|
||||
<ul class="box-content attachments-files">
|
||||
{{- range sort .Resources "Name" $sort }}
|
||||
{{- if findRE $pattern .Name }}
|
||||
{{- $size := len .Content }}
|
||||
{{- $unit := "Byte-symbol" }}
|
||||
{{- if ge $size 1024 }}
|
||||
{{- $size = div $size 1024 }}
|
||||
{{- $unit = "Kilobyte-symbol" }}
|
||||
{{- end }}
|
||||
{{- if ge $size 1024 }}
|
||||
{{- $size = div $size 1024 }}
|
||||
{{- $unit = "Megabyte-symbol" }}
|
||||
{{- end }}
|
||||
{{- $unitsymbol := $unit | T }}
|
||||
<li><a href="{{ .RelPermalink }}">{{.Name}}</a> ({{$size}} {{$unitsymbol}})</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{- $content := partial "inline/resource-list" (dict
|
||||
"page" $page
|
||||
"sort" $sort
|
||||
"pattern" $pattern
|
||||
) }}
|
||||
{{- partial "shortcodes/notice.html" (dict
|
||||
"page" $page
|
||||
"class" "attachments"
|
||||
"containerstyle" "ul"
|
||||
"containerclass" (slice "attachments-files")
|
||||
"color" $color
|
||||
"content" $content
|
||||
"expanded" $expanded
|
||||
"icon" $icon
|
||||
"style" $style
|
||||
"title" $title
|
||||
) }}
|
||||
|
||||
{{- define "partials/inline/resource-list" }}
|
||||
{{- $sort := .sort }}
|
||||
{{- $pattern := .pattern }}
|
||||
{{- with .page }}
|
||||
{{- range sort .Resources "Name" $sort }}
|
||||
{{- if findRE $pattern .Name }}
|
||||
{{- $size := len .Content }}
|
||||
{{- $unit := "Byte-symbol" }}
|
||||
{{- if ge $size 1024 }}
|
||||
{{- $size = div $size 1024 }}
|
||||
{{- $unit = "Kilobyte-symbol" }}
|
||||
{{- end }}
|
||||
{{- if ge $size 1024 }}
|
||||
{{- $size = div $size 1024 }}
|
||||
{{- $unit = "Megabyte-symbol" }}
|
||||
{{- end }}
|
||||
{{- $unitsymbol := $unit | T }}
|
||||
<li><a href="{{ .RelPermalink }}">{{.Name}}</a> ({{$size}} {{$unitsymbol}})</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
|
|
@ -1,11 +1,12 @@
|
|||
{{- $_hugo_config := `{ "version": 1 }` }}
|
||||
{{- $unused := .Inner }}
|
||||
{{- partial "shortcodes/resources.html" (dict
|
||||
"page" .Page
|
||||
"color" (.Get "color")
|
||||
"icon" (.Get "icon")
|
||||
"pattern" (.Get "pattern")
|
||||
"style" (.Get "style")
|
||||
"sort" (.Get "sort")
|
||||
"title" (.Get "title")
|
||||
"page" .Page
|
||||
"color" (.Get "color")
|
||||
"expanded" (.Get "expanded")
|
||||
"icon" (.Get "icon")
|
||||
"pattern" (.Get "pattern")
|
||||
"style" (.Get "style")
|
||||
"sort" (.Get "sort")
|
||||
"title" (.Get "title")
|
||||
) }}
|
||||
Loading…
Reference in a new issue