MediaWiki:Common.js: Unterschied zwischen den Versionen

Aktuelle Version vom 26. April 2019, 09:59 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 yellow = 0;
	var red = 0;
	
	
	var dataTable;
	var dataTableAttribute = domElement.getAttribute('data-table');
	if (dataTableAttribute) {
		dataTable = document.getElementById(dataTableAttribute);
	}
	
	if (dataTable) {
		var greenDomElements = dataTable.getElementsByClassName('green');
		if (greenDomElements) {
			green = greenDomElements.length;
		}
		var yellowDomElements = dataTable.getElementsByClassName('yellow');
		if (yellowDomElements) {
			yellow = yellowDomElements.length;
		}
		var redDomElements = dataTable.getElementsByClassName('red');
		if (redDomElements) {
			red = redDomElements.length;
		}
	} else {
		var greenDomElement = domElement.getElementsByClassName('green');
		if (greenDomElement && greenDomElement.length > 0) {
			var greenText = greenDomElement[0].innerText;
			green = parseInt(greenText);
			if (isNaN(green)) {
				green = 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 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();
});