Lompat ke isi

MediaWiki:Common.js: Perbedaan antara revisi

Dari Wikisporta, ensiklopedia olahraga
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Tidak ada ringkasan suntingan
Tanda: Suntingan perangkat seluler Suntingan peramban seluler
Baris 15: Baris 15:
             $container.addClass('mp-featured-paragraph mp-processed');
             $container.addClass('mp-featured-paragraph mp-processed');


             var articleUrl = $link.attr('href'); // Ambil URL artikel asli
            // Simpan HTML versi lengkap asli (untuk dibuka saat klik pertama)
             var fullHtml = $container.html();


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


             // Batasi karakter untuk tampilan awal (sekitar 3 baris)
             // Tentukan batas karakter agar pas sekitar 3 baris tampilan HP/Desktop
             var charLimit = 135;
             var charLimit = 145;  
             var truncatedText = fullText.length > charLimit ? fullText.substring(0, charLimit).trim() + '...' : fullText;
             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...."
             // Ambil HTML link asli untuk digabung secara inline
             var linkHtml = '<a class="featured-readmore-link" href="' + articleUrl + '">Baca selengkapnya....</a>';
             var linkHtml = $link[0].outerHTML;


             var collapsedHtml = '<span class="mp-text-main">' + truncatedText + ' </span>' +
            // Gabungkan teks terpotong dengan link secara inline
                                '<span class="mp-text-extra" style="display:none;">' + remainingText + ' </span>' +
             var collapsedHtml = truncatedText + ' ' + linkHtml;
                                linkHtml;


             // Render ke dalam paragraf
             // Render kondisi awal (tertutup/terpotong)
             $container.html(collapsedHtml);
             $container.html(collapsedHtml);


             var isExpanded = false;
             var isExpanded = false;


             // Handle Klik dengan Animasi Mulus
             // Handle Klik dengan Event Delegation pada container
             $container.on('click', '.featured-readmore-link', function (e) {
             $container.on('click', 'a', function (e) {
                 if (!isExpanded) {
                var $clickedLink = $(this);
                     e.preventDefault();
               
                    isExpanded = true;
                 if ($clickedLink.text().indexOf('Selengkapnya') !== -1) {
 
                     if (!isExpanded) {
                    // KLIK PERTAMA: Munculkan sisa teks dengan animasi fade-in yang halus
                        // KLIK PERTAMA: Kembalikan teks ke versi lengkap (fullHtml)
                    var $extra = $container.find('.mp-text-extra');
                        e.preventDefault();
                     $extra.css({ display: 'inline', opacity: 0 }).animate({ opacity: 1 }, 400);
                        $container.html(fullHtml);
                        isExpanded = true;
                     }
                    // KLIK KEDUA: Karena HTML sudah kembali ke fullHtml,  
                    // link otomatis berfungsi normal mengarah ke halaman artikel asli!
                 }
                 }
                // KLIK KEDUA: Otomatis mengarahkan ke halaman artikel asli
             });
             });
         }
         }
     });
     });
});
});

Revisi per 17 Oktober 2026 04.46

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('Baca 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');

            // Simpan HTML versi lengkap asli (untuk dibuka saat klik pertama)
            var fullHtml = $container.html();

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

            // Tentukan batas karakter agar pas sekitar 3 baris tampilan HP/Desktop
            var charLimit = 145; 
            var truncatedText = fullText.length > charLimit ? fullText.substring(0, charLimit).trim() + '...' : fullText;

            // Ambil HTML link asli untuk digabung secara inline
            var linkHtml = $link[0].outerHTML;

            // Gabungkan teks terpotong dengan link secara inline
            var collapsedHtml = truncatedText + ' ' + linkHtml;

            // Render kondisi awal (tertutup/terpotong)
            $container.html(collapsedHtml);

            var isExpanded = false;

            // Handle Klik dengan Event Delegation pada container
            $container.on('click', 'a', function (e) {
                var $clickedLink = $(this);
                
                if ($clickedLink.text().indexOf('Selengkapnya') !== -1) {
                    if (!isExpanded) {
                        // KLIK PERTAMA: Kembalikan teks ke versi lengkap (fullHtml)
                        e.preventDefault();
                        $container.html(fullHtml);
                        isExpanded = true;
                    }
                    // KLIK KEDUA: Karena HTML sudah kembali ke fullHtml, 
                    // link otomatis berfungsi normal mengarah ke halaman artikel asli!
                }
            });
        }
    });
});