MediaWiki:Common.js: Difference between revisions

From TimeRO Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 84: Line 84:
}
}
};
};
function resetMethodTab(tab, type) {
if (!tab) return;
tab.style.background = 'transparent';
tab.style.fontWeight = '700';
if (type === 'grind') tab.style.color = 'rgba(249,197,0,0.60)';
if (type === 'market') tab.style.color = 'rgba(0,212,255,0.60)';
if (type === 'passive') tab.style.color = 'rgba(176,108,255,0.60)';
}
function activateMethodTab(tab, type) {
if (!tab) return;
tab.style.fontWeight = '900';
if (type === 'grind') {
tab.style.background = 'linear-gradient(135deg,rgba(249,197,0,0.18),rgba(249,197,0,0.07))';
tab.style.color = '#f9c500';
}
if (type === 'market') {
tab.style.background = 'linear-gradient(135deg,rgba(0,212,255,0.14),rgba(0,212,255,0.05))';
tab.style.color = '#00d4ff';
}
if (type === 'passive') {
tab.style.background = 'linear-gradient(135deg,rgba(176,108,255,0.14),rgba(176,108,255,0.05))';
tab.style.color = '#b06cff';
}
}
window.switchMethod = function (methodId) {
var section = document.getElementById('methods-section');
if (!section) return;
var panels = section.querySelectorAll('.method-panel');
for (var i = 0; i < panels.length; i++) {
panels[i].style.display = 'none';
}
var tabs = section.querySelectorAll('.method-tab[data-method]');
for (var j = 0; j < tabs.length; j++) {
resetMethodTab(tabs[j], tabs[j].getAttribute('data-method'));
}
var activePanel = document.getElementById('method-' + methodId);
if (activePanel) {
activePanel.style.display = 'grid';
activePanel.style.animation = 'method-in 0.3s ease both';
}
var activeTab = document.getElementById('mtab-' + methodId);
activateMethodTab(activeTab, methodId);
section.setAttribute('data-open-method', methodId);
};
function bindMethodViewer(context) {
var scope = context && context.querySelector ? context : document;
var section = scope.querySelector('#methods-section') || document.getElementById('methods-section');
if (!section) return;
var tabs = section.querySelectorAll('.method-tab[data-method]');
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (tab.dataset.timeroBound === '1') continue;
tab.dataset.timeroBound = '1';
tab.setAttribute('role', 'button');
tab.setAttribute('tabindex', '0');
tab.addEventListener('click', function () {
switchMethod(this.getAttribute('data-method'));
});
tab.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
switchMethod(this.getAttribute('data-method'));
}
});
}
if (!section.getAttribute('data-open-method')) {
switchMethod('grind');
}
}


function bindRouteViewer(context) {
function bindRouteViewer(context) {
Line 136: Line 225:
setLogoHref();
setLogoHref();
ensureFontAwesome();
ensureFontAwesome();
bindMethodViewer(context || document);
bindRouteViewer(context || document);
bindRouteViewer(context || document);
}
}

Revision as of 15:56, 13 April 2026

