MediaWiki

Common.js: Difference between revisions

From Illustrations in German Translations of Mark Twain's Works

← Older editNewer edit →
No edit summary
No edit summary
Tag: Reverted
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/*AUSKLAPPMENÜS*/
$(function () {
  $('.ausklapp-button').click(function () {
    var $button = $(this);
    var $content = $button.next('.ausklapp-inhalt');
    $content.slideToggle(200);
    var expanded = $button.attr('aria-expanded') === 'true';
    $button.attr('aria-expanded', !expanded);
  });
});


/* Data Tables */
/* Data Tables */
Line 19: Line 4:


// DataTables JS nachladen und dann initialisieren
// DataTables JS nachladen und dann initialisieren
$.when(
mw.loader.getScript('https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js')
  $.getScript('https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js'),
.then(function() {
  $.getScript('https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js'),
    console.log('DataTables erfolgreich geladen! Initialisiere Tabelle...');
  $.getScript('https://cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.min.js')
    $(document).ready(function() {
).done(function () {
        $('#catalog').DataTable({
  console.log('DataTables + Erweiterungen geladen');
            paging: true,
 
            pageLength: 100,
  mw.hook('wikipage.content').add(function($content) {
            searching: true,
    var $table = $content.find('#catalog');
            ordering: true,
 
            lengthMenu: [ [10, 25, 50, 100, 200, 600], [10, 25, 50, 100, 200, 600] ],
    if ($table.length && !$.fn.DataTable.isDataTable($table)) {
            order: [[1, 'asc']],
      $table.DataTable({
            language: {
        dom: 'Qlfrtip',
                search: "Suche:",
        searchBuilder: true,
                lengthMenu: "Show _MENU_ Entries",
        paging: true,
                zeroRecords: "No Matches",
        pageLength: 100,
                info: "Page _PAGE_ of _PAGES_",
        searching: true,
                infoEmpty: "Empty",
        ordering: true,
                infoFiltered: "(out of _MAX_ total entries)"
        lengthMenu: [ [10, 25, 50, 100, 200, 600], [10, 25, 50, 100, 200, 600] ],
            },
        order: [[1, 'asc']],
            initComplete: function () {
        language: {
                // Fügt für jede Spalte ein Suchfeld hinzu
          search: "Suche:",
                this.api().columns().every(function () {
          lengthMenu: "Show _MENU_ Entries",
                    var column = this;
          zeroRecords: "No Matches",
                    var header = $(column.header());
          info: "Page _PAGE_ of _PAGES_",
                    var columnTitle = header.text(); // Spaltentitel extrahieren
          infoEmpty: "Empty",
                    var input = $('<input type="text" placeholder="' + columnTitle + ' ..." style="width: 100%; padding: 5px;"/>')
          infoFiltered: "(out of _MAX_ total entries)"
                        .appendTo($(header).empty())  // Leert die Headerzelle und fügt das Eingabefeld ein
        },
                        .on('keyup change', function () {
        initComplete: function () {
                            column.search(this.value).draw();  // Filtert die Spalte nach Eingabewerten
          // Fügt für jede Spalte ein Suchfeld hinzu
                        })
          this.api().columns().every(function () {
                        .on('click', function(e) {
            var column = this;
                            e.stopPropagation(); // Verhindert, dass der Klick die Sortierung beeinflusst
            var header = $(column.header());
                        });
            var columnTitle = header.text(); // Spaltentitel extrahieren
                });
            var input = $('<input type="text" placeholder="' + columnTitle + ' ..." style="width: 100%; padding: 5px;"/>')
             }
              .appendTo($(header).empty())  // Leert die Headerzelle und fügt das Eingabefeld ein
              .on('keyup change', function () {
                column.search(this.value).draw();  // Filtert die Spalte nach Eingabewerten
              })
              .on('click', function(e) {
                e.stopPropagation(); // Verhindert, dass der Klick die Sortierung beeinflusst
              });
          });
        }
      });
    }
  });
 
});
 
console.log($.fn.dataTable);        // Sollte nicht undefined sein
console.log($.fn.dataTable.SearchBuilder);  // Sollte definiert sein nach Laden von SearchBuilder
 
 
// Hover-Preview für Bild-Links in DataTables
$(document).ready(function() {
    // Neuen Image-Container einfügen
    $('body').append('<div id="image-hover-preview" style="display:none; position:absolute; z-index:9999;"><img src="" style="max-width:400px; max-height:400px; border:1px solid #ccc; background:white; padding:5px;"></div>');
 
    // Auf alle Links in der Tabelle achten
    $('#catalog').on('mouseenter', 'a', function(e) {
        var href = $(this).attr('href');
        if (href && href.includes('/Special:Redirect/file/')) {
             var imgUrl = href; // URL direkt verwenden
            $('#image-hover-preview img').attr('src', imgUrl);
            $('#image-hover-preview').show();
        }
    }).on('mousemove', 'a', function(e) {
        $('#image-hover-preview').css({
            top: e.pageY + 20 + 'px',
            left: e.pageX + 20 + 'px'
         });
         });
    }).on('mouseleave', 'a', function() {
        $('#image-hover-preview').hide();
     });
     });
})
.catch(function(err) {
    console.error('Fehler beim Laden von DataTables:', err);
});
});


