MediaWiki:Common.js: Unterschied zwischen den Versionen
Aus LuLuWiki
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
Zeile 6: | Zeile 6: | ||
* ************************************* | * ************************************* | ||
*/ | */ | ||
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'; | |||
greenDomElement = document.createElement('div'); | |||
greenDomElement.className = 'green'; | |||
greenDomElement.style.width = (green / sum) + '%'; | |||
greenDomElement.style.float = 'left'; | |||
greenDomElement.style.height = '25px'; | |||
domElement.appendChild(greenDomElement); | |||
return domElement; | |||
} | |||
function createProgressBar(domElement) { | function createProgressBar(domElement) { | ||
Zeile 35: | Zeile 52: | ||
} | } | ||
} | } | ||
var newDomElement = createProgressBarDomElement(green, yellow, red); | |||
domElement.parentNode.replaceChild(newDomElement, domElement); | |||
console.log('green: ' + green); | console.log('green: ' + green); | ||
console.log('yellow: ' + yellow); | console.log('yellow: ' + yellow); |
Version vom 26. April 2019, 09:24 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'; greenDomElement = document.createElement('div'); greenDomElement.className = 'green'; greenDomElement.style.width = (green / sum) + '%'; greenDomElement.style.float = 'left'; greenDomElement.style.height = '25px'; domElement.appendChild(greenDomElement); 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(); });