MediaWiki:Common.js: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 163: | Line 163: | ||
}() ); | }() ); | ||
/* Mobile/tablet class category | /* Mobile/tablet class category accordions */ | ||
( function () { | ( function () { | ||
var | var classCategoryQuery = window.matchMedia('(max-width: 899px)'); | ||
var | var classCategoryIcons = [ | ||
{ | { | ||
selector: '.wizlords-class-category-accordion-martial', | |||
fileName: 'MartialIcon.png' | |||
}, | }, | ||
{ | { | ||
selector: '.wizlords-class-category-accordion-arcane', | |||
fileName: 'ArcaneIcon.png' | |||
}, | }, | ||
{ | { | ||
selector: '.wizlords-class-category-accordion-divine', | |||
fileName: 'DivineIcon.png' | |||
} | } | ||
]; | ]; | ||
function | function getClassCategoryAccordionIcon(fileName) { | ||
var scriptPath = mw.config.get('wgScriptPath') || ''; | var scriptPath = mw.config.get('wgScriptPath') || ''; | ||
| Line 194: | Line 191: | ||
} | } | ||
function | function initialiseClassCategoryAccordionIcons() { | ||
classCategoryIcons.forEach(function (category) { | |||
$(category.selector).each(function () { | |||
var $icon = $(this).find('.wizlords-class-category-accordion-icon').first(); | |||
$ | if ($icon.length && !$icon.children('img').length) { | ||
. | $icon.empty().append(getClassCategoryAccordionIcon(category.fileName)); | ||
} | |||
}); | |||
}); | |||
} | |||
function initialiseClassCategoryAccordions() { | |||
initialiseClassCategoryAccordionIcons(); | |||
$('.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 (isMobileCitizen) { | |||
$heading | |||
.attr('role', 'button') | |||
.attr('tabindex', '0') | |||
.attr('aria-expanded', isOpen ? 'true' : 'false'); | |||
} else { | |||
$accordion.removeClass('is-open'); | |||
$heading | |||
.removeAttr('role') | |||
.removeAttr('tabindex') | |||
.removeAttr('aria-expanded'); | |||
} | |||
}); | |||
} | |||
function toggleClassCategoryAccordion(heading) { | |||
if (!classCategoryQuery.matches || !$('body').hasClass('skin-citizen')) { | |||
return; | |||
} | |||
var $heading = $(heading); | |||
var $accordion = $heading.closest('.wizlords-class-category-accordion'); | |||
var isOpen = $accordion.hasClass('is-open'); | |||
$accordion.toggleClass('is-open', !isOpen); | |||
$heading.attr('aria-expanded', isOpen ? 'false' : 'true'); | |||
} | |||
$(initialiseClassCategoryAccordions); | |||
if (classCategoryQuery.addEventListener) { | |||
classCategoryQuery.addEventListener('change', initialiseClassCategoryAccordions); | |||
} else if (classCategoryQuery.addListener) { | |||
classCategoryQuery.addListener(initialiseClassCategoryAccordions); | |||
} | } | ||
$(document).on('click', '.wizlords-class-category-accordion-heading', function () { | |||
toggleClassCategoryAccordion(this); | |||
}); | |||
$(document).on('keydown', '.wizlords-class-category-accordion-heading', function (event) { | |||
if (event.key === 'Enter' || event.key === ' ') { | |||
event.preventDefault(); | |||
toggleClassCategoryAccordion(this); | |||
} | |||
}); | |||
}() ); | |||
/* Mobile/tablet race culture cards */ | |||
( function () { | |||
var cultureCardQuery = window.matchMedia('(max-width: 899px)'); | |||
function isMobileCitizenCultureLayout() { | |||
return cultureCardQuery.matches && $('body').hasClass('skin-citizen'); | |||
} | |||
function initialiseCultureCards() { | |||
var isActive = isMobileCitizenCultureLayout(); | |||
$('.wizlords-culture-card').each(function () { | |||
var $card = $(this); | |||
var isOpen = $card.hasClass('is-open'); | |||
if (isActive) { | |||
$card | |||
} | .attr('data-wizlords-mobile-culture-card', '1') | ||
.attr('role', 'button') | |||
.attr('tabindex', '0') | |||
.attr('aria-expanded', isOpen ? 'true' : 'false'); | |||
} else { | |||
$card | |||
.removeClass('is-open') | |||
.removeAttr('data-wizlords-mobile-culture-card') | |||
.removeAttr('role') | |||
.removeAttr('tabindex') | |||
.removeAttr('aria-expanded'); | |||
} | |||
}); | }); | ||
} | } | ||
$( | function toggleCultureCard(card) { | ||
if (!isMobileCitizenCultureLayout()) { | |||
return; | |||
} | |||
var $card = $(card); | |||
var isOpen = $card.hasClass('is-open'); | |||
$card | |||
.toggleClass('is-open', !isOpen) | |||
.attr('aria-expanded', isOpen ? 'false' : 'true'); | |||
} | |||
$(initialiseCultureCards); | |||
if ( | if (cultureCardQuery.addEventListener) { | ||
cultureCardQuery.addEventListener('change', initialiseCultureCards); | |||
} else if ( | } else if (cultureCardQuery.addListener) { | ||
cultureCardQuery.addListener(initialiseCultureCards); | |||
} | } | ||
$(document).on('click', '.wizlords-culture-card', function (event) { | |||
var isCultureHeaderLink = $(event.target).closest('.wizlords-culture-card-header a, .wizlords-culture-card-title a').length; | |||
if (isMobileCitizenCultureLayout() && isCultureHeaderLink) { | |||
event.preventDefault(); | |||
event.stopPropagation(); | |||
toggleCultureCard(this); | |||
return; | |||
} | |||
if ($(event.target).closest('a').length) { | |||
return; | |||
} | |||
toggleCultureCard(this); | |||
}); | |||
$(document).on('keydown', '.wizlords-culture-card', function (event) { | |||
if (event.key === 'Enter' || event.key === ' ') { | |||
event.preventDefault(); | |||
toggleCultureCard(this); | |||
} | |||
}); | |||
}() ); | |||
/* Responsive race Available Classes lists */ | |||
( function () { | |||
function initialiseRaceAvailableClassLists() { | |||
$('.wizlords-culture-classes + ul, .wizlords-shared-classes ul').each(function () { | |||
var $list = $(this); | |||
var itemCount = $list.children('li').length; | |||
var $sharedClasses = $list.closest('.wizlords-shared-classes'); | |||
var isDrakelingList = $sharedClasses | |||
.children('.wizlords-shared-classes-title') | |||
.first() | |||
.text() | |||
.indexOf('Drakelings') !== -1; | |||
$list | |||
.removeClass(function (index, className) { | |||
return (className.match(/(^|\s)count-\d+/g) || []).join(' '); | |||
}) | |||
.addClass('wizlords-available-classes-list count-' + itemCount) | |||
.toggleClass('is-multicolumn', itemCount > 4) | |||
.toggleClass('is-short', itemCount <= 4) | |||
.toggleClass('is-drakeling-list', isDrakelingList); | |||
$list | |||
.closest('.wizlords-culture-card-body, .wizlords-shared-classes') | |||
.addClass('wizlords-available-classes'); | |||
}); | |||
} | |||
$(initialiseRaceAvailableClassLists); | |||
}() ); | }() ); | ||