From 31a655ae7fdfdbd9a54dad4dcb69342ff406b7f8 Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Mon, 13 Nov 2023 14:42:27 +0100 Subject: [PATCH] Add aria-current attribute to links in the top menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is mainly to be able to stylize them using CSS; the current style i set i just a placeholder to check that it works as expected. Most of these links needs to check for the URI’s prefix, because they are links to a whole section, but the first link must check for the exact match, otherwise it would match every other URI, as all of them start with /company/{uuid}. The server does not return the markup for the top navigation when usin HTMx, though, hence i have to change the current class using JavaScript. I am not sure if the correct value for aria-current is “page” when the link is not for the actual page the user is currently in, like when is in the new quote page, but it seems to be the most appropriate value from the enumeration given in the specifications, except, perhaps, for the “location” value, but i was unable to find any example of that value anywhere. Part of #89. --- pkg/template.go | 7 +++++++ web/static/numerus.css | 4 +++- web/static/numerus.js | 18 +++++++++++++++++- web/template/app.gohtml | 12 ++++++------ 4 files changed, 33 insertions(+), 8 deletions(-) diff --git a/pkg/template.go b/pkg/template.go index af592bf..a5fdeff 100644 --- a/pkg/template.go +++ b/pkg/template.go @@ -10,6 +10,7 @@ import ( "math" "net/http" "strconv" + "strings" "time" ) @@ -30,6 +31,12 @@ func mustRenderTemplate(wr io.Writer, r *http.Request, layout string, filename s "currentLocale": func() string { return locale.Language.String() }, + "requestURIMatches": func(uri string) bool { + return r.RequestURI == uri + }, + "requestURIHasPrefix": func(uri string) bool { + return strings.HasPrefix(r.RequestURI, uri) + }, "companyURI": func(uri string) string { return companyURI(company, uri) }, diff --git a/web/static/numerus.css b/web/static/numerus.css index 2777c9f..e44c51c 100644 --- a/web/static/numerus.css +++ b/web/static/numerus.css @@ -562,10 +562,12 @@ ul[role="menu"].action-menu li i[class^='ri-'] { text-decoration: underline; } +body > nav a[aria-current] { + background-color: yellow; +} /* menu tauler final */ - main > nav { display: flex; justify-content: space-between; diff --git a/web/static/numerus.js b/web/static/numerus.js index 13eadec..9f3c9c4 100644 --- a/web/static/numerus.js +++ b/web/static/numerus.js @@ -713,7 +713,7 @@ htmx.on('closeModal', () => { htmx.on(document, 'alpine:init', () => { document.body.classList.remove('filters-visible'); - + Alpine.data('snackbar', () => ({ show: false, toast: "", toasts: [], timeoutId: null, init() { htmx.on('htmx:error', (error) => { @@ -753,3 +753,19 @@ htmx.on(document, 'alpine:init', () => { }, })); }); + +function updateCurrentMenuItem() { + const path = window.location.pathname; + const items = document.querySelectorAll('body > nav a'); + items.forEach((item, i) => { + const matches = path === item.pathname; + if (matches || (i !== 0 && path.startsWith(item.pathname))) { + item.setAttribute('aria-current', 'page'); + } else { + item.removeAttribute('aria-current'); + } + }); +} + +htmx.on('htmx:pushedIntoHistory', updateCurrentMenuItem); +htmx.on('htmx:replacedInHistory', updateCurrentMenuItem); diff --git a/web/template/app.gohtml b/web/template/app.gohtml index 170a03a..62c8f59 100644 --- a/web/template/app.gohtml +++ b/web/template/app.gohtml @@ -50,12 +50,12 @@