pillar.html 4.6 KB
Newer Older
CSA's avatar
CSA committed
1
2
3
4
5
{{/*
    Pillar widget, creates a multi-column layout. Columns are same width.
    Usage :
        {{ $.Scratch.SetInMap "pillar" "PARAM" "VALUE" }}
        {{ $.Scratch.SetInMap "pillar" "items" (slice (dict "name" "column1" "type" "menu") (dict "name" "column2" "type" "markdown" "content" "[Tor](https://torproject.org) is amazing!") ) }}
CSA's avatar
CSA committed
6
        {{ partial "widgets/pillar.html" $ }}
CSA's avatar
CSA committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    
    Pillar parameters:
        - childClass: adds a specific class to the generated column
    
    The 'items' key is reserved for a list of the columns. Each column needs
    a 'type' and a 'name'. Some column types may need additional parameters.
    A generated column will have the id #pillar-'name'
    
    Here are the supported column types:
        - template: call a partial template called 'name' or 'name'.html
        - menu: call a menu.html template for a vertical menu called 'name'
        - markdown (content): render Markdown from 'content' string

*/}}
21
{{ $pillar := $.Scratch.Get "pillar" }}
22
23
24
25
26
27
28

{{ $n := len $pillar.items }}

{{/* Maximum columns for each screen width (in rem) */}}
{{ $sizes := (dict "48" 2 "64" 3 "96" 4) }}
{{ $columnSpan := 2 }}

CSA's avatar
CSA committed
29
<div class="widget-pillar{{ with $pillar.class }} {{ . }}{{ end }}">
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
    <style scoped="scoped">
        /* Default size */
        @supports (grid-area: auto) {
            .widget-pillar {
                grid-template-areas:{{ range $i, $item := $pillar.items }} "column{{ $i }}"{{ end }};
            }
            {{ range $size, $maxColumns := $sizes }}
            @media (min-width: {{ $size }}rem) {
                .widget-pillar {
                    grid-template-columns: repeat({{ mul $columnSpan $maxColumns }}, 1fr);
                    grid-template-areas: 
                    {{ $completeRows := div $n $maxColumns }}
                    {{ $leftover := mod $n $maxColumns }}
                    {{ $.Scratch.Set "widget-pillar-lines" "" }}
                    {{ if gt $completeRows 0 }}
                        {{ range $row := (seq 0 (sub $completeRows 1)) }}
                            {{ $.Scratch.Add "widget-pillar-lines" " \"" }}
                            {{ $start := mul $row $maxColumns }}
                            {{ range $column := seq $start (add $start (sub $maxColumns 1)) }}
                                {{ range seq $columnSpan }}{{ $.Scratch.Add "widget-pillar-lines" (printf "column%d " $column) }}{{ end }}
                            {{ end }}
                            {{ $.Scratch.Add "widget-pillar-lines" "\"" }}
                        {{ end }}
                    {{ end }}
                    {{ if gt $leftover 0 }}
                        {{ $.Scratch.Add "widget-pillar-lines" " \"" }}
                        {{ $spaceAround := sub $maxColumns $leftover }}
                        {{ $spaceAround := div (mul $spaceAround $columnSpan) 2 }}
                        {{ range (seq $spaceAround) }}{{ $.Scratch.Add "widget-pillar-lines" ". " }}{{ end }}
                        {{ $incompleteRowFirstItem := mul $completeRows $maxColumns }}
                        {{ range $column := seq $incompleteRowFirstItem (add $incompleteRowFirstItem (sub $leftover 1)) }}
                            {{ range seq $columnSpan }}{{ $.Scratch.Add "widget-pillar-lines" (printf "column%d " $column) }}{{end}}
                        {{ end }}
                        {{ range (seq $spaceAround) }}{{ $.Scratch.Add "widget-pillar-lines" ". " }}{{ end }}
                        {{ $.Scratch.Add "widget-pillar-lines" "\"" }}
                    {{ end }}
                   {{ $.Scratch.Get "widget-pillar-lines" | safeCSS }};
                }
            }
            {{ end }}
        }
    </style>
{{ range $count, $i := $pillar.items }}
    <div {{ with $pillar.childClass }}class="{{ . }}"{{ end }} style="grid-area: column{{ $count }};">
74
        {{ if eq $i.type "menu" }}
CSA's avatar
CSA committed
75
            {{ $.Scratch.Set "menu" (dict "name" $i.name) }}
76
            {{ range $key, $value := $i.params }}{{ $.Scratch.SetInMap "menu" $key $value }}{{ end }}
CSA's avatar
CSA committed
77
78
79
80
81
     	    {{ partial "widgets/menu/v.html" $ }}
     	{{ else if eq $i.type "markdownmenu" }}
     	    {{ $.Scratch.Set "menu" (dict "name" $i.name) }}
            {{ range $key, $value := $i.params }}{{ $.Scratch.SetInMap "menu" $key $value }}{{ end }}
     	    {{ partial "widgets/menu/vmarkdown.html" $ }}
CSA's avatar
CSA committed
82
83
84
85
86
87
     	{{ else if eq $i.type "template" }}
     	    <!-- Template type needs name -->
     	    {{ partial (printf "%s.html" ($i.name | strings.TrimSuffix ".html")) $ }}
     	{{ else if eq $i.type "markdown" }}
     	    <!-- Markdown type needs content -->
     	    {{ $i.content | markdownify }}
88
89
90
91
        {{ end }}
    </div>
{{ end }}
</div>