MediaWiki:Common.js: Difference between revisions

From softwear.directory
Jump to navigation Jump to search
No edit summary
Tag: Manual revert
directory>Admin
No edit summary
Line 1: Line 1:
$(document).ready(function () {
$(document).ready(function() {
var areFiltersActive = false;
    // Global variables
     var filteredCards = $('.filtered-list-item');
     var cards = $('.card');
     var showArticleWrapper = $('#show-article-wrapper');
     var showArticleWrapper = $('#show-article-wrapper');
     var list = $('#list');
     var areFiltersActive = false;
     var listList = $('#list-list');
 
    var filteredListItems = $('#list .filtered-list-item, #list-block-1 .filtered-list-item, #list-block-2 .filtered-list-item, #list-block-3 .filtered-list-item');
    // Make header-box in Home clickable
     var listLists = [$('#list'), $('#list-block-1'), $('#list-block-2'), $('#list-block-3'), $('#list-list'), $('#list-list-1'), $('#list-list-2'), $('#list-list-3')]; // Store jQuery objects in an array
    $('.head-box').click(function() {
var originalWidths = listLists.map(function(list) {
        window.location.href = '/Main_Page'; // Redirects to the home page
    return list.width();
    });
});
 
     // Utility Functions
    function sortChronologically() {
        var cards = $('.list-container .card').get();
 
        cards.sort(function(a, b) {
            var numberA = parseInt($(a).find('.entry-number').text().replace(/\[|\]/g, ''), 10);
            var numberB = parseInt($(b).find('.entry-number').text().replace(/\[|\]/g, ''), 10);
            return numberB - numberA; // Descending order
        });
 
        $.each(cards, function(index, item) {
            $('.list-container').append(item);
        });
    }
 
    function randomizeCards(selector) {
        var cards = $(selector).get();
 
        var i = cards.length, j, temp;
        while (--i > 0) {
            j = Math.floor(Math.random() * (i + 1));
            temp = cards[i];
            cards[i] = cards[j];
            cards[j] = temp;
        }
 
        $.each(cards, function(index, item) {
            $(selector).parent().append(item);
        });
    }
 
    function sortAlphabetically(selector) {
        var cards = $(selector).get();
 
        cards.sort(function(a, b) {
            var titleA = $(a).find('.title').text().toUpperCase();
            var titleB = $(b).find('.title').text().toUpperCase();
            return (titleA < titleB) ? -1 : (titleA > titleB) ? 1 : 0;
        });
 
        $.each(cards, function(index, item) {
            $(selector).parent().append(item);
        });
    }
 
    function updateViews() {
        // Handle cards in the list view
        $('.home-chronicle-list div.list-container div.card:not(.event)').each(function() {
            if (!$(this).closest('.home-chronicle-block').length) {
                var title = $(this).find('.title').detach();
                var images = $(this).find('.images').detach();
   
                // Remove existing .title-images if it exists
                $(this).find('.title-images').remove();
   
                var titleImagesContainer = $('<div class="title-images"></div>').append(images, title);
                $(this).find('.people').after(titleImagesContainer);
            }
        });
   
        // Handle cards in the block view
        $('.home-chronicle-block div.list-container div.card:not(.event)').each(function() {
            // Remove .title-images container if it exists, re-attach .title and .images to their original places
            var titleImagesContainer = $(this).find('.title-images');
            if (titleImagesContainer.length) {
                var title = titleImagesContainer.find('.title').detach();
                var images = titleImagesContainer.find('.images').detach();
                titleImagesContainer.remove();
      
                $(this).find('.people').after(title);
                $(this).find('.type').after(images);
            } else {
                // If .title-images doesn't exist, ensure .images is placed correctly
                var images = $(this).find('.images').detach();
                $(this).find('.type').after(images);
            }
        });
   
        // Additional functionality for checking consecutive .card.event
        $('.home-chronicle-block div.list-container .card.event, .home-chronicle-list div.list-container .card.event').each(function() {
            checkConsecutiveEvents($(this));
        });
    }
   
    function checkConsecutiveEvents(element) {
        if (element.next().hasClass('card') && element.next().hasClass('event')) {
            console.log("multiple consecutive card events");
            $('.home-chronicle-list div.list-container div.card.event').removeClass('alone-card-event');
        } else {
            console.log("alone card events");
            $('.home-chronicle-list div.list-container div.card.event').addClass('alone-card-event');
        }
    }
   
    function updateCardEventBorders() {
        // Reset previously set classes for both block and list views
        $('.home-chronicle-block div.list-container div.card.event, .home-chronicle-list div.list-container div.card.event').removeClass('first-in-series next-in-series');
   
        // Update borders for block view cards
        updateBordersForView('.home-chronicle-block div.list-container');
   
        // Update borders for list view cards
        updateBordersForView('.home-chronicle-list div.list-container');
    }
   
    function updateBordersForView(selector) {
        $(selector + ' div.card.event').each(function() {
            var $current = $(this);
   
            // Find the next visible .card.event element, skipping hidden ones
            var $nextVisibleEvent = $current.nextAll('.card.event').not(':hidden').first();
   
            // Check if there is a visible .card.event following the current one
            if ($nextVisibleEvent.length) {
                // Apply 'first-in-series' if the current card is not preceded by a visible .card.event
                if (!$current.prevAll('.card.event').not(':hidden').first().length) {
                    $current.addClass('first-in-series');
                }
   
                // The next visible card event gets 'next-in-series'
                $nextVisibleEvent.addClass('next-in-series');
            }
        });
    }   
 
    function processEventCards() {
        $('.card.event').each(function() {
            var existingContainer = $(this).find('.container-people-date');
   
            // If the container doesn't exist, create and append it
            if (existingContainer.length === 0) {
                existingContainer = $('<div class="container-people-date"></div>');
                $(this).append(existingContainer); // Temporarily append to ensure it's in the DOM
            }
   
            // Ensure the .people and .date elements are inside the container
            var people = $(this).find('.people').detach();
            var date = $(this).find('.date').detach();
            existingContainer.append(people).append(date);
      
      
            // Decide where to place the container
            if ($(this).closest('.home-chronicle-block').length) {
                // Check if it's already correctly placed, if not, move it
                if (!existingContainer.is($(this).find('.title').next())) {
                    $(this).find('.title').after(existingContainer);
                }
            } else if ($(this).closest('.home-chronicle-list').length) {
                // Check if it's already correctly placed, if not, move it
                if (!existingContainer.is($(this).find('.title').prev())) {
                    $(this).find('.title').before(existingContainer);
                }
            }
        });
    }
    if ($('#home').length > 0) {
        console.log("The #home element exists on this page.");
        // This code will only run only on the homepage.
        // Show the block view container once everything is set up
        $('.home-block-view').show();
        $('.home-chronicle-block-button, .home-block-view-button').addClass('active-view-button');
        // Initialization and Default Settings
        // Initially hide list view sorting buttons and set the default sorted view for block
        $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').hide();
        sortChronologically(); // Sort the block view chronologically by default
       
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
        $('.home-list-view-button').click(function() {
            console.log("List view button clicked.");
            $(".home-list-sorting-buttons").css('display', 'flex');
            // Switching view classes
            $('.home-block-view').removeClass('home-block-view').addClass('home-list-view');
            // Additional class switch
            $('.home-chronicle-block').removeClass('home-chronicle-block').addClass('home-chronicle-list');
            // Toggling visibility of buttons
            $('.home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button').hide();
            $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').show();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
       
            // Remove active class from block view button and add to list view button
            $('.home-block-view-button').removeClass('active-view-button');
            $('.home-list-view-button').addClass('active-view-button');
       
            // Conditional checks for transferring the active class from block to list buttons
            if ($('.home-chronicle-block-button').hasClass('active-view-button')) {
                $('.home-chronicle-block-button').removeClass('active-view-button');
                $('.home-chronicle-list-button').addClass('active-view-button');
            } else if ($('.home-random-block-button').hasClass('active-view-button')) {
                $('.home-random-block-button').removeClass('active-view-button');
                $('.home-random-list-button').addClass('active-view-button');
            } else if ($('.home-alphabetical-block-button').hasClass('active-view-button')) {
                $('.home-alphabetical-block-button').removeClass('active-view-button');
                $('.home-alphabetical-list-button').addClass('active-view-button');
            }
        });
       
        $('.home-block-view-button').click(function() {
            console.log("Block view button clicked.");
            $('.home-list-sorting-buttons').hide(); // Hide list sorting buttons
            $('.home-list-view').removeClass('home-list-view').addClass('home-block-view');
            $('.home-chronicle-list').removeClass('home-chronicle-list').addClass('home-chronicle-block');
            $('.home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button').show();
            $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').hide();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-list-view-button').removeClass('active-view-button');
            $('.home-block-view-button').addClass('active-view-button');


    // Check if the specific element exists on the page
            // Conditional checks for transferring the active class from block to list buttons
    if ($('#show-article-wrapper-entry').length > 0 || $('#show-article-wrapper').length > 0) {
            if ($('.home-chronicle-list-button').hasClass('active-view-button')) {
         var images = []; // Initialize an empty array to store the images
                $('.home-chronicle-list-button').removeClass('active-view-button');
                $('.home-chronicle-block-button').addClass('active-view-button');
            } else if ($('.home-random-list-button').hasClass('active-view-button')) {
                $('.home-random-list-button').removeClass('active-view-button');
                $('.home-random-block-button').addClass('active-view-button');
            } else if ($('.home-alphabetical-list-button').hasClass('active-view-button')) {
                $('.home-alphabetical-list-button').removeClass('active-view-button');
                $('.home-alphabetical-block-button').addClass('active-view-button');
            }
         });
       
        // BLOCK VIEW SORTING BUTTONS
        $('.home-chronicle-block-button').click(function() {
            sortChronologically();


        // Find all image containers within the article content and extract the necessary information
            updateLastVisibleCard();
        $('.article-images .image-container').each(function() {
            updateWidthBlockView();
             var img = $(this).find('img');
            processEventCards();
             var captionDiv = $(this).find('div[class^="caption-image"]');
             updateViews();
             var image = {
            updateCardEventBorders();
                src: img.attr('src'),
             $('.home-chronicle-block-button').addClass('active-view-button');
                alt: img.attr('alt'),
             $('.home-random-block-button').removeClass('active-view-button');
                caption: captionDiv.text(),
            $('.home-alphabetical-block-button').removeClass('active-view-button');
                captionClass: captionDiv.attr('class')
            };
            images.push(image); // Add the image object to the images array
         });
         });
       
        $('.home-random-block-button').click(function() {
            randomizeCards('.list-container .card');


         if (images.length > 0) {
            updateLastVisibleCard();
             setupImageToggle(images); // Call the setupImageToggle function with the images array
            updateWidthBlockView();
             updateImageLabel(1, images.length); // Set the label for the first image immediately
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-random-block-button').addClass('active-view-button');
            $('.home-chronicle-block-button').removeClass('active-view-button');
            $('.home-alphabetical-block-button').removeClass('active-view-button');
        });
 
        $('.home-alphabetical-block-button').click(function() {
            sortAlphabetically('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-alphabetical-block-button').addClass('active-view-button');
            $('.home-chronicle-block-button').removeClass('active-view-button');
            $('.home-random-block-button').removeClass('active-view-button');
        });
 
        // LIST VIEW SORTING BUTTONS
        $('.home-chronicle-list-button').click(function() {
            sortChronologically();
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-chronicle-list-button').addClass('active-view-button');
            $('.home-random-list-button').removeClass('active-view-button');
            $('.home-alphabetical-list-button').removeClass('active-view-button');
        });
 
        $('.home-random-list-button').click(function() {
            randomizeCards('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-random-list-button').addClass('active-view-button');
            $('.home-chronicle-list-button').removeClass('active-view-button');
            $('.home-alphabetical-list-button').removeClass('active-view-button');
        });
 
        $('.home-alphabetical-list-button').click(function() {
            sortAlphabetically('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-alphabetical-list-button').addClass('active-view-button');
            $('.home-chronicle-list-button').removeClass('active-view-button');
            $('.home-random-list-button').removeClass('active-view-button');
        });
    } else {
        console.log("NOT HOMEPAGE");
        $('.home-list-view').show();
        $('.chronicle-list-button, .list-view-button').addClass('active-view-button');
 
        // Initialization and Default Settings
        // Initially hide block view sorting buttons and set the default sorted view for list
        $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').hide();
        sortChronologically(); // Sort the block view chronologically by default
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
 
        $('.list-view-button').click(function() {
            console.log("List view button clicked.");
            $(".list-sorting-buttons").css('display', 'flex');
            $('.block-sorting-buttons').hide();
            // Switching view classes
            $('.home-block-view').removeClass('home-block-view').addClass('home-list-view');
            // Additional class switch
            $('.home-chronicle-block').removeClass('home-chronicle-block').addClass('home-chronicle-list');
            // Toggling visibility of buttons
            $('.chronicle-block-button, random-block-button, alphabetical-block-button').hide();
            $('.chronicle-list-button, .random-list-button, .alphabetical-list-button').show();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
          
            // Remove active class from block view button and add to list view button
            $('.block-view-button').removeClass('active-view-button');
            $('.list-view-button').addClass('active-view-button');
       
            // Conditional checks for transferring the active class from block to list buttons
            if ($('.chronicle-block-button').hasClass('active-view-button')) {
                $('.chronicle-block-button').removeClass('active-view-button');
                $('.chronicle-list-button').addClass('active-view-button');
            } else if ($('.random-block-button').hasClass('active-view-button')) {
                $('.random-block-button').removeClass('active-view-button');
                $('.random-list-button').addClass('active-view-button');
            } else if ($('.alphabetical-block-button').hasClass('active-view-button')) {
                $('.alphabetical-block-button').removeClass('active-view-button');
                $('.alphabetical-list-button').addClass('active-view-button');
            }
        });
 
        $('.block-view-button').click(function() {
             console.log("Block view button clicked.");
            $('.list-sorting-buttons').hide(); // Hide list sorting buttons
            $(".block-sorting-buttons").css('display', 'flex');
            $('.home-list-view').removeClass('home-list-view').addClass('home-block-view');
            $('.home-chronicle-list').removeClass('home-chronicle-list').addClass('home-chronicle-block');
            $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').show();
            $('.chronicle-list-button, .random-list-button, .alphabetical-list-button').hide();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.list-view-button').removeClass('active-view-button');
            $('.block-view-button').addClass('active-view-button');
 
            // Conditional checks for transferring the active class from block to list buttons
            if ($('.chronicle-list-button').hasClass('active-view-button')) {
                $('.chronicle-list-button').removeClass('active-view-button');
                $('.chronicle-block-button').addClass('active-view-button');
            } else if ($('.random-list-button').hasClass('active-view-button')) {
                $('.random-list-button').removeClass('active-view-button');
                $('.random-block-button').addClass('active-view-button');
            } else if ($('.alphabetical-list-button').hasClass('active-view-button')) {
                $('.alphabetical-list-button').removeClass('active-view-button');
                $('.alphabetical-block-button').addClass('active-view-button');
            }
        });
 
        // BLOCK VIEW SORTING BUTTONS
        $('.chronicle-block-button').click(function() {
            sortChronologically();
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.chronicle-block-button').addClass('active-view-button');
            $('.random-block-button').removeClass('active-view-button');
            $('.alphabetical-block-button').removeClass('active-view-button');
        });
       
        $('.random-block-button').click(function() {
            randomizeCards('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.random-block-button').addClass('active-view-button');
            $('.chronicle-block-button').removeClass('active-view-button');
            $('.alphabetical-block-button').removeClass('active-view-button');
        });
 
        $('.alphabetical-block-button').click(function() {
            sortAlphabetically('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.alphabetical-block-button').addClass('active-view-button');
            $('.chronicle-block-button').removeClass('active-view-button');
            $('.random-block-button').removeClass('active-view-button');
        });
 
        // LIST VIEW SORTING BUTTONS
        $('.chronicle-list-button').click(function() {
            sortChronologically();
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.chronicle-list-button').addClass('active-view-button');
            $('.random-list-button').removeClass('active-view-button');
            $('.alphabetical-list-button').removeClass('active-view-button');
        });
 
        $('.random-list-button').click(function() {
            randomizeCards('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.random-list-button').addClass('active-view-button');
            $('.chronicle-list-button').removeClass('active-view-button');
            $('.alphabetical-list-button').removeClass('active-view-button');
        });
 
        $('.alphabetical-list-button').click(function() {
            sortAlphabetically('.list-container .card');
 
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.alphabetical-list-button').addClass('active-view-button');
            $('.chronicle-list-button').removeClass('active-view-button');
            $('.random-list-button').removeClass('active-view-button');
        });
    }
   
    // FILTERS  ---------------------  SECTION //
    // General Filters Toggle Button
    $('.general-toggle').click(function() {
        var filtersDiv = $('#filters');
        filtersDiv.toggleClass('is-visible');
       
        if (filtersDiv.hasClass('is-visible')) {
            filtersDiv.css('display', 'grid').hide().slideDown(100);
            $(this).text('[Hide]');
        } else {
            filtersDiv.slideUp(100, function() {
                $(this).css('display', 'none');
                // The filter reset code has been removed to keep the filters active
            });
             $(this).text('[Show]');
        }
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
    });
   
    // Specific Toggle for Filter Sections like TYPE, ENTITY, etc.
    $('.open-filter').click(function(event) {
        event.stopPropagation();
   
        var filterType = $(this).closest('.filter').data('filter');
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card'; // Determine which card type is present
   
        console.log('Filter type:', filterType, 'Card Selector:', cardSelector);
   
        $('#values-' + filterType).toggle();
   
        if ($('#values-' + filterType).is(':visible')) {
            $(this).addClass('active-filter');
        } else {
            $(this).removeClass('active-filter');
        }
   
        // Pass the determined card selector to the function
        updateLastVisibleCard(cardSelector);
        updateWidthBlockView(cardSelector);
        processEventCards(cardSelector);
        updateViews(cardSelector);
        updateCardEventBorders(cardSelector);
   
        console.log('Updated views and borders after filter toggle');
    });
   
    function filterCards() {
        var displayCountsHtml = '';
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card'; // Determine which card type is present
   
        $('.filter .values a[title]').each(function() {
            var anchor = $(this);
            var filterValue = anchor.attr('title').toLowerCase();
            var count = 0;
   
            if (anchor.find('button').hasClass('active')) {
                $(cardSelector).each(function() {
                    var card = $(this);
                    $('.filter').each(function() {
                        var filterType = $(this).data('filter');
                        var cardValue = card.find('.' + filterType).text().toLowerCase();
                        if (cardValue.indexOf(filterValue) !== -1) {
                            count++;
                        }
                    });
                });
   
                displayCountsHtml += '<span>[' + count + '] ' + filterValue + '</span> ';
            }
        });
   
        if (displayCountsHtml) {
            $('.count-filtered-cards').html(displayCountsHtml).show();
        } else {
            $('.count-filtered-cards').hide();
         }
         }
   
        // Apply filtering and pass the determined card selector to the function
        applyFiltering(cardSelector);
   
        updateLastVisibleCard(cardSelector);
        updateWidthBlockView(cardSelector);
        processEventCards(cardSelector);
        updateViews(cardSelector);
        updateCardEventBorders(cardSelector);
   
        console.log('Filtering process complete, updated views and borders');
    }     
   
    function applyFiltering() {
        // Determine which card selector to use based on the elements present in the DOM
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card';
   
        // Apply the logic to the determined card type
        $(cardSelector).show().each(function() {
            var card = $(this);
            var hideCard = false;
   
            $('.filter').each(function() {
                if (hideCard) return;
   
                var filterType = $(this).data('filter');
                var activeFilters = $(this).find('.values a[title] button.active').map(function() {
                    return $(this).parent('a').attr('title').toLowerCase();
                }).get();
   
                if (activeFilters.length > 0) {
                    var cardValue = card.find('.' + filterType).text().toLowerCase();
                    var matchesFilter = activeFilters.some(function(filterValue) {
                        return cardValue.indexOf(filterValue) !== -1;
                    });
                    if (!matchesFilter) hideCard = true;
                }
            });
   
            if (hideCard) card.hide();
        });
    }   
   
    function updateLastVisibleCard() {
        // Target only the list view container for updating the last visible card
        $('.home-chronicle-list div.list-container div.card').removeClass('last-visible');
   
        // Find the last visible card within the list view and add the class
        var lastVisibleCard = $('.home-chronicle-list div.list-container div.card:visible:last');
        lastVisibleCard.addClass('last-visible');
    }
    function updateWidthBlockView() {
        // Target only the block view container for updating the with of card
        $('.home-chronicle-block div.list-container').css('width', '100%');
        $('.home-chronicle-block div.list-container div.card').css('width', 'calc(20% - 0px)');
        $('.home-chronicle-block div.list-container div.card:nth-child(5n + 1)').css('width', 'calc(20% + 4px)');
     }
     }
    // Reset function
    $('.reset-filter').click(function() {
        // Remove 'active' class from all filter buttons
        $('#filters .values button').removeClass('active');
        $('.open-filter').removeClass('active-filter');
   
        // Show all cards that might have been hidden by the filters
        $('.card').show();
      
      
        // Reset and hide the filter counts
        $('.count-filtered-cards').text('').hide();
   
        filterCards();


        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
    });
   
$('#filters .values button').click(function() {
        console.log("Filter is clicked!!!");
$(this).toggleClass('active');
filterCards(); // Re-apply the filters based on the updated active buttons
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
});
    $(window).on('scroll', function() {
        var filtersDiv = $('#filters');
        if (filtersDiv.hasClass('is-visible')) {
            filtersDiv.removeClass('is-visible').slideUp(100, function() {
                $(this).css('display', 'none');
                // The filter reset code has been removed to keep the filters active
            });
            $('.general-toggle').text('[Show]'); // Update the toggle button text
        }
    });
   
    // MODAL ARTICLE  ---------------------  SECTION //
     // Format paragraphs
     // Format paragraphs
     function formatParagraphs(text) {
     function formatParagraphs(text) {
    var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
    var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
    return paragraphs.map(function (p) { return '<p>' + p.trim() + '</p>'; }).join('');
    return paragraphs.map(function (p) { return '<p>' + p.trim() + '</p>'; }).join('');
}
    // Format community card, when in the Community Entries page
if ($('.community-card').length) {
    formatCommunityCardDescriptions();
}
}


function formatCommunityCardDescriptions() {
    var images = []; // Initialize an empty array to store the images
    console.log("Formatting community card descriptions");
    // Find all image containers within the article content and extract the necessary information
    $('.community-card').each(function() {
    $('.article-images .image-container').each(function() {
        console.log("Processing a community card");
        var img = $(this).find('img');
        var captionDiv = $(this).find('div[class^="caption-image"]');
        // Format paragraphs in community-description
        var image = {
        var descriptionContainer = $(this).find('.community-description');
            src: img.attr('src'),
        var rawDescription = descriptionContainer.text();
            alt: img.attr('alt'),
        var formattedDescription = formatParagraphs(rawDescription);
            caption: captionDiv.text(),
        descriptionContainer.html(formattedDescription);
            captionClass: captionDiv.attr('class')
        };
        // Remove empty elements in the entire card
        images.push(image); // Add the image object to the images array
        $(this).find('*').each(function() {
    });
            if ($(this).is(':empty') || $(this).html().trim() === '<br>') {
                $(this).remove();
            }
        });
        console.log("Formatted Community Card HTML:", $(this).html());
    });
}


var toggleButton = $('.toggle-filters');
    if (images.length > 0) {
    var filtersDiv = $('.filtered-filters');
        setupImageToggle(images); // Call the setupImageToggle function with the images array
        updateImageLabel(1, images.length); // Set the label for the first image immediately
    }


     // Open and Close button for filters
     function setupImageToggle(images) {
     if (toggleButton.length && filtersDiv.length) {
        var currentIndex = 0;
        toggleButton.on('click', function(event) {
        var enableNavigation = images.length > 1; // Enable navigation only if there is more than one image
             event.preventDefault();
      
             console.log("Button clicked. Current display style:", filtersDiv.css('display'));
        function showImage(index) {
            currentIndex = index;
            var image = images[currentIndex];
            updateImageLabel(currentIndex + 1, images.length);
            $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, images.length, enableNavigation));
        }
   
        // Attach click handlers only if navigation is enabled
        if (enableNavigation) {
            $('#article-content').on('click', '.next-arrow', function() {
                showImage((currentIndex + 1) % images.length);
             });
   
            $('#article-content').on('click', '.prev-arrow', function() {
                showImage((currentIndex - 1 + images.length) % images.length);
             });
        }
   
        // Display the first image
        showImage(currentIndex);
    }     
         
   
    function getImageHtml(image, currentIndex, totalImages, enableNavigation) {
        var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
   
        // Render navigation arrows based on the enableNavigation flag
        var navigationHtml = enableNavigation ?
            '<div class="prev-arrow"><</div><div class="next-arrow">></div>' : '';
   
        return '<div class="image-navigation">' +
                '<p class="article-label-image">' + imageLabel + '</p>' +
                  navigationHtml +
                  '<div class="image-container">' +
                      '<img src="' + image.src + '" alt="' + image.alt + '">' +
                      '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
                  '</div>' +
              '</div>';
    }
   
    function updateImageLabel(currentIndex, totalImages) {
        var imageLabel = currentIndex + '/' + totalImages + ' IMAGES';
        $('#article-content .article-label-image').text(imageLabel);
    }
   
$('.caption-image1').each(function() {
        // Split the caption at each <br> tag and wrap each line in a span
        var htmlContent = $(this).html();
        var lines = htmlContent.split('<br>');
        var wrappedLines = lines.map(function(line) {
            return '<span class="caption-line">' + line + '</span>';
        });
        var newHtml = wrappedLines.join('<br>');
        $(this).html(newHtml);
    });
   
    function setShowArticleRotationEffect() {
const offset = 20;
const showArticle = document.querySelector('#show-article');
    const h = showArticle.clientHeight;
    const theta = -Math.atan(offset/h);
const a = Math.cos(theta);
const b = Math.sin(theta);
const c = -Math.sin(theta);
const d = Math.cos(theta);
const showArticleBefore = document.querySelector('#show-article-before');
const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
showArticleBefore.style.transform = transformValue;
}


            if (filtersDiv.css('display') === 'none' || filtersDiv.css('display') === '') {
    function openEvent(element, event) {
                filtersDiv.attr('style', 'display: flex !important');
        event.stopPropagation();
                toggleButton.text('[Close]');
        event.preventDefault();
                console.log("Filters shown.");
   
                //$('.view-container-buttons').hide();
        var url = $(element).find('.link a').attr('href');
                //$('div.filtered-view.filtered-list').css('padding-top', '38px');
        if (url) {
            } else {
            window.open(url, '_blank').focus();
                filtersDiv.attr('style', 'display: none !important');
         }
                toggleButton.text('[Open]');
     }
                console.log("Filters hidden.");
                //$('.view-container-buttons').show();
                //$('div.filtered-view.filtered-list').css('padding-top', '0');
            }
         });
     }  


// Function to open the modal and adjust the list
    function openModal(cardElement, event) {
function openModal(cardElement, event) {
        event.stopPropagation(); // Prevent the event from bubbling up
    event.stopPropagation(); // Prevent the event from bubbling up
        console.log("openModal function called.");
    console.log('openModal called with:', cardElement);
    var isRelatedArticle = $(cardElement).hasClass('related-article');
    var isRelatedArticle = $(cardElement).hasClass('related-article');
    console.log('Is this a related article?:', isRelatedArticle);
    showArticleWrapper.css('display', 'block');
    showArticleWrapper.css('display', 'block');


    // Set new width using .each() to iterate over the jQuery objects
$.each(listLists, function(index, list) {
    list.css('cssText', 'width: 60% !important;');
});
        // Adjust width of filtered-list-items in #list
    filteredListItems.css('width', 'calc(33.333% - 0px)');
    // Clear existing content in modal
    // Clear existing content in modal
    $('#article-title').empty();
    $('#article-title').empty();
Line 141: Line 814:
        var title = $(cardElement).find('.related-article-title').text();
        var title = $(cardElement).find('.related-article-title').text();
        var typeHtml = $(cardElement).find('.related-article-type').html();
        var typeHtml = $(cardElement).find('.related-article-type').html();
             var externalLinkURL = $(cardElement).find('.related-article-link a').attr('href');
             var externalPdfURL = $(cardElement).find('.related-article-pdf a').attr('href');     
        var externalLinkURL = $(cardElement).find('.related-article-link a').attr('href');
        var entity = $(cardElement).find('.related-article-entity').text();
        var entity = $(cardElement).find('.related-article-entity').text();
        var discipline = $(cardElement).find('.related-article-discipline').text();
        var discipline = $(cardElement).find('.related-article-discipline').text();
Line 154: Line 828:
        var articleContentHtml = '<div class="article-title-link">';
        var articleContentHtml = '<div class="article-title-link">';
        articleContentHtml += '<p class="article-title">' + title + '</p>';
        articleContentHtml += '<p class="article-title">' + title + '</p>';
        if (externalLinkURL) {
            // Create a div that will wrap the links
            articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon"><img src="/images/6/6d/Link-arrow-new.png" alt="Link"></a>';
            articleContentHtml += '<div class="link-pdf">';
        }
 
        articleContentHtml += '</div>'; // Close the new div
            if (externalPdfURL) {
                articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF]</a>';
            }
            if (externalLinkURL) {
                articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB]</a>';
            }
            // Close the .link-pdf div
            articleContentHtml += '</div>';
        articleContentHtml += '</div>'; // Close the container div
        // Append type, entity, discipline, and subject details
        // Append type, entity, discipline, and subject details
Line 177: Line 859:


             // Add images if any
             // Add images if any
        if (cardImages.length > 0) {
            if (cardImages.length > 0) {
            var initialImage = cardImages[0]; // Use the first image initially
                var initialImage = cardImages[0]; // Use the first image initially
            articleContentHtml +=
                var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
                '<div class="article-images">' +
                articleContentHtml +=
                    getImageHtml(initialImage, 0, cardImages.length) +
                    '<div class="article-images">' +
                '</div>';
                        getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
        }
                    '</div>';
 
            }
// Add non-image content (description, reflection, etc.)     
// Add non-image content (description, reflection, etc.)     
articleContentHtml +=  
articleContentHtml +=  
Line 224: Line 906:
        var title = $(cardElement).find('.title').text();
        var title = $(cardElement).find('.title').text();
        var peopleHtml = $(cardElement).find('.people').html();
        var peopleHtml = $(cardElement).find('.people').html();
        var typeHtml = $(cardElement).find('.type').html();      
        var typeHtml = $(cardElement).find('.type').html();  
            var externalPdfURL = $(cardElement).find('.pdf a').attr('href');     
        var externalLinkURL = $(cardElement).find('.link a').attr('href');
        var externalLinkURL = $(cardElement).find('.link a').attr('href');
        var entity = $(cardElement).find('.entity').text();
        var entity = $(cardElement).find('.entity').text();
Line 232: Line 915:
        var reflection = $(cardElement).find('.reflection').html();
        var reflection = $(cardElement).find('.reflection').html();
        var quote = $(cardElement).find('.quote').text();
        var quote = $(cardElement).find('.quote').text();
            var externalReferenceHtml = $(cardElement).find('.external-reference').html();
        var modificationDate = $(cardElement).find('.modification-date').text();
        var modificationDate = $(cardElement).find('.modification-date').text();
        var relatedArticlesHtml = $(cardElement).find('.related-articles').html();
        var relatedArticlesHtml = $(cardElement).find('.related-articles').html();
        $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
        $('#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>';
            var articleContentHtml = '<div class="article-title-link">';
        if (externalLinkURL) {
            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>';
 
        }
            // Create a div that will wrap the links
        articleContentHtml += '</div>'; // Close the new div
            articleContentHtml += '<div class="link-pdf">';
            if (externalPdfURL) {
                articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF]</a>';
            }
            if (externalLinkURL) {
                articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB]</a>';
            }
            // Close the .link-pdf div
            articleContentHtml += '</div>';
            articleContentHtml += '</div>'; // Close the new div
        // Append type, entity, discipline, and subject details
        // Append type, entity, discipline, and subject details
