functions.php

@@ -151,4 +151,7 @@ function fscoli_show_embed_privacy_consent_prompt($embed_html) {
 
 // To disable the privacy consent prompts (and always show the content directly), just remove this line
 add_filter('embed_handler_html', 'fscoli_show_embed_privacy_consent_prompt');
+
+wp_enqueue_script('fscoli-utils', get_template_directory_uri() . '/js/utils.js');
+wp_enqueue_script('fscoli-pills', get_template_directory_uri() . '/js/pills.js');
 ?>

js/pills.js

+/**
+ * Make the given pill entry active, all other entries in the pill
+ * inactive
+ */
+function pillSelect(pillEntry) {
+    pillEntry.classList.add("active");
+    let currentEntry = pillEntry.nextElementSibling;
+    while(currentEntry != null) {
+        currentEntry.classList.remove("active");
+        currentEntry = currentEntry.nextElementSibling;
+    }
+    currentEntry = pillEntry.previousElementSibling;
+    while(currentEntry != null) {
+        currentEntry.classList.remove("active");
+        currentEntry = currentEntry.previousElementSibling;
+    }
+}
+
+window.addEventListener("load", function() {
+    // Set an event handler for each <li> element within
+    // a pill. The event handler function will remove the "active"
+    // class from all siblings of this element and add it to the
+    // element
+    _$(".pill li").on("click", function(){
+        // "this" refers to the HTML element that triggered the on click
+        // event (i.e. the "li" element the user clicked on)
+        pillSelect(this);
+    });
+
+    // Initialize ("click" the first child of every pill)
+    _$(".pill li:first-child").click();
+});

js/utils.js

+/**
+ * A function that behaves somewhat similar to jQuery,
+ * without jQuery.
+ */
+function _$(selector) {
+    let elements = document.querySelectorAll(selector);
+    let mergedDatasets = {};
+    for(let element of elements) {
+        for(let property in element.dataset) {
+            mergedDatasets[property] = element.dataset[property];
+        }
+    }
+
+    return {
+        on: function(eventName, eventListener) {
+            for(let element of elements) {
+                element.addEventListener(eventName, eventListener.bind(element));
+            }
+        },
+        dataset: mergedDatasets,
+        hide: function() {
+            for(let element of elements) {
+                element.classList.add("hidden");
+            }
+        },
+        show: function() {
+            for(let element of elements) {
+                element.classList.remove("hidden");
+            }
+        },
+        hasClass: function(cls) {
+            if(!elements) {
+                return false;
+            }
+            for(let element of elements) {
+                if(!element.classList.contains(cls)) {
+                    return false;
+                }
+            }
+            return true;
+        },
+        each: function(consumer) {
+            for(let element of elements) {
+                consumer(element);
+            }
+        },
+        click: function() {
+            for(let element of elements) {
+                element.click();
+            }
+        }
+    };
+}

style.css

@@ -7,7 +7,7 @@
  * Author: personads :: Maximilian Müller-Eberstein (ursprüngliche Version und Design); Jakob Moser (Code-Rewrite)
  * Author URI: https://personads.me/
  *
- * Version: 1.20
+ * Version: 1.21
  *
  * License: GNU General Public License v3.0
  * License URI: https://www.gnu.org/licenses/gpl-3.0.html