MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 28: / Line 28: @@
 	});
 });
+/* Mobile class-card collapse controls */
+( function () {
+	var mobileQuery = window.matchMedia('(max-width: 599px)');
+	function initialiseClassCards() {
+		$('.wizlords-class-card').each(function () {
+			var $card = $(this);
+			if (mobileQuery.matches) {
+				if (!$card.attr('data-wizlords-mobile-class-card')) {
+					$card
+						.attr('data-wizlords-mobile-class-card', '1')
+						.attr('role', 'button')
+						.attr('tabindex', '0');
+				}
+				if (!$card.hasClass('is-open')) {
+					$card.attr('aria-expanded', 'false');
+				}
+			} else {
+				$card
+					.removeAttr('data-wizlords-mobile-class-card')
+					.removeAttr('role')
+					.removeAttr('tabindex')
+					.removeAttr('aria-expanded')
+					.removeClass('is-open');
+			}
+		});
+	}
+	function toggleClassCard(card) {
+		if (!mobileQuery.matches) {
+			return;
+		}
+		var $card = $(card);
+		var isOpen = $card.hasClass('is-open');
+		$card
+			.toggleClass('is-open', !isOpen)
+			.attr('aria-expanded', isOpen ? 'false' : 'true');
+	}
+	$(initialiseClassCards);
+	if (mobileQuery.addEventListener) {
+		mobileQuery.addEventListener('change', initialiseClassCards);
+	} else if (mobileQuery.addListener) {
+		mobileQuery.addListener(initialiseClassCards);
+	}
+	$(document).on('click', '.wizlords-class-card', function (event) {
+		if ($(event.target).closest('a').length) {
+			return;
+		}
+		toggleClassCard(this);
+	});
+	$(document).on('keydown', '.wizlords-class-card', function (event) {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			toggleClassCard(this);
+		}
+	});
+}() );