MediaWiki:Common.js
Version vom 2. November 2022, 14:41 Uhr von Tt (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „→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() } functi…“)
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); // January for (let i=0; i<12; i++) { monthsNames.push(d.toLocaleString('default',{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.value = year 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()