MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 26. April 2019, 09:45 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */

/*
 * *************************************
 * * Funktionen für Fortschrittsbalken *
 * *************************************
 */
 
function createProgressBarDomElement(green, yellow, red) {
	var sum = green + yellow + red;
	var domElement = document.createElement('div');
	domElement.className = 'progressbar';
	domElement.style.width = '100%';
	domElement.style.display = 'block';
	domElement.style.position = 'relative';
	domElement.style.height = '25px';
	var greenDomElement = document.createElement('div');
	greenDomElement.className = 'green';
	var greenPercent = (green / sum).toFixed(4) * 100;
	greenDomElement.style.width = greenPercent + '%';
	greenDomElement.style.float = 'left';
	greenDomElement.style.height = '25px';
	greenDomElement.style.backgroundColor = 'green';
	domElement.appendChild(greenDomElement);
	var yellowDomElement = document.createElement('div');
	yellowDomElement.className = 'yellow';
	var yellowPercent = (yellow / sum).toFixed(4) * 100;
	yellowDomElement.style.width = yellowPercent + '%';
	yellowDomElement.style.float = 'left';
	yellowDomElement.style.height = '25px';
	yellowDomElement.style.backgroundColor = 'yellow';
	domElement.appendChild(yellowDomElement);
	var redDomElement = document.createElement('div');
	redDomElement.className = 'red';
	var redPercent = (red / sum).toFixed(4) * 100;
	redDomElement.style.width = redPercent + '%';
	redDomElement.style.float = 'left';
	redDomElement.style.height = '25px';
	redDomElement.style.backgroundColor = 'red';
	domElement.appendChild(redDomElement);
	var textDomElement = document.createElement('div');
	textDomElement.style.position = 'absolute';
	textDomElement.style.width = '100%';
	textDomElement.style.left = 0;
	textDomElement.style.top = 0;
	textDomElement.style.textAlign = 'center';
	textDomElement.innerText = green + '/' + sum + ' (' + ('' + greenPercent.toFixed(2)).replace('.',',') + '%)';
	if (redPercent > 50) {
		textDomElement.style.color = 'white';
	} else {
		textDomElement.style.color = 'black';
	}
	domElement.appendChild(textDomElement);
	return domElement;
}

function createProgressBar(domElement) {
	var green = 0;
	var greenDomElement = domElement.getElementsByClassName("green");
	if (greenDomElement && greenDomElement.length > 0) {
		var greenText = greenDomElement[0].innerText;
		green = parseInt(greenText);
		if (isNaN(green)) {
			green = 0;
		}
	}
	var yellow = 0;
	var yellowDomElement = domElement.getElementsByClassName("yellow");
	if (yellowDomElement && yellowDomElement.length > 0) {
		var yellowText = yellowDomElement[0].innerText;
		yellow = parseInt(yellowText);
		if (isNaN(yellow)) {
			yellow = 0;
		}
	}
	var red = 0;
	var redDomElement = domElement.getElementsByClassName("red");
	if (redDomElement && redDomElement.length > 0) {
		var redText = redDomElement[0].innerText;
		red = parseInt(redText);
		if (isNaN(red)) {
			red = 0;
		}
	}
	var newDomElement = createProgressBarDomElement(green, yellow, red);
	domElement.parentNode.replaceChild(newDomElement, domElement);
	console.log('green: ' + green);
	console.log('yellow: ' + yellow);
	console.log('red: ' + red);
}
 
function createProgressBars() {
	var progressBars = document.getElementsByClassName("progressbar");
	for (var i = 0; i < progressBars.length; i++) {
		createProgressBar(progressBars[i]);
	}
}

$( function() {
	createProgressBars();
});