Set the UI language cookie

resource/js/navbar.js

@@ -0,0 +1,18 @@
+function setLangCookie (lang) {
+  // The cookie path should be relative if the baseHref is known
+  const cookiePath = window.SKOSMOS.baseHref?.replace(window.origin, '') || '/'
+  const date = new Date()
+  date.setTime(date.getTime() + 365 * 24 * 60 * 60 * 1000) // 365 days from now
+  document.cookie = `SKOSMOS_LANGUAGE=${lang}; expires=${date.toGMTString()}; path=${cookiePath}; SameSite=Lax`
+}
+function addLanguageEventListeners () {
+  const languageLinks = document.querySelectorAll('.nav-item.language a')
+  languageLinks.forEach(function (link) {
+    link.addEventListener('click', function (event) {
+      const langValue = this.getAttribute('id').substring(9) // strip the 'language-' part of the id
+      setLangCookie(langValue)
+    })
+  })
+}
+// register the language link event listeners
+document.addEventListener('DOMContentLoaded', addLanguageEventListeners)

src/view/base-template.twig

@@ -62,8 +62,8 @@
         {% if languages|length > 1 %}
         {% for langcode, langdata in languages %}
         {% if request.lang != langcode %}
-        <li class="nav-item" id="language">
-          <a class="fs-6 text-light ms-3 text-decoration-none" id="language-{{ langcode}}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
+        <li class="nav-item language">
+          <a class="fs-6 text-light ms-3 text-decoration-none" id="language-{{ langcode }}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
         </li>
         {% endif %}
         {% endfor %}

src/view/scripts.inc.twig

@@ -111,3 +111,4 @@ window.SKOSMOS = {
 
 <!-- Other (non-Vue) JS functionality -->
 <script src="resource/js/copy-to-clipboard.js"></script>
+<script src="resource/js/navbar.js"></script>

tests/cypress/template/navbar-languages.cy.js

@@ -0,0 +1,16 @@
+describe('Navbar languages', () => {
+
+  it('Sets and reads SKOSMOS_LANGUAGE cookie correctly', () => {
+    cy.visit('/')
+    cy.url().should('not.include', '/fi/') // The default language is not Finnish
+
+    cy.get('.nav-item.language a').first().click()
+    cy.getCookie('SKOSMOS_LANGUAGE').should('exist')
+    cy.getCookie('SKOSMOS_LANGUAGE').should('have.property', 'value', 'fi')
+
+    cy.url().should('include', '/fi/')
+
+    cy.visit('/')
+    cy.url().should('include', '/fi/') // Skosmos chooses the default language based on the cookie
+  })
+})