mxmehl/mehl.mx
1
0
Fork 0
Code Issues 3 Pull Requests Actions Releases Wiki Activity

list available languages and topics for links, and allow for their dynamic display

Browse Source
This commit is contained in:
max.mehl
2020-02-27 14:29:26 +01:00
parent 5c273ce8c2
commit 7be63977ac
6 changed files with 160 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
themes/hugo-sustain/layouts/partials/js.html
View File

@@ -1,5 +1,6 @@
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ .Site.BaseURL }}js/jquery-1.11.3.min.js"></script>
<script src="{{ .Site.BaseURL }}js/filter-tags.js"></script>
<!-- Bootstrap core JavaScript -->
<!--<script src="{{ .Site.BaseURL }}js/bootstrap-3.3.7.min.js" ></script>-->
{{ range .Site.Params.custom_js -}}

16
themes/hugo-sustain/layouts/shortcodes/links.html
View File

@@ -5,18 +5,22 @@
{{ end }}
<ul>
{{- range sort $data "date" "desc" }}
<li>{{.desc}}&nbsp;–&nbsp;
{{- $len := (len .links) -}} <!-- amount of elements under .links -->
{{- $tags := slice -}}
{{- range .lang }}{{ $tags = $tags | append . }}{{ end -}}
{{- range .tags }}{{ $tags = $tags | append . }}{{ end -}}
<li class="link" tags="{{ delimit $tags " " }}">
{{ .desc -}}&nbsp;–&nbsp;
{{- $len := (len .links) -}} <!-- amount of elements under .links -->
{{- range $index, $element := .links -}} <!-- range over links, but keep index -->
{{ with .href }}<a href="{{.}}" target="_blank">{{ end }}{{.text}}{{ with .href }}</a>{{end}}
{{- with .href }}<a href="{{.}}" target="_blank">{{ end }}{{.text}}{{ with .href }}</a>{{end}}
{{- if ne (add $index 1) $len -}}, {{- end -}} <!-- only append comma if not last element (index starts with 0) -->
{{- end -}}
{{ end -}}
{{- if or (.video) (.audio) (.slides) }},{{ end -}}
{{ with .video }}&nbsp;<a href="{{ . }}" target="_blank" aria-label="Video Recording"><i class="fas fa-video" aria-hidden="true" title="Video Recording"></i></a>{{ end }}
{{- with .audio }}&nbsp;<a href="{{ . }}" target="_blank" aria-label="Audio Recording"><i class="fas fa-microphone" aria-hidden="true" title="Audio Recording"></i></a>{{ end }}
{{ with .slides }}&nbsp;<a href="{{ . }}" target="_blank" aria-label="Slides"><i class="fas fa-desktop" aria-hidden="true" title="Slides"></i></a>{{ end -}}
{{- with .date }} ({{.}}){{ end }}
{{ range .tags }}<span class="label label-success">{{ . }}</span>&nbsp;{{ end }}
{{- with .date }} ({{.}}){{ end -}}
{{ range $tags }}&nbsp;<span class="label label-success">{{ . }}</span>{{ end -}}
</li>
{{ end }}
</ul>

34
themes/hugo-sustain/layouts/shortcodes/tags.html Normal file
View File

@@ -0,0 +1,34 @@
{{- $data := .Site.Data.links -}}
{{ $scratch := newScratch -}}
{{- range $data -}}
{{- range .tags -}}
{{- $scratch.Add "tags" (slice .) -}}
{{- end -}}
{{- range .lang -}}
{{- $scratch.Add "lang" (slice .) -}}
{{- end -}}
{{- end -}}
<div class="metadata-page">
<div class="row vertical-align">
<div class="col-xs-3 col-md-2 text-right">
<em>Languages:</em>
</div>
<div class="col-xs-9 col-md-10">
<a class="label label-success tag active" tags="all" onclick="selectAllTags()">All</a>
{{- range sort ($scratch.Get "lang") | uniq }}
<a class="label label-success tag" tags="{{ . }}" onclick="selectTag('{{ . }}')">{{ . }}</a>
{{- end -}}
</div>
</div>
<div class="row vertical-align">
<div class="col-xs-3 col-md-2 text-right">
<em>Topics:</em>
</div>
<div class="col-xs-9 col-md-10">
<a class="label label-success tag active" tags="all" onclick="selectAllTags()">All</a>
{{- range sort ($scratch.Get "tags") | uniq }}
<a class="label label-success tag" tags="{{ . }}" onclick="selectTag('{{ . }}')">{{ . }}</a>
{{- end -}}
</div>
</div>
</div>

47
themes/hugo-sustain/static/js/filter-tags.js Normal file
View File

@@ -0,0 +1,47 @@
/*
* SPDX-FileCopyrightText: 2020 Max Mehl <https://mehl.mx>
* SPDX-License-Identifier: GPL-3.0-or-later
*/
function selectTag(tag) {
let li_tags = document.querySelectorAll('li.link');
for (i = 0; i < li_tags.length; i++) {
tags = li_tags[i].getAttribute('tags');
if (tags.indexOf(tag) !== -1) {
li_tags[i].style.display = "list-item";
} else {
li_tags[i].style.display = "none";
}
}
let a_tags = document.querySelectorAll('a.tag');
for (i = 0; i < a_tags.length; i++) {
tags = a_tags[i].getAttribute('tags');
if (tags.indexOf(tag) !== -1) {
a_tags[i].classList.add("active");
} else {
a_tags[i].classList.remove("active");
}
}
}
function selectAllTags() {
let li_tags = document.querySelectorAll('li.link');
for (i = 0; i < li_tags.length; i++) {
li_tags[i].style.display = "list-item";
}
let a_tags = document.querySelectorAll('a.tag');
for (i = 0; i < a_tags.length; i++) {
tags = a_tags[i].getAttribute('tags');
if (tags == "all") {
a_tags[i].classList.add("active");
} else {
a_tags[i].classList.remove("active");
}
}
}