MediaWiki:Common.js: Unterschied zwischen den Versionen
Tt (Diskussion | Beiträge) |
Tt (Diskussion | Beiträge) |
||
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 190: | Zeile 190: | ||
colorpickers[i].setAttribute('type', 'color'); | colorpickers[i].setAttribute('type', 'color'); | ||
colorpickers[i].value = '#' + colorpickers[i].value; | 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; | |||
} | |||
}); | |||
} | } | ||
} | } | ||
Zeile 196: | Zeile 218: | ||
initMultiDatepickers(); | initMultiDatepickers(); | ||
initColorpickers(); | 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();