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) |
||
(19 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/* Das folgende JavaScript wird für alle Benutzer geladen. */ | /* Das folgende JavaScript wird für alle Benutzer geladen. */ | ||
var monthsNames = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']; | |||
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() { | ||
var multidatepickers = document.getElementsByClassName('multidatepicker'); | |||
for (var i=0; i<multidatepickers.length; i++) { | for (var i=0; i<multidatepickers.length; i++) { | ||
Zeile 29: | Zeile 24: | ||
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 32: | ||
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++) { | ||
var 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 63: | ||
function addDatepicker(multidatepicker) { | function addDatepicker(multidatepicker) { | ||
var datepicker = makeDatepickerRow(''); | |||
multidatepicker.parentNode.parentNode.appendChild(datepicker) | multidatepicker.parentNode.parentNode.appendChild(datepicker); | ||
} | } | ||
Zeile 76: | Zeile 71: | ||
function parseInputsToStrings() { | function parseInputsToStrings() { | ||
console.log('parsing'); | console.log('parsing'); | ||
var 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 = ''; | ||
var datepickers = multidatepickers[i].parentNode.parentNode.getElementsByClassName('dateInput'); | |||
console.log(i + 'th multidatepicker has ' + datepickers.length + ' values'); | console.log(i + 'th multidatepicker has ' + datepickers.length + ' values'); | ||
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 105: | ||
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 125: | ||
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'; | ||
var noMonthOption = document.createElement('option'); | |||
monthField.appendChild(noMonthOption) | monthField.appendChild(noMonthOption); | ||
for (var i=1; i<13; i++) { | for (var i=1; i<13; i++) { | ||
var monthOption = document.createElement('option'); | |||
var 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 174: | ||
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; | ||
} | |||
function initColorpickers() { | |||
var colorpickers = document.getElementsByClassName('colorpicker'); | |||
for (var i=0; i<colorpickers.length; i++) { | |||
colorpickers[i].setAttribute('type', 'color'); | |||
colorpickers[i].value = '#' + colorpickers[i].value; | |||
} | |||
} | |||
function initCoordsPasteHook() { | |||
var inputs = document.getElementsByClassName('pfCoordsInput'); | |||
for (var i=0; i<inputs.length; i++) { | |||
inputs[i].addEventListener('paste', function (e) { | |||
var paste = (event.clipboardData || window.clipboardData).getData('text'); | |||
var elem = e.target; | |||
console.log('onPaste coords'); | |||
if (paste.startsWith('https://maps.apple.com/place?/&ll=')) { | |||
e.preventDefault(); | |||
// is Apple maps | |||
console.log('apple maps paste'); | |||
var coords = decodeURIComponent(paste.substring(34)); | |||
elem.value = coords; | |||
} | |||
}); | |||
} | |||
} | } | ||
initMultiDatepickers() | initMultiDatepickers(); | ||
initColorpickers(); | |||
initCoordsPasteHook(); |
Aktuelle Version vom 4. Dezember 2022, 13:15 Uhr
/* Das folgende JavaScript wird für alle Benutzer geladen. */ var monthsNames = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']; 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() { var 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++) { var datepicker = makeDatepickerRow(stringValues[j]); multidatepickers[i].parentNode.parentNode.appendChild(datepicker); } multidatepickers[i].type='hidden'; } } function addDatepicker(multidatepicker) { var datepicker = makeDatepickerRow(''); multidatepicker.parentNode.parentNode.appendChild(datepicker); } function parseInputsToStrings() { console.log('parsing'); var multidatepickers = document.getElementsByClassName('multidatepicker'); console.log('got ' + multidatepickers.length + ' multidatepickers'); for (var i=0; i<multidatepickers.length; i++) { multidatepickers[i].value = ''; var 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'; var noMonthOption = document.createElement('option'); monthField.appendChild(noMonthOption); for (var i=1; i<13; i++) { var monthOption = document.createElement('option'); var 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; } function initColorpickers() { var colorpickers = document.getElementsByClassName('colorpicker'); for (var i=0; i<colorpickers.length; i++) { colorpickers[i].setAttribute('type', 'color'); colorpickers[i].value = '#' + colorpickers[i].value; } } function initCoordsPasteHook() { var inputs = document.getElementsByClassName('pfCoordsInput'); for (var i=0; i<inputs.length; i++) { inputs[i].addEventListener('paste', function (e) { var paste = (event.clipboardData || window.clipboardData).getData('text'); var elem = e.target; console.log('onPaste coords'); if (paste.startsWith('https://maps.apple.com/place?/&ll=')) { e.preventDefault(); // is Apple maps console.log('apple maps paste'); var coords = decodeURIComponent(paste.substring(34)); elem.value = coords; } }); } } initMultiDatepickers(); initColorpickers(); initCoordsPasteHook();