From 46f950414d7d6e449a2eeaf541871e171809afa6 Mon Sep 17 00:00:00 2001
From: Dominik Morbitzer <d.morbitzer@techdivision.com>
Date: Thu, 26 Sep 2024 14:03:07 +0200
Subject: [PATCH] EDERCMS-219: Add mobile language picker

---
 blocks/language/language.css | 40 ++++++++++++++++++++++++++++++++++++
 blocks/language/language.js  | 16 +++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/blocks/language/language.css b/blocks/language/language.css
index d151ec5e..6cea4bb9 100644
--- a/blocks/language/language.css
+++ b/blocks/language/language.css
@@ -71,3 +71,43 @@
     }
   }
 }
+
+.language.mobile {
+  display: block;
+  padding-left: 45px;
+  margin-bottom: 0;
+
+  img {
+    padding-left: 0;
+  }
+
+  &:hover {
+    p::after {
+      transform: translateY(-50%) rotate(135deg);
+      top: 10px;
+    }
+
+    .language-list {
+      display: none;
+    }
+  }
+
+  .language-list {
+    position: unset;
+  }
+
+  &.show {
+    .language-list {
+      display: block;
+    }
+    p::after {
+      transform: translateY(-20%) rotate(314deg);
+    }
+  }
+}
+
+@media (width >= 900px) {
+  .language.mobile {
+    display: none;
+  }
+}
diff --git a/blocks/language/language.js b/blocks/language/language.js
index 0aed3570..3abb1f5b 100644
--- a/blocks/language/language.js
+++ b/blocks/language/language.js
@@ -59,6 +59,17 @@ function addLanguageItems(languageSelectorList, possibleLanguagesList) {
     });
 }
 
+/**
+ * @param{HTMLElement} block
+ */
+function toggleLanguageListMobile(block) {
+  if (block.classList.contains('show')) {
+    block.classList.remove('show');
+  } else {
+    block.classList.add('show');
+  }
+}
+
 export default async function decorate(block) {
   const possibleLanguages = getLanguageData(block);
   block.innerHTML = '';
@@ -83,5 +94,10 @@ export default async function decorate(block) {
     addLanguageItems(languageSelectorList, possibleLanguages);
   });
   setAvailableLanguages(Object.keys(possibleLanguages));
+
+  if (block.classList.contains('mobile')) {
+    block.addEventListener('click', () => toggleLanguageListMobile(block));
+  }
+
   return block;
 }