MediaWiki:Common.js

From MetalStorm Wiki
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* Import page specific Javascript */
switch (mw.config.get( 'wgPageName' )) {
	case 'MetalStorm_Wiki:Sandbox':
		importScript('MediaWiki:Sandbox.js');
		break;
	case 'Template:MatchmakingTool':
		importScript('MediaWiki:MatchmakingTool.js');
		break;
	default:
		console.log(mw.config.get( 'wgPageName' ));
}

if ( mw.config.get( 'wgPageName' ) === 'Pagename' ) {
    [dostuff]
}

/**
 * menu toggle for mobile view
 */
$(function(){
	$('<div class="menu-toggle"/>').insertBefore($('#p-logo')).on("click", function(event){
		event.stopPropagation();
		$(this).toggleClass('expanded');
	});
});

var windowWidth = 0;

window.addEventListener('resize', function() {
	const newWindowWidth = window.innerWidth;
	if (newWindowWidth !== windowWidth) {
		windowWidth = newWindowWidth;
		var pNavigation = document.getElementById('p-navigation');
    	var pGuides = document.getElementById('p-Guides');
	    var pInformation = document.getElementById('p-Information');
	    var pTB = document.getElementById('p-tb');
        var pSearch = document.getElementById('p-search');
        var mwPanel = document.getElementById('mw-panel');
        var rightNavigation = document.getElementById('right-navigation');

	    var vectorMenuContainer = document.getElementById('vector-menu-container');
        if (!vectorMenuContainer) {
            // Create a new div for the vector menu and append it to mw-panel
            vectorMenuContainer = document.createElement('div');
            vectorMenuContainer.id = 'vector-menu-container';
            mwPanel.appendChild(vectorMenuContainer);
        }
    
        var searchContainer = document.getElementById('search-container');
        if (!searchContainer) {
            // Create a new div for the search and append it to mw-panel
            searchContainer = document.createElement('div');
            searchContainer.id = 'search-container';
            mwPanel.appendChild(searchContainer);
        }
        
        var leftNavigationList = document.querySelector('div#mw-head div#left-navigation div.vector-menu-content.body ul.vector-menu-content-list.menu');
    	var sidebarControlItem = document.getElementById('ca-nstab-sidebar-control');
    	var sidebarElements = document.querySelectorAll('#mw-panel .vector-menu');
    	var bodyElement = document.querySelector('body.mediawiki');
        if (window.innerWidth <= 961) {
            // If the screen width is smaller than 961 pixels, move p-search inside searchContainer
            searchContainer.appendChild(pSearch);
            vectorMenuContainer.appendChild(pNavigation);
            vectorMenuContainer.appendChild(pGuides);
            vectorMenuContainer.appendChild(pInformation);
            vectorMenuContainer.appendChild(pTB);
			// If the screen width is smaller than 961 pixels, remove sidebar control
			if (sidebarControlItem) {
            	leftNavigationList.removeChild(sidebarControlItem);
            	bodyElement.classList.remove('body-mediawiki-expanded');
            	sidebarElements.forEach(function(element) {
    				element.classList.remove('panel-sidebar-hide');
				});
			}
        } else {
            // If the screen width is larger than 961 pixels, move p-search back to its original position
            rightNavigation.appendChild(pSearch);
            mwPanel.appendChild(pNavigation);
            mwPanel.appendChild(pGuides);
            mwPanel.appendChild(pInformation);
            mwPanel.appendChild(pTB);
            // If the screen width is larger than 961 pixels, add sidebar control
			if (!sidebarControlItem) {
				sidebarControlItem = document.createElement('li');
				sidebarControlItem.id = 'ca-nstab-sidebar-control';
				sidebarControlItem.class = 'mw-list-item';
				sidebarControlItem.addEventListener('click', function() {
	            	sidebarElements.forEach(function(element) {
    					element.classList.toggle('panel-sidebar-hide');
					});
			    	this.classList.toggle('clicked');
		    		bodyElement.classList.toggle('body-mediawiki-expanded');
				});
            	leftNavigationList.insertBefore(sidebarControlItem, leftNavigationList.firstChild);
			}
        }
    
    	var aboutTile = document.getElementById('about-tile');
    	var newsTile = document.getElementById('news-tile');
    	if (aboutTile && newsTile) {
	        if (window.innerWidth >= 1500) {
    	    	newsTile.style.height = window.getComputedStyle(aboutTile).height;
    	    	newsTile.style.maxHeight = "unset";
    		} else {
	        	newsTile.style.height = "inherit";
        		newsTile.style.maxHeight = "50vh";
	        }
    	}
	}
});

