MediaWiki:Common.js: Difference between revisions

/* Any JavaScript here will be loaded for all users on every page load. */








/* Level Up RN - Clickable Boxes with Thumbnails */
(function() {
    'use strict';

    mw.loader.using(['jquery'], function() {
        $(document).ready(function() {

            // Create working iframe embeds for playlist video pages
            $('.youtube-video-embed[data-video-id]').each(function() {
                var $container = $(this);
                var videoId = $container.attr('data-video-id');

                if (videoId) {
                    var iframe = $('<iframe>')
                        .attr({
                            'src': 'https://www.youtube.com/embed/' + videoId,
                            'frameborder': '0',
                            'allow': 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share',
                            'allowfullscreen': '',
                            'referrerpolicy': 'strict-origin-when-cross-origin'
                        })
                        .css({
                            'position': 'absolute',
                            'top': '0',
                            'left': '0',
                            'width': '100%',
                            'height': '100%'
                        });

                    $container.empty().append(iframe);
                }
            });

            // Transform gallery table for category page
            var pageName = mw.config.get('wgPageName');
            if (pageName === 'Category:Level_Up_RN_Videos' || pageName === 'Category:Level_Up_RN') {
                var $table = $('.wikitable.sortable').first();
                if (!$table.length) return;

                var $gallery = $('<div class="playlists-gallery"></div>');

                $table.find('tr').each(function(index) {
                    if (index === 0) return;

                    var $row = $(this);
                    var $cells = $row.find('td');
                    if ($cells.length < 3) return;

                    var $titleCell = $cells.eq(0);
                    var $descCell = $cells.eq(1);

                    var playlistId = $titleCell.attr('data-playlist-id');
                    var $titleLink = $titleCell.find('a').first();
                    var wikiPageUrl = $titleLink.attr('href');
                    var title = $titleLink.text();
                    var description = $descCell.text().trim();

                    if (!playlistId || !wikiPageUrl) return;

                    var $box = $('<div class="playlist-box"></div>');

                    // Make the entire box clickable
                    $box.css('cursor', 'pointer').on('click', function(e) {
                        if (!$(e.target).is('a')) {
                            window.location.href = wikiPageUrl;
                        }
                    });

                    var $thumb = $('<div class="playlist-box-thumb"></div>');

                    // Use YouTube iframe for thumbnail with pointer-events: none
                    var $thumbFrame = $('<iframe>')
                        .attr({
                            'src': 'https://www.youtube.com/embed/videoseries?list=' + playlistId + '&controls=0&showinfo=0&rel=0&modestbranding=1',
                            'frameborder': '0',
                            'loading': 'lazy'
                        })
                        .css({
                            'position': 'absolute',
                            'top': '0',
                            'left': '0',
                            'width': '100%',
                            'height': '100%',
                            'pointer-events': 'none'  // This allows clicks to pass through
                        });

                    $thumb.append($thumbFrame);
                    $thumb.append('<div class="playlist-box-overlay">▶ Playlist</div>');

                    var $info = $('<div class="playlist-box-info"></div>');
                    $info.append('<div class="playlist-box-title">' + title + '</div>');
                    if (description) {
                        $info.append('<div style="margin: 8px 0; font-size: 13px; color: #666;">' + description + '</div>');
                    }
                    $info.append('<a href="' + wikiPageUrl + '" class="playlist-box-link" onclick="event.stopPropagation();">Watch Playlist →</a>');

                    $box.append($thumb).append($info);
                    $gallery.append($box);
                });

                if ($gallery.children().length > 0) {
                    $table.replaceWith($gallery);
                }
            }
        });
    });
})();