Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.js: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
 
(4 intermediate revisions by the same user not shown)
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 = [
var classCategoryIcons = [
{
{
title: 'Martial Classes',
selector: '.wizlords-class-category-accordion-martial',
variant: 'martial',
fileName: 'MartialIcon.png'
icon: 'MartialIcon.png'
},
},
{
{
title: 'Arcane Classes',
selector: '.wizlords-class-category-accordion-arcane',
variant: 'arcane',
fileName: 'ArcaneIcon.png'
icon: 'ArcaneIcon.png'
},
},
{
{
title: 'Divine Classes',
selector: '.wizlords-class-category-accordion-divine',
variant: 'divine',
fileName: 'DivineIcon.png'
icon: 'DivineIcon.png'
}
}
];
];


function getClassCategoryIcon(fileName) {
function getClassCategoryAccordionIcon(fileName) {
var scriptPath = mw.config.get('wgScriptPath') || '';
var scriptPath = mw.config.get('wgScriptPath') || '';


Line 194: Line 191:
}
}


function getHeadingLabel($heading) {
function initialiseClassCategoryAccordionIcons() {
var $clone = $heading.clone();
classCategoryIcons.forEach(function (category) {
$(category.selector).each(function () {
var $icon = $(this).find('.wizlords-class-category-accordion-icon').first();


$clone
if ($icon.length && !$icon.children('img').length) {
.find('.mw-editsection, .indicator, .wizlords-mobile-class-category-heading-icon')
$icon.empty().append(getClassCategoryAccordionIcon(category.fileName));
.remove();
}
});
});
}
 
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');
}


return $.trim($clone.text()).replace(/\s+/g, ' ');
$(initialiseClassCategoryAccordions);
 
if (classCategoryQuery.addEventListener) {
classCategoryQuery.addEventListener('change', initialiseClassCategoryAccordions);
} else if (classCategoryQuery.addListener) {
classCategoryQuery.addListener(initialiseClassCategoryAccordions);
}
}


function groupClassCategoryHeading($heading, category) {
$(document).on('click', '.wizlords-class-category-accordion-heading', function () {
var title = getHeadingLabel($heading);
toggleClassCategoryAccordion(this);
var $inner = $heading.children('.wizlords-mobile-class-category-heading-inner').first();
});
var $editSection = $heading.children('.mw-editsection').first();


$heading
$(document).on('keydown', '.wizlords-class-category-accordion-heading', function (event) {
.contents()
if (event.key === 'Enter' || event.key === ' ') {
.filter(function () {
event.preventDefault();
return this.nodeType === 3;
toggleClassCategoryAccordion(this);
})
}
.remove();
});
}() );


$heading
/* Mobile/tablet race culture cards */
.children('.indicator, .mf-icon, .mw-headline, .wizlords-mobile-class-category-heading-icon')
( function () {
.remove();
var cultureCardQuery = window.matchMedia('(max-width: 899px)');


if (!$inner.length) {
function isMobileCitizenCultureLayout() {
$inner = $('<span>').addClass('wizlords-mobile-class-category-heading-inner');
return cultureCardQuery.matches && $('body').hasClass('skin-citizen');
}


if ($editSection.length) {
function initialiseCultureCards() {
$inner.insertBefore($editSection);
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 {
} else {
$heading.append($inner);
$card
.removeClass('is-open')
.removeAttr('data-wizlords-mobile-culture-card')
.removeAttr('role')
.removeAttr('tabindex')
.removeAttr('aria-expanded');
}
}
});
}
function toggleCultureCard(card) {
if (!isMobileCitizenCultureLayout()) {
return;
}
}


$inner.empty().append(
var $card = $(card);
$('<span>')
var isOpen = $card.hasClass('is-open');
.addClass('wizlords-mobile-class-category-heading-title')
 
.text(title)
$card
).append(
.toggleClass('is-open', !isOpen)
$('<span>')
.attr('aria-expanded', isOpen ? 'false' : 'true');
.addClass('wizlords-mobile-class-category-heading-icon')
.append(getClassCategoryIcon(category.icon))
);
}
}


function ungroupClassCategoryHeading($heading) {
$(initialiseCultureCards);
var $inner = $heading.children('.wizlords-mobile-class-category-heading-inner').first();


if ($inner.length) {
if (cultureCardQuery.addEventListener) {
var title = $.trim($inner.children('.wizlords-mobile-class-category-heading-title').first().text());
cultureCardQuery.addEventListener('change', initialiseCultureCards);
} else if (cultureCardQuery.addListener) {
cultureCardQuery.addListener(initialiseCultureCards);
}


if (title) {
$(document).on('click', '.wizlords-culture-card', function (event) {
$inner.before(document.createTextNode(title));
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);
});


$inner.remove();
$(document).on('keydown', '.wizlords-culture-card', function (event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
toggleCultureCard(this);
}
}
}
});
}() );


function enhanceClassCategoryHeadings() {
/* Responsive race Available Classes lists */
classCategoryHeadings.forEach(function (category) {
( function () {
$('h2').filter(function () {
function initialiseRaceAvailableClassLists() {
return getHeadingLabel($(this)) === category.title;
$('.wizlords-culture-classes + ul, .wizlords-shared-classes ul').each(function () {
}).each(function () {
var $list = $(this);
var $heading = $(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;


if (classCategoryHeadingQuery.matches && $('body').hasClass('skin-citizen')) {
$list
$heading
.removeClass(function (index, className) {
.addClass('wizlords-mobile-class-category-heading')
return (className.match(/(^|\s)count-\d+/g) || []).join(' ');
.addClass('wizlords-mobile-class-category-heading-' + category.variant);
})
.addClass('wizlords-available-classes-list count-' + itemCount)
.toggleClass('is-multicolumn', itemCount > 4)
.toggleClass('is-short', itemCount <= 4)
.toggleClass('is-drakeling-list', isDrakelingList);


groupClassCategoryHeading($heading, category);
$list
} else {
.closest('.wizlords-culture-card-body, .wizlords-shared-classes')
ungroupClassCategoryHeading($heading);
.addClass('wizlords-available-classes');
$heading
.removeClass('wizlords-mobile-class-category-heading')
.removeClass('wizlords-mobile-class-category-heading-' + category.variant)
.children('.wizlords-mobile-class-category-heading-icon')
.remove();
}
});
});
});
}
}


$(enhanceClassCategoryHeadings);
$(initialiseRaceAvailableClassLists);
 
if (classCategoryHeadingQuery.addEventListener) {
classCategoryHeadingQuery.addEventListener('change', enhanceClassCategoryHeadings);
} else if (classCategoryHeadingQuery.addListener) {
classCategoryHeadingQuery.addListener(enhanceClassCategoryHeadings);
}
}() );
}() );