MediaWiki:Common.js

Catatan: Setelah menerbitkan, Anda mungkin perlu melewati tembolok peramban web Anda untuk melihat perubahan.

• Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
• Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
• Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5

mw.hook('wikipage.content').add(function ($content) {
    // KHUSUS HALAMAN UTAMA
    if (!mw.config.get('wgIsMainPage')) {
        return;
    }

    // Cari link bawaan template yang berisi kata "Selengkapnya"
    $content.find('a').filter(function () {
        return $(this).text().indexOf('Selengkapnya') !== -1;
    }).first().each(function () {
        var $link = $(this);
        var $container = $link.closest('p'); // Paragraf teks artikel unggulan

        if ($container.length && !$container.hasClass('mp-processed')) {
            $container.addClass('mp-featured-paragraph mp-processed');

            var articleUrl = $link.attr('href'); // Ambil URL artikel asli

            // Ambil teks bersih dari paragraf tanpa link
            var $clone = $container.clone();
            $clone.find('a').remove();
            var fullText = $clone.text().trim();

            // Batasi karakter untuk tampilan awal (sekitar 3 baris)
            var charLimit = 135;
            var truncatedText = fullText.length > charLimit ? fullText.substring(0, charLimit).trim() + '...' : fullText;
            var remainingText = fullText.length > charLimit ? fullText.substring(charLimit) : '';

            // Buat HTML dengan teks baru "Baca selengkapnya...."
            var linkHtml = '<a class="featured-readmore-link" href="' + articleUrl + '">Baca selengkapnya....</a>';

            var collapsedHtml = '<span class="mp-text-main">' + truncatedText + ' </span>' +
                                '<span class="mp-text-extra" style="display:none;">' + remainingText + ' </span>' +
                                linkHtml;

            // Render ke dalam paragraf
            $container.html(collapsedHtml);

            var isExpanded = false;

            // Handle Klik dengan Animasi Mulus
            $container.on('click', '.featured-readmore-link', function (e) {
                if (!isExpanded) {
                    e.preventDefault();
                    isExpanded = true;

                    // KLIK PERTAMA: Munculkan sisa teks dengan animasi fade-in yang halus
                    var $extra = $container.find('.mp-text-extra');
                    $extra.css({ display: 'inline', opacity: 0 }).animate({ opacity: 1 }, 400);
                }
                // KLIK KEDUA: Otomatis mengarahkan ke halaman artikel asli
            });
        }
    });
});