Add language switcher

data/languages.yaml

@@ -0,0 +1,34 @@
+---
+af: Afrikaans
+ar: العربية
+ca: Català
+cs: Česky
+da: Dansk
+de: Deutsch
+el: Ελληνικά
+en: English
+eo: Esperanto
+es: Español
+fa: فارسی
+fi: Suomi
+fr: Français
+gl: Galego
+he: עברית
+hu: Magyar
+it: Italiano
+ja: 日本語
+ko: 한국어
+nl: Nederlands
+'no': Norsk (bokmål)
+pl: Polski
+pt: Português
+ro: Română
+ru: Русский
+sat: ᱥᱟᱱᱛᱟᱲᱤ
+si: සිංහල
+sr: Српски
+sv: Svenska
+tr: Türkçe
+uk: Українська
+vi: Việtnam
+zh: 中文

source/javascripts/site.js

@@ -1,3 +1,23 @@
 document.getElementById('menu').addEventListener('click', evt =>
   evt.target.parentElement.classList.toggle('show')
-)
+)
+
+document.addEventListener('DOMContentLoaded', () => {
+  for (const switcher of document.getElementsByClassName('language-switcher')) {
+    const control = switcher.querySelector('[aria-haspopup]');
+    control.addEventListener('click', event => {
+      const popupId = control.getAttribute('aria-controls');
+      if (! popupId) return;
+      const popup = document.getElementById(popupId);
+      if (! popup) return;
+      if (control.getAttribute('aria-expanded') === 'true') {
+        control.setAttribute('aria-expanded', 'false');
+        popup.setAttribute('aria-hidden', 'true');
+      } else {
+        control.setAttribute('aria-expanded', 'true');
+        popup.setAttribute('aria-hidden', 'false');
+
+      }
+    });
+  }
+});

source/layouts/layout.erb

@@ -28,6 +28,14 @@
     <header>
       <h1><%= current_page.data.title %></h1>
       <p><%= current_page.data.summary %></p>
+      <div class="language-switcher">
+        <button aria-controls="languages" aria-haspopup="true" aria-expanded="false"><img src="/images/LanguageIcon.png" alt="switch language"></button>
+        <ul id="languages" class="languages" aria-hidden="true">
+          <% data.languages.each_pair do |code, name| %>
+          <li lang="<%=h code %>" translate="no" class="language"><%= link_to h(name), code == "en" ? "/" : "/#{code}/", hreflang: h(code), rel: "alternate" %></li>
+          <% end %>
+        </ul>
+      </div>
     </header>
     <aside>
       <i id="menu" data-feather="menu"></i>

source/stylesheets/site.css.scss

@@ -5,6 +5,11 @@ $black: invert($gray);
 
 @import url('https://fonts.googleapis.com/css?family=Playfair+Display');
 
+:root {
+  --lang-switcher-margin: 2vw;
+  --lang-switcher-width: 2em;
+}
+
 html, body {
   padding: 0px;
   margin: 0px;
@@ -22,6 +27,15 @@ header {
   background: linear-gradient(0deg, $plumedark, $plume);
   color: white;
   font-size: 1.5em;
+
+  .language-switcher {
+    position: absolute;
+    top: var(--lang-switcher-margin);
+    right: var(--lang-switcher-margin);
+    margin: 0;
+    padding: 0;
+    line-height: 1;
+  }
 }
 
 body {
@@ -346,3 +360,65 @@ a.action {
       "foot foot foot foot foot";
   }
 }
+
+.language-switcher {
+  position: relative;
+  font-size: 1rem;
+
+  [aria-haspopup] {
+    display: block;
+    width: var(--lang-switcher-width);
+    padding: 0;
+    line-height: 1;
+    border: none;
+    background: transparent;
+
+    &:hover {
+      opacity: 0.5;
+    }
+
+    &[aria-expanded="true"] {
+      opacity: 0.5;
+    }
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  [aria-hidden="true"] {
+    display: none;
+  }
+
+  .languages {
+    position: absolute;
+    right: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0.5em 0;
+    max-height: calc(90vh - var(--lang-switcher-margin) - var(--lang-switcher-width));
+    overflow-y: scroll;
+    overscroll-behavior: contain;
+    border-radius: 0.1em;
+    background: #ffffff;
+    box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.6);
+  }
+
+  .language {
+    padding: 0;
+
+    a {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      padding: 0.5em 1em;
+      border-left: solid 0.5em transparent;
+
+      &:hover, &:focus {
+        border-left-color: $plume;
+      }
+    }
+  }
+}