MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 161: / Line 161: @@
 		}
 	});
+}() );
+/* Mobile/tablet class category heading enhancements */
+( function () {
+	var classCategoryHeadingQuery = window.matchMedia('(max-width: 899px)');
+	var classCategoryHeadings = [
+		{
+			title: 'Martial Classes',
+			variant: 'martial',
+			icon: 'MartialIcon.png'
+		},
+		{
+			title: 'Arcane Classes',
+			variant: 'arcane',
+			icon: 'ArcaneIcon.png'
+		},
+		{
+			title: 'Divine Classes',
+			variant: 'divine',
+			icon: 'DivineIcon.png'
+		}
+	];
+	function getClassCategoryIcon(fileName) {
+		var scriptPath = mw.config.get('wgScriptPath') || '';
+		return $('<img>')
+			.attr('src', scriptPath + '/index.php/Special:FilePath/' + encodeURIComponent(fileName))
+			.attr('alt', '')
+			.attr('loading', 'lazy')
+			.attr('decoding', 'async');
+	}
+	function getHeadingLabel($heading) {
+		var $clone = $heading.clone();
+		$clone
+			.find('.mw-editsection, .indicator, .wizlords-mobile-class-category-heading-icon')
+			.remove();
+		return $.trim($clone.text()).replace(/\s+/g, ' ');
+	}
+	function enhanceClassCategoryHeadings() {
+		classCategoryHeadings.forEach(function (category) {
+			$('h2').filter(function () {
+				return getHeadingLabel($(this)) === category.title;
+			}).each(function () {
+				var $heading = $(this);
+				if (classCategoryHeadingQuery.matches && $('body').hasClass('skin-citizen')) {
+					$heading
+						.addClass('wizlords-mobile-class-category-heading')
+						.addClass('wizlords-mobile-class-category-heading-' + category.variant);
+					if (!$heading.children('.wizlords-mobile-class-category-heading-icon').length) {
+						var $icon = $('<span>')
+							.addClass('wizlords-mobile-class-category-heading-icon')
+							.append(getClassCategoryIcon(category.icon));
+						var $editSection = $heading.children('.mw-editsection').first();
+						if ($editSection.length) {
+							$icon.insertBefore($editSection);
+						} else {
+							$heading.append($icon);
+						}
+					}
+				} else {
+					$heading
+						.removeClass('wizlords-mobile-class-category-heading')
+						.removeClass('wizlords-mobile-class-category-heading-' + category.variant)
+						.children('.wizlords-mobile-class-category-heading-icon')
+						.remove();
+				}
+			});
+		});
+	}
+	$(enhanceClassCategoryHeadings);
+	if (classCategoryHeadingQuery.addEventListener) {
+		classCategoryHeadingQuery.addEventListener('change', enhanceClassCategoryHeadings);
+	} else if (classCategoryHeadingQuery.addListener) {
+		classCategoryHeadingQuery.addListener(enhanceClassCategoryHeadings);
+	}
 }() );