MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 2. November 2022, 15:02 Uhr

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