snazzier-looking language picker (ksylor#79)

The languages list was getting a bit out of hand, so for funzies I made a simple slide in sidebar. Hopefully works well!
Antoha-94 · Nov 24, 2020 · 8587b03 · 8587b03
1 parent bf4166c
commit 8587b03
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 66 deletions.
diff --git a/_includes/layouts/page.njk b/_includes/layouts/page.njk
@@ -2,7 +2,7 @@
 <html lang="{{locale}}">
 <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 	<title>{{title}}</title>
 	<meta name="lolz" content="My git site brings all the mansplainers to the yard." />
     <!-- hi this is coming from netlify & 11ty-->
@@ -12,46 +12,102 @@
     {% include "partials/ga.njk" %}
 </head>
 <body>
-    {% if contentType == "swears" %}
-        {% set banner = locale + "/" + contentType + "/" + "partials/banner.njk" %}
-        {% include banner %}
-    {% endif %}
-
-    {% include "partials/langpicker.njk" %}
-
-    <div class="max-width">
-        <header class="spaced">
-            <h1 class="centered">{{title}}</h1>
-        </header>
-
-        <main>
-            <section class="intro">
-                {% include "partials/carbonads.njk" %}
-                {% set intro = locale + "/" + contentType + "/" + "partials/intro.njk" %}
-                {% include intro %}
-            </section>
-
-            {% set tips = collections["tips_" + contentType + "_" + locale] %}
-            {% for tip in tips %}
+    <div class="prevent-safari-overflow-scroll">
+        {% if contentType == "swears" %}
+            {% set banner = locale + "/" + contentType + "/" + "partials/banner.njk" %}
+            {% include banner %}
+        {% endif %}
+
+        {% include "partials/langpicker.njk" %}
+
+        <div class="max-width">
+            <header class="spaced">
+                <h1 class="centered">{{title}}</h1>
+            </header>
+
+            <main>
+                <section class="intro">
+                    {% include "partials/carbonads.njk" %}
+                    {% set intro = locale + "/" + contentType + "/" + "partials/intro.njk" %}
+                    {% include intro %}
+                </section>
+
+                {% set tips = collections["tips_" + contentType + "_" + locale] %}
+                {% for tip in tips %}
+                    <section class="spaced">
+                        <h2><a class="permalinked" href="#{{ tip.data.id }}" id="{{ tip.data.id }}">{{ tip.data.title | safe }}</a></h2>
+                        {{ tip.templateContent | safe }}
+                    </section>
+                {% endfor %}
+
                 <section class="spaced">
-                    <h2><a class="permalinked" href="#{{ tip.data.id }}" id="{{ tip.data.id }}">{{ tip.data.title | safe }}</a></h2>
-                    {{ tip.templateContent | safe }}
+                    {% set outro = locale + "/" + contentType + "/" + "partials/outro.njk" %}
+                    {% include outro %}
+                </section>
+
+                <section class="spaced top-lined">
+                    {% set thanks = locale + "/" + contentType + "/" + "partials/thanks.njk" %}
+                    {% include thanks %}
                 </section>
-            {% endfor %}
-
-            <section class="spaced">
-                {% set outro = locale + "/" + contentType + "/" + "partials/outro.njk" %}
-                {% include outro %}
-            </section>
-
-            <section class="spaced top-lined">
-                {% set thanks = locale + "/" + contentType + "/" + "partials/thanks.njk" %}
-                {% include thanks %}
-            </section>
-        </main>
+            </main>
+        </div>
+        {% set footer = locale + "/" + contentType + "/" + "partials/footer.njk" %}
+        {% include footer %}
+
     </div>
-    {% set footer = locale + "/" + contentType + "/" + "partials/footer.njk" %}
-    {% include footer %}
-    <script src="/prism.js"></script>
+
+    <script src="/prism.js" async></script>
+    <script async>
+        function setupLangPicker() {
+            // passive event listener polyfill
+            // Test via a getter in the options object to see if the passive property is accessed
+            var supportsPassive = false;
+            try {
+              var opts = Object.defineProperty({}, 'passive', {
+                get: function() {
+                  supportsPassive = true;
+                }
+              });
+              window.addEventListener("testPassive", null, opts);
+              window.removeEventListener("testPassive", null, opts);
+            } catch (e) {}
+
+            var picker = document.getElementById('picker');
+            var pickerText = document.getElementById('picker-text');
+            var pickerList = document.getElementById('picker-list');
+            var pickerBtn = document.getElementById('picker-btn');
+            var isOpen = false;
+
+            function toggle() {
+                if (!isOpen) {
+                    pickerList.style.width = pickerText.scrollWidth + 'px';
+                }
+                pickerBtn.classList.toggle('open');
+                isOpen = !isOpen;
+            }
+            // handle button clicks
+            pickerBtn.addEventListener('click', toggle);
+
+            // close open picker via outside clicks
+            document.addEventListener('click', function(evt) {
+                if (isOpen && !evt.target.closest('#picker')) {
+                    toggle();
+                }
+            }, supportsPassive ? { passive: true } : false);
+
+            // if user tabs into list, open it
+            pickerList.addEventListener('focusin', function(evt) {
+                if (!isOpen) {
+                    toggle();
+                }
+            });
+            pickerList.addEventListener('focusout', function(evt) {
+                if (isOpen) {
+                    toggle();
+                }
+            });
+        }
+        setupLangPicker();
+    </script>
 </body>
 </html>
diff --git a/_includes/partials/langpicker.njk b/_includes/partials/langpicker.njk
@@ -1,13 +1,18 @@
 {% if site.languages.length > 1 %}
-<nav class="langpicker" aria-label="{% langpicker_arialabel locale, site.languages %}">
-    <svg class="langpicker-icon" aria-hidden="true" viewBox="0 0 125 127" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
-      <path d="M105.242.135c9.69.18 18.621 8.31 18.818 18.44.145 22.15.002 44.302.002 66.454-.064 9.866-8.722 18.606-19.054 18.67H89.062v18.935s-1.646 4.79-5.212 3.053l-39.203-21.988H19.116c-1.431-.009-1.778-.061-2.639-.18C7.697 102.32.244 94.51.063 85.26-.08 63.109.062 40.956.062 18.804.125 9.071 8.668.325 18.882.134c28.786-.179 57.574-.179 86.36 0zM19.138 7.133c-6.201.04-11.95 5.148-12.075 11.532a5154.727 5154.727 0 000 66.503c.12 6.13 5.623 11.49 12.075 11.532h26.424c1.196.06.897.042 1.712.446l34.788 19.511V100.2s.66-3.34 3.5-3.5c6.531 0 13.062.04 19.593 0 6.138-.115 11.781-5.148 11.906-11.53a5118.93 5118.93 0 000-66.504c-.119-6.084-5.526-11.412-11.906-11.53-28.672-.179-57.345-.002-86.017-.002z"/>
-      <path d="M101.355 53.66c-.452 10.989-5.449 21.875-14.004 28.926-13.939 11.485-36.006 11.722-50.211.297-12.794-10.289-17.906-29.095-11.917-44.337C30.88 24.148 45.64 13.983 61.3 13.64c.339-.005.678-.007 1.017-.006 15.563.146 30.577 10.153 36.408 24.469 1.7 4.175 2.563 8.633 2.655 13.12.14.407.159.846.179 1.268.019.407-.055.803-.204 1.169zM75.949 71.658a76.085 76.085 0 01-11.179.96l-.185 12.667a35.904 35.904 0 003.922-.487c.064-.096.132-.193.203-.294 2.814-4.008 5.3-8.323 7.239-12.846zM49.864 71.4c1.607 4.633 3.64 9.118 5.927 13.418.925.164 1.858.292 2.794.383l.187-12.735a80.706 80.706 0 01-8.908-1.066zm-18.273-5.504c1.997 4.576 4.988 8.714 8.845 11.931a31.375 31.375 0 007.442 4.595 90.445 90.445 0 01-4.654-12.482 80.569 80.569 0 01-11.633-4.044zm60.372 1.219a68.995 68.995 0 01-8.86 3.017c-1.445 4.044-3.32 7.937-5.496 11.664a31.131 31.131 0 005.773-3.714c3.646-2.968 6.544-6.756 8.583-10.967zM80.122 55.633H65.019l-.161 10.968a69.802 69.802 0 0013.47-1.543c.898-3.082 1.516-6.232 1.794-9.425zM58.86 66.458l.158-10.825H46.346c.027.298.056.596.089.894a63.568 63.568 0 001.5 8.389 73.863 73.863 0 0010.925 1.542zM40.51 55.633H28.886c.082.79.192 1.577.328 2.36.388.178.515.36.804.509a73.344 73.344 0 0011.576 4.734 71.233 71.233 0 01-1.084-7.603zm54.729 0h-9.145a47.55 47.55 0 01-.999 7.591 64.523 64.523 0 009.578-4.019c.251-1.181.441-2.373.566-3.572zm-54.486-13.29a91.395 91.395 0 00-11.394 3.839l-.11.015a31.788 31.788 0 00-.45 3.436h11.464c.015-2.435.174-4.869.49-7.29zm18.503-2.928a90.723 90.723 0 00-12.149 1.481 52.684 52.684 0 00-.956 8.737h12.955l.15-10.218zm6.002-.118l-.151 10.336h15.124a41.245 41.245 0 00-.431-4.161 44.68 44.68 0 00-1.054-4.911 84.771 84.771 0 00-13.488-1.264zm19.685 2.607a54.37 54.37 0 011.095 7.729h9.293a31.531 31.531 0 00-.675-4.524c-1.794-.508-3.858-1.476-5.891-2.113a79.232 79.232 0 00-3.822-1.092zM46.851 23.408c-6.551 3.358-12.05 8.758-15.2 15.383.944-.294 1.901-.578 2.818-.868a97.54 97.54 0 017.524-2.053 52.758 52.758 0 011.583-5.114 59.849 59.849 0 013.275-7.348zm30.967.235a65.222 65.222 0 015.308 11.682 82.145 82.145 0 018.805 2.379c-3.124-5.971-8.136-10.875-14.113-14.061zM59.544 19.74a32.515 32.515 0 00-3.87.555c-.16.356-.358.714-.594 1.07a54.652 54.652 0 00-6.338 13.199 98.951 98.951 0 0110.601-1.081l.201-13.743zm5.999.086l-.198 13.549c3.743.053 7.482.319 11.183.814-2.095-4.952-4.931-9.624-8.17-13.931a32.67 32.67 0 00-2.815-.432z"/>
-    </svg>
-    <ul>
+<nav class="langpicker" aria-label="{% langpicker_arialabel locale, site.languages %}" id="picker">
+    <button class="langpicker-button" id="picker-btn">
+        <svg xmlns="http://www.w3.org/2000/svg" class="langpicker-icon" stroke="#222" fill="none" viewBox="0 0 420 420">
+          <path stroke-width="26" d="M209 15a195 195 0 102 0z"/>
+          <path stroke-width="18" d="M210 15v390m195-195H15M59 90a260 260 0 00302 0m0 240a260 260 0 00-302 0M195 20a250 250 0 000 382m30 0a250 250 0 000-382"/>
+        </svg>
+
+        <span class="langpicker-text" id="picker-text">{% langpicker_arialabel locale, site.languages %}</span>
+    </button>
+
+    <ul class="langpicker-list" id="picker-list">
     {% for lang in site.languages | sort(false, true, "code") %}
         {% if lang.code != locale %}
-            <li><a href="/{{lang.code}}" title="{{lang.label}}">{{lang.code}}</a></li>
+            <li><a href="/{{lang.code}}">{{lang.label}} ({{lang.code}})</a></li>
         {% endif %}
     {% endfor %}
     </ul>

diff --git a/_includes/site.css b/_includes/site.css
@@ -4,6 +4,14 @@ body {
     background-color: #fff;
     line-height: 1.4;
     margin: 0;
+    min-height: 100%;
+    position: relative;
+}
+.prevent-safari-overflow-scroll {
+    height: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    position: relative;
 }
 h1, h2, h3, h4, h5, h6 {
     font-family: 'Montserrat', sans-serif;
@@ -29,35 +37,79 @@ p {
     color: white;
 }
 .langpicker {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 0.5em;
-  margin-left: 0.5em;
+    float: right;
+    margin-top: .5em;
+    margin-bottom: 2em;
+    overflow: hidden;
+}
+.langpicker * {
+    box-sizing: border-box;
+}
+.langpicker-button {
+    border: 2px solid #222;
+    background: none;
+    font-size: 1em;
+    display: flex;
+    align-items:center;
+    cursor: pointer;
+    height: 2.5em;
+    position: relative;
+    padding: 0.5em;
+    border-right: none;
+    text-align: left;
+    -webkit-appearance: none;
+    position: relative;
+    left: 2px;
+    text-align: left;
+    font-family: 'Open Sans', sans-serif;
 }
-.langpicker-icon {
-  height: 1.5em;
+.langpicker-icon{
+    height: 2em;
+    width: 1.5em;
+    transition: 0.2s transform;
 }
-.langpicker a {
-  display: inline-block;
-  padding: 0 0.5em;
-  color: #222;
+.langpicker-button:hover .langpicker-icon,
+.langpicker-button:active .langpicker-icon,
+.langpicker-button:focus .langpicker-icon {
+    transform: rotate(135deg);
 }
-.langpicker ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
+.langpicker-text {
+    display: inline-block;
+    white-space: nowrap;
+    padding-left: 0.5em;
+    min-width: 10em;
+
+}
+.langpicker-list {
+    list-style-type:none;
+    margin: 0;
+    padding: 0 0 2em 0.5em;
+    transform: translateX(100%);
+    transition: .2s ease-out;
+    top: 0;
+    right: 0;
+    background-color: #222;
+    color: #fff;
+    border: 2px solid #222;
+    border-top: none;
+    position: absolute;
+    min-height: 100%;
+    width: 10em;
+    z-index: 1000;
 }
-.langpicker li {
-  display: inline-block;
+.langpicker-button.open + .langpicker-list {
+    transform: translateX(0);
 }
-.langpicker li:after {
-  content: "|";
+.langpicker-list li {
+    padding: 0.5em;
 }
-.langpicker li:last-child:after {
-  content: none;
+.langpicker-list a {
+    display: inline-block;
+    color: #fff;
 }
 .max-width {
     margin: 1em;
+    clear: both;
 }
 @media screen and (min-width: 680px) {
     .max-width {