Line 260: Line 953:
        '</div>';
        '</div>';
        // Add images if any
        // Add images if any
        if (cardImages.length > 0) {
            if (cardImages.length > 0) {
            var initialImage = cardImages[0]; // Use the first image initially
                var initialImage = cardImages[0]; // Use the first image initially
            articleContentHtml +=
                var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
                '<div class="article-images">' +
                articleContentHtml +=
                    getImageHtml(initialImage, 0, cardImages.length) +
                    '<div class="article-images">' +
                '</div>';
                        getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
        }    
                    '</div>';
            }
        // Add non-image content (description, reflection, etc.)     
        // Add non-image content (description, reflection, etc.)     
articleContentHtml +=  
articleContentHtml +=  
Line 273: Line 967:
    (reflection ? '<p class="article-label-reflection">Reflection</p>' +
    (reflection ? '<p class="article-label-reflection">Reflection</p>' +
    '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
    '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
            (externalReferenceHtml ? '<p class="article-label-external-reference">References</p>' +
    '<p class="article-external-reference">' + externalReferenceHtml + '</p>' : '') +
    (quote ? '<p class="article-label-quote">Quote</p>' +
    (quote ? '<p class="article-label-quote">Quote</p>' +
    '<p class="article-quote">' + quote + '</p>' : '') +
    '<p class="article-quote">' + quote + '</p>' : '') +
Line 285: Line 981:
        }  
        }  
    }
    }
 
        // Check which view is active and set the width accordingly
    if ($('.home-chronicle-list').is(':visible')) {
            $('.home-list-view').each(function() {
                var currentWidth = $(this).width();  // Get the current width
                $(this).data('originalWidth', currentWidth); // Store the original width
                $(this).css('width', 'calc(60% - 2px)');
            });   
           
            // Modify the .type elements within .home-chronicle-list
            $('.home-chronicle-list .type').each(function() {
                var currentLeft = $(this).css('left');  // Get the current left value
                $(this).data('originalLeft', currentLeft); // Store the original left value
                $(this).css('left', '85%');
            });
    } else if ($('.home-chronicle-block').is(':visible')) {
            $('.home-chronicle-block div.list-container').each(function() {
                var currentWidth = $(this).width();  // Get the current width
                $(this).css('width', 'calc(60% - 0px)');  // Set the new width as 30% of the current width
            });
            $('.home-chronicle-block div.list-container div.card').each(function() {
                var currentWidth = $(this).width();  // Get the current width
                $(this).css('width', 'calc(33.333% - 0px)');  // Set the new width as 30% of the current width
            });           
        }
 
    // Apply the fade-out effect to both #list and #list-list elements
    // Apply the fade-out effect to both #list and #list-list elements
    $('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').addClass('fade-out');
    $('.list-container').addClass('fade-out');
    // End of openModal
 
}
    }


