MediaWiki:MainMenu.js

Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.

$( document ).ready(function() {
	// Check if we're on the 'User:Donald/MainMenuTest' page
	if (mw.config.get('wgPageName') === 'MainMenuTest') {
		$('.MenuButton').css('cursor', 'pointer');
    	// Create the search form HTML
    	var searchFormHTML = '<form action="/wiki/index.php" method="get">' +
                         '<input type="hidden" name="title" value="Special:Search">' +
                         '<input type="text" name="search" placeholder="Search the wiki" />' +
                         '<input type="submit" value="Go" />' +
                         '</form>';

    	// Identify the element where you want to add the search form
    	var pageElement = document.getElementById('testaddsearchbar'); // Replace 'someElementID' with the actual ID

    	// Insert the search form HTML into the identified element
    	if (pageElement) {
        	pageElement.innerHTML = searchFormHTML;
    	}
    	
    	var MenuInput = '<input id="job-search-input" type="text" placeholder="Filter Jobs"></input>';
    	
    	var pagejobElement = document.getElementById('testaddjobsearchbar'); // Replace 'someElementID' with the actual ID

    	// Insert the search form HTML into the identified element
    	if (pagejobElement) {
        	pagejobElement.innerHTML = MenuInput;
    	}
    	
    	var searchInput = document.getElementById('job-search-input');

		if(searchInput) {
	        searchInput.addEventListener('input', function() {
	            var searchTerm = this.value.toLowerCase();
	            var jobsList = document.getElementById('jobs-list');
	            var jobs = jobsList.getElementsByClassName('job-item');
	
	            Array.from(jobs).forEach(function(job) {
	                var jobName = job.getAttribute('data-jobname').toLowerCase();
	                if (searchTerm === '' || jobName.includes(searchTerm)) {
	                    job.style.display = ''; // Show all or matching jobs
	                } else {
	                    job.style.display = 'none'; // Hide non-matching jobs
	                }
	            });
	        });
		}
		
		$('.MenuButton').click(function() {
		     location.href = $(this).attr('data-href');
		});
		
	    $('.MenuButton').hover(function() {
	        // Store the original color
	        var originalColor = $(this).css('background');
	        $(this).data('original-color', originalColor);
	
	        // Darken and apply the new color
	        var darkenedColor = darkenColor(originalColor, 0.10); // Darken by 20%
	        $(this).css('background', darkenedColor);
	    }, function() {
	        // Revert to original color
	        var originalColor = $(this).data('original-color');
	        $(this).css('background', originalColor);
	    });
	}
});

function darkenColor(color, percent) {
    var r, g, b;

    // If the color is in hexadecimal format
    if (color[0] === "#") {
        color = color.slice(1);
        r = parseInt(color.substr(0, 2), 16);
        g = parseInt(color.substr(2, 2), 16);
        b = parseInt(color.substr(4, 2), 16);
    }
    // If the color is in 'rgb(r, g, b)' format
    else if (color.indexOf('rgb') === 0) {
        color = color.match(/\d+/g);
        r = parseInt(color[0]);
        g = parseInt(color[1]);
        b = parseInt(color[2]);
    }

    // Apply the percentage to darken
    r = parseInt(r * (1 - percent));
    g = parseInt(g * (1 - percent));
    b = parseInt(b * (1 - percent));

    // Ensure values are within the valid range
    r = Math.max(Math.min(255, r), 0);
    g = Math.max(Math.min(255, g), 0);
    b = Math.max(Math.min(255, b), 0);

    // Convert back to a color string
    return "rgb(" + r + ", " + g + ", " + b + ")";
}