/* Any JavaScript here will be loaded for all users on every page load. */
(function ($, mw) {
	'use strict';

	function setLogoHref() {
		var logoLink = document.querySelector('#p-logo a');
		if (logoLink) {
			logoLink.setAttribute('href', 'https://timero.com.br/');
		}
	}

	function ensureFontAwesome() {
		if (!document.querySelector('link[data-timero-fa]')) {
			var fa = document.createElement('link');
			fa.rel = 'stylesheet';
			fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
			fa.setAttribute('data-timero-fa', '1');
			document.head.appendChild(fa);
		}
	}

	function resetRoutePill(pill) {
		if (!pill) return;
		pill.style.transform = '';
		pill.style.fontWeight = '800';
		pill.style.boxShadow = 'none';
		pill.style.filter = 'none';
	}

	function activateRoutePill(pill) {
		if (!pill) return;
		pill.style.transform = 'translateY(-1px)';
		pill.style.fontWeight = '900';
		pill.style.boxShadow = '0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 22px rgba(255,255,255,0.05)';
		pill.style.filter = 'brightness(1.08)';
	}

	function closeAllRoutes(section) {
		if (!section) return;

		var details = section.querySelectorAll('.route-detail');
		for (var i = 0; i < details.length; i++) {
			details[i].style.display = 'none';
		}

		var pills = section.querySelectorAll('.route-pill[data-route]');
		for (var j = 0; j < pills.length; j++) {
			resetRoutePill(pills[j]);
		}

		section.setAttribute('data-open-route', '');
	}

	window.expandRoute = function (routeId) {
		var section = document.getElementById('routes-section');
		if (!section) return;

		var target = document.getElementById(routeId);
		if (!target) return;

		var currentOpen = section.getAttribute('data-open-route');

		if (currentOpen === routeId) {
			closeAllRoutes(section);
			return;
		}

		closeAllRoutes(section);

		target.style.display = 'block';
		target.style.animation = 'route-in 0.3s ease both';
		section.setAttribute('data-open-route', routeId);

		var activePill = document.getElementById('pill-' + routeId);
		activateRoutePill(activePill);

		if (typeof target.scrollIntoView === 'function') {
			setTimeout(function () {
				target.scrollIntoView({
					behavior: 'smooth',
					block: 'nearest'
				});
			}, 80);
		}
	};

	function resetMethodTab(tab, type) {
		if (!tab) return;

		tab.style.background = 'transparent';
		tab.style.fontWeight = '700';

		if (type === 'grind') tab.style.color = 'rgba(249,197,0,0.60)';
		if (type === 'market') tab.style.color = 'rgba(0,212,255,0.60)';
		if (type === 'passive') tab.style.color = 'rgba(176,108,255,0.60)';
	}

	function activateMethodTab(tab, type) {
		if (!tab) return;

		tab.style.fontWeight = '900';

		if (type === 'grind') {
			tab.style.background = 'linear-gradient(135deg,rgba(249,197,0,0.18),rgba(249,197,0,0.07))';
			tab.style.color = '#f9c500';
		}

		if (type === 'market') {
			tab.style.background = 'linear-gradient(135deg,rgba(0,212,255,0.14),rgba(0,212,255,0.05))';
			tab.style.color = '#00d4ff';
		}

		if (type === 'passive') {
			tab.style.background = 'linear-gradient(135deg,rgba(176,108,255,0.14),rgba(176,108,255,0.05))';
			tab.style.color = '#b06cff';
		}
	}

	window.switchMethod = function (methodId) {
		var section = document.getElementById('methods-section');
		if (!section) return;

		var panels = section.querySelectorAll('.method-panel');
		for (var i = 0; i < panels.length; i++) {
			panels[i].style.display = 'none';
		}

		var tabs = section.querySelectorAll('.method-tab[data-method]');
		for (var j = 0; j < tabs.length; j++) {
			resetMethodTab(tabs[j], tabs[j].getAttribute('data-method'));
		}

		var activePanel = document.getElementById('method-' + methodId);
		if (activePanel) {
			activePanel.style.display = 'grid';
			activePanel.style.animation = 'method-in 0.3s ease both';
		}

		var activeTab = document.getElementById('mtab-' + methodId);
		activateMethodTab(activeTab, methodId);

		section.setAttribute('data-open-method', methodId);
	};

	function bindMethodViewer(context) {
		var scope = context && context.querySelector ? context : document;
		var section = scope.querySelector('#methods-section') || document.getElementById('methods-section');
		if (!section) return;

		var tabs = section.querySelectorAll('.method-tab[data-method]');
		for (var i = 0; i < tabs.length; i++) {
			var tab = tabs[i];
			if (tab.dataset.timeroBound === '1') continue;

			tab.dataset.timeroBound = '1';
			tab.setAttribute('role', 'button');
			tab.setAttribute('tabindex', '0');

			tab.addEventListener('click', function () {
				switchMethod(this.getAttribute('data-method'));
			});

			tab.addEventListener('keydown', function (e) {
				if (e.key === 'Enter' || e.key === ' ') {
					e.preventDefault();
					switchMethod(this.getAttribute('data-method'));
				}
			});
		}

		if (!section.getAttribute('data-open-method')) {
			switchMethod('grind');
		}
	}

	function bindRouteViewer(context) {
		var scope = context && context.querySelector ? context : document;
		var section = scope.querySelector('#routes-section') || document.getElementById('routes-section');
		if (!section) return;

		var pills = section.querySelectorAll('.route-pill[data-route]');
		for (var i = 0; i < pills.length; i++) {
			var pill = pills[i];
			if (pill.dataset.timeroBound === '1') continue;

			pill.dataset.timeroBound = '1';
			pill.setAttribute('role', 'button');
			pill.setAttribute('tabindex', '0');

			pill.addEventListener('click', function () {
				expandRoute(this.getAttribute('data-route'));
			});

			pill.addEventListener('keydown', function (e) {
				if (e.key === 'Enter' || e.key === ' ') {
					e.preventDefault();
					expandRoute(this.getAttribute('data-route'));
				}
			});
		}

		var closeButtons = section.querySelectorAll('.route-close[data-route]');
		for (var j = 0; j < closeButtons.length; j++) {
			var closeBtn = closeButtons[j];
			if (closeBtn.dataset.timeroBound === '1') continue;

			closeBtn.dataset.timeroBound = '1';
			closeBtn.setAttribute('role', 'button');
			closeBtn.setAttribute('tabindex', '0');

			closeBtn.addEventListener('click', function () {
				expandRoute(this.getAttribute('data-route'));
			});

			closeBtn.addEventListener('keydown', function (e) {
				if (e.key === 'Enter' || e.key === ' ') {
					e.preventDefault();
					expandRoute(this.getAttribute('data-route'));
				}
			});
		}
	}

	function init(context) {
		setLogoHref();
		ensureFontAwesome();
		bindMethodViewer(context || document);
		bindRouteViewer(context || document);
	}

	$(function () {
		init(document);
	});

	if (mw && mw.hook) {
		mw.hook('wikipage.content').add(function ($content) {
			init(($content && $content[0]) || document);
		});
	}
})(jQuery, mediaWiki);