|
|
| Zeile 1: |
Zeile 1: |
| /* 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);
| |
|
| |
| })();
| |