MediaWiki:Common.js
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.
$(document).ready(function() {
$('input#searchInput').attr('placeholder', 'Search for Transight Wiki');
});
// Open all external links in a new tab
$(document).ready(function () {
$("a.external").attr("target", "_blank");
});
mw.loader.using('mediawiki.util', function () {
// Force small text
document.documentElement.classList.remove('vector-feature-custom-font-size-standard', 'vector-feature-custom-font-size-large');
document.documentElement.classList.add('vector-feature-custom-font-size-small');
// Force wide layout
document.documentElement.classList.remove('vector-feature-limited-width');
document.documentElement.classList.add('vector-feature-wide-width');
});
/* === Transight site-wide footer with HOLI TAP BLAST === */
mw.loader.using(['mediawiki.util']).then(function () {
function injectTsFooter() {
if (document.getElementById('ts-footer')) return;
var html = '\
<style>\
/* ===== FOOTER BASE ===== */\
.ts-footer {\
position: relative;\
overflow: hidden;\
background: linear-gradient(270deg, #ff0080, #ff8c00, #40e0d0, #ff0080);\
background-size: 600% 600%;\
animation: tsGradientMove 12s ease infinite;\
color: #fff;\
padding: 40px 20px 20px;\
font-family: Arial, sans-serif;\
cursor: pointer;\
}\
@keyframes tsGradientMove {\
0%{background-position:0% 50%}\
50%{background-position:100% 50%}\
100%{background-position:0% 50%}\
}\
.ts-footer__container { max-width:1200px; margin:auto; position:relative; z-index:2;}\
.ts-footer__sitemap { display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between;}\
.ts-footer__col { list-style:none; padding:0; min-width:150px;}\
.ts-footer__title { font-weight:bold; margin-bottom:10px; font-size:14px;}\
.ts-footer__col li a { color:#fff; text-decoration:none; font-size:13px;}\
.ts-footer__col li a:hover { text-decoration:underline;}\
.ts-footer__bottom { margin-top:30px; display:flex; justify-content:space-between; flex-wrap:wrap; font-size:13px;}\
.ts-footer__social a { margin-right:10px; color:#fff; text-decoration:none;}\
.ts-footer__social a:hover { text-decoration:underline;}\
.ts-footer__mapbox { overflow:hidden;}\
\
/* ===== HOLI BLAST PARTICLES ===== */\
.holi-fragment {\
position:absolute;\
width:18px;\
height:18px;\
pointer-events:none;\
opacity:0.9;\
animation: explode 900ms ease-out forwards;\
}\
\
@keyframes explode {\
0% { transform: translate(0,0) scale(1) rotate(0deg); opacity:1;}\
100% { transform: translate(var(--x), var(--y)) scale(0.3) rotate(360deg); opacity:0;}\
}\
\
/* RANDOM SHAPES */\
.circle { border-radius:50%; }\
.square { border-radius:4px; }\
.triangle {\
width:0; height:0; background:none !important;\
border-left:10px solid transparent;\
border-right:10px solid transparent;\
border-bottom:18px solid red;\
}\
.star {\
clip-path: polygon(50% 0%, 61% 35%, 98% 35%,\
68% 57%, 79% 91%, 50% 70%,\
21% 91%, 32% 57%, 2% 35%, 39% 35%);\
}\
</style>\
\
<div id="ts-footer" class="ts-footer">\
<div class="ts-footer__container">\
<h2 style="margin-bottom:20px;">🌈 Happy Holi from Transight 🌈</h2>\
<p>Tap anywhere in this footer to blast color bombs!</p>\
</div>\
</div>';
document.body.insertAdjacentHTML("beforeend", html);
var footer = document.getElementById("ts-footer");
var colors = ["#ff0080", "#ff8c00", "#00ffcc", "#ff0000", "#ffff00", "#00aaff", "#9b00ff"];
function createBlast(x, y) {
var shapes = ["circle", "square", "triangle", "star"];
for (var i = 0; i < 25; i++) {
var frag = document.createElement("div");
frag.className = "holi-fragment " + shapes[Math.floor(Math.random()*shapes.length)];
var color = colors[Math.floor(Math.random()*colors.length)];
if (!frag.classList.contains("triangle")) {
frag.style.background = color;
} else {
frag.style.borderBottomColor = color;
}
var angle = Math.random() * 2 * Math.PI;
var radius = Math.random() * 200 + 50;
var moveX = Math.cos(angle) * radius + "px";
var moveY = Math.sin(angle) * radius + "px";
frag.style.left = x + "px";
frag.style.top = y + "px";
frag.style.setProperty('--x', moveX);
frag.style.setProperty('--y', moveY);
footer.appendChild(frag);
setTimeout(function(el){
return function(){ el.remove(); }
}(frag), 900);
}
}
footer.addEventListener("click", function(e) {
var rect = footer.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
createBlast(x, y);
});
}
injectTsFooter();
});;
/* === Inject floating buttons: "Go to our web" & "Go to Top" === */
mw.loader.using(['mediawiki.util']).then(function () {
// Prevent duplicate injection
if (!document.getElementById('ts-webfab')) {
var webUrl = 'https://transight.com/';
var htmlWeb = ''
+ '<div id="ts-webfab" class="ts-fab">'
+ ' <a class="ts-fab__btn" href="' + webUrl + '" target="_blank" rel="noopener" aria-label="Go to our website"></a>'
+ ' <span class="ts-fab__bubble">Go to our web</span>'
+ '</div>';
document.body.insertAdjacentHTML('beforeend', htmlWeb);
}
if (!document.getElementById('ts-topfab')) {
var htmlTop = ''
+ '<div id="ts-topfab" class="ts-fab">'
+ ' <a class="ts-fab__btn" href="javascript:void(0);" aria-label="Go to top"></a>'
+ ' <span class="ts-fab__bubble">Go to Top</span>'
+ '</div>';
document.body.insertAdjacentHTML('beforeend', htmlTop);
// Smooth scroll to top
document.querySelector('#ts-topfab .ts-fab__btn').addEventListener('click', function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
});
/* === Transightee: Sticky header helper === */
( function () {
if ( window.transighteeStickyHeaderInit ) return;
window.transighteeStickyHeaderInit = true;
function getTopFixedElementsHeight(excludeEl) {
// find fixed-position elements at the very top (likely toolbars) and sum their heights
var all = document.getElementsByTagName('*');
var sum = 0;
for (var i = 0; i < all.length; i++) {
var el = all[i];
if (el === excludeEl) continue;
var cs = window.getComputedStyle(el);
if (cs.position === 'fixed' && cs.display !== 'none' && el.offsetHeight > 0) {
var rect = el.getBoundingClientRect();
// consider elements whose top is near the top of viewport
if (rect.top >= -2 && rect.top <= 10) {
sum += el.offsetHeight;
}
}
}
return sum;
}
function updateStickyHeader() {
var header = document.querySelector('.vector-header-container');
var pageContainer = document.querySelector('.mw-page-container');
if (!header || !pageContainer) {
// If header or container not present yet, keep trying later
return;
}
// Ensure header has a stable background so it doesn't appear transparent after becoming fixed
try {
var comp = getComputedStyle(header);
if (!header.style.background && comp.backgroundColor && comp.backgroundColor !== 'rgba(0, 0, 0, 0)') {
header.style.backgroundColor = comp.backgroundColor;
}
} catch (e) {
// ignore
}
// Detect any other fixed elements at the top (toolbars) and position header below them
var topOffset = getTopFixedElementsHeight(header);
header.style.top = topOffset + 'px';
// measure header height AFTER top is applied
// force reflow to get accurate size
var height = header.offsetHeight;
// total vertical space header occupies (top offset + header height) = required padding
var totalSpace = topOffset + height;
document.documentElement.style.setProperty('--trans-header-height', totalSpace + 'px');
// add body class to enable CSS that uses the variable
document.body.classList.add('transightee-has-sticky-header');
}
// debounce helper for resize events
var resizeTimer = null;
function scheduleUpdate() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
updateStickyHeader();
resizeTimer = null;
}, 120);
}
document.addEventListener('DOMContentLoaded', function () {
// initial attempt
updateStickyHeader();
// update when all resources loaded (images, fonts can change header height)
window.addEventListener('load', updateStickyHeader);
// keep updated on resize
window.addEventListener('resize', scheduleUpdate);
// Observe mutations inside header (e.g. buttons collapsing/expanding) and update padding
var header = document.querySelector('.vector-header-container');
if (header && window.MutationObserver) {
var mo = new MutationObserver(function () {
scheduleUpdate();
});
mo.observe(header, { attributes: true, childList: true, subtree: true, characterData: true });
// keep reference to avoid GC in some environments
window._transighteeStickyMO = mo;
}
});
// Also try a periodic update a couple of times in case skin scripts alter header after load
var tries = 0;
var intId = setInterval(function () {
updateStickyHeader();
tries++;
if (tries > 6) clearInterval(intId);
}, 300);
}() );
/* Mobile menu and navigation helper for MediaWiki (vanilla JS, no jQuery) */
(function () {
'use strict';
/**
* Utility: safely query a single element
* @param {string} selector
* @returns {Element|null}
*/
function $$(selector) {
return document.querySelector(selector);
}
/**
* Utility: safely query multiple elements
* @param {string} selector
* @returns {NodeListOf<Element>}
*/
function $$$ (selector) {
return document.querySelectorAll(selector);
}
/**
* Create the menu toggle element (hamburger) only if not already present.
* Returns the toggle element.
* @returns {HTMLElement|null}
*/
function ensureMenuToggle () {
var existing = $$('#menu-toggle');
if (existing) return existing;
var toggle = document.createElement('div');
toggle.id = 'menu-toggle';
toggle.setAttribute('role', 'button');
toggle.setAttribute('tabindex', '0');
toggle.setAttribute('aria-label', 'Toggle menu');
toggle.className = 'menu-toggle';
// Create bars
var bar1 = document.createElement('div'); bar1.className = 'bar1';
var bar2 = document.createElement('div'); bar2.className = 'bar2';
var bar3 = document.createElement('div'); bar3.className = 'bar3';
toggle.appendChild(bar1);
toggle.appendChild(bar2);
toggle.appendChild(bar3);
// Click and keyboard handling
function toggleHandler (e) {
// Only handle left click or Enter/Space key
if (e.type === 'click' || e.key === 'Enter' || e.key === ' ') {
mobileMenuToggle();
e.preventDefault();
}
}
toggle.addEventListener('click', toggleHandler, false);
toggle.addEventListener('keydown', toggleHandler, false);
return toggle;
}
/**
* Toggle the mobile menu state by toggling the 'open-toggle' class on #mw-panel
*/
function mobileMenuToggle () {
var panel = $$('#mw-panel');
if (!panel) return;
panel.classList.toggle('open-toggle');
}
/**
* Remove the mobile menu open state when window is wide
*/
function handleResize () {
var panel = $$('#mw-panel');
if (!panel) return;
if (window.innerWidth > 800) {
panel.classList.remove('open-toggle');
}
}
/**
* Copy anchors from a source selector into a target ul inside #p-cactions.
* Keeps existing anchors' href and text.
* @param {string} sourceSelector - e.g. "#p-views a"
*/
function copyAnchorsToPCActions (sourceSelector) {
var anchors = $$$ (sourceSelector);
if (!anchors || anchors.length === 0) return;
var pCActions = $$('#p-cactions');
if (!pCActions) return;
// Find or create inner ul (the original code assumed p-cactions has a ul)
var ul = pCActions.querySelector('ul');
if (!ul) {
ul = document.createElement('ul');
pCActions.appendChild(ul);
}
// Append items (avoid duplicating items by checking href+text)
Array.prototype.forEach.call(anchors, function (a) {
if (!(a && a.href)) return;
// Skip if an identical item already exists
var exists = Array.prototype.some.call(ul.querySelectorAll('a'), function (x) {
return x.href === a.href && x.textContent.trim() === a.textContent.trim();
});
if (exists) return;
var li = document.createElement('li');
var newA = document.createElement('a');
newA.href = a.href;
newA.textContent = a.textContent.trim();
// preserve title if present
if (a.title) newA.title = a.title;
li.appendChild(newA);
ul.appendChild(li);
});
// Make p-cactions visible if there are items
if (ul.children.length > 0) {
pCActions.style.display = 'block';
}
}
/**
* Copy namespace anchors into p-cactions (same as above but from #p-namespaces a)
*/
function copyNamespacesToPCActions () {
copyAnchorsToPCActions('#p-namespaces a');
}
/**
* Take the first anchor inside #p-namespaces, shorten its text at the last space,
* create an anchor and append into the span inside #p-namespaces.
*/
function updateNamespacesFirstElementText () {
var namespaces = $$('#p-namespaces');
if (!namespaces) return;
var anchors = namespaces.querySelectorAll('a');
if (!anchors || anchors.length === 0) return;
var firstAnchor = anchors[0];
var rawText = firstAnchor.textContent.trim();
var newText = rawText;
var lastSpaceIndex = rawText.lastIndexOf(' ');
if (lastSpaceIndex > 0) {
newText = rawText.substring(0, lastSpaceIndex);
}
var span = namespaces.querySelector('span');
if (!span) {
// if span doesn't exist, create and append to #p-namespaces
span = document.createElement('span');
namespaces.appendChild(span);
}
// Create text anchor
var textnodeHref = document.createElement('a');
textnodeHref.href = firstAnchor.href || '#';
textnodeHref.title = firstAnchor.title || '';
textnodeHref.textContent = newText.length > 0 ? newText : rawText;
// Remove previous appended anchor if it exists to avoid duplication
// (Assume it had no special id)
var old = span.querySelector('a');
if (old) span.removeChild(old);
span.appendChild(textnodeHref);
}
/**
* Show p-cactions only when #p-views has anchors (mirrors original logic)
*/
function revealPCActionsIfPViewsNotEmpty () {
var pViews = $$('#p-views');
if (!pViews) return;
var anchors = pViews.querySelectorAll('a');
var pCActions = $$('#p-cactions');
if (!pCActions) return;
if (anchors && anchors.length > 0) {
pCActions.style.display = 'block';
}
}
/**
* Initialization run on DOMContentLoaded
*/
function init () {
// Insert menu-toggle into #mw-head and #mw-panel (if they exist)
var toggle = ensureMenuToggle();
var mwHead = $$('#mw-head');
var mwPanel = $$('#mw-panel');
// Insert a clone (or same node) into both places. Use clones to keep two elements.
if (mwHead) {
// Only append if not already present
if (!mwHead.querySelector('#menu-toggle')) {
mwHead.appendChild(toggle.cloneNode(true));
}
}
if (mwPanel) {
if (!mwPanel.querySelector('#menu-toggle')) {
mwPanel.appendChild(toggle.cloneNode(true));
}
}
// Setup copy operations (safe-guarded)
copyAnchorsToPCActions('#p-views a');
copyNamespacesToPCActions();
updateNamespacesFirstElementText();
revealPCActionsIfPViewsNotEmpty();
// Remove open state on resize > 800
window.addEventListener('resize', handleResize, false);
// A small safety: also run handleResize immediately to ensure correct state on load
handleResize();
}
// Run when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
mw.hook('wikipage.content').add(function () {
const track = document.querySelector('.ts-device-track');
if (!track) return;
track.addEventListener('mouseenter', () => {
track.style.animationPlayState = 'paused';
});
track.addEventListener('mouseleave', () => {
track.style.animationPlayState = 'running';
});
});