MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
Tag: Undo |
No edit summary |
||
Line 177: | Line 177: | ||
} | } | ||
widget.prepend(selector); | widget.prepend(selector); | ||
} | |||
} | |||
} | |||
/* | |||
* Accordion | |||
* @param config Object containing configuration | |||
*/ | |||
function accordion(config) { | |||
const defaults = { | |||
mainClass: 'accordion', | |||
toggleClass: 'accordion__toggle' | |||
}; | |||
config = Object.assign(defaults, config); | |||
var accordions = document.getElementsByClassName(config.mainClass); | |||
if ( accordions.length === 0 ) { | |||
return; | |||
} | |||
const do_toggle = function () { | |||
this.parentNode.classList.toggle('is-open'); | |||
}; | |||
for ( var i = 0; i < accordions.length; i++ ) { | |||
var accordion = accordions[i]; | |||
var headings = accordion.getElementsByClassName(config.toggleClass); | |||
for ( var k = 0; k < headings.length; k++ ) { | |||
var heading = headings[k]; | |||
var button = document.createElement('button'); | |||
while ( heading.firstChild ) { | |||
button.appendChild(heading.firstChild); | |||
} | |||
heading.appendChild(button); | |||
button.addEventListener( 'click', do_toggle.bind(button) ); | |||
} | } | ||
} | } | ||
Line 234: | Line 266: | ||
// Gem quality widget in item infobox | // Gem quality widget in item infobox | ||
gem_quality_widget( document.getElementsByClassName('gemqual-widget') ); | gem_quality_widget( document.getElementsByClassName('gemqual-widget') ); | ||
// Accordions | |||
accordion(); | |||
} ); | } ); |
Revision as of 22:18, 19 November 2022
/* global mw, $ */
/* jshint strict:false, browser:true */
( function() {
'use strict';
/* DO NOT ADD CODE ABOVE THIS LINE */
/* Translation strings */
var i18n = {
defaultLicense: 'Copyright unlicensed'
};
/**
* Hoverbox
* @param config Object containing configuration
*/
function hoverbox(config) {
const defaults = {
mainClass: 'hoverbox',
activatorClass: 'hoverbox__activator',
displayClass: 'hoverbox__display'
};
config = Object.assign(defaults, config);
var timestamp = Date.now(),
$container = $('#hoverbox-displays-' + timestamp);
if ( $container.length === 0 ) {
$container = $('<div id="hoverbox-displays-' + timestamp + '" class="hoverbox-display-container"></div>');
}
$('body').append($container);
var $hoverbox = $('.' + config.mainClass),
idCounter = 0;
$hoverbox.each(function() {
var $this = $(this),
$activator = $this.find('.' + config.activatorClass).first(),
$display = $this.find('.' + config.displayClass).first(),
id = $this.data('hoverbox-id') || idCounter++,
$target = $container.find('[data-hoverbox-target="' + id + '"]');
if ( $target.length === 0 ) {
$container.append($display);
$display.attr('data-hoverbox-target', id);
} else {
$display.remove();
$display = $target;
}
$activator.hover(function() {
var viewport = {},
activator = {},
display = {},
position, // position relative to the activator
location; // location relative to the viewport
viewport.width = document.documentElement.clientWidth;
viewport.height = document.documentElement.clientHeight;
viewport.top = document.documentElement.scrollTop;
viewport.left = document.documentElement.scrollLeft;
viewport.bottom = viewport.top + viewport.height;
viewport.right = viewport.left + viewport.width;
activator.width = $activator.outerWidth();
activator.height = $activator.outerHeight();
activator.top = $activator.offset().top;
activator.left = $activator.offset().left;
activator.bottom = activator.top + activator.height;
activator.right = activator.left + activator.width;
display.width = $display.outerWidth();
display.height = $display.outerHeight();
if (viewport.width < display.width) { // Don't bother showing the hoverbox at all if the viewport is too small
return false;
}
if (activator.left > viewport.width - activator.right) {
location = 'right';
} else {
location = 'left';
}
if (activator.top - display.height > viewport.top) {
position = 'above';
display.top = activator.top - display.height;
display.left = activator.left + (activator.width / 2) - (display.width / 2);
} else if (activator.right + display.width < viewport.right) {
position = 'right-of';
display.top = activator.top + (activator.height / 2) - (display.height / 2);
display.left = activator.right;
} else if (activator.left - display.width > viewport.left) {
position = 'left-of';
display.top = activator.top + (activator.height / 2) - (display.height / 2);
display.left = activator.left - display.width;
} else {
position = 'below';
display.top = activator.bottom;
display.left = activator.left + (activator.width / 2) - (display.width / 2);
}
display.top = Math.max(viewport.top, display.top);
display.left = Math.max(viewport.left, Math.min(viewport.right - display.width, display.left));
$display.addClass('is-visible is-' + position + '-activator is-' + location + '-side-of-viewport').offset(display);
}, function() {
$display.removeClass('is-visible is-above-activator is-below-activator is-left-of-activator is-right-of-activator is-left-side-of-viewport is-right-side-of-viewport');
});
});
}
/*
* Veiled modifiers
*/
function veiledModifier() {
var mainClass = 'veiled'; // Class name of veiled modifier elements
var affixCount = 6; // Number of veiled prefixes and veiled suffixes
var affixClass = '-m0$1'; // $1 is replaced with a random number between 1 and affixCount
var elements = document.getElementsByClassName(mainClass);
if ( elements.length > 0 ) {
var last, random;
for ( var i = 0; i < elements.length; i++ ) {
var element = elements[i];
if ( last === undefined ) { // Choose with a random integer between 1 and affixCount
random = Math.floor(Math.random() * affixCount) + 1;
} else { // Continue choosing random integers in the same range while ensuring no repeats
random = Math.floor(Math.random() * (affixCount - 1)) + 1;
if ( random >= last ) {
random = random + 1;
}
}
last = random;
element.classList.add(affixClass.replace('$1', random));
}
}
}
function boolean_table() {
$('.boolean-table').find('table').find('td').each(function () {
var text = $(this).html();
if (text == '0') {
$(this).html('✗');
$(this).addClass('table-cell-xmark');
} else if (text == '1') {
$(this).html('✓');
$(this).addClass('table-cell-checkmark');
}
})
}
/**
* Gem quality widget
* @param widgets Elements containing gem quality widgets
*/
function gem_quality_widget(widgets) {
if ( widgets.length > 0 ) {
const do_toggle = function (widget) {
if ( ! this.classList.contains('is-selected') ) {
var options = widget.getElementsByClassName('gemqual-widget__option');
var stats_collection = widget.getElementsByClassName('gemqual-widget__stats');
for ( var i = 0; i < options.length; i++ ) {
var option = options[i];
var stats = stats_collection[i];
if ( option.dataset.qid === this.dataset.qid ) {
option.classList.add('is-selected');
stats.classList.add('is-selected');
} else {
option.classList.remove('is-selected');
stats.classList.remove('is-selected');
}
}
}
};
for ( var i = 0; i < widgets.length; i++ ) {
var widget = widgets[i]
var qtypes = widget.dataset.qtypes;
qtypes = qtypes.split(',');
var selector = document.createElement('div');
selector.classList.add('gemqual-widget__selector');
for ( var k = 0; k < qtypes.length; k++ ) {
var option = document.createElement('button');
option.classList.add('gemqual-widget__option');
option.setAttribute('data-qid', k+1);
option.innerHTML = qtypes[k];
if ( k === 0 ) {
option.classList.add('is-selected');
}
selector.append(option);
option.addEventListener( 'click', do_toggle.bind(option, widget) );
}
widget.prepend(selector);
}
}
}
/*
* Accordion
* @param config Object containing configuration
*/
function accordion(config) {
const defaults = {
mainClass: 'accordion',
toggleClass: 'accordion__toggle'
};
config = Object.assign(defaults, config);
var accordions = document.getElementsByClassName(config.mainClass);
if ( accordions.length === 0 ) {
return;
}
const do_toggle = function () {
this.parentNode.classList.toggle('is-open');
};
for ( var i = 0; i < accordions.length; i++ ) {
var accordion = accordions[i];
var headings = accordion.getElementsByClassName(config.toggleClass);
for ( var k = 0; k < headings.length; k++ ) {
var heading = headings[k];
var button = document.createElement('button');
while ( heading.firstChild ) {
button.appendChild(heading.firstChild);
}
heading.appendChild(button);
button.addEventListener( 'click', do_toggle.bind(button) );
}
}
}
function setDefaultFileUploadLicense() {
if ( mw.config.get('wgCanonicalSpecialPageName') === 'Upload' ) {
mw.loader.using( 'mediawiki.special.upload', function() {
// Wait until the next event cycle to ensure that the licensing template preview loads
setTimeout( function() {
var licenseField = document.getElementById('wpLicense');
if ( licenseField && licenseField.value === '' ) {
licenseField.value = i18n.defaultLicense;
licenseField.dispatchEvent( new Event('change') );
}
} );
} );
}
}
/* Fires when DOM is ready */
$( function() {
/* For adding expand/collapse all buttons for mw-collapsible */
$(".mw-collapsible-collapse-all").on("click", function () {
$('.mw-collapsible-toggle-expanded a').trigger('click');
});
$(".mw-collapsible-expand-all").on("click", function () {
$(".mw-collapsible-toggle-collapsed a").trigger('click');
});
// Hoverbox
hoverbox();
// Item hoverbox
hoverbox({
mainClass: 'c-item-hoverbox',
activatorClass: 'c-item-hoverbox__activator',
displayClass: 'c-item-hoverbox__display'
});
// Veiled modifiers
veiledModifier();
// Change 1 & 0 to checkmarks in tables
boolean_table();
// Set default file upload license to unknown instead of none
setDefaultFileUploadLicense();
} );
/* End DOM ready */
/* Fires when wiki content is added. */
mw.hook('wikipage.content').add( function($wikipageContent) {
// Gem quality widget in item infobox
gem_quality_widget( document.getElementsByClassName('gemqual-widget') );
// Accordions
accordion();
} );
/* DO NOT ADD CODE BELOW THIS LINE */
}() );