Tip of the day
Long pressing an item opens multi-selection options in the inventory.
MediaWiki:Common.js
From Walkscape Walkthrough
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Any JavaScript here will be loaded for all users on every page load. */
/* WSWB responsive object cards: measure labels, retain order, balance the group. */
(function () {
'use strict';
var collections = new Map();
var queued = new Set();
var frame = null;
function pack(container) {
var available = container.clientWidth;
if (!available) { return; } // Hidden Tabber panels are measured when shown.
var list = container.querySelector('.wswb-card-list');
if (!list) { return; }
list.classList.remove('is-packed');
list.style.removeProperty('--wswb-card-width');
var cards = Array.from(list.children);
if (!cards.length) { return; }
var gap = parseFloat(getComputedStyle(list).columnGap) || 0;
var sizes = cards.map(function (card) {
var box = card.getBoundingClientRect();
return { width: Math.ceil(box.width), height: box.height };
});
var widest = Math.max.apply(null, sizes.map(function (size) { return size.width; }));
var candidates = new Set([available, Math.min(widest, available)]);
// Every contiguous row ending is a useful width, without reordering cards.
sizes.forEach(function (_, start) {
var width = 0;
for (var end = start; end < sizes.length; end++) {
width += sizes[end].width + (end > start ? gap : 0);
if (width > available) { break; }
if (width >= widest) { candidates.add(width); }
}
});
var best = { width: available, score: Infinity };
candidates.forEach(function (width) {
var rowWidth = 0, rowHeight = 0, height = 0, usedArea = 0;
var maxRowCount = 0, rowCount = 0;
sizes.forEach(function (size) {
if (rowWidth && rowWidth + gap + size.width > width + 0.5) {
height += rowHeight + gap;
maxRowCount = Math.max(maxRowCount, rowCount);
rowWidth = 0; rowHeight = 0; rowCount = 0;
}
rowWidth += (rowWidth ? gap : 0) + size.width;
rowHeight = Math.max(rowHeight, size.height);
rowCount++;
usedArea += size.width * size.height;
});
height += rowHeight;
maxRowCount = Math.max(maxRowCount, rowCount);
// Prefer a slightly wider-than-square block and avoid excessive empty space.
var score = Math.abs(Math.log(width / height / 1.6))
+ 0.2 * Math.max(0, 1 - usedArea / (width * height));
// A single column should not win on desktop merely because cards are wide.
if (maxRowCount === 1 && sizes.length > 1 && available >= sizes[0].width + gap + sizes[1].width) {
score += 2;
}
if (score < best.score) { best = { width: width, score: score }; }
});
cards.forEach(function (card, index) {
card.style.setProperty('--wswb-card-basis', sizes[index].width + 'px');
});
list.style.setProperty('--wswb-card-width', Math.min(best.width + 0.5, available) + 'px');
list.classList.add('is-packed');
}
function schedule(container) {
queued.add(container);
if (frame !== null) { return; }
frame = requestAnimationFrame(function () {
frame = null;
queued.forEach(function (element) {
if (element.isConnected) { pack(element); }
});
queued.clear();
});
}
var observer = typeof ResizeObserver === 'function' ? new ResizeObserver(function (entries) {
entries.forEach(function (entry) {
var width = entry.contentRect.width;
if (collections.get(entry.target) !== width) {
collections.set(entry.target, width);
schedule(entry.target);
}
});
}) : null;
function attach(root) {
root.querySelectorAll('.wswb-card-collection').forEach(function (container) {
if (!collections.has(container)) {
collections.set(container, -1);
if (observer) { observer.observe(container); }
container.addEventListener('load', function () { schedule(container); }, true);
}
schedule(container);
});
collections.forEach(function (_, container) {
if (!container.isConnected) {
if (observer) { observer.unobserve(container); }
collections.delete(container);
}
});
}
function refresh() { collections.forEach(function (_, container) { schedule(container); }); }
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () { attach(document); });
} else { attach(document); }
window.addEventListener('resize', refresh);
if (document.fonts) { document.fonts.ready.then(refresh); }
if (typeof mw !== 'undefined' && mw.hook) {
mw.hook('wikipage.content').add(function ($content) { attach($content[0]); });
}
}());
/* End WSWB responsive object cards. */
/* VARIABLES ***********************************************************************************************************************/
var currentPageUrl = window.location.href;
var currentPageEditUrl = mw.util.getUrl(null, {
action: 'edit'
});
var currentPageName = mw.util.getUrl(null, null).replace('/wiki/', '');
var currentPageNamespaceID = mw.config.get('wgNamespaceNumber');
//variables needed after page load
var buttons, contents, allLinks;
//variables needed for the infobutton
var infobutton, infopanel;
/* *********************************************************************************************************************************/
// Matomo
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
/*
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.tools.walkscape.app/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '5']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
*/
/* sticky edit button */
// display the button only if #mw-content is present, if we are not in the edit mode, and if we're not in the Special: or Community: namespace
/*
if (document.body.contains(document.getElementById("mw-content")) && !currentPageUrl.includes("action=") && currentPageNamespaceID != -1 && currentPageNamespaceID != 3004) {
document.getElementById("mw-content").insertAdjacentHTML('afterbegin', '<a href="https://wiki-temp.walkscape.app/' + currentPageEditUrl + '"><div id="custom-editbutton"><svg width="40" height="40" viewBox="-12 -10 50 50"><path d="M 20 2 L 26 8 L 8 26 L 2 26 L 2 20 Z M 16 6 L 22 12"></path></svg></div></a>');
}
*/
///////////////////////////////////////// ADDING THE INFO BUTTON
var infotitle = currentPageName + '/doc';
// add the info button ONLY when we use the edit mode now
if (document.body.contains(document.getElementById("mw-content")) && (currentPageUrl.includes("action=edit") || currentPageUrl.includes("action=submit"))) {
mw.loader.using('mediawiki.api', function() {
var api = new mw.Api();
api.get({
action: "query",
titles: [infotitle],
}).then(function(ret) {
$.each(ret.query.pages, function() {
if (this.missing !== "") {
pageExists();
}
});
});
function pageExists() {
api.get({
action: 'parse',
page: infotitle,
contentmodel: 'wikitext'
}).done(function(data) {
InsertInfoPanel(data.parse.text['*']);
});
}
});
}
function InsertInfoPanel(text) {
//check which namespace we're in and adapt the text to it
var infopanelTitle = 'Page';
if (currentPageNamespaceID == 10) { //Template
infopanelTitle = 'Template';
} else if (currentPageNamespaceID == 828) { //Module
infopanelTitle = 'Module';
}
// insert the panel and button
document.getElementById("mw-content").insertAdjacentHTML('afterbegin', '<div id="custom-infobutton"></div><div id="custom-infopanel" style="display: none"><div id="custom-infopanel-title">' + infopanelTitle + ' Info</div><div id="custom-infopanel-content">' + text + '</div></div>');
//set up containers
infopanel = document.getElementById("custom-infopanel");
infobutton = document.getElementById("custom-infobutton");
//add an event listener to the button
infobutton.addEventListener("click", infobuttonClicked);
}
function infobuttonClicked() {
if (infopanel.style.display == 'none') {
infopanel.style.display = 'block';
} else {
infopanel.style.display = 'none';
}
}
/* rename the "DISCUSSION" talk page button to "DOCUMENTATION" */
//if there is such a button and we're in the Template: namespace
if (document.body.contains(document.getElementById("ca-talk")) && currentPageNamespaceID == 10) {
document.getElementById("ca-talk").innerHTML = '<svg class="cosmos-button-icon" width="28" height="28" viewBox="-2 -2 20 20"><path d="M 4 2 Q 4 0 6 0 L 14 0 Q 16 0 16 2 L 8 2 Q 8 0 6 0 Q 4 0 4 2 L 4 12 Q 4 14 2 14 Q 0 14 0 12 L 2 12 L 0 12 Q 0 14 2 14 L 12 14 Q 14 14 14 12 L 14 4"></path></svg><span class="cosmos-button-text">Documentation</span>';
}
/* call specific functions when the page loads */
// old browsers or already loaded
if (document.readyState != "loading") AfterPageLoad();
// modern browsers
else if (document.addEventListener) document.addEventListener("DOMContentLoaded", AfterPageLoad);
/* FUNCTIONS **********************************************************************************************************************/
function AfterPageLoad() {
StartTabs();
}
/* Tabs */
function StartTabs() {
buttons = document.getElementsByClassName("tab-button");
contents = document.getElementsByClassName("tab-content");
if (buttons.length > 0) {
clickfunction(buttons[0]);
for (var i = 0; i < buttons.length; i++) {
//console.log("Added Event Listener!");
buttons[i].addEventListener("click", clickfunction);
}
}
}
function clickfunction(thing) {
if (thing.id == null) {
thing = this;
}
//buttons
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].id == thing.id) {
buttons[i].classList.remove("tab-disabled");
buttons[i].classList.add("tab-active");
} else {
buttons[i].classList.remove("tab-active");
buttons[i].classList.add("tab-disabled");
}
}
//contents
for (var i = 0; i < contents.length; i++) {
if (contents[i].id == thing.id) {
contents[i].style.display = 'block'
} else {
contents[i].style.display = 'none'
}
}
}
var resizeScheduled = false;
function scheduleRecalc(fn) {
if (resizeScheduled) return;
resizeScheduled = true;
requestAnimationFrame(function () {
resizeScheduled = false;
fn();
});
}
mw.hook('wikipage.content').add(function ($content) {
$content.find('.tabberresize').each(function () {
var $wrap = $(this);
var wrapEl = this;
var tabCount = $wrap.find('.tabber__tab').length;
wrapEl.dataset.tabCount = String(tabCount);
function setWidthImportant(px) {
wrapEl.style.setProperty('width', px + 'px', 'important');
}
function recalc() {
if (window.matchMedia('(max-width: 850px)').matches) {
wrapEl.style.removeProperty('width');
$wrap.css({ width: '100%', float: 'none', display: 'block' });
return;
}
$wrap.css({
float: 'right',
display: 'inline-block',
maxWidth: '100%'
});
// 1) Widest tab label
var maxTab = 0;
$wrap.find('.tabber__tab').each(function () {
maxTab = Math.max(maxTab, Math.ceil(this.offsetWidth));
});
if (!maxTab) maxTab = 90;
wrapEl.style.setProperty('--tab-w', maxTab + 'px');
// 2) Widest article (prefer visible)
var $section = $wrap.find('section.tabber__section').first();
var $articles = $section.find('article');
var $candidates = $articles.filter(':visible');
if (!$candidates.length) {
$candidates = $articles.filter('[aria-hidden="false"]');
}
if (!$candidates.length) {
$candidates = $articles;
}
var maxArticleW = 0;
$candidates.each(function () {
maxArticleW = Math.max(
maxArticleW,
Math.ceil(Math.max(this.scrollWidth, this.offsetWidth))
);
});
var target = Math.max(maxArticleW, maxTab * 3 + 12);
setWidthImportant(target);
}
// Initial
recalc();
// Window resize
$(window).on('resize', function () {
scheduleRecalc(recalc);
});
// React to tab changes / dynamic content
if (window.ResizeObserver) {
var ro = new ResizeObserver(recalc);
$wrap.find('section.tabber__section article').each(function () {
ro.observe(this);
});
}
});
});
// Pet Sprite Animation
(function () {
function startWalker(el) {
if (el.dataset.walkerApplied === '1') return;
var speed =
parseFloat(getComputedStyle(el).getPropertyValue('--walker-speed')) ||
parseFloat(el.getAttribute('data-speed')) ||
2;
var scale = parseFloat(getComputedStyle(el).getPropertyValue('--scale')) || 1;
var frame = parseFloat(getComputedStyle(el).getPropertyValue('--frame')) || 32;
var spriteWidth = frame * scale;
var maxX = Math.max(0, window.innerWidth - spriteWidth);
// Random starting direction: 1 = right, -1 = left
var dir = Math.random() < 0.5 ? 1 : -1;
// Random starting position anywhere across the screen
var x = Math.random() * maxX;
// Apply initial state immediately
el.style.setProperty('--walker-x', x + 'px');
el.style.setProperty('--walker-face', dir);
function tick() {
maxX = Math.max(0, window.innerWidth - spriteWidth);
x += speed * dir;
if (x >= maxX) {
x = maxX;
dir = -1;
} else if (x <= 0) {
x = 0;
dir = 1;
}
el.style.setProperty('--walker-x', x + 'px');
el.style.setProperty('--walker-face', dir);
requestAnimationFrame(tick);
}
el.dataset.walkerApplied = '1';
requestAnimationFrame(tick);
}
function initSprite(el) {
if (el.dataset.spriteApplied === '1') return;
var url = el.getAttribute('data-sprite');
if (!url) return;
var img = new Image();
img.onload = function () {
var w = img.naturalWidth;
var h = img.naturalHeight;
if (!w || !h || w < h) return;
var frames = Math.floor(w / h);
if (frames < 1) frames = 1;
// Apply derived values
el.style.backgroundImage = 'url("' + url.replace(/"/g, '\\"') + '")';
el.style.setProperty('--frame', h + 'px');
el.style.setProperty('--frames', frames);
el.style.setProperty('--sheetW', w + 'px');
el.dataset.spriteApplied = '1';
if (el.classList.contains('ws-dev-walker')) {
startWalker(el);
}
};
img.src = url;
}
function applySprites(root) {
(root || document).querySelectorAll('.ws-sprite[data-sprite]').forEach(initSprite);
}
// Initial load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function () { applySprites(document); });
} else {
applySprites(document);
}
// MediaWiki dynamic content hook
if (window.mw && mw.hook) {
mw.hook('wikipage.content').add(function ($content) {
applySprites($content && $content[0] ? $content[0] : document);
});
}
})();
// User log spam filtering
mw.hook('wikipage.content').add(function ($content) {
var $changeslist = $content.find('.mw-changeslist');
if (!$changeslist.length) {
return;
}
// Avoid duplicate processing if hook runs multiple times
if ($changeslist.find('.mw-changeslist-newuser-group').length) {
return;
}
$changeslist.each(function () {
var $container = $(this);
var $dayHeaders = $container.children('h4');
$dayHeaders.each(function () {
var $header = $(this);
var $sectionNodes = $header.nextUntil('h4');
var $entries = $sectionNodes.find('.mw-changeslist-src-mw-newuserlog');
if (!$entries.length) {
return;
}
var count = $entries.length;
$entries.addClass('mw-changeslist-newuser-hidden');
var $groupRow = $(
'<li class="mw-changeslist-newuser-group">' +
'<span class="mw-changeslist-newuser-label"></span>' +
'</li>'
);
$groupRow.find('.mw-changeslist-newuser-label').text('New Users (' + count + ')');
// Insert before the first matching entry in this day section
$entries.first().before($groupRow);
$groupRow.on('click', function () {
var isOpen = $groupRow.hasClass('is-open');
$groupRow.toggleClass('is-open', !isOpen);
$entries.toggleClass('is-open', !isOpen);
});
});
});
});
