Change language selector from select to links

Hexlet · Mar 27, 2020 · 88b1d2d · 88b1d2d
1 parent ac90c78
commit 88b1d2d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/static/js/scripts.js b/static/js/scripts.js
@@ -28,3 +28,15 @@ $(document).ready(function () {
 $(document).ready(function () {
   $('[data-toggle="tooltip"]').tooltip();
 });
+
+// Language selector
+function switchLanguage(e) {
+  e.preventDefault();
+  const langForm = document.querySelector('#language-form');
+  const selector = langForm.querySelector('select');
+  selector.value = e.target.innerText.trim().toLowerCase();
+  langForm.submit();
+}
+
+const langLinks = document.querySelectorAll('.inactive-lang-link');
+langLinks.forEach((link) => link.addEventListener('click', switchLanguage));
diff --git a/templates/components/footer.html b/templates/components/footer.html
@@ -4,10 +4,10 @@
     <div class="col-12 col-md">
       <ul class="list-unstyled my-0">
         <li>
-          <form action="{% url 'set_language' %}" method="post">
+          <form action="{% url 'set_language' %}" method="post" id="language-form" style="display: none;">
             {% csrf_token %}
             <label for="language">{% trans "Language" %}</label>
-            <select id="language" name="language" onchange="this.form.submit();">
+            <select name="language">
               {% get_available_languages as LANGUAGES %}
               {% get_language_info_list for LANGUAGES as languages %}
               {% for language in languages %}
@@ -17,6 +17,12 @@
               {% endfor %}
             </select>
           </form>
+          {% trans "Language" %}:
+          {% for language in languages %}
+            <a {% if language.code != LANGUAGE_CODE %}href="#" class="inactive-lang-link"{% endif %}>
+              {{ language.code|upper }}
+            </a>
+          {% endfor %}
         </li>
         <li><a target="_blank" href="http://github.com/Hexlet/hexlet-friends">{% trans "Source code" %}</a></li>
       </ul>