MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
m (improve image carousel logic for pages with more than one infobox) |
(improve qud image carousel to work for multiple infoboxes on the same page) |
||
Line 83: | Line 83: | ||
var qudCarouselGearbox = qudCarouselGearbox || { | var qudCarouselGearbox = qudCarouselGearbox || { | ||
initialize: function () { | initialize: function () { | ||
$( | $(".qud-sprite-carousel").each(function (idx1, elem1) { | ||
$(elem1).find('.qud-carousel-item').each(function (idx, elem) { | |||
$(elem).addClass("qud-carousel-item-number-" + idx); | |||
if ($(elem).is(":visible")) { | |||
} | window.qudCarouselGearbox.currentIndex = idx; | ||
} | |||
}); | |||
}); | }); | ||
$( | $(".qud-sprite-carousel .qud-carousel-btn-left").click(function () { | ||
window.qudCarouselGearbox.removeHighlight(); | window.qudCarouselGearbox.removeHighlight(); | ||
window.qudCarouselGearbox.rotate(-1); | window.qudCarouselGearbox.rotate($(this).closest('.qud-sprite-carousel'), -1); | ||
}); | }); | ||
$( | $(".qud-sprite-carousel .qud-carousel-btn-right").click(function () { | ||
window.qudCarouselGearbox.removeHighlight(); | window.qudCarouselGearbox.removeHighlight(); | ||
window.qudCarouselGearbox.rotate(1); | window.qudCarouselGearbox.rotate($(this).closest('.qud-sprite-carousel'), 1); | ||
}); | }); | ||
$( | $(".infobox-title").append('<div class="qud-carousel-title"></div>'); | ||
}, | }, | ||
rotate: function (amount) { | rotate: function (parentElem, amount) { | ||
items = $(' | items = $(parentElem).find('.qud-carousel-item'); | ||
curIndex = 0 | |||
$(items).each(function (idx, elem) { | $(items).each(function (idx, elem) { | ||
if ($(elem).is(":visible")) { | |||
curIndex = idx | |||
} | |||
$(elem).hide(); | $(elem).hide(); | ||
}); | }); | ||
curIndex += amount | |||
end = $(items).length - 1; | end = $(items).length - 1; | ||
if ( | if (curIndex < 0) { | ||
curIndex = end; | |||
} else if ( | } else if (curIndex > end) { | ||
curIndex = 0; | |||
} | } | ||
curItem = $( | curItem = $(parentElem).find('.qud-carousel-item-number-' + curIndex).first(); | ||
curItem.show(); | curItem.show(); | ||
/* expand infobox title to also show image label */ | /* expand infobox title to also show image label */ | ||
carouselTitle = $('.qud-carousel-title'); | carouselTitle = $(parentElem).siblings('.infobox-title').find('.qud-carousel-title').first(); | ||
carouselTitle.text(curItem.data( | carouselTitle.text(curItem.data("label")); | ||
carouselTitle.animate({ height: | carouselTitle.animate({ height: "25px" }); | ||
}, | }, | ||
removeHighlight: function () { | removeHighlight: function () { |
Revision as of 02:49, 14 November 2020
/* improved gadgets-definition page */
$(function() {
if (mw.config.get('wgPageName') != 'MediaWiki:Gadgets-definition') return;
var urlPrefix = mw.config.get('wgServer') + '/MediaWiki:Gadget-';
function replaceWithLink(str) {
var link = document.createElement('a');
$(link).attr('href', urlPrefix + str);
$(link).html(str);
return link.outerHTML;
}
$('#mw-content-text li').each(function() {
var html = $(this).html();
var htmlParts = html.split('|');
for (i in htmlParts) {
if (htmlParts[i].endsWith('css') || htmlParts[i].endsWith('js')) {
htmlParts[i] = replaceWithLink(htmlParts[i]);
}
}
var text = htmlParts.join('|');
var firstPart = text.match(/^([^\|\[]*)/)[0];
if (firstPart) text = text.replace(firstPart, replaceWithLink(firstPart));
$(this).html(text);
});
$('#mw-content-text h2 .mw-headline').each(function() {
$(this).html(replaceWithLink('section-' + $(this).html()));
});
});
/**
* Pause MCUI templates (e.g. [[Template:Crafting Table]]) on mouseover
*
* This is so people have a chance to look at each image on the cell
* and click on pages they want to view.
*/
$( '#mw-content-text' ).on( 'mouseenter mouseleave', '.mcui', function( e ) {
$( this ).find( '.animated' ).toggleClass( 'animated-paused', e.type === 'mouseenter' );
} );
/************************************
/* Qud infobox image-to-gif swapper *
/************************************/
// Author: egocarib
// Date: 2020-Oct
// License: CC-BY 3.0
// Designed for use in infoboxes on the Caves of Qud wiki.
// Powers an infobox template (Template:Infobox_image_and_gif) that
// allows users to swap from a static image to preview an animated gif
// Also supports "image carousel"-type behavior with multiple images/gifs.
var qudInfoboxImageToggler = qudInfoboxImageToggler || {
initialize: function () {
$('.qud-toggler > .qud-toggler-initial').show();
$('.qud-toggler > .qud-toggler-button').show();
$('.qud-toggler > .qud-toggler-final').hide();
$('.qud-toggler > .qud-toggler-button').click(function () {
window.qudInfoboxImageToggler.toggle();
});
$('.qud-html-details .qud-html-summary').click(function () {
window.qudInfoboxImageToggler.summaryClick();
});
},
toggle: function () {
$('.qud-toggler > .qud-toggler-initial').hide();
$('.qud-toggler > .qud-toggler-button').hide();
$('.qud-toggler > .qud-toggler-final').show();
},
summaryClick: function () {
$('.qud-html-details .qud-html-summary').toggleClass(
'qud-html-summary-open'
);
if ( $('.qud-toggler > .qud-toggler-final > img').css('visibility') == 'hidden' )
$('.qud-toggler > .qud-toggler-final > img').css('visibility','visible');
else
$('.qud-toggler > .qud-toggler-final > img').css('visibility','hidden');
}
};
window.qudInfoboxImageToggler = qudInfoboxImageToggler;
$(document).ready(qudInfoboxImageToggler.initialize);
var qudCarouselGearbox = qudCarouselGearbox || {
initialize: function () {
$(".qud-sprite-carousel").each(function (idx1, elem1) {
$(elem1).find('.qud-carousel-item').each(function (idx, elem) {
$(elem).addClass("qud-carousel-item-number-" + idx);
if ($(elem).is(":visible")) {
window.qudCarouselGearbox.currentIndex = idx;
}
});
});
$(".qud-sprite-carousel .qud-carousel-btn-left").click(function () {
window.qudCarouselGearbox.removeHighlight();
window.qudCarouselGearbox.rotate($(this).closest('.qud-sprite-carousel'), -1);
});
$(".qud-sprite-carousel .qud-carousel-btn-right").click(function () {
window.qudCarouselGearbox.removeHighlight();
window.qudCarouselGearbox.rotate($(this).closest('.qud-sprite-carousel'), 1);
});
$(".infobox-title").append('<div class="qud-carousel-title"></div>');
},
rotate: function (parentElem, amount) {
items = $(parentElem).find('.qud-carousel-item');
curIndex = 0
$(items).each(function (idx, elem) {
if ($(elem).is(":visible")) {
curIndex = idx
}
$(elem).hide();
});
curIndex += amount
end = $(items).length - 1;
if (curIndex < 0) {
curIndex = end;
} else if (curIndex > end) {
curIndex = 0;
}
curItem = $(parentElem).find('.qud-carousel-item-number-' + curIndex).first();
curItem.show();
/* expand infobox title to also show image label */
carouselTitle = $(parentElem).siblings('.infobox-title').find('.qud-carousel-title').first();
carouselTitle.text(curItem.data("label"));
carouselTitle.animate({ height: "25px" });
},
removeHighlight: function () {
/* prevents weird highlight selection behavior if buttons are double-clicked */
if (window.getSelection) window.getSelection().removeAllRanges();
else if (document.selection) document.selection.empty();
}
};
window.qudCarouselGearbox = qudCarouselGearbox;
$(document).ready(qudCarouselGearbox.initialize);
/****************************************
/* End Qud infobox image-to-gif swapper *
/****************************************/
/*************************
/* Qud inline gif player *
/*************************/
// Author: egocarib
// Date: 2020-Oct
// License: CC-BY 3.0
// Code for a simple little gif mask / click to play widget.
// See Template:Masked_gif for a demo
var qudInlineGifMasker = qudInlineGifMasker || {
initialize: function () {
$('.qud-inline-gif').click(function () {
window.qudInlineGifMasker.toggle(this);
});
},
toggle: function(elem) {
$(elem).find('*').toggleClass('qud-invisible');
}
};
window.qudInlineGifMasker = qudInlineGifMasker;
$(document).ready(qudInlineGifMasker.initialize);
/*****************************
/* End Qud inline gif player *
/*****************************/