// closeModal function
    // closeModal function
function closeModal() {
function closeModal() {
        if ($('.home-chronicle-list').is(':visible')) {
            $('.home-list-view').css('width', '100%');
            $('.home-chronicle-list div.list-container div.card div.type').css('left', '90%');
    } else if ($('.home-chronicle-block').is(':visible')) {
            updateWidthBlockView();
        }
    showArticleWrapper.hide();
    showArticleWrapper.hide();
    // Revert width of filtered-list-items in listLists
    $.each(listLists, function(index, list) {
    list.width(originalWidths[index]);
});
        // Revert width of filtered-list-items in #list
    filteredListItems.css('width', 'calc(20% - 0px)');
}
}


    // Button to open [Nr.s]
     $('.card').on('click', function(event) {
     $('.button-open-nrs').click(function() {
         // Check if the click event is originating from a link within .people or .type, or any other specific area
         var queryDiv = $('.entry-nrs-query');
        if ($(event.target).closest('.people a, .type a').length) {
         if (queryDiv.css('display') === 'none') {
            // The click is inside a link; let the default behavior proceed without opening the modal
             queryDiv.css('display', 'flex');  
            return;
        }
   
        // Prevent further event handling if the card has the 'event' class
         if ($(this).hasClass('event')) {
             event.stopImmediatePropagation();
            openEvent(this, event);
            $('.list-container').removeClass('fade-out');
            closeModal();
         } else {
         } else {
             queryDiv.css('display', 'none');  
             // Handle cards without the 'event' class
            openModal(this, event);
            setShowArticleRotationEffect();
         }
         }
     });
     });
