MediaWiki:Mobile.js: Difference between revisions
Jump to navigation
Jump to search
m (adjust visibility of secondary image in qud-toggler) |
(Add image carousel toggling code) |
||
Line 66: | Line 66: | ||
// Powers an infobox template (Template:Infobox_image_and_gif) that | // Powers an infobox template (Template:Infobox_image_and_gif) that | ||
// allows users to swap from a static image to preview an animated gif | // 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 || { | var qudInfoboxImageToggler = qudInfoboxImageToggler || { | ||
initialize: function () { | 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(); | window.qudInfoboxImageToggler.toggle(); | ||
}); | }); | ||
$( | $('.qud-html-details .qud-html-summary').click(function () { | ||
window.qudInfoboxImageToggler.summaryClick(); | window.qudInfoboxImageToggler.summaryClick(); | ||
}); | }); | ||
}, | }, | ||
toggle: function () { | toggle: function () { | ||
$( | $('.qud-toggler > .qud-toggler-initial').hide(); | ||
$( | $('.qud-toggler > .qud-toggler-button').hide(); | ||
$( | $('.qud-toggler > .qud-toggler-final').show(); | ||
}, | }, | ||
summaryClick: function () { | summaryClick: function () { | ||
$( | $('.qud-html-details .qud-html-summary').toggleClass( | ||
'qud-html-summary-open' | |||
); | ); | ||
} | } | ||
}; | }; | ||
Line 98: | Line 95: | ||
$(document).ready(qudInfoboxImageToggler.initialize); | $(document).ready(qudInfoboxImageToggler.initialize); | ||
var qudCarouselGearbox = qudCarouselGearbox || { | |||
initialize: function () { | |||
$('.qud-sprite-carousel > .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(-1); | |||
}); | |||
$('.qud-sprite-carousel .qud-carousel-btn-right').click(function () { | |||
window.qudCarouselGearbox.removeHighlight(); | |||
window.qudCarouselGearbox.rotate(1); | |||
}); | |||
$('.infobox-title').append('<div class="qud-carousel-title"></div>'); | |||
}, | |||
rotate: function (amount) { | |||
items = $('.qud-sprite-carousel > .qud-carousel-item'); | |||
$(items).each(function (idx, elem) { | |||
$(elem).hide(); | |||
}); | |||
window.qudCarouselGearbox.currentIndex += amount; | |||
end = $(items).length - 1; | |||
if (window.qudCarouselGearbox.currentIndex < 0) { | |||
window.qudCarouselGearbox.currentIndex = end; | |||
} else if (window.qudCarouselGearbox.currentIndex > end) { | |||
window.qudCarouselGearbox.currentIndex = 0; | |||
} | |||
curItem = $( | |||
'.qud-sprite-carousel > .qud-carousel-item-number-' + | |||
window.qudCarouselGearbox.currentIndex | |||
); | |||
curItem.show(); | |||
/* expand infobox title to also show image label */ | |||
carouselTitle = $('.qud-carousel-title'); | |||
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 * | /* End Qud infobox image-to-gif swapper * | ||
/****************************************/ | /****************************************/ |
Revision as of 18:44, 25 October 2020
/* Any JavaScript here will be loaded for users using the mobile site */
/************************************
/* Main Page Mobile Collapse Script *
/************************************/
// Author: Shawn Bruckner
// Date: 2018-Jun-7
// License: CC-BY 3.0
// This script, paired with .mobilecollapsible styles in MediaWiki:Mobile.css, supports making .fpbox collapsible in the mobile view using both the standard
// 2 or 3-column responsive front pages.
// Making an .fpbox collapsible in mobile view involves the following:
// 1. Adding "mobilecollapsible" as another class alongside "fpbox".
// 2. Making sure there is a heading identified by the "heading" class.
// * Links inside headings can still work, but aren't recommended because they'll be easy to fat-finger while trying to collapse/expand the box.
// * The script allows multiple headings and automatically ignores any with the "nomobile" or "notoggle" class.
// * If there are still multiple headings after excluding those, only the first is turned into a collapsing toggle link.
// 3. Placing the area that should be hidden when collapsed inside a div or other block with the "body" class.
// * It's usually best for this to be everything in the box *except* the heading.
// 4. Optionally add "expanded" next to "mobilecollapsible" to leave the box expanded by default.
var fpmobilecollapse = fpmobilecollapse || {
initialize: function() {
var index = 0;
$('.fpbox.mobilecollapsible').each(function() {
var heading = $(this).children('.fpbox-heading').not('.nomobile, .notoggle');
if (heading.length > 0 && $(this).children('.body').length > 0) {
$(this).addClass('mobilecollapsible' + index);
if (!($(this).hasClass('expanded'))) {
$(this).addClass('collapsed');
}
heading.first().html($('<a class="togglecollapse" href="javascript:fpmobilecollapse.toggle( ' + index + ' )"></a>').html(heading.html()));
}
++index;
});
},
toggle: function(index) {
$('.fpbox.mobilecollapsible' + index).each(function() {
if ($(this).hasClass('collapsed')) {
$(this).removeClass('collapsed');
$(this).addClass('expanded');
} else {
$(this).removeClass('expanded');
$(this).addClass('collapsed');
}
});
}
}
window.fpmobilecollapse = fpmobilecollapse;
$(document).ready(fpmobilecollapse.initialize);
/****************************************
/* End Main Page Mobile Collapse Script *
/****************************************/
/************************************
/* 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'
);
}
};
window.qudInfoboxImageToggler = qudInfoboxImageToggler;
$(document).ready(qudInfoboxImageToggler.initialize);
var qudCarouselGearbox = qudCarouselGearbox || {
initialize: function () {
$('.qud-sprite-carousel > .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(-1);
});
$('.qud-sprite-carousel .qud-carousel-btn-right').click(function () {
window.qudCarouselGearbox.removeHighlight();
window.qudCarouselGearbox.rotate(1);
});
$('.infobox-title').append('<div class="qud-carousel-title"></div>');
},
rotate: function (amount) {
items = $('.qud-sprite-carousel > .qud-carousel-item');
$(items).each(function (idx, elem) {
$(elem).hide();
});
window.qudCarouselGearbox.currentIndex += amount;
end = $(items).length - 1;
if (window.qudCarouselGearbox.currentIndex < 0) {
window.qudCarouselGearbox.currentIndex = end;
} else if (window.qudCarouselGearbox.currentIndex > end) {
window.qudCarouselGearbox.currentIndex = 0;
}
curItem = $(
'.qud-sprite-carousel > .qud-carousel-item-number-' +
window.qudCarouselGearbox.currentIndex
);
curItem.show();
/* expand infobox title to also show image label */
carouselTitle = $('.qud-carousel-title');
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 *
/****************************************/