MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* Bottom collapse controls */
 mw.loader.using('jquery.makeCollapsible').then(function () {
+	var exampleTableQuery = window.matchMedia('(max-width: 899px)');
 	function updateExampleTableState($table) {
 		$table
@@ Line 7: / Line 9: @@
 	}
-	$('.wizlords-example-table.mw-collapsible').each(function () {
+	function initialiseExampleTables() {
-		var $table = $(this);
+		$('.wizlords-example-table.mw-collapsible').each(function () {
+			var $table = $(this);
+			var $caption = $table.children('caption');
+			if (exampleTableQuery.matches) {
+				$caption
+					.attr('role', 'button')
+					.attr('tabindex', '0');
+				updateExampleTableState($table);
+			} else {
+				$caption
+					.removeAttr('role')
+					.removeAttr('tabindex')
+					.removeAttr('aria-expanded');
+			}
+		});
+	}
-		$table
+	$(initialiseExampleTables);
-			.children('caption')
-			.attr('role', 'button')
-			.attr('tabindex', '0');
-		updateExampleTableState($table);
+	if (exampleTableQuery.addEventListener) {
-	});
+		exampleTableQuery.addEventListener('change', initialiseExampleTables);
+	} else if (exampleTableQuery.addListener) {
+		exampleTableQuery.addListener(initialiseExampleTables);
+	}
 	$(document).on('click', '.wizlords-example-table.mw-collapsible > caption', function (event) {
+		if (!exampleTableQuery.matches) {
+			return;
+		}
 		if ($(event.target).closest('.mw-collapsible-toggle').length) {
 			return;
@@ Line 35: / Line 58: @@
 	$(document).on('keydown', '.wizlords-example-table.mw-collapsible > caption', function (event) {
+		if (!exampleTableQuery.matches) {
+			return;
+		}
 		if (event.key === 'Enter' || event.key === ' ') {
 			event.preventDefault();