Skip to content

Commit

Permalink
Add a modal for tags list
Browse files Browse the repository at this point in the history
  • Loading branch information
Xpirix committed Oct 24, 2024
1 parent 9636e12 commit c473bb7
Show file tree
Hide file tree
Showing 10 changed files with 115 additions and 11 deletions.
4 changes: 4 additions & 0 deletions static/img/external.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions static/img/ham.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions themes/hugo-bulma-blocks-theme/assets/js/modal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@

document.addEventListener('DOMContentLoaded', () => {
// Functions to open and close a modal
function openModal($el) {
$el.classList.add('is-active');
}

function closeModal($el) {
$el.classList.remove('is-active');
}

function closeAllModals() {
(document.querySelectorAll('.modal') || []).forEach(($modal) => {
closeModal($modal);
});
}

// Add a click event on buttons to open a specific modal
(document.querySelectorAll('.tagcloudModalButton') || []).forEach(($trigger) => {
const modal = $trigger.dataset.target;
const $target = document.getElementById(modal);

$trigger.addEventListener('click', () => {
openModal($target);
});
});

// Add a click event on various child elements to close the parent modal
(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
const $target = $close.closest('.modal');

$close.addEventListener('click', () => {
closeModal($target);
});
});

// Add a keyboard event to close all modals
document.addEventListener('keydown', (event) => {
if(event.key === "Escape") {
closeAllModals();
}
});
});
5 changes: 3 additions & 2 deletions themes/hugo-bulma-blocks-theme/layouts/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -154,15 +154,16 @@
{{ $expandjs := resources.Get "js/card-expand.js" }}
{{ $animatejs := resources.Get "js/animate.js" }}
{{ $navbarjs := resources.Get "js/navbar.js" }}
{{ $modaljs := resources.Get "js/modal.js" }}
{{ $qrcreatejs := resources.Get "js/qrcreate.js" }}
{{ $fusejs := resources.Get "js/fuse.js" }}
{{ $markjs := resources.Get "js/mark.min.js" }}
{{ $matomojs := resources.Get "js/matomo.js" }}
{{/* See https://www.youtube.com/watch?v=T33NN_pPeNI */}}
{{ $js := slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs $matomojs | resources.Concat "js/all.js" | resources.Minify | resources.Fingerprint }}
{{ $js := slice $animatejs $expandjs $navbarjs $modaljs $qrcreatejs $fusejs $markjs $matomojs | resources.Concat "js/all.js" | resources.Minify | resources.Fingerprint }}
{{ if (eq .Site.Params.cookiesstate true) }}
{{ $cookiejs := resources.Get "js/cookie.js" }}
{{ $js = slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs $matomojs $cookiejs | resources.Concat "js/all.js" | resources.Minify | resources.Fingerprint }}
{{ $js = slice $animatejs $expandjs $navbarjs $modaljs $qrcreatejs $fusejs $markjs $matomojs $cookiejs | resources.Concat "js/all.js" | resources.Minify | resources.Fingerprint }}
{{ end }}
<script defer src="{{ $js.RelPermalink }}"></script>
{{/* Search needs to be rendered as a template to ensure urls are correct */}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,9 @@ <h2 class="title is-4">
{{ if gt (len $tags) 0 }}
under
{{ range $tags }}
<a href="{{ $baseURL }}/tags/{{ . | urlize }}">
<span class="tag is-success is-light mb-1">{{ . }}</span>
</a>
<span class="tag is-success is-light mb-1">
<a href="{{ $baseURL }}/tags/{{ . | urlize }}">{{ . }}</a>
</span>
{{ end }}
{{ end }}

Expand Down
27 changes: 21 additions & 6 deletions themes/hugo-bulma-blocks-theme/layouts/partials/sidebar.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,26 @@
<span>Home</span>
</a>
</li>

<li {{ if findRE (replaceRE "/$" "" "posts") $pageUrl }} class="is-active"{{ end }}>
<a href="{{ .Site.BaseURL }}/posts" class="icon-text">
<span class="icon">
<i class="fas fa-link"></i>
</span>
<span>All Posts</span>
</a>
</li>

<li {{ if findRE (replaceRE "/$" "" "subscribers") $pageUrl }} class="is-active"{{ end }}>
<div class="has-child">
<a href="{{ .Site.BaseURL }}/posts" class="icon-text">
<a onclick="toggleSubMenu('subscribers')" class="icon-text">
<span class="icon">
<i class="fas fa-link"></i>
<i class="fas fa-users"></i>
</span>
<span>All Posts</span>
<span>Subscribers</span>
</a>
<span onclick="toggleSubMenu('posts')" class="drop-arrow"><img src="{{ "img/arrow.svg" | absURL }}"/></span>
<span onclick="toggleSubMenu('subscribers')" class="drop-arrow"><img src="{{ "img/arrow.svg" | absURL }}"/></span>
</div>
<ul id="posts" class="collapsed">
<ul id="subscribers" class="collapsed">
{{ .Scratch.Delete "subscribers" }}
{{ range $.Site.RegularPages }}
{{ with .Param "subscribers" }}
Expand Down Expand Up @@ -67,6 +75,13 @@
</ul>

</li>

<li>
<a class="tagcloudModalButton" href="#tagcloudModal" role="button" data-target="planetTagsModal">
<i class="fas fa-tags mr-3"></i>
Tags
</a>
</li>
</ul>
</nav>
</div>
Expand Down
35 changes: 35 additions & 0 deletions themes/hugo-bulma-blocks-theme/layouts/partials/tags-modal.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<div id="planetTagsModal" class="modal">
<div class="modal-background"></div>
<div class="modal-card" style="max-height: 50vh; overflow-y: auto">
<header class="modal-card-head">
<p class="modal-card-title">QGIS Planet Tags</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
{{ .Scratch.Set "tags" (slice) }}
{{ range $.Site.RegularPages }}
{{ with .Param "tags" }}
{{ range . }}
{{ $.Scratch.Add "tags" (printf `/%s` (urlize .)) }}
{{ end }}
{{ end }}
{{ end }}
{{ $tags := uniq (.Scratch.Get "tags") | sort }}

{{ range $index, $value := $tags }}
{{ $tagTerms := (split (strings.TrimPrefix "/" $value) "/") }}
{{ $depth := (len $tagTerms) }}
{{ $lastTerm := (delimit (last 1 $tagTerms) " ") }}
{{ $url := urls.Parse $lastTerm }}
{{ $path := $url.Path }}
{{ with $.Site.GetPage (printf `/tags/%s` $path) }}
{{ if .Data.Term }}
<span class="tag is-success is-light mb-1">
<a href="{{ .RelPermalink }}">{{ .Data.Term }}</a>
</span>
{{ end }}
{{ end }}
{{ end }}
</section>
</div>
</div>
1 change: 1 addition & 0 deletions themes/hugo-bulma-blocks-theme/layouts/posts/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
{{ partial "contextmenu.html" . }}
{{ partial "banner.html" . }}

{{ partial "tags-modal.html" . }}
{{ partial "posts-list.html" . }}

{{ partial "pagination.html" }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
{{ partial "contextmenu.html" . }}
{{ partial "banner.html" . }}

{{ partial "tags-modal.html" . }}
{{ partial "posts-list.html" . }}

{{ partial "pagination.html" }}
Expand Down
1 change: 1 addition & 0 deletions themes/hugo-bulma-blocks-theme/layouts/tags/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
{{ partial "contextmenu.html" . }}
{{ partial "banner.html" . }}

{{ partial "tags-modal.html" . }}
{{ partial "posts-list.html" . }}

{{ partial "pagination.html" }}
Expand Down

0 comments on commit c473bb7

Please sign in to comment.