Merge pull request #154 from techdivision/feature/edercms-219

EDERCMS-219: Add mobile language picker
techdivision · Sep 26, 2024 · 2895f3d · 2895f3d
2 parents 8ed188a + 59561e4
commit 2895f3d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/blocks/language/language.css b/blocks/language/language.css
@@ -71,3 +71,44 @@
     }
   }
 }
+
+.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
@@ -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;
 }