MediaWiki:Common.js: Unterschied zwischen den Versionen
Aus LuLuWiki
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 45: | Zeile 45: | ||
textDomElement.style.top = 0; | textDomElement.style.top = 0; | ||
textDomElement.style.textAlign = 'center'; | textDomElement.style.textAlign = 'center'; | ||
textDomElement.innerText = green + '/' + sum + ' (' + greenPercent.toFixed(2) + '%)'; | textDomElement.innerText = green + '/' + sum + ' (' + ('' + greenPercent.toFixed(2)).replace("\\.",',') + '%)'; | ||
if (redPercent > | if (redPercent > 47) { | ||
textDomElement.style.color = 'white'; | textDomElement.style.color = 'white'; | ||
} else { | } else { |
Version vom 26. April 2019, 09:44 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 > 47) { 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(); });