MediaWiki:Common.js: Perbedaan antara revisi
Wikisporta (bicara | kontrib) Tidak ada ringkasan suntingan Tanda: Suntingan perangkat seluler Suntingan peramban seluler |
Wikisporta (bicara | kontrib) 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 | |||
var | |||
// Ambil teks bersih dari paragraf tanpa link | // Ambil teks bersih dari paragraf tanpa link | ||
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) | ||
var charLimit = | var charLimit = 135; | ||
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...." | ||
var linkHtml = | var linkHtml = '<a class="featured-readmore-link" href="' + articleUrl + '">Baca selengkapnya....</a>'; | ||
var collapsedHtml = '<span class="mp-text-main">' + truncatedText + ' </span>' + | |||
var collapsedHtml = truncatedText + ' ' + linkHtml; | '<span class="mp-text-extra" style="display:none;">' + remainingText + ' </span>' + | ||
linkHtml; | |||
// Render | // Render ke dalam paragraf | ||
$container.html(collapsedHtml); | $container.html(collapsedHtml); | ||
var isExpanded = false; | var isExpanded = false; | ||
// Handle Klik dengan | // Handle Klik dengan Animasi Mulus | ||
$container.on('click', ' | $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 | |||
}); | }); | ||
} | } | ||
}); | }); | ||
}); | }); | ||