MediaWiki:Common.js

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
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

/* 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()