MediaWiki:Common.js: Difference between revisions

    function openModal(cardElement) {

console.log('Clicked on card:', cardElement);

        showArticleWrapper.css('display', 'block');

 

        var wrapperWidth = showArticleWrapper.outerWidth(true);

var adjustment = 25; // Adjust this value as needed to close the gap

list.width(originalListWidth - wrapperWidth + adjustment).css('margin-right', (wrapperWidth - adjustment) + 'px');

listList.width(originalListListWidth - wrapperWidth + adjustment).css('margin-right', (wrapperWidth - adjustment) + 'px');

 

        // Adjust width of filtered-list-items in #list

        filteredListItems.css('width', 'calc(33.3% - 2px)');

        // Hide communityFeatured

        communityFeatured.hide();

        communityListFeatured.hide();

        // Extract and handle the information from the cardElement

        var cardImages = [];

        for (var i = 1; i <= 5; i++) {

            var captionClass = '.caption-image' + i;

            var imageElem = $(cardElement).find(imageClass + ' img');

 

            if (imageElem.length) {

                var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();

                    link: $(cardElement).find(imageClass + ' a').attr('href'),

                    src: imageElem.attr('src'),

                    alt: imageElem.attr('alt'),

                    captionClass: 'caption-image' + i

                });

        if (cardImages.length > 1) {

            setupImageToggle(cardImages);

    var entryNumber = $(cardElement).find('.entry-number').text();

    var title = $(cardElement).find('.title').text();

    var peopleHtml = $(cardElement).find('.people').html();

    var typeHtml = $(cardElement).find('.type').html();      

        var externalLinkURL = $(cardElement).find('.link a').attr('href');

        var entity = $(cardElement).find('.entity').text();

        var discipline = $(cardElement).find('.discipline').text();

        var subject = $(cardElement).find('.subject').text();

        var description = $(cardElement).find('.description').html();

        var reflection = $(cardElement).find('.reflection').html();

        var quote = $(cardElement).find('.quote').text();

        var modificationDate = $(cardElement).find('.modification-date').text();

        var relatedArticlesHtml = $(cardElement).find('.related-articles').html();

 

        $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');

        var articleContentHtml = '<div class="article-title-link">';

        articleContentHtml += '<p class="article-title">' + title + '</p>';

            articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon"><img src="/images/6/6d/Link-arrow-new.png" alt="Link"></a>';

        }

        articleContentHtml += '</div>'; // Close the new div

 

        // Append type, entity, discipline, and subject details

        articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +

        '<div class="article-metadata">' +

            '<div class="article-metadata-column">' +

                '<p class="article-metadata-label">Entity</p>' +

                '<p class="article-metadata-value">' + entity + '</p>' +

            '</div>' +

            '<div class="article-metadata-column">' +

                '<p class="article-metadata-label">Discipline</p>' +

                '<p class="article-metadata-value">' + discipline + '</p>' +

            '</div>' +

            '<div class="article-metadata-column">' +

                '<p class="article-metadata-label">Subject(s)</p>' +

                '<p class="article-metadata-value">' + subject + '</p>' +

            '</div>' +

        '</div>';

        // Add images if any

        if (cardImages.length > 0) {

            var initialImage = cardImages[0]; // Use the first image initially

            articleContentHtml +=

                '<div class="article-images">' +

                    getImageHtml(initialImage, 0, cardImages.length) +

                '</div>';

        }       

        // Add non-image content (description, reflection, etc.)

        articleContentHtml +=  

        (description ? '<p class="article-label-description">Description</p>' +

        '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +

        (reflection ? '<p class="article-label-reflection">Reflection</p>' +

        '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +

        (quote ? '<p class="article-label-quote">Quote</p>' +

        '<div class="article-quote">“' + formatParagraphs(quote) + '”</div>' : '') +

        '<p class="article-label-modification-date">Added on</p>' +

        '<div class="article-modification-date">' + formatSimpleDate(modificationDate) + '</div>'

 

        $('#article-content').html(articleContentHtml);

        $('#related-articles').html(relatedArticlesHtml);

 

        if (relatedArticlesHtml && relatedArticlesHtml.trim().length > 0) {

            $('#related-articles').html('<div class="related-articles-label">Related Articles</div><div class="related-articles-container">' + relatedArticlesHtml + '</div>').show();

        } else {

            $('#related-articles').html('<div class="related-articles-label">No related articles found.</div>').show();

        }

 

        function formatSimpleDate(inputDate) {

            // Remove spaces from the date string

            var dateWithoutSpaces = inputDate.replace(/\s/g, '');

            // Assuming dateWithoutSpaces is in the format "XX XX XX"

            var formattedDate = dateWithoutSpaces.slice(0, 2) + '.' + dateWithoutSpaces.slice(2, 4) + '.' + dateWithoutSpaces.slice(4);

            return formattedDate;

        }

 

        // Apply the fade-out effect to both #list and #list-list elements

$('#list, #list-list').addClass('fade-out');

 

 

    }