function setShowArticleRotationEffect() {
const offset = 20;
const showArticle = document.querySelector('#show-article');
    const h = showArticle.clientHeight;
    const theta = -Math.atan(offset/h);
const a = Math.cos(theta);
const b = Math.sin(theta);
const c = -Math.sin(theta);
const d = Math.cos(theta);
const showArticleBefore = document.querySelector('#show-article-before');
const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
showArticleBefore.style.transform = transformValue;
}


     // Delegate the mousedown event for both block view and list view pages
     $('#show-article-wrapper').on('click', '.related-article', function(event) {
$('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').on('mousedown', '.card, .list-card', function(event) {
        openModal(this, event); // Call openModal when a related-article is clicked
    if ($(event.target).closest('.people a, .type a').length) {
        setShowArticleRotationEffect();
        return; // Clicked on a link inside '.people' or '.type', do nothing
    });
    }
    openModal(this, event); // Pass the event object to openModal
    setShowArticleRotationEffect();
});
$('#show-article-wrapper').on('mousedown', '.related-article', function(event) {
    openModal(this, event); // Call openModal when a related-article is clicked
    setShowArticleRotationEffect();
});


    function setupImageToggle(images) {
    var currentIndex = 0;
    function toggleImage() {
        currentIndex = (currentIndex + 1) % images.length;
        var image = images[currentIndex];
        updateImageLabel(currentIndex + 1, images.length); // Update the label on toggle
        $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, images.length));
    }
    $('#article-content').on('click', '.image-container img', function() {
        toggleImage();
    });
}
   
    function getImageHtml(image, currentIndex, totalImages) {
    var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
    return '<p class="article-label-image">' + imageLabel + '</p>' +
        '<div class="image-container">' +
            '<img src="' + image.src + '" alt="' + image.alt + '">' +
            '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
        '</div>';
}
function updateImageLabel(currentIndex, totalImages) {
    var imageLabel = currentIndex + '/' + totalImages + ' IMAGES';
    $('#article-content .article-label-image').text(imageLabel); // Update or set the label text
}
   
     // Close modal with Close button
     // Close modal with Close button
