Difference between revisions of "MediaWiki:MainMenu.js"

Revision as of 21:41, 11 November 2023

$( document ).ready(function() {
	// Check if we're on the 'Tycoon_Gaming_Wiki' page or any Language page of the Main Page
	if (mw.config.get('wgPageName').includes('Tycoon_Gaming_Wiki') || mw.config.get('wgPageName') === 'User:Donald/Testing') {
		$('.MenuButton').css('cursor', 'pointer');
    	
    	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 + ")";
}