document.getElementById('searchButton').addEventListener('click', function() {
// DataTables SearchBuilder + Abhängigkeiten
    var tags = document.getElementById('tagInput').value.split(',').map(tag => tag.trim());
mw.loader.load('https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js');
    searchImagesByTags(tags);
mw.loader.load('https://cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.min.js');
});


document.getElementById('searchButton').addEventListener('click', function() {
// DataTable prüfen für SearchBuilder
    var tags = document.getElementById('tagInput').value.split(',').map(tag => tag.trim());
    searchImagesByTags(tags);
});
 
function searchImagesByTags(tags) {
    var url = new URL(window.location.href);
    var apiUrl = url.origin + '/w/api.php';
   
    // Hier wird eine Anfrage an die MediaWiki API gestellt, um nach Bildern zu suchen, die den Tags entsprechen
    fetch(`${apiUrl}?action=query&format=json&list=categorymembers&cmtitle=Category:${tags.join('&cmtitle=Category:')}&cmtype=file`)
        .then(response => response.json())
        .then(data => {
            var images = data.query.categorymembers;
            displayImages(images);
        })
        .catch(error => console.error('Error:', error));
}
 
function displayImages(images) {
    var galleryContainer = document.getElementById('galleryContainer');
    galleryContainer.innerHTML = ''; // Leere den Container, um Platz für neue Bilder zu schaffen
 
    // Überprüfe, ob Bilder vorhanden sind
    if (images.length === 0) {
        galleryContainer.innerHTML = '<p>Keine Bilder mit den angegebenen Tags gefunden.</p>';
        return;
    }
 
    // Bilder in die Galerie einfügen
    images.forEach(image => {
        var imgElement = document.createElement('img');
        imgElement.src = '/index.php/Special:Redirect/file/' + image.title.replace('Category:', '');
        imgElement.alt = image.title;
        galleryContainer.appendChild(imgElement);
    });
}
// Funktion zur Extraktion der Dateinamen aus der Tabelle und zur Anzeige in der Galerie
function updateGalleryFromTable() {
    // Tabelle durchsuchen und Dateinamen extrahieren
    var rows = document.querySelectorAll('#catalog tbody tr');
    var imageLinks = [];
 
    rows.forEach(row => {
        var imageCell = row.cells[8];  // Die 9. Zelle enthält den Dateinamen als Link
        var link = imageCell.querySelector('a');  // Link innerhalb der Zelle
        if (link) {
            var imageName = link.textContent.trim();  // Der Text des Links ist der Dateiname
            var imageUrl = '/index.php/Special:Redirect/file/' + imageName + '.jpg';
            imageLinks.push(imageUrl);
        }
    });
 
    // Neue Seite mit Galerie öffnen
    var galleryWindow = window.open('', '_blank');
    if (galleryWindow) {
        galleryWindow.document.write('<html><head><title>Gallery</title>');
        galleryWindow.document.write('<style>');
        galleryWindow.document.write('body { font-family: sans-serif; padding: 20px; }');
        galleryWindow.document.write('img { max-width: 300px; margin: 10px; cursor: pointer; display: inline-block; }');
        galleryWindow.document.write('</style></head><body>');
        galleryWindow.document.write('<h2>Results</h2>');
 
        imageLinks.forEach(url => {
            galleryWindow.document.write('<img src="' + url + '" onclick="window.open(\'' + url + '\')">');
        });
 
        galleryWindow.document.write('</body></html>');
        galleryWindow.document.close();
    } else {
        alert('Popup wurde blockiert. Bitte erlaube Popups für diese Seite.');
    }
}


