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. */
(function () {
var mw = window.mediaWiki || window.mw;
var $ = window.jQuery;
if (!mw || !$) return;
console.log('MediaWiki:Common.js (v9) aktiv');
/* LEAFLET INTERCEPTOR */
(function interceptLeaflet() {
if (window.L && window.L.map && !window.L.map._isIntercepted) {
var originalLMap = window.L.map;
window.L.map = function (id, options) {
var map = originalLMap.apply(this, arguments);
var el = (typeof id === 'string') ? document.getElementById(id) : id;
if (el) {
$(el).data('captured-map', map);
console.log('GleisEditor: Map-Instanz abgefangen.');
}
return map;
};
window.L.map._isIntercepted = true;
console.log('GleisEditor: Leaflet Interceptor bereit.');
} else if (!window.L || !window.L.map) {
setTimeout(interceptLeaflet, 50);
}
})();
// --- Standard MediaWiki:Common.js Funktionen ---
// (Vollständig erhalten aus Vorversionen)
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++) {
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 (var 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() {
var multidatepickers = document.getElementsByClassName('multidatepicker');
for (var i = 0; i < multidatepickers.length; i++) {
multidatepickers[i].value = ''; var datepickers = multidatepickers[i].parentNode.parentNode.getElementsByClassName('dateInput'); 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;
}
multidatepickers[i].value = finalStringValue.substr(1);
}
}
function makeDatepickerRow(stringValue) {
var year = ''; var month = ''; var day = ''; if (stringValue != null && 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.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.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.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 = (e.clipboardData || window.clipboardData).getData('text');
if (paste.startsWith('https://maps.apple.com/place?/&ll=')) { e.preventDefault(); e.target.value = decodeURIComponent(paste.substring(34)); }
});
}
}
$(function () { initMultiDatepickers(); initColorpickers(); initCoordsPasteHook(); });
/* GleisEditor Logic v9 */
function setupGleisEditor() {
const $mapCanvas = $('.pfMapCanvas');
if (!$mapCanvas.length) return;
let attempts = 0;
const checkLeaflet = setInterval(function () {
attempts++;
const mapContainer = $mapCanvas[0];
let map = mapContainer._leaflet_map || $(mapContainer).data('captured-map') || $(mapContainer).data('leaflet');
if (map) {
console.log('GleisEditor: Map gefunden.');
clearInterval(checkLeaflet);
// PF-Koordinaten-Input des Map-Dummy-Feldes ausblenden
$mapCanvas.parent().find('.pfCoordsInput').hide();
$mapCanvas.parent().find('.pfCoordsInputHelpers').hide();
initGleisEditor(map);
} else if (attempts > 60) {
clearInterval(checkLeaflet);
}
}, 500);
}
function initGleisEditor(map) {
if (map._gleisEditorInitialized) return;
map._gleisEditorInitialized = true;
console.log('GleisEditor: Initialisiere Polyline-Modus v10...');
map.off('click');
let markerLayer = L.layerGroup().addTo(map);
let polyline = L.polyline([], { color: 'black', weight: 4, opacity: 0.8 }).addTo(map);
let markers = [];
function updatePolyline() { polyline.setLatLngs(markers.map(m => m.getLatLng())); }
function updateAllFields() {
const coords = markers.map(m => {
const ll = m.getLatLng();
return ll.lat.toFixed(6) + ',' + ll.lng.toFixed(6);
}).join(';');
// Aggressives Targetting: Alle Elemente mit Name 'Gleis[Koordinaten]' finden.
// PageForms erstellt oft ein sichtbares und ein verstecktes Feld.
const $targets = $('[name="Gleis[Koordinaten]"]');
$targets.val(coords).trigger('change');
console.log('GleisEditor: ' + $targets.length + ' Datenfelder aktualisiert:', coords);
}
function addMarker(lat, lng) {
const marker = L.marker([lat, lng], { draggable: true }).addTo(markerLayer);
marker.on('drag', function () { updatePolyline(); updateAllFields(); });
marker.on('contextmenu', function (e) {
if (e.originalEvent) e.originalEvent.preventDefault();
markerLayer.removeLayer(marker);
markers = markers.filter(m => m !== marker);
updatePolyline(); updateAllFields();
return false;
});
markers.push(marker);
return marker;
}
// Vorhandene Daten aus dem ersten gefundenen Koordinaten-Feld laden
const initialVal = $('[name="Gleis[Koordinaten]"]').first().val();
if (initialVal && initialVal.includes(',')) {
initialVal.split(';').forEach(pair => {
const p = pair.trim().split(',').map(Number);
if (p.length === 2 && !isNaN(p[0])) addMarker(p[0], p[1]);
});
updatePolyline();
}
map.on('click', function (e) {
addMarker(e.latlng.lat, e.latlng.lng);
updatePolyline();
updateAllFields();
});
console.log('GleisEditor: BEREIT (v9).');
}
$(setupGleisEditor);
mw.hook('wikipage.content').add(setupGleisEditor);
})();