$('#close-button').on('click', function () {
$('#close-button').on('click', function () {
    $('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').removeClass('fade-out');
    $('.list-container').removeClass('fade-out');
    closeModal();
    closeModal();
});
});
Line 383: Line 1,061:
         if (!areFiltersActive) {
         if (!areFiltersActive) {
        if (isOutsideWrapper && !isOnCard) {
        if (isOutsideWrapper && !isOnCard) {
            console.log('Closing modal from outside wrapper and not on card');
            $('.list-container').removeClass('fade-out');
            $('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').removeClass('fade-out');
        showArticleWrapper.css('display', 'none');
        showArticleWrapper.css('display', 'none');
            closeModal();  // Use closeModal() for cleanup
            closeModal();  // Use closeModal() for cleanup
Line 392: Line 1,069:


     // Hover effect for scrolling
     // Hover effect for scrolling
     showArticleWrapper.hover(function () {
     $('#show-article-wrapper').hover(function () {
         // On hover, enable scrolling on #show-article-wrapper
         // On hover, enable scrolling on #show-article-wrapper
         $(this).css('overflow-y', 'auto');
         $(this).css('overflow-y', 'auto');
        $(this).css('overflow-x', 'hidden');
     }, function () {
     }, function () {
         // On hover out, disable scrolling on #show-article-wrapper
         // On hover out, disable scrolling on #show-article-wrapper
         $(this).css('overflow-y', 'hidden');
         $(this).css('overflow-y', 'hidden');
    });
         $(this).css('overflow-x', 'hidden');
   
    // ALL VIEWS IN ONE PAGE
// Handle List View Button
$(".list-view-button").click(function() {
    // Show list view and list sorting buttons, hide block view and block sorting buttons
    $(".list-view").show();
    $(".block-view").hide();
    $(".list-sorting-buttons").show();
    $(".block-sorting-buttons").hide();
    $(".list-view > div").hide();
    $(".chronicle-list").show();
});
// Handle Block View Button
$(".block-view-button").click(function() {
    // Show block view and block sorting buttons, hide list view and list sorting buttons
    $(".block-view").show();
    $(".list-view").hide();
    $(".block-sorting-buttons").css('display', 'flex');
    $(".list-sorting-buttons").hide();
    $(".block-view > div").hide();
    $(".chronicle-block").show();
});
// Handle List Sorting Buttons
$(".chronicle-list-button").click(function() {
    // Show only the chronicle list
    $(".list-view > div").hide();
    $(".chronicle-list").show();
});
$(".random-list-button").click(function() {
    // Show only the random list
    $(".list-view > div").hide();
    $(".random-list").show();
});
$(".alphabetical-list-button").click(function() {
    // Show only the alphabetical list
    $(".list-view > div").hide();
    $(".alphabetical-list").show();
});
// Similar event handlers can be added for block view buttons if needed
// Handle Block Sorting Buttons
$(".chronicle-block-button").click(function() {
    // Show only the chronicle block
    $(".block-view > div").hide();
    $(".chronicle-block").show();
});
$(".random-block-button").click(function() {
    // Show only the random block
    $(".block-view > div").hide();
    $(".random-block").show();
});
$(".alphabetical-block-button").click(function() {
    // Show only the alphabetical block
    $(".block-view > div").hide();
    $(".alphabetical-block").show();
});
// NEW TEST
// Handle Block View Button in home
    $(".home-block-view-button").click(function() {
        $(".home-block-view").show();
         $(".home-list-view").hide();
        $(".home-block-sorting-buttons").css('display', 'flex');
        $(".home-list-sorting-buttons").hide();
        $(".home-block-view > div").hide();
        $(".home-chronicle-block").show();
    });
    // Handle List View Button in home
    $(".home-list-view-button").click(function() {
        $(".home-list-view").show();
        $(".home-block-view").hide();
        $(".home-list-sorting-buttons").css('display', 'flex');
        $(".home-block-sorting-buttons").hide();
        $(".home-list-view > div").hide();
        $(".home-chronicle-list").show();
    });
// Handle List Sorting Buttons in home for the chronicle list
    $(".home-chronicle-list-button").click(function() {
        // Show only the chronicle list
        $(".home-list-view > div").hide();
        $(".home-chronicle-list").show();
     });
     });


     // Similarly, you would update the handlers for the random list button and alphabetical list button:
     // Format community card, when in the Community Entries page
    $(".home-random-list-button").click(function() {
if ($('.community-card').length) {
        // Show only the random list
    formatCommunityCardDescriptions();
        $(".home-list-view > div").hide();
}
        $(".home-random-list").show();
    });
 
    $(".home-alphabetical-list-button").click(function() {
        // Show only the alphabetical list
        $(".home-list-view > div").hide();
        $(".home-alphabetical-list").show();
    });


    function formatCommunityCardDescriptions() {
    $('.community-card').each(function() {
        // Format paragraphs in community-description
        var descriptionContainer = $(this).find('.community-description');
        var rawDescription = descriptionContainer.text();
        var formattedDescription = formatParagraphs(rawDescription);
        descriptionContainer.html(formattedDescription);
// Handle Block Sorting Buttons
        // Remove empty elements in the entire card
$(".home-chronicle-block-button").click(function() {
        $(this).find('*').each(function() {
    // Show only the chronicle block
            if ($(this).is(':empty') || $(this).html().trim() === '<br>') {
    $(".home-block-view > div").hide();
                $(this).remove();
    $(".home-chronicle-block").show();
            }
});
        });
    });
$(".home-random-block-button").click(function() {
}
    // Show only the random block
   
    $(".home-block-view > div").hide();
    // SEARCH  ---------------------   SECTION //
    $(".home-random-block").show();
    // Check if div with class "mw-search-results-info" exists
});
$(".home-alphabetical-block-button").click(function() {
    // Show only the alphabetical block
    $(".home-block-view > div").hide();
    $(".home-alphabetical-block").show();
});
 
// Check if div with class "mw-search-results-info" exists
     if ($('.mw-search-results-info').length) {
     if ($('.mw-search-results-info').length) {
         // Select the child <p> element and check its content
         // Select the child <p> element and check its content
Line 576: Line 1,154:
     // Target the button based on its complex class structure
     // Target the button based on its complex class structure
     $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();
     $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();
   
    // Make header-box in Home clickable
    $('.head-box').click(function() {
        window.location.href = '/Main_Page'; // Redirects to the home page
    });
function filterCardsToShowOnlyTypeAndSubject(typeValue, subjectValue) {
// Initially hide all 'div.filtered-list-item' elements
$('div.filtered-list-item').hide();
// Combine the selectors for '.card' and '.list-card' elements
$('.card, .list-card').each(function() {
var typeText = $(this).find('.type a').text().trim();
var subjectText = $(this).find('.subject').text().trim();
// Check if the element's type matches 'Book' and if the subject includes 'Activism'
if (typeText === typeValue && subjectText.split(',').map(function(s) { return s.trim(); }).includes(subjectValue)) {
// Show this element's parent 'div.filtered-list-item'
$(this).closest('div.filtered-list-item').show();
}
});
}
// Call the function to filter and display only the appropriate cards
filterCardsToShowOnlyTypeAndSubject('Book', 'Activism');
});
});

Revision as of 10:02, 19 March 2024

$(document).ready(function() {
    // Global variables
    var cards = $('.card');
    var showArticleWrapper = $('#show-article-wrapper');
    var areFiltersActive = false;

    // Make header-box in Home clickable
    $('.head-box').click(function() {
        window.location.href = '/Main_Page'; // Redirects to the home page
    });

    // Utility Functions
    function sortChronologically() {
        var cards = $('.list-container .card').get();

        cards.sort(function(a, b) {
            var numberA = parseInt($(a).find('.entry-number').text().replace(/\[|\]/g, ''), 10);
            var numberB = parseInt($(b).find('.entry-number').text().replace(/\[|\]/g, ''), 10);
            return numberB - numberA; // Descending order
        });

        $.each(cards, function(index, item) {
            $('.list-container').append(item);
        });
    }

    function randomizeCards(selector) {
        var cards = $(selector).get();

        var i = cards.length, j, temp;
        while (--i > 0) {
            j = Math.floor(Math.random() * (i + 1));
            temp = cards[i];
            cards[i] = cards[j];
            cards[j] = temp;
        }

        $.each(cards, function(index, item) {
            $(selector).parent().append(item);
        });
    }

    function sortAlphabetically(selector) {
        var cards = $(selector).get();

        cards.sort(function(a, b) {
            var titleA = $(a).find('.title').text().toUpperCase();
            var titleB = $(b).find('.title').text().toUpperCase();
            return (titleA < titleB) ? -1 : (titleA > titleB) ? 1 : 0;
        });

        $.each(cards, function(index, item) {
            $(selector).parent().append(item);
        });
    }

    function updateViews() {
        // Handle cards in the list view
        $('.home-chronicle-list div.list-container div.card:not(.event)').each(function() {
            if (!$(this).closest('.home-chronicle-block').length) {
                var title = $(this).find('.title').detach();
                var images = $(this).find('.images').detach();
    
                // Remove existing .title-images if it exists
                $(this).find('.title-images').remove();
    
                var titleImagesContainer = $('<div class="title-images"></div>').append(images, title);
                $(this).find('.people').after(titleImagesContainer);
            }
        });
    
        // Handle cards in the block view
        $('.home-chronicle-block div.list-container div.card:not(.event)').each(function() {
            // Remove .title-images container if it exists, re-attach .title and .images to their original places
            var titleImagesContainer = $(this).find('.title-images');
            if (titleImagesContainer.length) {
                var title = titleImagesContainer.find('.title').detach();
                var images = titleImagesContainer.find('.images').detach();
                titleImagesContainer.remove();
    
                $(this).find('.people').after(title);
                $(this).find('.type').after(images);
            } else {
                // If .title-images doesn't exist, ensure .images is placed correctly
                var images = $(this).find('.images').detach();
                $(this).find('.type').after(images);
            }
        });
    
        // Additional functionality for checking consecutive .card.event
        $('.home-chronicle-block div.list-container .card.event, .home-chronicle-list div.list-container .card.event').each(function() {
            checkConsecutiveEvents($(this));
        });
    }
    
    function checkConsecutiveEvents(element) {
        if (element.next().hasClass('card') && element.next().hasClass('event')) {
            console.log("multiple consecutive card events");
            $('.home-chronicle-list div.list-container div.card.event').removeClass('alone-card-event');
        } else {
            console.log("alone card events");
            $('.home-chronicle-list div.list-container div.card.event').addClass('alone-card-event');
        }
    }
    
    function updateCardEventBorders() {
        // Reset previously set classes for both block and list views
        $('.home-chronicle-block div.list-container div.card.event, .home-chronicle-list div.list-container div.card.event').removeClass('first-in-series next-in-series');
    
        // Update borders for block view cards
        updateBordersForView('.home-chronicle-block div.list-container');
    
        // Update borders for list view cards
        updateBordersForView('.home-chronicle-list div.list-container');
    }
    
    function updateBordersForView(selector) {
        $(selector + ' div.card.event').each(function() {
            var $current = $(this);
    
            // Find the next visible .card.event element, skipping hidden ones
            var $nextVisibleEvent = $current.nextAll('.card.event').not(':hidden').first();
    
            // Check if there is a visible .card.event following the current one
            if ($nextVisibleEvent.length) {
                // Apply 'first-in-series' if the current card is not preceded by a visible .card.event
                if (!$current.prevAll('.card.event').not(':hidden').first().length) {
                    $current.addClass('first-in-series');
                }
    
                // The next visible card event gets 'next-in-series'
                $nextVisibleEvent.addClass('next-in-series');
            }
        });
    }    

    function processEventCards() {
        $('.card.event').each(function() {
            var existingContainer = $(this).find('.container-people-date');
    
            // If the container doesn't exist, create and append it
            if (existingContainer.length === 0) {
                existingContainer = $('<div class="container-people-date"></div>');
                $(this).append(existingContainer); // Temporarily append to ensure it's in the DOM
            }
    
            // Ensure the .people and .date elements are inside the container
            var people = $(this).find('.people').detach();
            var date = $(this).find('.date').detach();
            existingContainer.append(people).append(date);
    
            // Decide where to place the container
            if ($(this).closest('.home-chronicle-block').length) {
                // Check if it's already correctly placed, if not, move it
                if (!existingContainer.is($(this).find('.title').next())) {
                    $(this).find('.title').after(existingContainer);
                }
            } else if ($(this).closest('.home-chronicle-list').length) {
                // Check if it's already correctly placed, if not, move it
                if (!existingContainer.is($(this).find('.title').prev())) {
                    $(this).find('.title').before(existingContainer);
                }
            }
        });
    }

    if ($('#home').length > 0) {
        console.log("The #home element exists on this page.");
        // This code will only run only on the homepage.
        // Show the block view container once everything is set up
        $('.home-block-view').show();
        $('.home-chronicle-block-button, .home-block-view-button').addClass('active-view-button');

        // Initialization and Default Settings
        // Initially hide list view sorting buttons and set the default sorted view for block
        $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').hide();
        sortChronologically(); // Sort the block view chronologically by default
        
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();

        $('.home-list-view-button').click(function() {
            console.log("List view button clicked.");
            $(".home-list-sorting-buttons").css('display', 'flex');
            // Switching view classes
            $('.home-block-view').removeClass('home-block-view').addClass('home-list-view');
            // Additional class switch
            $('.home-chronicle-block').removeClass('home-chronicle-block').addClass('home-chronicle-list');
            // Toggling visibility of buttons
            $('.home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button').hide();
            $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').show();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
        
            // Remove active class from block view button and add to list view button
            $('.home-block-view-button').removeClass('active-view-button');
            $('.home-list-view-button').addClass('active-view-button');
        
            // Conditional checks for transferring the active class from block to list buttons
            if ($('.home-chronicle-block-button').hasClass('active-view-button')) {
                $('.home-chronicle-block-button').removeClass('active-view-button');
                $('.home-chronicle-list-button').addClass('active-view-button');
            } else if ($('.home-random-block-button').hasClass('active-view-button')) {
                $('.home-random-block-button').removeClass('active-view-button');
                $('.home-random-list-button').addClass('active-view-button');
            } else if ($('.home-alphabetical-block-button').hasClass('active-view-button')) {
                $('.home-alphabetical-block-button').removeClass('active-view-button');
                $('.home-alphabetical-list-button').addClass('active-view-button');
            }
        });
        
        $('.home-block-view-button').click(function() {
            console.log("Block view button clicked.");
            $('.home-list-sorting-buttons').hide(); // Hide list sorting buttons
            $('.home-list-view').removeClass('home-list-view').addClass('home-block-view');
            $('.home-chronicle-list').removeClass('home-chronicle-list').addClass('home-chronicle-block');
            $('.home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button').show();
            $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').hide();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-list-view-button').removeClass('active-view-button');
            $('.home-block-view-button').addClass('active-view-button');

            // Conditional checks for transferring the active class from block to list buttons
            if ($('.home-chronicle-list-button').hasClass('active-view-button')) {
                $('.home-chronicle-list-button').removeClass('active-view-button');
                $('.home-chronicle-block-button').addClass('active-view-button');
            } else if ($('.home-random-list-button').hasClass('active-view-button')) {
                $('.home-random-list-button').removeClass('active-view-button');
                $('.home-random-block-button').addClass('active-view-button');
            } else if ($('.home-alphabetical-list-button').hasClass('active-view-button')) {
                $('.home-alphabetical-list-button').removeClass('active-view-button');
                $('.home-alphabetical-block-button').addClass('active-view-button');
            }
        });
        
        // BLOCK VIEW SORTING BUTTONS
        $('.home-chronicle-block-button').click(function() {
            sortChronologically();

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-chronicle-block-button').addClass('active-view-button');
            $('.home-random-block-button').removeClass('active-view-button');
            $('.home-alphabetical-block-button').removeClass('active-view-button');
        });
        
        $('.home-random-block-button').click(function() {
            randomizeCards('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-random-block-button').addClass('active-view-button');
            $('.home-chronicle-block-button').removeClass('active-view-button');
            $('.home-alphabetical-block-button').removeClass('active-view-button');
        });

        $('.home-alphabetical-block-button').click(function() {
            sortAlphabetically('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-alphabetical-block-button').addClass('active-view-button');
            $('.home-chronicle-block-button').removeClass('active-view-button');
            $('.home-random-block-button').removeClass('active-view-button');
        });

        // LIST VIEW SORTING BUTTONS
        $('.home-chronicle-list-button').click(function() {
            sortChronologically();

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-chronicle-list-button').addClass('active-view-button');
            $('.home-random-list-button').removeClass('active-view-button');
            $('.home-alphabetical-list-button').removeClass('active-view-button');
        });

        $('.home-random-list-button').click(function() {
            randomizeCards('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-random-list-button').addClass('active-view-button');
            $('.home-chronicle-list-button').removeClass('active-view-button');
            $('.home-alphabetical-list-button').removeClass('active-view-button');
        });

        $('.home-alphabetical-list-button').click(function() {
            sortAlphabetically('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.home-alphabetical-list-button').addClass('active-view-button');
            $('.home-chronicle-list-button').removeClass('active-view-button');
            $('.home-random-list-button').removeClass('active-view-button');
        });
    } else {
        console.log("NOT HOMEPAGE");
        $('.home-list-view').show();
        $('.chronicle-list-button, .list-view-button').addClass('active-view-button');

        // Initialization and Default Settings
        // Initially hide block view sorting buttons and set the default sorted view for list
        $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').hide();
        sortChronologically(); // Sort the block view chronologically by default
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();

        $('.list-view-button').click(function() {
            console.log("List view button clicked.");
            $(".list-sorting-buttons").css('display', 'flex');
            $('.block-sorting-buttons').hide();
            // Switching view classes
            $('.home-block-view').removeClass('home-block-view').addClass('home-list-view');
            // Additional class switch
            $('.home-chronicle-block').removeClass('home-chronicle-block').addClass('home-chronicle-list');
            // Toggling visibility of buttons
            $('.chronicle-block-button, random-block-button, alphabetical-block-button').hide();
            $('.chronicle-list-button, .random-list-button, .alphabetical-list-button').show();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
        
            // Remove active class from block view button and add to list view button
            $('.block-view-button').removeClass('active-view-button');
            $('.list-view-button').addClass('active-view-button');
        
            // Conditional checks for transferring the active class from block to list buttons
            if ($('.chronicle-block-button').hasClass('active-view-button')) {
                $('.chronicle-block-button').removeClass('active-view-button');
                $('.chronicle-list-button').addClass('active-view-button');
            } else if ($('.random-block-button').hasClass('active-view-button')) {
                $('.random-block-button').removeClass('active-view-button');
                $('.random-list-button').addClass('active-view-button');
            } else if ($('.alphabetical-block-button').hasClass('active-view-button')) {
                $('.alphabetical-block-button').removeClass('active-view-button');
                $('.alphabetical-list-button').addClass('active-view-button');
            }
        });

        $('.block-view-button').click(function() {
            console.log("Block view button clicked.");
            $('.list-sorting-buttons').hide(); // Hide list sorting buttons
            $(".block-sorting-buttons").css('display', 'flex');
            $('.home-list-view').removeClass('home-list-view').addClass('home-block-view');
            $('.home-chronicle-list').removeClass('home-chronicle-list').addClass('home-chronicle-block');
            $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').show();
            $('.chronicle-list-button, .random-list-button, .alphabetical-list-button').hide();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.list-view-button').removeClass('active-view-button');
            $('.block-view-button').addClass('active-view-button');

            // Conditional checks for transferring the active class from block to list buttons
            if ($('.chronicle-list-button').hasClass('active-view-button')) {
                $('.chronicle-list-button').removeClass('active-view-button');
                $('.chronicle-block-button').addClass('active-view-button');
            } else if ($('.random-list-button').hasClass('active-view-button')) {
                $('.random-list-button').removeClass('active-view-button');
                $('.random-block-button').addClass('active-view-button');
            } else if ($('.alphabetical-list-button').hasClass('active-view-button')) {
                $('.alphabetical-list-button').removeClass('active-view-button');
                $('.alphabetical-block-button').addClass('active-view-button');
            }
        });

        // BLOCK VIEW SORTING BUTTONS
        $('.chronicle-block-button').click(function() {
            sortChronologically();

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.chronicle-block-button').addClass('active-view-button');
            $('.random-block-button').removeClass('active-view-button');
            $('.alphabetical-block-button').removeClass('active-view-button');
        });
        
        $('.random-block-button').click(function() {
            randomizeCards('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.random-block-button').addClass('active-view-button');
            $('.chronicle-block-button').removeClass('active-view-button');
            $('.alphabetical-block-button').removeClass('active-view-button');
        });

        $('.alphabetical-block-button').click(function() {
            sortAlphabetically('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.alphabetical-block-button').addClass('active-view-button');
            $('.chronicle-block-button').removeClass('active-view-button');
            $('.random-block-button').removeClass('active-view-button');
        });

        // LIST VIEW SORTING BUTTONS
        $('.chronicle-list-button').click(function() {
            sortChronologically();

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.chronicle-list-button').addClass('active-view-button');
            $('.random-list-button').removeClass('active-view-button');
            $('.alphabetical-list-button').removeClass('active-view-button');
        });

        $('.random-list-button').click(function() {
            randomizeCards('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.random-list-button').addClass('active-view-button');
            $('.chronicle-list-button').removeClass('active-view-button');
            $('.alphabetical-list-button').removeClass('active-view-button');
        });

        $('.alphabetical-list-button').click(function() {
            sortAlphabetically('.list-container .card');

            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
            updateCardEventBorders();
            $('.alphabetical-list-button').addClass('active-view-button');
            $('.chronicle-list-button').removeClass('active-view-button');
            $('.random-list-button').removeClass('active-view-button');
        });
    }
    
    // FILTERS  ---------------------   SECTION //
    // General Filters Toggle Button
    $('.general-toggle').click(function() {
        var filtersDiv = $('#filters');
        filtersDiv.toggleClass('is-visible');
        
        if (filtersDiv.hasClass('is-visible')) {
            filtersDiv.css('display', 'grid').hide().slideDown(100);
            $(this).text('[Hide]');
        } else {
            filtersDiv.slideUp(100, function() {
                $(this).css('display', 'none');
                // The filter reset code has been removed to keep the filters active
            });
            $(this).text('[Show]');
        }
        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
    });
    
    // Specific Toggle for Filter Sections like TYPE, ENTITY, etc.
    $('.open-filter').click(function(event) {
        event.stopPropagation();
    
        var filterType = $(this).closest('.filter').data('filter');
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card'; // Determine which card type is present
    
        console.log('Filter type:', filterType, 'Card Selector:', cardSelector);
    
        $('#values-' + filterType).toggle();
    
        if ($('#values-' + filterType).is(':visible')) {
            $(this).addClass('active-filter');
        } else {
            $(this).removeClass('active-filter');
        }
    
        // Pass the determined card selector to the function
        updateLastVisibleCard(cardSelector);
        updateWidthBlockView(cardSelector);
        processEventCards(cardSelector);
        updateViews(cardSelector);
        updateCardEventBorders(cardSelector);
    
        console.log('Updated views and borders after filter toggle');
    });
    
    function filterCards() {
        var displayCountsHtml = '';
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card'; // Determine which card type is present
    
        $('.filter .values a[title]').each(function() {
            var anchor = $(this);
            var filterValue = anchor.attr('title').toLowerCase();
            var count = 0;
    
            if (anchor.find('button').hasClass('active')) {
                $(cardSelector).each(function() {
                    var card = $(this);
                    $('.filter').each(function() {
                        var filterType = $(this).data('filter');
                        var cardValue = card.find('.' + filterType).text().toLowerCase();
                        if (cardValue.indexOf(filterValue) !== -1) {
                            count++;
                        }
                    });
                });
    
                displayCountsHtml += '<span>[' + count + '] ' + filterValue + '</span> ';
            }
        });
    
        if (displayCountsHtml) {
            $('.count-filtered-cards').html(displayCountsHtml).show();
        } else {
            $('.count-filtered-cards').hide();
        }
    
        // Apply filtering and pass the determined card selector to the function
        applyFiltering(cardSelector);
    
        updateLastVisibleCard(cardSelector);
        updateWidthBlockView(cardSelector);
        processEventCards(cardSelector);
        updateViews(cardSelector);
        updateCardEventBorders(cardSelector);
    
        console.log('Filtering process complete, updated views and borders');
    }      
    
    function applyFiltering() {
        // Determine which card selector to use based on the elements present in the DOM
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card';
    
        // Apply the logic to the determined card type
        $(cardSelector).show().each(function() {
            var card = $(this);
            var hideCard = false;
    
            $('.filter').each(function() {
                if (hideCard) return;
    
                var filterType = $(this).data('filter');
                var activeFilters = $(this).find('.values a[title] button.active').map(function() {
                    return $(this).parent('a').attr('title').toLowerCase();
                }).get();
    
                if (activeFilters.length > 0) {
                    var cardValue = card.find('.' + filterType).text().toLowerCase();
                    var matchesFilter = activeFilters.some(function(filterValue) {
                        return cardValue.indexOf(filterValue) !== -1;
                    });
                    if (!matchesFilter) hideCard = true;
                }
            });
    
            if (hideCard) card.hide();
        });
    }    
    
    function updateLastVisibleCard() {
        // Target only the list view container for updating the last visible card
        $('.home-chronicle-list div.list-container div.card').removeClass('last-visible');
    
        // Find the last visible card within the list view and add the class
        var lastVisibleCard = $('.home-chronicle-list div.list-container div.card:visible:last');
        lastVisibleCard.addClass('last-visible');
    }

    function updateWidthBlockView() {
        // Target only the block view container for updating the with of card
        $('.home-chronicle-block div.list-container').css('width', '100%');
        $('.home-chronicle-block div.list-container div.card').css('width', 'calc(20% - 0px)');
        $('.home-chronicle-block div.list-container div.card:nth-child(5n + 1)').css('width', 'calc(20% + 4px)');
    }

    // Reset function
    $('.reset-filter').click(function() {
        // Remove 'active' class from all filter buttons
        $('#filters .values button').removeClass('active');
        $('.open-filter').removeClass('active-filter');
    
        // Show all cards that might have been hidden by the filters
        $('.card').show();
    
        // Reset and hide the filter counts
        $('.count-filtered-cards').text('').hide();
    
        filterCards(); 

        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
    });
    
	$('#filters .values button').click(function() {
        console.log("Filter is clicked!!!");
		$(this).toggleClass('active');
		filterCards(); // Re-apply the filters based on the updated active buttons

        updateLastVisibleCard();
        updateWidthBlockView();
        processEventCards();
        updateViews();
        updateCardEventBorders();
	});

    $(window).on('scroll', function() {
        var filtersDiv = $('#filters');
        if (filtersDiv.hasClass('is-visible')) {
            filtersDiv.removeClass('is-visible').slideUp(100, function() {
                $(this).css('display', 'none');
                // The filter reset code has been removed to keep the filters active
            });
            $('.general-toggle').text('[Show]'); // Update the toggle button text
        }
    });
    
	
    // MODAL ARTICLE  ---------------------   SECTION //
    // Format paragraphs
    function formatParagraphs(text) {
	    var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
	    return paragraphs.map(function (p) { return '<p>' + p.trim() + '</p>'; }).join('');
	}

    var images = []; // Initialize an empty array to store the images
    // Find all image containers within the article content and extract the necessary information
    $('.article-images .image-container').each(function() {
        var img = $(this).find('img');
        var captionDiv = $(this).find('div[class^="caption-image"]');
        var image = {
            src: img.attr('src'),
            alt: img.attr('alt'),
            caption: captionDiv.text(),
            captionClass: captionDiv.attr('class')
        };
        images.push(image); // Add the image object to the images array
    });

    if (images.length > 0) {
        setupImageToggle(images); // Call the setupImageToggle function with the images array
        updateImageLabel(1, images.length); // Set the label for the first image immediately
    }

    function setupImageToggle(images) {
        var currentIndex = 0;
        var enableNavigation = images.length > 1; // Enable navigation only if there is more than one image
    
        function showImage(index) {
            currentIndex = index;
            var image = images[currentIndex];
            updateImageLabel(currentIndex + 1, images.length);
            $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, images.length, enableNavigation));
        }
    
        // Attach click handlers only if navigation is enabled
        if (enableNavigation) {
            $('#article-content').on('click', '.next-arrow', function() {
                showImage((currentIndex + 1) % images.length);
            });
    
            $('#article-content').on('click', '.prev-arrow', function() {
                showImage((currentIndex - 1 + images.length) % images.length);
            });
        }
    
        // Display the first image
        showImage(currentIndex);
    }      
           
    
    function getImageHtml(image, currentIndex, totalImages, enableNavigation) {
        var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
    
        // Render navigation arrows based on the enableNavigation flag
        var navigationHtml = enableNavigation ? 
            '<div class="prev-arrow"><</div><div class="next-arrow">></div>' : '';
    
        return '<div class="image-navigation">' +
                '<p class="article-label-image">' + imageLabel + '</p>' +
                   navigationHtml +
                   '<div class="image-container">' +
                       '<img src="' + image.src + '" alt="' + image.alt + '">' +
                       '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
                   '</div>' +
               '</div>';
    }
    
    function updateImageLabel(currentIndex, totalImages) {
        var imageLabel = currentIndex + '/' + totalImages + ' IMAGES';
        $('#article-content .article-label-image').text(imageLabel);
    }
    
	$('.caption-image1').each(function() {
        // Split the caption at each <br> tag and wrap each line in a span
        var htmlContent = $(this).html();
        var lines = htmlContent.split('<br>');
        var wrappedLines = lines.map(function(line) {
            return '<span class="caption-line">' + line + '</span>';
        });
        var newHtml = wrappedLines.join('<br>');
        $(this).html(newHtml);
    });
    
    function setShowArticleRotationEffect() {
		const offset = 20;
		const showArticle = document.querySelector('#show-article');
	    const h = showArticle.clientHeight;
	    const theta = -Math.atan(offset/h);
		const a = Math.cos(theta);
		const b = Math.sin(theta);
		const c = -Math.sin(theta);
		const d = Math.cos(theta);
		const showArticleBefore = document.querySelector('#show-article-before');
		const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
		showArticleBefore.style.transform = transformValue;
	}

    function openEvent(element, event) {
        event.stopPropagation();
        event.preventDefault();
    
        var url = $(element).find('.link a').attr('href');
        if (url) {
            window.open(url, '_blank').focus();
        }
    }

    function openModal(cardElement, event) {
        event.stopPropagation(); // Prevent the event from bubbling up
        console.log("openModal function called.");
	    var isRelatedArticle = $(cardElement).hasClass('related-article');
	    showArticleWrapper.css('display', 'block');

	    // Clear existing content in modal
	    $('#article-title').empty();
	    $('#article-content').empty();
	    
	    if (isRelatedArticle) {
            // Handle card elements (existing logic)
	        var cardImages = [];
	        for (var i = 1; i <= 5; i++) {
	            var imageClass = '.related-article-image' + i;
	            var captionClass = '.related-article-caption-image' + i;
	            var imageElem = $(cardElement).find(imageClass + ' img');
	
	            if (imageElem.length) {
	                var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
	                cardImages.push({
	                    link: $(cardElement).find(imageClass + ' a').attr('href'),
	                    src: imageElem.attr('src'),
	                    alt: imageElem.attr('alt'),
	                    caption: captionText,
	                    captionClass: 'related-article-caption-image' + i
	                });
	            }
	        }
	        
	        if (cardImages.length > 1) {
	            setupImageToggle(cardImages);
	        }
	        // Handle related-article elements
	        var entryNumber = $(cardElement).find('.related-article-entry-number').text();
	        var peopleHtml = $(cardElement).find('.related-article-people').html();
	        var title = $(cardElement).find('.related-article-title').text();
	        var typeHtml = $(cardElement).find('.related-article-type').html();
            var externalPdfURL = $(cardElement).find('.related-article-pdf a').attr('href');       
	        var externalLinkURL = $(cardElement).find('.related-article-link a').attr('href');
	        var entity = $(cardElement).find('.related-article-entity').text();
	        var discipline = $(cardElement).find('.related-article-discipline').text();
	        var subject = $(cardElement).find('.related-article-subject').text();
	        var description = $(cardElement).find('.related-article-description').html();
	        var reflection = $(cardElement).find('.related-article-reflection').html();
	        var quote = $(cardElement).find('.related-article-quote').text();
	        var modificationDate = $(cardElement).find('.related-article-modification-date').text();

	        // Update modal content for related-article
            $('#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>';
            // Create a div that will wrap the links
            articleContentHtml += '<div class="link-pdf">';

            if (externalPdfURL) {
                articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF]</a>';
            }
            if (externalLinkURL) {
                articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB]</a>';
            }
            // Close the .link-pdf div
            articleContentHtml += '</div>';
	        articleContentHtml += '</div>'; // Close the container 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
                var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
                articleContentHtml +=
                    '<div class="article-images">' +
                        getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
                    '</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>' +
		    '<p class="article-quote">' + quote + '</p>' : '') +
		    '<p class="article-label-modification-date">Added on</p>' +
		    '<div class="article-modification-date">' + modificationDate + '</div>';
    
	        $('#article-content').html(articleContentHtml);

	    } else {
	        // Handle card elements (existing logic)
	        var cardImages = [];
	        for (var i = 1; i <= 5; i++) {
	            var imageClass = '.image' + i;
	            var captionClass = '.caption-image' + i;
	            var imageElem = $(cardElement).find(imageClass + ' img');
	
	            if (imageElem.length) {
	                var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
	                cardImages.push({
	                    link: $(cardElement).find(imageClass + ' a').attr('href'),
	                    src: imageElem.attr('src'),
	                    alt: imageElem.attr('alt'),
	                    caption: captionText,
	                    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 externalPdfURL = $(cardElement).find('.pdf a').attr('href');       
	        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 externalReferenceHtml = $(cardElement).find('.external-reference').html();
	        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>';

            // Create a div that will wrap the links
            articleContentHtml += '<div class="link-pdf">';
            if (externalPdfURL) {
                articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF]</a>';
            }
            if (externalLinkURL) {
                articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB]</a>';
            }
            // Close the .link-pdf div
            articleContentHtml += '</div>';
            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
                var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
                articleContentHtml +=
                    '<div class="article-images">' +
                        getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
                    '</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>' : '') +
            (externalReferenceHtml ? '<p class="article-label-external-reference">References</p>' +
		    '<p class="article-external-reference">' + externalReferenceHtml + '</p>' : '') +
		    (quote ? '<p class="article-label-quote">Quote</p>' +
		    '<p class="article-quote">' + quote + '</p>' : '') +
		    '<p class="article-label-modification-date">Added on</p>' +
		    '<div class="article-modification-date">' + 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();
	        } 
	    }

        // Check which view is active and set the width accordingly
	    if ($('.home-chronicle-list').is(':visible')) {
            $('.home-list-view').each(function() {
                var currentWidth = $(this).width();  // Get the current width
                $(this).data('originalWidth', currentWidth); // Store the original width
                $(this).css('width', 'calc(60% - 2px)');
            });     
            
            // Modify the .type elements within .home-chronicle-list
            $('.home-chronicle-list .type').each(function() {
                var currentLeft = $(this).css('left');  // Get the current left value
                $(this).data('originalLeft', currentLeft); // Store the original left value
                $(this).css('left', '85%');
            });
	    } else if ($('.home-chronicle-block').is(':visible')) {
            $('.home-chronicle-block div.list-container').each(function() {
                var currentWidth = $(this).width();  // Get the current width
                $(this).css('width', 'calc(60% - 0px)');  // Set the new width as 30% of the current width
            });
            $('.home-chronicle-block div.list-container div.card').each(function() {
                var currentWidth = $(this).width();  // Get the current width
                $(this).css('width', 'calc(33.333% - 0px)');  // Set the new width as 30% of the current width
            });            
        }

	    // Apply the fade-out effect to both #list and #list-list elements
	    $('.list-container').addClass('fade-out');

    }

    // closeModal function
	function closeModal() {
        if ($('.home-chronicle-list').is(':visible')) {
            $('.home-list-view').css('width', '100%');
            $('.home-chronicle-list div.list-container div.card div.type').css('left', '90%');
	    } else if ($('.home-chronicle-block').is(':visible')) {
            updateWidthBlockView();
        }
	    showArticleWrapper.hide();
	}

    $('.card').on('click', function(event) {
        // Check if the click event is originating from a link within .people or .type, or any other specific area
        if ($(event.target).closest('.people a, .type a').length) {
            // The click is inside a link; let the default behavior proceed without opening the modal
            return;
        }
    
        // Prevent further event handling if the card has the 'event' class
        if ($(this).hasClass('event')) {
            event.stopImmediatePropagation();
            openEvent(this, event);
            $('.list-container').removeClass('fade-out');
            closeModal();
        } else {
            // Handle cards without the 'event' class
            openModal(this, event);
            setShowArticleRotationEffect();
        }
    });

    $('#show-article-wrapper').on('click', '.related-article', function(event) {
        openModal(this, event); // Call openModal when a related-article is clicked
        setShowArticleRotationEffect();
    });

    // Close modal with Close button
	$('#close-button').on('click', function () {
	    $('.list-container').removeClass('fade-out');
	    closeModal();
	});

    // Close modal and remove fade out also when clicking outside of card
    $(document).on('mousedown', function (event) {
        var isOutsideWrapper = !showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0;
        var isOnCard = $(event.target).closest('.card, .list-card').length > 0;
        
        if (!areFiltersActive) {
	        if (isOutsideWrapper && !isOnCard) {
	            $('.list-container').removeClass('fade-out');
		        showArticleWrapper.css('display', 'none');
	            closeModal();  // Use closeModal() for cleanup
	        }
        }
    });

    // Hover effect for scrolling
    $('#show-article-wrapper').hover(function () {
        // On hover, enable scrolling on #show-article-wrapper
        $(this).css('overflow-y', 'auto');
        $(this).css('overflow-x', 'hidden');
    }, function () {
        // On hover out, disable scrolling on #show-article-wrapper
        $(this).css('overflow-y', 'hidden');
        $(this).css('overflow-x', 'hidden');
    });

    // Format community card, when in the Community Entries page
	if ($('.community-card').length) {
	    formatCommunityCardDescriptions();
	}

    function formatCommunityCardDescriptions() {
	    $('.community-card').each(function() {	
	        // Format paragraphs in community-description
	        var descriptionContainer = $(this).find('.community-description');
	        var rawDescription = descriptionContainer.text();
	        var formattedDescription = formatParagraphs(rawDescription);
	        descriptionContainer.html(formattedDescription);
	
	        // Remove empty elements in the entire card
	        $(this).find('*').each(function() {
	            if ($(this).is(':empty') || $(this).html().trim() === '<br>') {
	                $(this).remove();
	            }
	        });
	    });
	}
    
    // SEARCH  ---------------------   SECTION //
    // Check if div with class "mw-search-results-info" exists
    if ($('.mw-search-results-info').length) {
        // Select the child <p> element and check its content
        var $paragraph = $('.mw-search-results-info > p');
        var currentText = $paragraph.text().trim();
        
        // Check if the current text is not "There were no results matching the query."
        if (currentText !== "There were no results matching the query.") {
            // Overwrite the content with "Search results"
            $paragraph.text('Pages related to your Search');
        }
    }
    
    // Object to store encountered titles
    var encounteredTitles = {};

    // Iterate over each search result
    $('.mw-search-result-heading').each(function() {
        // Get the title of the current search result
        var title = $(this).find('a').attr('title');

        // Check if the title has already been encountered
        if (encounteredTitles[title]) {
            // Hide the duplicate search result
            $(this).hide();
        } else {
            // Mark the title as encountered
            encounteredTitles[title] = true;
        }
    });
    
     // Remove unwanted white spaces between lines
    $('.mw-search-results-container').contents().filter(function() {
        return this.nodeType === 3; // Filter text nodes
    }).remove();
    
    // Edits regarding Search Results
    // Define the new form HTML as a string
	var newFormHtml = '<form action="/index.php" id="searchform">' +
	    '<div id="simpleSearchSpecial" class="right-inner-addon">' +
	    '<span>[ Search ]</span>' +
	    '<input class="form-control" name="search" placeholder="" title="Search [alt-shift-f]" accesskey="f" id="searchInput" tabindex="1" autocomplete="off" type="search">' +
	    '<span class="closing-bracket">]</span>' +
	    '<input value="Special:Search" name="title" type="hidden">' +
	    '</div>' +
	    '</form>';
	
	// Replace the div with id="searchText" with the new form
	$('#searchText').replaceWith(newFormHtml);
    
    // Target the button based on its complex class structure
    $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();
});
Retrieved from "https://softwear.directory/index.php?title=MediaWiki:Common.js&oldid=3783"