|
|
| Line 163: |
Line 163: |
| }() ); | | }() ); |
|
| |
|
| /* Mobile/tablet class category heading enhancements */ | | /* Mobile/tablet class category accordions */ |
| ( function () { | | ( function () { |
| var classCategoryHeadingQuery = window.matchMedia('(max-width: 899px)'); | | var classCategoryQuery = 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 groupClassCategoryHeading($heading, category) {
| |
| var title = getHeadingLabel($heading);
| |
| var $inner = $heading.children('.wizlords-mobile-class-category-heading-inner').first();
| |
| var $editSection = $heading.children('.mw-editsection').first();
| |
| | |
| $heading
| |
| .contents()
| |
| .filter(function () {
| |
| return this.nodeType === 3;
| |
| })
| |
| .remove();
| |
| | |
| $heading
| |
| .children('.indicator, .mf-icon, .mw-headline, .wizlords-mobile-class-category-heading-icon')
| |
| .remove();
| |
|
| |
|
| if (!$inner.length) { | | function initialiseClassCategoryAccordions() { |
| $inner = $('<span>').addClass('wizlords-mobile-class-category-heading-inner'); | | $('.wizlords-class-category-accordion').each(function () { |
| | var $accordion = $(this); |
| | var $heading = $accordion.children('.wizlords-class-category-accordion-heading').first(); |
| | var isMobileCitizen = classCategoryQuery.matches && $('body').hasClass('skin-citizen'); |
| | var isOpen = $accordion.hasClass('is-open'); |
|
| |
|
| if ($editSection.length) { | | if (isMobileCitizen) { |
| $inner.insertBefore($editSection); | | $heading |
| | .attr('role', 'button') |
| | .attr('tabindex', '0') |
| | .attr('aria-expanded', isOpen ? 'true' : 'false'); |
| } else { | | } else { |
| $heading.append($inner); | | $accordion.removeClass('is-open'); |
| | $heading |
| | .removeAttr('role') |
| | .removeAttr('tabindex') |
| | .removeAttr('aria-expanded'); |
| } | | } |
| } | | }); |
| | |
| $inner.empty().append(
| |
| $('<span>')
| |
| .addClass('wizlords-mobile-class-category-heading-title')
| |
| .text(title)
| |
| ).append(
| |
| $('<span>')
| |
| .addClass('wizlords-mobile-class-category-heading-icon')
| |
| .append(getClassCategoryIcon(category.icon))
| |
| );
| |
| } | | } |
|
| |
|
| function ungroupClassCategoryHeading($heading) { | | function toggleClassCategoryAccordion(heading) { |
| var $inner = $heading.children('.wizlords-mobile-class-category-heading-inner').first(); | | if (!classCategoryQuery.matches || !$('body').hasClass('skin-citizen')) { |
| | return; |
| | } |
|
| |
|
| if ($inner.length) { | | var $heading = $(heading); |
| var title = $.trim($inner.children('.wizlords-mobile-class-category-heading-title').first().text());
| | var $accordion = $heading.closest('.wizlords-class-category-accordion'); |
| | var isOpen = $accordion.hasClass('is-open'); |
|
| |
|
| if (title) {
| | $accordion.toggleClass('is-open', !isOpen); |
| $inner.before(document.createTextNode(title));
| | $heading.attr('aria-expanded', isOpen ? 'false' : 'true'); |
| }
| |
| | |
| $inner.remove();
| |
| }
| |
| } | | } |
|
| |
|
| function enhanceClassCategoryHeadings() { | | $(initialiseClassCategoryAccordions); |
| classCategoryHeadings.forEach(function (category) {
| |
| $('h2').filter(function () {
| |
| return getHeadingLabel($(this)) === category.title;
| |
| }).each(function () {
| |
| var $heading = $(this);
| |
|
| |
|
| if (classCategoryHeadingQuery.matches && $('body').hasClass('skin-citizen')) {
| | if (classCategoryQuery.addEventListener) { |
| $heading
| | classCategoryQuery.addEventListener('change', initialiseClassCategoryAccordions); |
| .addClass('wizlords-mobile-class-category-heading')
| | } else if (classCategoryQuery.addListener) { |
| .addClass('wizlords-mobile-class-category-heading-' + category.variant);
| | classCategoryQuery.addListener(initialiseClassCategoryAccordions); |
| | |
| groupClassCategoryHeading($heading, category);
| |
| } else {
| |
| ungroupClassCategoryHeading($heading);
| |
| $heading
| |
| .removeClass('wizlords-mobile-class-category-heading')
| |
| .removeClass('wizlords-mobile-class-category-heading-' + category.variant)
| |
| .children('.wizlords-mobile-class-category-heading-icon')
| |
| .remove();
| |
| }
| |
| });
| |
| });
| |
| } | | } |
|
| |
|
| $(enhanceClassCategoryHeadings); | | $(document).on('click', '.wizlords-class-category-accordion-heading', function () { |
| | toggleClassCategoryAccordion(this); |
| | }); |
|
| |
|
| if (classCategoryHeadingQuery.addEventListener) { | | $(document).on('keydown', '.wizlords-class-category-accordion-heading', function (event) { |
| classCategoryHeadingQuery.addEventListener('change', enhanceClassCategoryHeadings);
| | if (event.key === 'Enter' || event.key === ' ') { |
| } else if (classCategoryHeadingQuery.addListener) {
| | event.preventDefault(); |
| classCategoryHeadingQuery.addListener(enhanceClassCategoryHeadings);
| | toggleClassCategoryAccordion(this); |
| } | | } |
| | }); |
| }() ); | | }() ); |
|
| |
|