// On page ready
$(document).ready(function() {
	// Trigger the resize event on page load to check the initial screen width
	window.dispatchEvent(new Event('resize'));
	
	// Handle details table value update
	function updateTableLevel(level) {
		var tableRows = document.querySelectorAll("table.wikitable tbody tr");
		tableRows.forEach(function(row) {
    		var cells = row.querySelectorAll("td");
    		cells.forEach(function(cell) {
    			const initialValue = cell.getAttribute("data-level-initial");
    			if(initialValue != null) {
    				const type = cell.getAttribute("data-type");
    				var newValue = 0.0
    				if(level == 1) {
						newValue = initialValue;
					} else {
						newValue = parseFloat(initialValue) + level * parseFloat(initialValue) / 20;
	    				
					}
					if(type != null && type == "float") {
						cell.textContent = newValue.toFixed(1);
					} else {
						cell.textContent = Math.round(newValue);
					}
    			}
    		});
		});
	}
	function updateTableSystem(system) {
		const unitLabels = {
        	metric: { shortDistance: "(m)", distance: "(km)", speed: "(km/h)", topSpeed: "(km/h)", acceleration: "(m/s²)", turnRate: "(°/s)", time: "(s)" },
        	imperial: { shortDistance: "(ft)", distance: "(mi)", speed: "(mph)", topSpeed: "(mph)", acceleration: "(ft/s²)",turnRate: "(°/s)", time: "(s)" },
        	aviation: { shortDistance: "(m)", distance: "(nmi)", speed: "(kn)", topSpeed: "(kn)", acceleration: "(m/s²)", turnRate: "(°/s)", time: "(s)" }
	    };
        // Update measurement units in table header
		var measurementUnits = document.querySelectorAll("table.wikitable thead tr th p.measurement-unit");
    	measurementUnits.forEach(function(unit) {
        	var measure = unit.getAttribute("data-measure");
        	if (measure != null) {
        		unit.textContent = unitLabels[system][measure] || "";
        	}
    	});
	   const conversionFactors = {
        	metric: { acceleration: 1, shortDistance: 1, distance: 1, speed: 1, topSpeed: 1 },
        	imperial: { acceleration: 3.28084, shortDistance: 3.28084, distance: 0.62137, speed: 0.62137, topSpeed: 0.62137 },
        	aviation: { acceleration: 1, shortDistance: 1, distance: 0.53996, speed: 0.53996, topSpeed: 0.53996 },
    	};
    	// Update data in the table body
    	var tableRows = document.querySelectorAll("table.wikitable tbody tr");
    	tableRows.forEach(function(row) {
	        var cells = row.querySelectorAll("td");
        	cells.forEach(function(cell) {
	            const initialValue = parseFloat(cell.getAttribute("data-system-initial"));
            	if (!isNaN(initialValue)) {
	                const measure = cell.getAttribute("data-measure");
                	const type = cell.getAttribute("data-type");
                	const factor = conversionFactors[system][measure] || 1;
                	var newValue = initialValue * factor;
                	if (type === "float") {
	                    cell.textContent = newValue.toFixed(1);
    	            } else if (system == "aviation" && measure == "topSpeed") {
    	            	// Special case for aviation top speed to add Mach number
    	            	cell.textContent = Math.round(newValue) + " (" + (initialValue * 0.000809848).toFixed(1) + "M)";
    	            } else {
                    	cell.textContent = Math.round(newValue);
                	}
            	}
        	});
    	});
	}
	document.querySelectorAll("#level-selector-container .text-button").forEach(function(button) {
		button.addEventListener("click", function() {
    		document.querySelectorAll("#level-selector-container .text-button").forEach(function(btn) {btn.classList.remove("text-button-pressed");});
    		this.classList.add("text-button-pressed");
    		var selectedLevel = parseInt(this.getAttribute("data-level-value"));
    		updateTableLevel(selectedLevel);
		});
	});
	document.querySelectorAll("#system-selector-container .text-button").forEach(function(button) {
		button.addEventListener("click", function() {
    		document.querySelectorAll("#system-selector-container .text-button").forEach(function(btn) {btn.classList.remove("text-button-pressed");});
    		this.classList.add("text-button-pressed");
    		var selectedSystem = this.getAttribute("data-system-value");
    		updateTableSystem(selectedSystem);
		});
	});
	
	// Add click event listener to collapsible text template
	const collapsibleButtons = document.querySelectorAll(".collapsible-button");
	const collapsibleTexts = document.querySelectorAll(".collapsible-text");
	collapsibleButtons.forEach(function(button, index) {
		collapsibleTexts[index].style.display = "none";
	    button.addEventListener("click", function() {
	    	button.classList.toggle("is-expanded");
    		if (collapsibleTexts[index].style.display === "none") {
		        collapsibleTexts[index].style.display = "block";
    		} else {
		        collapsibleTexts[index].style.display = "none";
    		}
    	});
	});
	
	const tables = document.querySelectorAll(".wikitable");
	// Handle wikitable table data on columns text alignment
	tables.forEach(function(table) {
    	const rows = table.querySelectorAll("tr");
    	const columnClasses = Array.from(table.classList).filter(function(className) {return className.match(/^col-\d+-(c|l|r)$/)});
    	columnClasses.forEach(function(columnClass) {
    		const parts = columnClass.split("-");
    		const columnIndex = parseInt(parts[1]) - 1; // Subtract 1 because CSS nth-child is 1-based
    		const alignment = parts[2];
    		rows.forEach(function(row) {
    			const cells = row.querySelectorAll("td");
    			if(cells.length > 0) {
        			cells[columnIndex].style.textAlign = alignment === "c" ? "center" : alignment === "l" ? "left" : "right";
    			}
    		});
    	});
	});
	// Handle wikitable table data on columns text wrap
	tables.forEach(function(table) {
    	const rows = table.querySelectorAll("tr");
    	const columnClasses = Array.from(table.classList).filter(function(className) {return className.match(/^col-\d+-(w)$/)});
    	columnClasses.forEach(function(columnClass) {
    		const parts = columnClass.split("-");
    		const columnIndex = parseInt(parts[1]) - 1; // Subtract 1 because CSS nth-child is 1-based
    		rows.forEach(function(row) {
    			const cells = row.querySelectorAll("td");
    			if(cells.length > 0) {
        			cells[columnIndex].style.textWrap = "wrap";
        			cells[columnIndex].style.minWidth = "30rem";
    			}
    		});
    	});
	});
});