MediaWiki:Common.js

Megjegyzés: közzététel után frissítened kell a böngésződ gyorsítótárát, hogy lásd a változásokat.

• Firefox / Safari: tartsd lenyomva a Shift gombot és kattints a Frissítés gombra a címsorban, vagy használd a Ctrl–F5 vagy Ctrl–R (Macen ⌘–R) billentyűkombinációt
• Google Chrome: használd a Ctrl–Shift–R (Macen ⌘–Shift–R) billentyűkombinációt
• Edge: tartsd nyomva a Ctrl-t, és kattints a Frissítés gombra, vagy nyomj Ctrl–F5-öt

// 1. Erőforrások betöltése - LightGallery
mw.loader.load('https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/css/lightgallery-bundle.min.css', 'text/css');

$.getScript('https://cdn.jsdelivr.net/npm/lightgallery@2.4.0/lightgallery.umd.min.js', function() {
    
    // 2. A galériaépítő függvény
    function buildWikiGallery() {
        $('.wiki-dynamic-gallery').each(function() {
            var $container = $(this);
            if ($container.data('loaded')) return; // Ne fusson le duplán

            var searchTerm = $container.data('search');
            var limit = $container.data('limit') || 3;
            var thumbWidth = 340;

            var api = "https://commons.wikimedia.org/w/api.php?action=query&format=json&generator=search&gsrsearch=File:" + encodeURIComponent(searchTerm) + "&gsrlimit=" + limit + "&prop=imageinfo&iiprop=url|size&iiurlwidth=" + thumbWidth + "&origin=*";

            $.getJSON(api, function(data) {
                if (!data.query) return;
                var pages = data.query.pages;
                var html = '';

                for (var id in pages) {
                    var img = pages[id].imageinfo[0];
                    html += '<a href="' + img.url + '" class="lg-item" data-src="' + img.url + '">';
                    html += '<img src="' + img.thumburl + '" style="width:' + thumbWidth + 'px; margin:5px; border-radius:8px; cursor:pointer;" />';
                    html += '</a>';
                }

                $container.html(html).data('loaded', true);

                // 3. LightGallery inicializálása
                lightGallery($container[0], {
                    selector: '.lg-item',
                    speed: 500,
                    download: true
                });
            });
        });
    }

    // Futattás az oldal betöltésekor
    buildWikiGallery();
});


// Bootstrap Icons betöltése
var link = document.createElement("link");
link.rel = "stylesheet";
//link.href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css";
link.href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css";
document.head.appendChild(link);

/* Az ide elhelyezett JavaScript kód minden felhasználó számára lefut az oldalak betöltésekor. */
// Fülek elrejtése anonim felhasználók számára
if (mw.config.get('wgUserName') === null) {
    var hideTabs = function () {
        var el1 = document.querySelector('#ca-history');
        var el2 = document.querySelector('#ca-viewsource');
        if (el1) el1.style.display = 'none';
        if (el2) el2.style.display = 'none';

        // Ha mindkét elem megtalálható, leállítjuk az ismétlést
        if (el1 || el2) clearInterval(observer);
    };

    // 100ms-onként ellenőrizzük, hogy megjelentek-e a fülek
    var observer = setInterval(hideTabs, 100);
}

/* MediaWikiben az alapértelmezett viselkedés az, hogy a külső hivatkozások (pl. [https://példa.hu link szövege]) ugyanazon a lapon nyílnak meg.
Ahhoz, hogy ezek új lapon nyíljanak meg:*/
$(function () {
  $('a.external').attr('target', '_blank');
});

// Egy "Tetejére" gomb megjelenítése és kattintáskor scrollozás az oldal tetejére
$(function() {
    // Létrehozzuk a gombot
    var $btn = $('<button/>', {
        //text: '⬆ Tetejére',
        html: '<i class="bi bi-arrow-up-square"></i> Tetejére',
        id: 'backToTopBtn',
        title: 'Az oldal tetejére',
        css: {
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            padding: '10px 15px',
            'font-size': '14px',
            'background-color': '#337ab7',
            color: 'white',
            border: 'none',
            'border-radius': '10px',
            cursor: 'pointer',
            display: 'none',   // alapból rejtve
            width: '100px',
            'z-index': 1000
        },
        click: function() {
            window.scrollTo({top: 0, behavior: 'smooth'});
        }
    });

    // A body végére tesszük a gombot
    $('body').append($btn);

    // Megjelenítés, ha az oldal le van görgetve 100px-nél
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $btn.fadeIn();
        } else {
            $btn.fadeOut();
        }
    });
});

// Egy "Vissza" gomb megjelenítése, ami az előző oldalra mutat
$(function() {
    // Vissza gomb létrehozása
    var $backBtn = $('<button/>', {
//      text: '⬅ Vissza',
        html: '<i class="bi bi-arrow-left-square"></i> Vissza',
        id: 'backBtn',
        title: 'Előző oldal',
        css: {
            position: 'fixed',
            bottom: '60px',  // a "Tetejére" gomb fölé kerül
            right: '20px',
            padding: '10px 15px',
            'font-size': '14px',
            'background-color': '#5cb85c',
            color: 'white',
            border: 'none',
            'border-radius': '10px',
            cursor: 'pointer',
            display: 'none',
            width: '100px',
            'z-index': 1000
        },
        click: function() {
            window.history.back();
        }
    });

    // Hozzáadás a DOM-hoz
    $('body').append($backBtn);

    // Megjelenítés görgetés után
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $backBtn.fadeIn();
        } else {
            $backBtn.fadeOut();
        }
    });
});

/* Taxobox ikonok megnyitása új lapon */
$(document).ready(function() {
    $('.taxobox-icons a').attr('target', '_blank');
});

// példa: ha a lightgallery könyvtár betöltve van
// document.addEventListener('DOMContentLoaded', function () {
//  if (window.lightGallery) {
//    document.querySelectorAll('.my-lightgallery').forEach(function(el){
//      lightGallery(el, { selector: 'a' });
//    });
//  }
// });