MediaWiki:Common.js: Unterschied zwischen den Versionen

Version vom 15. März 2023, 22:11 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */

var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "https://discord.com/widget?id=718907647465881671&theme=dark");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.width = "197px";
makeIframe.style.height = "500px";
makeIframe.style.border = "0";

var makediv = document.createElement("div");
makediv.className = 'discorddiv';
makediv.style.height = "500px";
makediv.style.width = "197px";
makediv.style.position = "relative";
makediv.style.overflow = "hidden";

makediv.appendChild(makeIframe);

var getRef = document.getElementById("page-tools");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);

/* ------- */
/* --- Tooltips ---- */

$(document).ready(function() {
  var qm = $('.qm');
  var xx = $('.fa-circle-xmark');
  var currentTooltip = null;

  $(qm).click(function() {
    // Schließt das aktuelle Tooltip-Element, wenn auf das gleiche qm-Element geklickt wird
    if (currentTooltip && $(this).is($(currentTooltip).prev('.qm'))) {
      $(currentTooltip).hide();
      currentTooltip = null;
      return;
    }

    // Schließt das aktuelle Tooltip-Element, bevor ein neues geöffnet wird
    if (currentTooltip) {
      $(currentTooltip).hide();
    }

    // Speichert das aktuelle Tooltip-Element und zeigt es an
    currentTooltip = $(this).next('.tooltip');
    $(currentTooltip).show();
  });

  $(xx).click(function() {
    // Schließt das aktuelle Tooltip-Element, wenn auf das "x" -Symbol geklickt wird
    $(this).closest('.tooltip').hide();
  });

  $(document).click(function(event) {
    // Schließt das aktuelle Tooltip-Element, wenn auf ein anderes Element als das Tooltip-Element oder die qm-Elemente geklickt wird
    var clickedElement = event.target;
    if (currentTooltip && !$(clickedElement).is(currentTooltip) && !$(clickedElement).is(qm)) {
      $(currentTooltip).hide();
      currentTooltip = null;
    }
  });
});

/* ------- */

$(document).ready(function() {
  var itemsPerPage = 4;
  var $list = $('.filtered-list');
  var $items = $list.find('.filtered-list-item');
  var $pagination = $('.pagination');
  
  var pageCount = Math.ceil($items.length / itemsPerPage);
  var currentPage = 1;
  
  // Show the first page
  $items.slice(0, itemsPerPage).show();
  
  // Build pagination links
  for (var i = 1; i <= pageCount; i++) {
    $('<a>').text(i).addClass('page-link').appendTo($pagination);
  }
  
  // Highlight current page link
  $pagination.find('.page-link').first().addClass('active');
  
  // Pagination click event
  $pagination.on('click', '.page-link', function(e) {
    e.preventDefault();
    var $link = $(this);
    var page = $link.text();
    
    // Highlight the selected page link
    $pagination.find('.page-link').removeClass('active');
    $link.addClass('active');
    
    // Show the selected page
    var start = (page - 1) * itemsPerPage;
    var end = start + itemsPerPage;
    $items.hide().slice(start, end).show();
  });
  
  // Lazy loading
  $(window).scroll(function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if (scrollPosition > scrollHeight - 100) {
      var nextPage = currentPage + 1;
      if (nextPage <= pageCount) {
        var start = (nextPage - 1) * itemsPerPage;
        var end = start + itemsPerPage;
        $items.slice(start, end).show();
        currentPage = nextPage;
      }
    }
  });
});