MediaWiki:Common.js
Version vom 2. November 2022, 16:02 Uhr von Tt (Diskussion | Beiträge)
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
/* Das folgende JavaScript wird für alle Benutzer geladen. */ let monthsNames = []; function addDatepickerHandler(event) { var multidatepicker = event.target.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('multidatepicker')[0]; addDatepicker(multidatepicker); } function removeDatepickerHandler(event) { event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode); parseInputsToStrings(); } function initMultiDatepickers() { let d = new Date(2000,0); for (let i=0; i<12; i++) { monthsNames.push(d.toLocaleString('de_DE',{month:'long'})); d.setMonth(i + 1); } let multidatepickers = document.getElementsByClassName('multidatepicker'); for (var i=0; i<multidatepickers.length; i++) { // Add button var addButtonRow = document.createElement('tr'); var addButtonFirstTD = document.createElement('td'); addButtonRow.appendChild(addButtonFirstTD); var addButtonSecondTD = document.createElement('td'); var addButtonWrapperSpan = document.createElement('span'); addButtonWrapperSpan.className = 'oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-flaggedElement-primary oo-ui-flaggedElement-progressive oo-ui-buttonInputWidget'; var addAnotherButton = document.createElement('button'); addAnotherButton.className = 'oo-ui-inputWidget-input oo-ui-buttonElement-button'; addAnotherButton.innerHTML = '+'; addAnotherButton.type = 'button'; addButtonWrapperSpan.appendChild(addAnotherButton); addButtonSecondTD.appendChild(addButtonWrapperSpan); addButtonRow.appendChild(addButtonSecondTD); addAnotherButton.onclick = addDatepickerHandler; multidatepickers[i].parentNode.parentNode.appendChild(addButtonRow); var stringValues = multidatepickers[i].value.split(','); for (j=0; j<stringValues.length; j++) { let datepicker = makeDatepickerRow(stringValues[j]); multidatepickers[i].parentNode.parentNode.appendChild(datepicker); } multidatepickers[i].type='hidden'; } } function addDatepicker(multidatepicker) { let datepicker = makeDatepickerRow(''); multidatepicker.parentNode.parentNode.appendChild(datepicker); } function parseInputsToStrings() { console.log('parsing'); let multidatepickers = document.getElementsByClassName('multidatepicker'); console.log('got ' + multidatepickers.length + ' multidatepickers'); for (var i=0; i<multidatepickers.length; i++) { multidatepickers[i].value = ''; let datepickers = multidatepickers[i].parentNode.parentNode.getElementsByClassName('dateInput'); console.log(i + 'th multidatepicker has ' + datepickers.length + ' values'); var finalStringValue = '' for (var j=0; j < datepickers.length;j++) { var yearInputValue = datepickers[j].getElementsByClassName('yearInput')[0].value; var monthInputValue = datepickers[j].getElementsByClassName('monthInput')[0].value; var dayInputValue = datepickers[j].getElementsByClassName('dayInput')[0].value; var stringValue = yearInputValue; if (monthInputValue != '') { stringValue = stringValue + '/' + monthInputValue; if (dayInputValue != '') { stringValue = stringValue + '/' + dayInputValue; } } finalStringValue = finalStringValue + ',' + stringValue; } console.log('setting value ' + finalStringValue); multidatepickers[i].value = finalStringValue.substr(1); } } function makeDatepickerRow(stringValue) { var year = ''; var month = ''; var day = ''; if (stringValue != null && stringValue != undefined && stringValue != '') { var splitString = stringValue.split('/'); if (stringValue.length == 4) { year = stringValue; } if (stringValue.length == 7) { year = splitString[0]; month = splitString[1]; } if (stringValue.length == 10) { year = splitString[0]; month = splitString[1]; day = splitString[2]; } } var multiDateContainer = document.createElement('span'); multiDateContainer.className = 'dateInput'; var dayField = document.createElement('input'); dayField.name = 'day'; dayField.type='text'; dayField.size=2; dayField.className = 'dayInput'; dayField.value = day; dayField.oninput = parseInputsToStrings; multiDateContainer.appendChild(dayField); var monthField = document.createElement('select'); monthField.className = 'monthInput'; let noMonthOption = document.createElement('option'); monthField.appendChild(noMonthOption); for (var i=1; i<13; i++) { let monthOption = document.createElement('option'); let monthString = String(i).padStart(2, '0'); monthOption.value = monthString; monthOption.innerText = monthsNames[i-1]; if (month == monthString) { monthOption.setAttribute('selected', 'selected'); } monthField.appendChild(monthOption); } monthField.oninput = parseInputsToStrings; multiDateContainer.appendChild(monthField); var yearField = document.createElement('input'); yearField.name = 'year'; yearField.size = 4; yearField.value = year; yearField.className = 'yearInput'; yearField.oninput = parseInputsToStrings; multiDateContainer.appendChild(yearField); var wrapperTR = document.createElement('tr'); var wrapperFirstTD = document.createElement('td'); var wrapperSecondTD = document.createElement('td'); wrapperTR.appendChild(wrapperFirstTD); var deleteButtonWrapper = document.createElement('span'); deleteButtonWrapper.className = 'oo-ui-buttonElement-button oo-ui-buttonElement-frameless'; var deleteButton = document.createElement('a'); deleteButton.type = 'button'; deleteButton.className = 'oo-ui-iconElement-icon oo-ui-icon-trash oo-ui-image-destructive'; deleteButton.onclick = removeDatepickerHandler; deleteButtonWrapper.appendChild(deleteButton); wrapperSecondTD.appendChild(multiDateContainer); wrapperSecondTD.appendChild(deleteButtonWrapper); wrapperTR.appendChild(wrapperSecondTD); return wrapperTR; } initMultiDatepickers();