MediaWiki:Common.js: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
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…“) |
Tt (Diskussion | Beiträge) |
||
| Zeile 1: | Zeile 1: | ||
/* Das folgende JavaScript wird für alle Benutzer geladen. */ | /* Das folgende JavaScript wird für alle Benutzer geladen. */ | ||
let monthsNames = [] | let monthsNames = []; | ||
function addDatepickerHandler(event) { | function addDatepickerHandler(event) { | ||
var multidatepicker = event.target.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('multidatepicker')[0] | var multidatepicker = event.target.parentNode.parentNode.parentNode.parentNode.getElementsByClassName('multidatepicker')[0]; | ||
addDatepicker(multidatepicker) | addDatepicker(multidatepicker); | ||
} | } | ||
| Zeile 10: | Zeile 10: | ||
function removeDatepickerHandler(event) { | function removeDatepickerHandler(event) { | ||
event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode) | event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode); | ||
parseInputsToStrings() | parseInputsToStrings(); | ||
} | } | ||
function initMultiDatepickers() { | function initMultiDatepickers() { | ||
let d = new Date(2000,0); | let d = new Date(2000,0); | ||
for (let i=0; i<12; i++) { | for (let i=0; i<12; i++) { | ||
monthsNames.push(d.toLocaleString(' | monthsNames.push(d.toLocaleString('de_DE',{month:'long'})); | ||
d.setMonth(i + 1); | d.setMonth(i + 1); | ||
} | } | ||
| Zeile 29: | Zeile 29: | ||
var addButtonRow = document.createElement('tr'); | var addButtonRow = document.createElement('tr'); | ||
var addButtonFirstTD = document.createElement('td'); | var addButtonFirstTD = document.createElement('td'); | ||
addButtonRow.appendChild(addButtonFirstTD) | addButtonRow.appendChild(addButtonFirstTD); | ||
var addButtonSecondTD = document.createElement('td'); | var addButtonSecondTD = document.createElement('td'); | ||
| Zeile 37: | Zeile 37: | ||
var addAnotherButton = document.createElement('button'); | var addAnotherButton = document.createElement('button'); | ||
addAnotherButton.className = 'oo-ui-inputWidget-input oo-ui-buttonElement-button' | addAnotherButton.className = 'oo-ui-inputWidget-input oo-ui-buttonElement-button'; | ||
addAnotherButton.innerHTML = '+'; | addAnotherButton.innerHTML = '+'; | ||
addAnotherButton.type = 'button'; | addAnotherButton.type = 'button'; | ||
addButtonWrapperSpan.appendChild(addAnotherButton) | addButtonWrapperSpan.appendChild(addAnotherButton); | ||
addButtonSecondTD.appendChild(addButtonWrapperSpan) | addButtonSecondTD.appendChild(addButtonWrapperSpan); | ||
addButtonRow.appendChild(addButtonSecondTD) | addButtonRow.appendChild(addButtonSecondTD); | ||
addAnotherButton.onclick = addDatepickerHandler | addAnotherButton.onclick = addDatepickerHandler; | ||
multidatepickers[i].parentNode.parentNode.appendChild(addButtonRow) | multidatepickers[i].parentNode.parentNode.appendChild(addButtonRow); | ||
var stringValues = multidatepickers[i].value.split(',') | var stringValues = multidatepickers[i].value.split(','); | ||
for (j=0; j<stringValues.length; j++) { | for (j=0; j<stringValues.length; j++) { | ||
let datepicker = makeDatepickerRow(stringValues[j]) | let datepicker = makeDatepickerRow(stringValues[j]); | ||
multidatepickers[i].parentNode.parentNode.appendChild(datepicker) | multidatepickers[i].parentNode.parentNode.appendChild(datepicker); | ||
} | } | ||
multidatepickers[i].type='hidden' | multidatepickers[i].type='hidden'; | ||
} | } | ||
| Zeile 68: | Zeile 68: | ||
function addDatepicker(multidatepicker) { | function addDatepicker(multidatepicker) { | ||
let datepicker = makeDatepickerRow('') | let datepicker = makeDatepickerRow(''); | ||
multidatepicker.parentNode.parentNode.appendChild(datepicker) | multidatepicker.parentNode.parentNode.appendChild(datepicker); | ||
} | } | ||
| Zeile 77: | Zeile 77: | ||
console.log('parsing'); | console.log('parsing'); | ||
let multidatepickers = document.getElementsByClassName('multidatepicker'); | let multidatepickers = document.getElementsByClassName('multidatepicker'); | ||
console.log('got ' + multidatepickers.length + ' multidatepickers') | console.log('got ' + multidatepickers.length + ' multidatepickers'); | ||
for (var i=0; i<multidatepickers.length; i++) { | for (var i=0; i<multidatepickers.length; i++) { | ||
multidatepickers[i].value = '' | multidatepickers[i].value = ''; | ||
let datepickers = multidatepickers[i].parentNode.parentNode.getElementsByClassName('dateInput'); | let datepickers = multidatepickers[i].parentNode.parentNode.getElementsByClassName('dateInput'); | ||
| Zeile 85: | Zeile 85: | ||
var finalStringValue = '' | var finalStringValue = '' | ||
for (var j=0; j < datepickers.length;j++) { | for (var j=0; j < datepickers.length;j++) { | ||
var yearInputValue = datepickers[j].getElementsByClassName('yearInput')[0].value | var yearInputValue = datepickers[j].getElementsByClassName('yearInput')[0].value; | ||
var monthInputValue = datepickers[j].getElementsByClassName('monthInput')[0].value | var monthInputValue = datepickers[j].getElementsByClassName('monthInput')[0].value; | ||
var dayInputValue = datepickers[j].getElementsByClassName('dayInput')[0].value | var dayInputValue = datepickers[j].getElementsByClassName('dayInput')[0].value; | ||
var stringValue = yearInputValue | var stringValue = yearInputValue; | ||
if (monthInputValue != '') { | if (monthInputValue != '') { | ||
stringValue = stringValue + '/' + monthInputValue; | stringValue = stringValue + '/' + monthInputValue; | ||
if (dayInputValue != '') { | if (dayInputValue != '') { | ||
stringValue = stringValue + '/' + dayInputValue | stringValue = stringValue + '/' + dayInputValue; | ||
} | } | ||
} | } | ||
finalStringValue = finalStringValue + ',' + stringValue | finalStringValue = finalStringValue + ',' + stringValue; | ||
} | } | ||
console.log('setting value ' + finalStringValue) | console.log('setting value ' + finalStringValue); | ||
multidatepickers[i].value = finalStringValue.substr(1) | multidatepickers[i].value = finalStringValue.substr(1); | ||
} | } | ||
| Zeile 110: | Zeile 110: | ||
var day = ''; | var day = ''; | ||
if (stringValue != null && stringValue != undefined && stringValue != '') { | if (stringValue != null && stringValue != undefined && stringValue != '') { | ||
var splitString = stringValue.split('/') | var splitString = stringValue.split('/'); | ||
if (stringValue.length == 4) { | if (stringValue.length == 4) { | ||
year = stringValue | year = stringValue; | ||
} | } | ||
if (stringValue.length == 7) { | if (stringValue.length == 7) { | ||
year = splitString[0] | year = splitString[0]; | ||
month = splitString[1] | month = splitString[1]; | ||
} | } | ||
if (stringValue.length == 10) { | if (stringValue.length == 10) { | ||
year = splitString[0] | year = splitString[0]; | ||
month = splitString[1] | month = splitString[1]; | ||
day = splitString[2] | day = splitString[2]; | ||
} | } | ||
} | } | ||
| Zeile 130: | Zeile 130: | ||
var dayField = document.createElement('input'); | var dayField = document.createElement('input'); | ||
dayField.name = 'day'; | dayField.name = 'day'; | ||
dayField.type='text' | dayField.type='text'; | ||
dayField.size=2; | dayField.size=2; | ||
dayField.className = 'dayInput'; | dayField.className = 'dayInput'; | ||
dayField.value = day; | dayField.value = day; | ||
dayField.oninput = parseInputsToStrings | dayField.oninput = parseInputsToStrings; | ||
multiDateContainer.appendChild(dayField) | multiDateContainer.appendChild(dayField); | ||
var monthField = document.createElement('select'); | var monthField = document.createElement('select'); | ||
monthField.className = 'monthInput'; | monthField.className = 'monthInput'; | ||
let noMonthOption = document.createElement('option'); | let noMonthOption = document.createElement('option'); | ||
monthField.appendChild(noMonthOption) | monthField.appendChild(noMonthOption); | ||
for (var i=1; i<13; i++) { | for (var i=1; i<13; i++) { | ||
let monthOption = document.createElement('option'); | let monthOption = document.createElement('option'); | ||
let monthString = String(i).padStart(2, '0'); | let monthString = String(i).padStart(2, '0'); | ||
monthOption.value = monthString | monthOption.value = monthString; | ||
monthOption.innerText = monthsNames[i-1]; | monthOption.innerText = monthsNames[i-1]; | ||
if (month == monthString) { | if (month == monthString) { | ||
monthOption.setAttribute('selected', 'selected'); | monthOption.setAttribute('selected', 'selected'); | ||
} | } | ||
monthField.appendChild(monthOption) | monthField.appendChild(monthOption); | ||
} | } | ||
monthField.oninput = parseInputsToStrings | monthField.oninput = parseInputsToStrings; | ||
multiDateContainer.appendChild(monthField) | multiDateContainer.appendChild(monthField); | ||
var yearField = document.createElement('input'); | var yearField = document.createElement('input'); | ||
yearField.name = 'year' | yearField.name = 'year'; | ||
yearField.size = 4 | yearField.size = 4; | ||
yearField.value = year | yearField.value = year; | ||
yearField.className = 'yearInput'; | yearField.className = 'yearInput'; | ||
yearField.oninput = parseInputsToStrings; | |||
yearField.oninput = parseInputsToStrings | |||
multiDateContainer.appendChild(yearField) | multiDateContainer.appendChild(yearField); | ||
var wrapperTR = document.createElement('tr') | var wrapperTR = document.createElement('tr'); | ||
var wrapperFirstTD = document.createElement('td') | var wrapperFirstTD = document.createElement('td'); | ||
var wrapperSecondTD = document.createElement('td') | var wrapperSecondTD = document.createElement('td'); | ||
wrapperTR.appendChild(wrapperFirstTD) | wrapperTR.appendChild(wrapperFirstTD); | ||
var deleteButtonWrapper = document.createElement('span') | var deleteButtonWrapper = document.createElement('span'); | ||
deleteButtonWrapper.className = 'oo-ui-buttonElement-button oo-ui-buttonElement-frameless'; | deleteButtonWrapper.className = 'oo-ui-buttonElement-button oo-ui-buttonElement-frameless'; | ||
| Zeile 180: | Zeile 179: | ||
deleteButton.type = 'button'; | deleteButton.type = 'button'; | ||
deleteButton.className = 'oo-ui-iconElement-icon oo-ui-icon-trash oo-ui-image-destructive'; | deleteButton.className = 'oo-ui-iconElement-icon oo-ui-icon-trash oo-ui-image-destructive'; | ||
deleteButton.onclick = removeDatepickerHandler | deleteButton.onclick = removeDatepickerHandler; | ||
deleteButtonWrapper.appendChild(deleteButton) | deleteButtonWrapper.appendChild(deleteButton); | ||
wrapperSecondTD.appendChild(multiDateContainer) | wrapperSecondTD.appendChild(multiDateContainer); | ||
wrapperSecondTD.appendChild(deleteButtonWrapper) | wrapperSecondTD.appendChild(deleteButtonWrapper); | ||
wrapperTR.appendChild(wrapperSecondTD) | wrapperTR.appendChild(wrapperSecondTD); | ||
return wrapperTR | return wrapperTR; | ||
} | } | ||
initMultiDatepickers() | initMultiDatepickers(); | ||