resources: add expanded parameter #908

exampleSite/content/basics/migration/_index.en.md

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

exampleSite/content/shortcodes/resources/index.en.md

@@ -39,11 +39,12 @@ 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) |
+| **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**          | _&lt;empty&gt;_ | Whether to draw an expander and how the resource list is displayed.<br><br>- _&lt;empty&gt;_: 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)` |
 
@@ -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.

layouts/partials/shortcodes/notice.html

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

layouts/partials/shortcodes/resources.html

@@ -32,15 +32,43 @@
 {{- 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">
+{{- end }}
+{{- $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 }}
@@ -57,6 +85,5 @@
 <li><a href="{{ .RelPermalink }}">{{.Name}}</a> ({{$size}} {{$unitsymbol}})</li>
       {{- end }}
     {{- end }}
-  </ul>
-</div>
+  {{- end }}
 {{- end }}

layouts/shortcodes/resources.html

@@ -3,6 +3,7 @@
 {{- partial "shortcodes/resources.html" (dict
   "page"     .Page
   "color"    (.Get "color")
+  "expanded" (.Get "expanded")
   "icon"     (.Get "icon")
   "pattern"  (.Get "pattern")
   "style"    (.Get "style")