From 744ac982897b94054c1182c677183a81e7a63af9 Mon Sep 17 00:00:00 2001
From: John Hess <john@jthess.com>
Date: Tue, 25 Jun 2024 17:59:04 -0500
Subject: [PATCH] wire up language selector

---
 _i18n/en.yml                     |  2 ++
 _includes/header.html            |  8 +++--
 _includes/language-selector.html | 28 +++++++++++++++++
 _layouts/default.html            |  2 +-
 _scss/pages/home.scss            | 54 ++++++++++++++++++++++++++++++++
 index.html                       | 47 +++++++++++++--------------
 6 files changed, 114 insertions(+), 27 deletions(-)
 create mode 100644 _includes/language-selector.html

diff --git a/_i18n/en.yml b/_i18n/en.yml
index abd27bc..6635aaf 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -13,6 +13,8 @@ message_board: "Message Board"
 app_store: 'App Store'
 offline_maps: 'Offline Maps'
 
+language_prompt: 'Language'
+
 apps:
   breadcrumb: "App Store"
   footer: The Butter App Store is built on F-Droid free software
diff --git a/_includes/header.html b/_includes/header.html
index e0565fd..2ebc189 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -2,10 +2,12 @@
   <div class="header-container">
     <img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
     <div class="title">{% t site_name %}</div>
-    <div class="language-selector">
+    <a class="language-selector" href="#" data-micromodal-trigger="language-selector-modal">
       <img src="{{ site.baseurl }}/assets/images/globe.svg" alt="language selector icon"/>
       <span class="language-code">{{ site.lang | upcase }}</span>
       <img src="{{ site.baseurl }}/assets/images/caret-down.svg"/>
-    </div>
+    </a>
   </div>
-</header>
\ No newline at end of file
+</header>
+
+{% include language-selector.html %}
diff --git a/_includes/language-selector.html b/_includes/language-selector.html
new file mode 100644
index 0000000..e63b389
--- /dev/null
+++ b/_includes/language-selector.html
@@ -0,0 +1,28 @@
+<div class="modal micromodal-slide" id="language-selector-modal" aria-hidden="true">
+    <div class="modal__overlay" tabindex="-1" data-micromodal-close>
+        <div class="modal__container language-selector-container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
+            <main class="modal__content" id="product-modal-content">
+                <div class="modal__content__header">
+                    <div class="header__text">
+                        <h2 class="modal__title ls-40" id="product-modal-title">{% t language_prompt %}</h2>
+                    </div>
+                </div>
+                <div class="modal__content__description">
+                    {% for lang in site.languages %}
+                    {% if forloop.index0 == 0 %}
+                    <a class="language-selection" href="{{ page.url | relative_url }}">
+                        <input type="radio" id="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
+                        <label for="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
+                    </a href="">
+                    {% else %}
+                    <a class="language-selection" href="{{ lang + page.url | relative_url }}">
+                        <input type="radio" id="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
+                        <label for="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
+                    </a href="">
+                    {% endif %}
+                  {% endfor %}
+                </div>
+            </main>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 1674b38..7b2a0cf 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,4 +4,4 @@ layout: basic
 
 {% include header.html %}
 
-{{ content }}
\ No newline at end of file
+{{ content }}
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 99205ff..1159b14 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -80,6 +80,10 @@ a:active {
     padding: 0 10px;
     width: 100px;
   }
+  .language-selector:hover {
+    cursor: pointer;
+    text-decoration: none;
+  }
 
   .language-code {
     margin: 0 8px;
@@ -103,6 +107,56 @@ a:active {
   font-weight: bold;
 }
 
+.language-selector-container {
+  h2.modal__title {
+    text-align: left;
+    font-size: 18px;
+    font-weight: 500;
+    margin: 20px 0;
+  }
+  min-width: 300px;
+}
+
+.language-selection {
+  align-items: center;
+  display: flex;
+  margin: 15px 0px;
+  input[type="radio"] {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border: 2px solid #9B9A98;
+    border-radius: 50%;
+    position: relative;
+    cursor: pointer;
+  }
+
+  input[type="radio"]::before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #333; /* Change this to your desired color */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  label {
+    font-size: 16px;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+}
+.language-selection:hover {
+  text-decoration: none;
+}
+
+
 .content {
   padding: 20px;
 }
diff --git a/index.html b/index.html
index 3d1dd99..0f9fbb1 100644
--- a/index.html
+++ b/index.html
@@ -6,28 +6,29 @@ layout: default
 
 <div class="container">
   <div class="content">
-  <h1 class="homepage-title">{% t butter_box_title %}</h1>
-  <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
-  <div class="card-set">
-    <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
-      class="card">
-      <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
-      {% t explore %}
-    </a>
-    <div id="usb-butter-placeholder" class="card">
-      {% t explore_missing %}
+    <h1 class="homepage-title">{% t butter_box_title %}</h1>
+    <!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
+    <div class="card-set">
+      <a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
+        class="card">
+        <img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
+        {% t explore %}
+      </a>
+      <div id="usb-butter-placeholder" class="card">
+        {% t explore_missing %}
+      </div>
+      <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
+        <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
+        {% t message_board %}
+      </a>
+      <a href="{{ site.baseurl }}/apps" class="card">
+        <img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
+        {% t app_store %}
+      </a>
+      <a href="{{ site.baseurl }}/maps" class="card">
+        <img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
+        {% t offline_maps %}
+      </a>
     </div>
-    <a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
-      <img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
-      {% t message_board %}
-    </a>
-    <a href="{{ site.baseurl }}/apps" class="card">
-      <img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
-      {% t app_store %}
-    </a>
-    <a href="{{ site.baseurl }}/maps" class="card">
-      <img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
-      {% t offline_maps %}
-    </a>
   </div>
-</div></div>
\ No newline at end of file
+</div>
\ No newline at end of file