Implement pills as theme feature (c384cafd) · Commits · Fachschaft / fscoli-next

functions.php

+3 −0

Original line number	Diff line number	Diff line
		@@ -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');
		?>

0 → 100644

+32 −0

Original line number	Diff line number	Diff line
		/**
		* 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();
		});

0 → 100644

+53 −0

Original line number	Diff line number	Diff line
		/**
		* 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();
		}
		}
		};
		}