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 f = parseInt(color.slice(1), 16),
        t = percent < 0 ? 0 : 255,
        p = percent < 0 ? percent * -1 : percent,
        R = f >> 16,
        G = f >> 8 & 0x00FF,
        B = f & 0x0000FF;
    return "#" + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
}