$(document).ready(function () {
$(document).ready(function () {
    const columnCount = 9;
  // Prüft, ob eine Tabelle mit der Klasse .datatable vorhanden ist
 
  $('.datatable').DataTable({
    // Neue Bedingung hinzufügen
     dom: 'Qlfrtip', // Q = SearchBuilder
    $('#addCondition').on('click', function () {
    searchBuilder: true
        const newRow = $('<div class="search-row" style="margin-bottom: 5px;">' +
  });
            '<select class="bool-select">' +
                '<option value="AND">AND</option>' +
                '<option value="OR">OR</option>' +
                '<option value="NOT">NOT</option>' +
                '<option value="XOR">XOR</option>' +
            '</select>' +
            '<select class="field-select">' +
                '<option value="8">ID</option>' +
                '<option value="all">All</option>' +
                '<option value="0">Book</option>' +
                '<option value="1">Year</option>' +
                '<option value="2">Illustrator</option>' +
                '<option value="3">Chpt in Orig</option>' +
                '<option value="4">Chpt in this Ed.</option>' +
                '<option value="5">Ill. in Chpt.</option>' +
                '<option value="6">Illustration Title</option>' +
                '<option value="7">Tags</option>' +
            '</select>' +
            '<input type="text" class="search-input" placeholder=" ">' +
            '<button class="remove-condition" style="margin-left: 5px;">🗑️</button>' +
        '</div>');
        $('#searchConditions').append(newRow);
    });
 
    // Dynamisch hinzugefügte Bedingungen löschen
    $('#searchConditions').on('click', '.remove-condition', function () {
        if ($('#searchConditions .search-row').not('.fixed').length > 1) {
            $(this).closest('.search-row').remove();
        }
    });
 
    // Suche ausführen
     $('#runAdvancedSearch').on('click', function () {
        const table = $('#catalog').DataTable();
        table.search('').columns().search('');
 
        const filters = [];
 
        // 1. Feste erste Bedingung einfügen
        filters.push({
            column: '8', // ID-Spalte
            term: 'hf',
            boolOp: null
        });
 
        // 2. Alle weiteren Bedingungen
        $('#searchConditions .search-row').not('.fixed').each(function () {
            const column = $(this).find('.field-select').val();
            const term = $(this).find('.search-input').val().trim();
            const boolOp = $(this).find('.bool-select').val();
 
            if (term !== '') {
                filters.push({ column, term, boolOp });
            }
        });
 
        if (filters.length === 0) {
            table.draw();
            return;
        }
 
        // Filterlogik
        $.fn.dataTable.ext.search = [];
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            let result = null;
 
            filters.forEach(function (filter, i) {
                const val = filter.column === 'all'
                    ? data.join(' ').toLowerCase()
                    : (data[filter.column] || '').toLowerCase();
 
                const match = val.includes(filter.term.toLowerCase());
 
                if (i === 0) {
                    result = match;
                } else {
                    switch (filter.boolOp) {
                        case 'AND': result = result && match; break;
                        case 'OR':  result = result || match; break;
                        case 'NOT': result = result && !match; break;
                        case 'XOR': result = (result && !match) || (!result && match); break;
                    }
                }
            });
 
            return result;
        });
 
        table.draw();
    });
});
});

Revision as of 12:47, 15 July 2025


/* Data Tables */
console.log('DataTables-Skript wird geladen...');

// DataTables JS nachladen und dann initialisieren
mw.loader.getScript('https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js')
.then(function() {
    console.log('DataTables erfolgreich geladen! Initialisiere Tabelle...');
    $(document).ready(function() {
        $('#catalog').DataTable({
            paging: true,
            pageLength: 100,
            searching: true,
            ordering: true,
            lengthMenu: [ [10, 25, 50, 100, 200, 600], [10, 25, 50, 100, 200, 600] ],
            order: [[1, 'asc']],
            language: {
                search: "Suche:",
                lengthMenu: "Show _MENU_ Entries",
                zeroRecords: "No Matches",
                info: "Page _PAGE_ of _PAGES_",
                infoEmpty: "Empty",
                infoFiltered: "(out of _MAX_ total entries)"
            },
            initComplete: function () {
                // Fügt für jede Spalte ein Suchfeld hinzu
                this.api().columns().every(function () {
                    var column = this;
                    var header = $(column.header());
                    var columnTitle = header.text(); // Spaltentitel extrahieren
                    var input = $('<input type="text" placeholder="' + columnTitle + ' ..." style="width: 100%; padding: 5px;"/>')
                        .appendTo($(header).empty())  // Leert die Headerzelle und fügt das Eingabefeld ein
                        .on('keyup change', function () {
                            column.search(this.value).draw();  // Filtert die Spalte nach Eingabewerten
                        })
                        .on('click', function(e) {
                            e.stopPropagation(); // Verhindert, dass der Klick die Sortierung beeinflusst
                        });
                });
            }
        });
    });
})
.catch(function(err) {
    console.error('Fehler beim Laden von DataTables:', err);
});

// DataTables SearchBuilder + Abhängigkeiten
mw.loader.load('https://cdn.datatables.net/datetime/1.5.1/js/dataTables.dateTime.min.js');
mw.loader.load('https://cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.min.js');

// DataTable prüfen für SearchBuilder

$(document).ready(function () {
  // Prüft, ob eine Tabelle mit der Klasse .datatable vorhanden ist
  $('.datatable').DataTable({
    dom: 'Qlfrtip', // Q = SearchBuilder
    searchBuilder: true
  });
});
Retrieved from "https://illus.twainframe.org/index.php?title=MediaWiki:Common.js&oldid=756"