MediaWiki:Common.js: Difference between revisions

From softwear.directory
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
$(document).ready(function() {
$(document).ready(function () {
    // Global variables
  // Global variables
    var cards = $('.card');
  var cards = $(".card");
    var showArticleWrapper = $('#show-article-wrapper');
  var showArticleWrapper = $("#show-article-wrapper");
    var areFiltersActive = false;
  var areFiltersActive = false;


    // Make header-box in Home clickable
  // Make header-box in Home clickable
    $('.head-box').click(function() {
  $(".head-box").click(function () {
        window.location.href = '/Main_Page'; // Redirects to the home page
    window.location.href = "/Main_Page"; // Redirects to the home page
     });
  });
 
  // Loop through each card to format related articles
  cards.each(function () {
     // Check if the card has related articles
    var relatedArticles = $(this).find(".related-articles");
    if (relatedArticles.length > 0) {
      // Get all the related article elements
      var relatedArticleElements = relatedArticles.find(".related-article");
 
      // Create an array to store unique related articles
      var uniqueArticles = [];


    // Loop through each card to format related articles
      // Loop through each related article element
    cards.each(function() {
      relatedArticleElements.each(function () {
         // Check if the card has related articles
         // Remove <p> tags from the article
         var relatedArticles = $(this).find('.related-articles');
         $(this).find("p").remove();
        if (relatedArticles.length > 0) {
            // Get all the related article elements
            var relatedArticleElements = relatedArticles.find('.related-article');


            // Create an array to store unique related articles
        // Convert the article HTML to a string
            var uniqueArticles = [];
        var articleHTML = $(this)[0].outerHTML;


            // Loop through each related article element
        // Check if the article HTML already exists in the uniqueArticles array
            relatedArticleElements.each(function() {
        if ($.inArray(articleHTML, uniqueArticles) === -1) {
                // Remove <p> tags from the article
          // If it doesn't exist, add it to the uniqueArticles array
                $(this).find('p').remove();
          uniqueArticles.push(articleHTML);
        }
      });


                // Convert the article HTML to a string
      // Clear the content of the related articles container
                var articleHTML = $(this)[0].outerHTML;
      relatedArticles.empty();


                // Check if the article HTML already exists in the uniqueArticles array
      // Append the unique related articles back to the container
                if ($.inArray(articleHTML, uniqueArticles) === -1) {
      relatedArticles.append(uniqueArticles.join(""));
                    // If it doesn't exist, add it to the uniqueArticles array
    }
                    uniqueArticles.push(articleHTML);
  });
                }
            });


            // Clear the content of the related articles container
  // Utility Functions
            relatedArticles.empty();
  function sortChronologically() {
    var cards = $(".list-container .card").get();


            // Append the unique related articles back to the container
    cards.sort(function (a, b) {
            relatedArticles.append(uniqueArticles.join(''));
      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
     });
     });


     // Utility Functions
     $.each(cards, function (index, item) {
    function sortChronologically() {
      $(".list-container").append(item);
        var cards = $('.list-container .card').get();
    });
  }


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


        $.each(cards, function(index, item) {
    var i = cards.length,
            $('.list-container').append(item);
      j,
        });
      temp;
    while (--i > 0) {
      j = Math.floor(Math.random() * (i + 1));
      temp = cards[i];
      cards[i] = cards[j];
      cards[j] = temp;
     }
     }


     function randomizeCards(selector) {
     $.each(cards, function (index, item) {
        var cards = $(selector).get();
      $(selector).parent().append(item);
    });
  }
 
  function sortAlphabetically(selector) {
    var cards = $(selector).get();


        var i = cards.length, j, temp;
    cards.sort(function (a, b) {
         while (--i > 0) {
      var titleA = $(a).find(".title").text().toUpperCase();
            j = Math.floor(Math.random() * (i + 1));
      var titleB = $(b).find(".title").text().toUpperCase();
            temp = cards[i];
      return titleA < titleB ? -1 : titleA > titleB ? 1 : 0;
             cards[i] = cards[j];
    });
            cards[j] = temp;
 
    $.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);
         }
         }
      }
    );


        $.each(cards, function(index, item) {
    // Handle cards in the block view
            $(selector).parent().append(item);
    $(".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);
        }
      }
     );
  }


     function sortAlphabetically(selector) {
  function processEventCards() {
        var cards = $(selector).get();
     $(".card.event").each(function () {
      var $card = $(this);
      var existingContainer = $card.find(".container-people-date");


        cards.sort(function(a, b) {
      // Create container if missing
            var titleA = $(a).find('.title').text().toUpperCase();
      if (existingContainer.length === 0) {
            var titleB = $(b).find('.title').text().toUpperCase();
        existingContainer = $('<div class="container-people-date"></div>');
            return (titleA < titleB) ? -1 : (titleA > titleB) ? 1 : 0;
        $card.append(existingContainer); // temp placement
        });
      }


        $.each(cards, function(index, item) {
      // Detach people and date
            $(selector).parent().append(item);
      var people = $card.find(".people").detach();
        });
      var date = $card.find(".date").detach();
    }


    function updateViews() {
      // BLOCK VIEW (gallery)
        // Handle cards in the list view
      if ($card.closest(".home-chronicle-block").length) {
        $('.home-chronicle-list div.list-container div.card:not(.event)').each(function() {
        existingContainer.append(people).append(date);
            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);
            }
        });
    } 


    function processEventCards() {
        // Place container after title
         $('.card.event').each(function() {
         if (!existingContainer.is($card.find(".title").next())) {
            var $card = $(this);
          $card.find(".title").after(existingContainer);
            var existingContainer = $card.find('.container-people-date');
        }


            // Create container if missing
        // LIST VIEW
            if (existingContainer.length === 0) {
      } else if ($card.closest(".home-chronicle-list").length) {
                existingContainer = $('<div class="container-people-date"></div>');
        // Only append .people into container
                $card.append(existingContainer); // temp placement
        existingContainer.empty().append(people);
            }


            // Detach people and date
        // Place container before title
            var people = $card.find('.people').detach();
        $card.find(".title").before(existingContainer);
            var date = $card.find('.date').detach();


            // BLOCK VIEW (gallery)
        // Place date after title
            if ($card.closest('.home-chronicle-block').length) {
        $card.find(".title").after(date);
                existingContainer.append(people).append(date);
      }
    });
  }


                // Place container after title
  if ($("#home").length > 0) {
                if (!existingContainer.is($card.find('.title').next())) {
    console.log("The #home element exists on this page.");
                    $card.find('.title').after(existingContainer);
    // 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"
    );


            // LIST VIEW
    // Initialization and Default Settings
            } else if ($card.closest('.home-chronicle-list').length) {
    // Initially hide list view sorting buttons and set the default sorted view for block
                // Only append .people into container
    $(
                existingContainer.empty().append(people);
      ".home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button"
    ).hide();
    sortChronologically(); // Sort the block view chronologically by default


                // Place container before title
    updateLastVisibleCard();
                $card.find('.title').before(existingContainer);
    updateWidthBlockView();
    processEventCards();
    updateViews();


                // Place date after title
    $(".home-list-view-button").click(function () {
                $card.find('.title').after(date);
      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();


    if ($('#home').length > 0) {
      // Remove active class from block view button and add to list view button
        console.log("The #home element exists on this page.");
      $(".home-block-view-button").removeClass("active-view-button");
        // This code will only run only on the homepage.
      $(".home-list-view-button").addClass("active-view-button");
        // 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
      // Conditional checks for transferring the active class from block to list buttons
        // Initially hide list view sorting buttons and set the default sorted view for block
      if ($(".home-chronicle-block-button").hasClass("active-view-button")) {
         $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').hide();
        $(".home-chronicle-block-button").removeClass("active-view-button");
         sortChronologically(); // Sort the block view chronologically by default
         $(".home-chronicle-list-button").addClass("active-view-button");
       
      } else if (
         updateLastVisibleCard();
        $(".home-random-block-button").hasClass("active-view-button")
         updateWidthBlockView();
      ) {
        processEventCards();
        $(".home-random-block-button").removeClass("active-view-button");
        updateViews();
         $(".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-list-view-button').click(function() {
    $(".home-block-view-button").click(function () {
            console.log("List view button clicked.");
      console.log("Block view button clicked.");
            $(".home-list-sorting-buttons").css('display', 'flex');
      $(".home-list-sorting-buttons").hide(); // Hide list sorting buttons
            // Switching view classes
      $(".home-list-view")
            $('.home-block-view').removeClass('home-block-view').addClass('home-list-view');
        .removeClass("home-list-view")
            // Additional class switch
        .addClass("home-block-view");
            $('.home-chronicle-block').removeClass('home-chronicle-block').addClass('home-chronicle-list');
      $(".home-chronicle-list")
            // Toggling visibility of buttons
        .removeClass("home-chronicle-list")
            $('.home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button').hide();
        .addClass("home-chronicle-block");
            $('.home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button').show();
      $(
            updateLastVisibleCard();
        ".home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button"
            updateWidthBlockView();
      ).show();
            processEventCards();
      $(
            updateViews();
        ".home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button"
      ).hide();
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-list-view-button").removeClass("active-view-button");
      $(".home-block-view-button").addClass("active-view-button");


            // Remove active class from block view button and add to list view button
      // Conditional checks for transferring the active class from block to list buttons
            $('.home-block-view-button').removeClass('active-view-button');
      if ($(".home-chronicle-list-button").hasClass("active-view-button")) {
            $('.home-list-view-button').addClass('active-view-button');
        $(".home-chronicle-list-button").removeClass("active-view-button");
       
        $(".home-chronicle-block-button").addClass("active-view-button");
            // Conditional checks for transferring the active class from block to list buttons
      } else if ($(".home-random-list-button").hasClass("active-view-button")) {
            if ($('.home-chronicle-block-button').hasClass('active-view-button')) {
        $(".home-random-list-button").removeClass("active-view-button");
                $('.home-chronicle-block-button').removeClass('active-view-button');
        $(".home-random-block-button").addClass("active-view-button");
                $('.home-chronicle-list-button').addClass('active-view-button');
      } else if (
            } else if ($('.home-random-block-button').hasClass('active-view-button')) {
        $(".home-alphabetical-list-button").hasClass("active-view-button")
                $('.home-random-block-button').removeClass('active-view-button');
      ) {
                $('.home-random-list-button').addClass('active-view-button');
        $(".home-alphabetical-list-button").removeClass("active-view-button");
            } else if ($('.home-alphabetical-block-button').hasClass('active-view-button')) {
        $(".home-alphabetical-block-button").addClass("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();
            $('.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
    // BLOCK VIEW SORTING BUTTONS
            if ($('.home-chronicle-list-button').hasClass('active-view-button')) {
    $(".home-chronicle-block-button").click(function () {
                $('.home-chronicle-list-button').removeClass('active-view-button');
      sortChronologically();
                $('.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();
      updateLastVisibleCard();
            updateWidthBlockView();
      updateWidthBlockView();
            processEventCards();
      processEventCards();
            updateViews();
      updateViews();
            $('.home-chronicle-block-button').addClass('active-view-button');
      $(".home-chronicle-block-button").addClass("active-view-button");
            $('.home-random-block-button').removeClass('active-view-button');
      $(".home-random-block-button").removeClass("active-view-button");
            $('.home-alphabetical-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();
    $(".home-random-block-button").click(function () {
            updateWidthBlockView();
      randomizeCards(".list-container .card");
            processEventCards();
            updateViews();
            $('.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() {
      updateLastVisibleCard();
            sortAlphabetically('.list-container .card');
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-random-block-button").addClass("active-view-button");
      $(".home-chronicle-block-button").removeClass("active-view-button");
      $(".home-alphabetical-block-button").removeClass("active-view-button");
    });


            updateLastVisibleCard();
    $(".home-alphabetical-block-button").click(function () {
            updateWidthBlockView();
      sortAlphabetically(".list-container .card");
            processEventCards();
            updateViews();
            $('.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
      updateLastVisibleCard();
        $('.home-chronicle-list-button').click(function() {
      updateWidthBlockView();
            sortChronologically();
      processEventCards();
      updateViews();
      $(".home-alphabetical-block-button").addClass("active-view-button");
      $(".home-chronicle-block-button").removeClass("active-view-button");
      $(".home-random-block-button").removeClass("active-view-button");
    });


            updateLastVisibleCard();
    // LIST VIEW SORTING BUTTONS
            updateWidthBlockView();
    $(".home-chronicle-list-button").click(function () {
            processEventCards();
      sortChronologically();
            updateViews();
            $('.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() {
      updateLastVisibleCard();
            randomizeCards('.list-container .card');
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-chronicle-list-button").addClass("active-view-button");
      $(".home-random-list-button").removeClass("active-view-button");
      $(".home-alphabetical-list-button").removeClass("active-view-button");
    });


            updateLastVisibleCard();
    $(".home-random-list-button").click(function () {
            updateWidthBlockView();
      randomizeCards(".list-container .card");
            processEventCards();
            updateViews();
            $('.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() {
      updateLastVisibleCard();
            sortAlphabetically('.list-container .card');
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-random-list-button").addClass("active-view-button");
      $(".home-chronicle-list-button").removeClass("active-view-button");
      $(".home-alphabetical-list-button").removeClass("active-view-button");
    });


            updateLastVisibleCard();
    $(".home-alphabetical-list-button").click(function () {
            updateWidthBlockView();
      sortAlphabetically(".list-container .card");
            processEventCards();
            updateViews();
            $('.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
      updateLastVisibleCard();
        // Initially hide block view sorting buttons and set the default sorted view for list
      updateWidthBlockView();
        $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').hide();
      processEventCards();
        sortChronologically(); // Sort the block view chronologically by default
      updateViews();
        updateLastVisibleCard();
      $(".home-alphabetical-list-button").addClass("active-view-button");
        updateWidthBlockView();
      $(".home-chronicle-list-button").removeClass("active-view-button");
        processEventCards();
      $(".home-random-list-button").removeClass("active-view-button");
        updateViews();
    });
  } else {
    console.log("NOT HOMEPAGE");
    $(".home-list-view").show();
    $(".chronicle-list-button, .list-view-button").addClass(
      "active-view-button"
    );


        $('.list-view-button').click(function() {
    // Initialization and Default Settings
            console.log("List view button clicked.");
    // Initially hide block view sorting buttons and set the default sorted view for list
            $(".list-sorting-buttons").css('display', 'flex');
    $(
            $('.block-sorting-buttons').hide();
      ".chronicle-block-button, .random-block-button, .alphabetical-block-button"
            // Switching view classes
    ).hide();
            $('.home-block-view').removeClass('home-block-view').addClass('home-list-view');
    sortChronologically(); // Sort the block view chronologically by default
            // Additional class switch
    updateLastVisibleCard();
            $('.home-chronicle-block').removeClass('home-chronicle-block').addClass('home-chronicle-list');
    updateWidthBlockView();
            // Toggling visibility of buttons
    processEventCards();
            $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').hide();
    updateViews();
            $('.chronicle-list-button, .random-list-button, .alphabetical-list-button').show();
            updateLastVisibleCard();
            updateWidthBlockView();
            processEventCards();
            updateViews();
       
            // 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() {
    $(".list-view-button").click(function () {
            console.log("Block view button clicked.");
      console.log("List view button clicked.");
            $('.list-sorting-buttons').hide(); // Hide list sorting buttons
      $(".list-sorting-buttons").css("display", "flex");
            $(".block-sorting-buttons").css('display', 'flex');
      $(".block-sorting-buttons").hide();
            $('.home-list-view').removeClass('home-list-view').addClass('home-block-view');
      // Switching view classes
            $('.home-chronicle-list').removeClass('home-chronicle-list').addClass('home-chronicle-block');
      $(".home-block-view")
            $('.chronicle-block-button, .random-block-button, .alphabetical-block-button').show();
        .removeClass("home-block-view")
            $('.chronicle-list-button, .random-list-button, .alphabetical-list-button').hide();
        .addClass("home-list-view");
            updateLastVisibleCard();
      // Additional class switch
            updateWidthBlockView();
      $(".home-chronicle-block")
            processEventCards();
        .removeClass("home-chronicle-block")
            updateViews();
        .addClass("home-chronicle-list");
            $('.list-view-button').removeClass('active-view-button');
      // Toggling visibility of buttons
            $('.block-view-button').addClass('active-view-button');
      $(
        ".chronicle-block-button, .random-block-button, .alphabetical-block-button"
      ).hide();
      $(
        ".chronicle-list-button, .random-list-button, .alphabetical-list-button"
      ).show();
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();


            // Conditional checks for transferring the active class from block to list buttons
      // Remove active class from block view button and add to list view button
            if ($('.chronicle-list-button').hasClass('active-view-button')) {
      $(".block-view-button").removeClass("active-view-button");
                $('.chronicle-list-button').removeClass('active-view-button');
      $(".list-view-button").addClass("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
      // Conditional checks for transferring the active class from block to list buttons
         $('.chronicle-block-button').click(function() {
      if ($(".chronicle-block-button").hasClass("active-view-button")) {
            sortChronologically();
         $(".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");
      }
    });


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


            updateLastVisibleCard();
      // Conditional checks for transferring the active class from block to list buttons
            updateWidthBlockView();
      if ($(".chronicle-list-button").hasClass("active-view-button")) {
            processEventCards();
        $(".chronicle-list-button").removeClass("active-view-button");
            updateViews();
        $(".chronicle-block-button").addClass("active-view-button");
            $('.random-block-button').addClass('active-view-button');
      } else if ($(".random-list-button").hasClass("active-view-button")) {
            $('.chronicle-block-button').removeClass('active-view-button');
        $(".random-list-button").removeClass("active-view-button");
            $('.alphabetical-block-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");
      }
    });


        $('.alphabetical-block-button').click(function() {
    // BLOCK VIEW SORTING BUTTONS
            sortAlphabetically('.list-container .card');
    $(".chronicle-block-button").click(function () {
      sortChronologically();


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


        // LIST VIEW SORTING BUTTONS
    $(".random-block-button").click(function () {
        $('.chronicle-list-button').click(function() {
      randomizeCards(".list-container .card");
            sortChronologically();


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


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


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


        $('.alphabetical-list-button').click(function() {
    // LIST VIEW SORTING BUTTONS
            sortAlphabetically('.list-container .card');
    $(".chronicle-list-button").click(function () {
      sortChronologically();


            updateLastVisibleCard();
      updateLastVisibleCard();
            updateWidthBlockView();
      updateWidthBlockView();
            processEventCards();
      processEventCards();
            updateViews();
      updateViews();
            $('.alphabetical-list-button').addClass('active-view-button');
      $(".chronicle-list-button").addClass("active-view-button");
            $('.chronicle-list-button').removeClass('active-view-button');
      $(".random-list-button").removeClass("active-view-button");
            $('.random-list-button').removeClass('active-view-button');
      $(".alphabetical-list-button").removeClass("active-view-button");
        });
     });
     }
   
    // FILTERS  ---------------------  SECTION //
    // General Filters Toggle Button
    $('.general-toggle').click(function() {
        var filtersDiv = $('#filters');
        var resetButton = $('.reset-button');


        filtersDiv.toggleClass('is-visible');
    $(".random-list-button").click(function () {
      randomizeCards(".list-container .card");


        if (filtersDiv.hasClass('is-visible')) {
      updateLastVisibleCard();
            filtersDiv.css('display', 'grid').hide().slideDown(100);
      updateWidthBlockView();
            $(this).text('[FILTER]');
      processEventCards();
            // Attach click handler to document
      updateViews();
            $(document).on('mousedown.hideFilters', function(event) {
      $(".random-list-button").addClass("active-view-button");
                var isOutsideFilters = !filtersDiv.is(event.target) && filtersDiv.has(event.target).length === 0;
      $(".chronicle-list-button").removeClass("active-view-button");
                var isOnToggle = $(event.target).closest('.general-toggle').length > 0;
      $(".alphabetical-list-button").removeClass("active-view-button");
    });


                if (isOutsideFilters && !isOnToggle) {
    $(".alphabetical-list-button").click(function () {
                    filtersDiv.removeClass('is-visible').slideUp(100, function() {
      sortAlphabetically(".list-container .card");
                        $(this).css('display', 'none');
                    });
                    $('.general-toggle').text('[FILTER]');
                    // Remove the document click handler
                    $(document).off('mousedown.hideFilters');
                }
            });
        } else {
            filtersDiv.slideUp(100, function() {
                $(this).css('display', 'none');
            });
            $(this).text('[FILTER]');
            // Remove the document click handler
            $(document).off('mousedown.hideFilters');
        }


        updateLastVisibleCard();
      updateLastVisibleCard();
        updateWidthBlockView();
      updateWidthBlockView();
        processEventCards();
      processEventCards();
        updateViews();
      updateViews();
      $(".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");
    var resetButton = $(".reset-button");
    filtersDiv.toggleClass("is-visible");


     // Specific Toggle for Filter Sections like TYPE, ENTITY, etc.
     if (filtersDiv.hasClass("is-visible")) {
    $('.open-filter').click(function(event) {
      filtersDiv.css("display", "grid").hide().slideDown(100);
         event.stopPropagation();
      $(this).text("[FILTER]");
      // Attach click handler to document
      $(document).on("mousedown.hideFilters", function (event) {
         var isOutsideFilters =
          !filtersDiv.is(event.target) &&
          filtersDiv.has(event.target).length === 0;
        var isOnToggle = $(event.target).closest(".general-toggle").length > 0;


         var filterType = $(this).closest('.filter').data('filter');
         if (isOutsideFilters && !isOnToggle) {
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card'; // Determine which card type is present
          filtersDiv.removeClass("is-visible").slideUp(100, function () {
   
            $(this).css("display", "none");
        console.log('Filter type:', filterType, 'Card Selector:', cardSelector);
          });
   
          $(".general-toggle").text("[FILTER]");
        $('#values-' + filterType).toggle();
          // Remove the document click handler
   
          $(document).off("mousedown.hideFilters");
        if ($('#values-' + filterType).is(':visible')) {
            $(this).addClass('active-filter');
        } else {
            $(this).removeClass('active-filter');
         }
         }
      
      });
         // Pass the determined card selector to the function
     } else {
        updateLastVisibleCard(cardSelector);
      filtersDiv.slideUp(100, function () {
        updateWidthBlockView(cardSelector);
         $(this).css("display", "none");
        processEventCards(cardSelector);
      });
        updateViews(cardSelector);
      $(this).text("[FILTER]");
      
      // Remove the document click handler
        console.log('Updated views and borders after filter toggle');
      $(document).off("mousedown.hideFilters");
    });
    }
   
 
    function filterCards() {
    updateLastVisibleCard();
        var displayCountsHtml = '';
    updateWidthBlockView();
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card'; // Determine which card type is present
    processEventCards();
      
    updateViews();
        $('.filter .values a[title]').each(function() {
  });
            var anchor = $(this);
 
            var filterValue = anchor.attr('title').toLowerCase();
  // Specific Toggle for Filter Sections like TYPE, ENTITY, etc.
            var count = 0;
  $(".open-filter").click(function (event) {
   
    event.stopPropagation();
            if (anchor.find('button').hasClass('active')) {
 
                $(cardSelector).each(function() {
    var filterType = $(this).closest(".filter").data("filter");
                    var card = $(this);
    var cardSelector = $(".card").length > 0 ? ".card" : ".community-card"; // Determine which card type is present
                    $('.filter').each(function() {
 
                        var filterType = $(this).data('filter');
    console.log("Filter type:", filterType, "Card Selector:", cardSelector);
                        var cardValue = card.find('.' + filterType).text().toLowerCase();
 
                        if (cardValue.indexOf(filterValue) !== -1) {
    $("#values-" + filterType).toggle();
                            count++;
 
                        }
    if ($("#values-" + filterType).is(":visible")) {
                    });
      $(this).addClass("active-filter");
                });
    } else {
   
      $(this).removeClass("active-filter");
                displayCountsHtml += '<span>[' + count + '] ' + filterValue + '</span> ';
    }
 
    // Pass the determined card selector to the function
    updateLastVisibleCard(cardSelector);
    updateWidthBlockView(cardSelector);
    processEventCards(cardSelector);
    updateViews(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++;
             }
             }
          });
         });
         });
      
 
        if (displayCountsHtml) {
        displayCountsHtml +=
            $('.count-filtered-cards').html(displayCountsHtml).show();
          "<span>[" + count + "] " + filterValue + "</span> ";
        } else {
      }
            $('.count-filtered-cards').hide();
     });
        }
 
      
    if (displayCountsHtml) {
        // Apply filtering and pass the determined card selector to the function
      $(".count-filtered-cards").html(displayCountsHtml).show();
        applyFiltering(cardSelector);
    } else {
      
      $(".count-filtered-cards").hide();
        updateLastVisibleCard(cardSelector);
    }
        updateWidthBlockView(cardSelector);
 
        processEventCards(cardSelector);
     // Apply filtering and pass the determined card selector to the function
        updateViews(cardSelector);
    applyFiltering(cardSelector);
      
 
        console.log('Filtering process complete, updated views and borders');
     updateLastVisibleCard(cardSelector);
    }    
    updateWidthBlockView(cardSelector);
   
    processEventCards(cardSelector);
    function applyFiltering() {
    updateViews(cardSelector);
        // Determine which card selector to use based on the elements present in the DOM
 
        var cardSelector = $('.card').length > 0 ? '.card' : '.community-card';
     console.log("Filtering process complete, updated views and borders");
      
  }
        // Apply the logic to the determined card type
 
        $(cardSelector).show().each(function() {
  function applyFiltering() {
            var card = $(this);
    // Determine which card selector to use based on the elements present in the DOM
            var hideCard = false;
    var cardSelector = $(".card").length > 0 ? ".card" : ".community-card";
   
 
            $('.filter').each(function() {
     // Apply the logic to the determined card type
                if (hideCard) return;
    $(cardSelector)
   
      .show()
                var filterType = $(this).data('filter');
      .each(function () {
                var activeFilters = $(this).find('.values a[title] button.active').map(function() {
        var card = $(this);
                    return $(this).parent('a').attr('title').toLowerCase();
        var hideCard = false;
                }).get();
 
   
        $(".filter").each(function () {
                if (activeFilters.length > 0) {
          if (hideCard) return;
                    var cardValue = card.find('.' + filterType).text().toLowerCase();
 
                    var matchesFilter = activeFilters.some(function(filterValue) {
          var filterType = $(this).data("filter");
                        return cardValue.indexOf(filterValue) !== -1;
          var activeFilters = $(this)
                    });
            .find(".values a[title] button.active")
                    if (!matchesFilter) hideCard = true;
            .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() {
        if (hideCard) card.hide();
        // 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)');
  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 to remove active filters
  $(".reset-filter").click(function (event) {
     event.stopPropagation(); // Prevent event bubbling


     // Reset function to remove active filters
     // Remove 'active' class from all filter buttons
     $('.reset-filter').click(function(event) {
     $("#filters .values button").removeClass("active");
        event.stopPropagation(); // Prevent event bubbling
    $(".open-filter").removeClass("active-filter");


        // Remove 'active' class from all filter buttons
    // Reset and hide the filter counts
        $('#filters .values button').removeClass('active');
    $(".count-filtered-cards").text("").hide();
        $('.open-filter').removeClass('active-filter');


        // Reset and hide the filter counts
    filterCards(); // Reapply filtering based on the updated active buttons
        $('.count-filtered-cards').text('').hide();


        filterCards(); // Reapply filtering based on the updated active buttons
    // Update other UI elements as needed, excluding the general toggle button
    updateLastVisibleCard();
    updateWidthBlockView();
    processEventCards();
    updateViews();
  });


        // Update other UI elements as needed, excluding the general toggle button
  $("#filters .values button").click(function () {
        updateLastVisibleCard();
    console.log("Filter is clicked!!!");
        updateWidthBlockView();
    $(this).toggleClass("active");
        processEventCards();
    filterCards(); // Re-apply the filters based on the updated active buttons
        updateViews();
    });
   
    $('#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();
    updateLastVisibleCard();
        updateWidthBlockView();
    updateWidthBlockView();
        processEventCards();
    processEventCards();
        updateViews();
    updateViews();
    });
  });


    // Hide filters when window is scrolled
  // Hide filters when window is scrolled
    $(window).on('scroll', function() {
  $(window).on("scroll", function () {
        var filtersDiv = $('#filters');
    var filtersDiv = $("#filters");


        if (filtersDiv.hasClass('is-visible')) {
    if (filtersDiv.hasClass("is-visible")) {
            filtersDiv.removeClass('is-visible').slideUp(100, function() {
      filtersDiv.removeClass("is-visible").slideUp(100, function () {
                $(this).css('display', 'none');
        $(this).css("display", "none");
                // The filter reset code has been removed to keep the filters active
        // The filter reset code has been removed to keep the filters active
            });
      });
            $('.general-toggle').text('[FILTER]'); // Update the toggle button text
      $(".general-toggle").text("[FILTER]"); // 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
  // MODAL ARTICLE  ---------------------  SECTION //
    // Find all image containers within the article content and extract the necessary information
  // Format paragraphs
    $('.article-images .image-container').each(function() {
  function formatParagraphs(text) {
        var img = $(this).find('img');
    var paragraphs = text.split("\n").filter(function (p) {
        var captionDiv = $(this).find('div[class^="caption-image"]');
      return p.trim() !== "";
        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
     });
     });
    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) {
  if (images.length > 0) {
        setupImageToggle(images); // Call the setupImageToggle function with the images array
    setupImageToggle(images); // Call the setupImageToggle function with the images array
        updateImageLabel(1, images.length); // Set the label for the first image immediately
    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)
        );
     }
     }


     function setupImageToggle(images) {
     // Attach click handlers only if navigation is enabled
        var currentIndex = 0;
    if (enableNavigation) {
        var enableNavigation = images.length > 1; // Enable navigation only if there is more than one image
      $("#article-content").on("click", ".next-arrow", function () {
   
        showImage((currentIndex + 1) % images.length);
        function showImage(index) {
      });
            currentIndex = index;
 
            var image = images[currentIndex];
      $("#article-content").on("click", ".prev-arrow", function () {
            updateImageLabel(currentIndex + 1, images.length);
        showImage((currentIndex - 1 + images.length) % 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>' +
                    '<div class="image-container">' +
                        '<div class="arrows-and-image">' +
                            navigationHtml +
                            '<img src="' + image.src + '" alt="' + image.alt + '">' +
                        '</div>' +
                        '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
                    '</div>' +
                '</div>';
     }
     }
      
 
     function updateImageLabel(currentIndex, totalImages) {
     // Display the first image
        var imageLabel = currentIndex + '/' + totalImages + ' IMAGES';
     showImage(currentIndex);
        $('#article-content .article-label-image').text(imageLabel);
  }
    }
 
   
  function getImageHtml(image, currentIndex, totalImages, enableNavigation) {
    $('.caption-image1').each(function() {
    var imageLabel = currentIndex + 1 + "/" + totalImages + " IMAGES";
        // Split the caption at each <br> tag and wrap each line in a span
 
        var htmlContent = $(this).html();
    // Render navigation arrows based on the enableNavigation flag
        var lines = htmlContent.split('<br>');
    var navigationHtml = enableNavigation
        var wrappedLines = lines.map(function(line) {
      ? '<div class="prev-arrow"><</div><div class="next-arrow">></div>'
            return '<span class="caption-line">' + line + '</span>';
      : "";
        });
 
        var newHtml = wrappedLines.join('<br>');
    return (
        $(this).html(newHtml);
      '<div class="image-navigation">' +
      '<p class="article-label-image">' +
      imageLabel +
      "</p>" +
      '<div class="image-container">' +
      '<div class="arrows-and-image">' +
      navigationHtml +
      '<img src="' +
      image.src +
      '" alt="' +
      image.alt +
      '">' +
      "</div>" +
      '<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>");
     function setShowArticleRotationEffect() {
     $(this).html(newHtml);
        const offset = 20;
  });
        const showArticle = document.querySelector('#show-article');
 
        const h = showArticle.clientHeight;
  function setShowArticleRotationEffect() {
        const theta = -Math.atan(offset/h);
    const offset = 20;
        const a = Math.cos(theta);
    const showArticle = document.querySelector("#show-article");
        const b = Math.sin(theta);
    const h = showArticle.clientHeight;
        const c = -Math.sin(theta);
    const theta = -Math.atan(offset / h);
        const d = Math.cos(theta);
    const a = Math.cos(theta);
        const showArticleBefore = document.querySelector('#show-article-before');
    const b = Math.sin(theta);
        const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
    const c = -Math.sin(theta);
        showArticleBefore.style.transform = transformValue;
    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 openEvent(element, event) {
  function openModal(cardElement, event) {
        event.stopPropagation();
    event.stopPropagation();
        event.preventDefault();
    var pageTitle = $(cardElement).data("page") || null; // e.g. "090"
      
     window.currentEntryTitle = pageTitle;
        var url = $(element).find('.link a').attr('href');
 
         if (url) {
    var isRelatedArticle = $(cardElement).hasClass("related-article");
             window.open(url, '_blank').focus();
    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 subjectHtml = $(cardElement).find(".related-article-subject").html();
      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">';


    function openModal(cardElement, event) {
      if (externalPdfURL) {
         event.stopPropagation();
         articleContentHtml +=
         var pageTitle = $(cardElement).data('page') || null; // e.g. "090"
          '<a href="' +
        window.currentEntryTitle = pageTitle;
          externalPdfURL +
          '" target="_blank" class="pdf-link-icon">[PDF<span class="text-symbol">⤴</span>]</a>';
      }
      if (externalLinkURL) {
         articleContentHtml +=
          '<a href="' +
          externalLinkURL +
          '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</a>';
      }


        var isRelatedArticle = $(cardElement).hasClass('related-article');
      // Close the .link-pdf div
        showArticleWrapper.css('display', 'block');
      articleContentHtml += "</div>";
      articleContentHtml += "</div>"; // Close the container div


        // Clear existing content in modal
      // Append type, entity, discipline, and subject details
        $('#article-title').empty();
      articleContentHtml +=
         $('#article-content').empty();
         '<p class="article-type">' +
          
         typeHtml +
         if (isRelatedArticle) {
         "</p>" +
            // Handle card elements (existing logic)
        '<div class="article-metadata">' +
            var cardImages = [];
        '<div class="article-metadata-column">' +
            for (var i = 1; i <= 5; i++) {
        '<p class="article-metadata-label">Entity</p>' +
                var imageClass = '.related-article-image' + i;
        '<p class="article-metadata-value">' +
                var captionClass = '.related-article-caption-image' + i;
        entity +
                var imageElem = $(cardElement).find(imageClass + ' img');
        "</p>" +
   
        "</div>" +
                if (imageElem.length) {
        '<div class="article-metadata-column">' +
                    var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
        '<p class="article-metadata-label">Discipline</p>' +
                    cardImages.push({
        '<p class="article-metadata-value">' +
                        link: $(cardElement).find(imageClass + ' a').attr('href'),
        discipline +
                        src: imageElem.attr('src'),
        "</p>" +
                        alt: imageElem.attr('alt'),
        "</div>" +
                        caption: captionText,
        '<div class="article-metadata-column">' +
                        captionClass: 'related-article-caption-image' + i
        '<p class="article-metadata-label">Subject(s)</p>' +
                    });
        '<p class="article-metadata-value">' +
                }
        subjectHtml +
            }
        "</p>" +
           
        "</div>" +
            if (cardImages.length > 1) {
        "</div>";
                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 subjectHtml = $(cardElement).find('.related-article-subject').html();
            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
      // Add images if any
            $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
      if (cardImages.length > 0) {
             var articleContentHtml = '<div class="article-title-link">';
        var initialImage = cardImages[0]; // Use the first image initially
             articleContentHtml += '<p class="article-title">' + title + '</p>';
        var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
             // Create a div that will wrap the links
        articleContentHtml +=
            articleContentHtml += '<div class="link-pdf">';
          '<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>";


            if (externalPdfURL) {
      $("#article-content").html(articleContentHtml);
                articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF<span class="text-symbol">⤴</span>]</a>';
    } else {
            }
      // Handle card elements (existing logic)
            if (externalLinkURL) {
      var cardImages = [];
                articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</a>';
      for (var i = 1; i <= 5; i++) {
            }
        var imageClass = ".image" + i;
        var captionClass = ".caption-image" + i;
        var imageElem = $(cardElement).find(imageClass + " img");


            // Close the .link-pdf div
        if (imageElem.length) {
            articleContentHtml += '</div>';
          var captionText = $(cardElement)
             articleContentHtml += '</div>'; // Close the container div
             .find(imageClass + " " + captionClass)
   
             .text();
            // Append type, entity, discipline, and subject details
          cardImages.push({
            articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
            link: $(cardElement)
             '<div class="article-metadata">' +
              .find(imageClass + " a")
                '<div class="article-metadata-column">' +
              .attr("href"),
                    '<p class="article-metadata-label">Entity</p>' +
            src: imageElem.attr("src"),
                    '<p class="article-metadata-value">' + entity + '</p>' +
            alt: imageElem.attr("alt"),
                '</div>' +
            caption: captionText,
                '<div class="article-metadata-column">' +
            captionClass: "caption-image" + i,
                    '<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">' + subjectHtml + '</p>' +
                '</div>' +
            '</div>';


            // Add images if any
      if (cardImages.length > 1) {
            if (cardImages.length > 0) {
        setupImageToggle(cardImages);
                var initialImage = cardImages[0]; // Use the first image initially
      }
                var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
      var entryNumber = $(cardElement).find(".entry-number").text();
                articleContentHtml +=
      var title = $(cardElement).find(".title").text();
                    '<div class="article-images">' +
      var peopleHtml = $(cardElement).find(".people").html();
                        getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
      var typeHtml = $(cardElement).find(".type").html();
                    '</div>';
      var externalPdfURL = $(cardElement).find(".pdf a").attr("href");
            }
      var externalLinkURL = $(cardElement).find(".link a").attr("href");
            // Add non-image content (description, reflection, etc.)  
      var entity = $(cardElement).find(".entity").text();
            articleContentHtml +=  
      var discipline = $(cardElement).find(".discipline").text();
            (description ? '<p class="article-label-description">Description</p>' +
      var subjectHtml = $(cardElement).find(".subject").html();
            '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
      var description = $(cardElement).find(".description").html();
            (reflection ? '<p class="article-label-reflection">Reflection</p>' +
      var reflection = $(cardElement).find(".reflection").html();
            '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
      var quote = $(cardElement).find(".quote").text();
            (quote ? '<p class="article-label-quote">Quote</p>' +
      var externalReferenceHtml = $(cardElement)
            '<p class="article-quote">' + quote + '</p>' : '') +
        .find(".external-reference")
            '<p class="article-label-modification-date">Added on</p>' +
        .html();
            '<div class="article-modification-date">' + modificationDate + '</div>';
      var modificationDate = $(cardElement).find(".modification-date").text();
   
      var relatedArticlesHtml = $(cardElement).find(".related-articles").html();
            $('#article-content').html(articleContentHtml);


        } else {
       $("#article-title").html(
            // Handle card elements (existing logic)
        '<p class="article-entry-number">' +
            var cardImages = [];
          entryNumber +
            for (var i = 1; i <= 5; i++) {
          '</p><p class="article-people">' +
                var imageClass = '.image' + i;
          peopleHtml +
                var captionClass = '.caption-image' + i;
          "</p>"
                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 subjectHtml = $(cardElement).find('.subject').html();
            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">';
      var articleContentHtml = '<div class="article-title-link">';
            articleContentHtml += '<p class="article-title">' + title + '</p>';
      articleContentHtml += '<p class="article-title">' + title + "</p>";


            // Create a div that will wrap the links
      // Create a div that will wrap the links
            articleContentHtml += '<div class="link-pdf">';
      articleContentHtml += '<div class="link-pdf">';
            if (externalPdfURL) {
      if (externalPdfURL) {
                articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF<span class="text-symbol">⤴</span>]</a>';
        articleContentHtml +=
            }
          '<a href="' +
            if (externalLinkURL) {
          externalPdfURL +
                articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</a>';
          '" target="_blank" class="pdf-link-icon">[PDF<span class="text-symbol">⤴</span>]</a>';
            }
      }
            // Close the .link-pdf div
      if (externalLinkURL) {
            articleContentHtml += '</div>';
        articleContentHtml +=
            articleContentHtml += '</div>'; // Close the new div
          '<a href="' +
   
          externalLinkURL +
            // Append type, entity, discipline, and subject details
          '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</a>';
            articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
      }
            '<div class="article-metadata">' +
      // Close the .link-pdf div
                '<div class="article-metadata-column">' +
      articleContentHtml += "</div>";
                    '<p class="article-metadata-label">Entity</p>' +
      articleContentHtml += "</div>"; // Close the new div
                    '<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">' + subjectHtml + '</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
      // Append type, entity, discipline, and subject details
         if ($('.home-chronicle-list').is(':visible')) {
      articleContentHtml +=
            $('.home-list-view').each(function() {
         '<p class="article-type">' +
                var currentWidth = $(this).width();  // Get the current width
        typeHtml +
                $(this).data('originalWidth', currentWidth); // Store the original width
        "</p>" +
                $(this).css('width', 'calc(60% - 2px)');
        '<div class="article-metadata">' +
            });   
        '<div class="article-metadata-column">' +
           
        '<p class="article-metadata-label">Entity</p>' +
            // Modify the .type elements within .home-chronicle-list
        '<p class="article-metadata-value">' +
            $('.home-chronicle-list .type').each(function() {
        entity +
                var currentLeft = $(this).css('left'); // Get the current left value
        "</p>" +
                $(this).data('originalLeft', currentLeft); // Store the original left value
        "</div>" +
                $(this).css('left', '85%');
        '<div class="article-metadata-column">' +
             });
        '<p class="article-metadata-label">Discipline</p>' +
         } else if ($('.home-chronicle-block').is(':visible')) {
        '<p class="article-metadata-value">' +
             $('.home-chronicle-block div.list-container').each(function() {
        discipline +
                var currentWidth = $(this).width();  // Get the current width
        "</p>" +
                $(this).css('width', 'calc(60% - 0px)');  // Set the new width as 30% of the current width
        "</div>" +
            });
        '<div class="article-metadata-column">' +
            $('.home-chronicle-block div.list-container div.card').each(function() {
        '<p class="article-metadata-label">Subject(s)</p>' +
                var currentWidth = $(this).width();  // Get the current width
        '<p class="article-metadata-value">' +
                $(this).css('width', 'calc(33.333% - 0px)');  // Set the new width as 30% of the current width
        subjectHtml +
            });           
        "</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>";


        // Apply the fade-out effect to both #list and #list-list elements
      $("#article-content").html(articleContentHtml);
        $('.list-container').addClass('fade-out');
      $("#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();
      }
     }
     }


     // closeModal function
     // Check which view is active and set the width accordingly
     function closeModal() {
     if ($(".home-chronicle-list").is(":visible")) {
        if ($('.home-chronicle-list').is(':visible')) {
      $(".home-list-view").each(function () {
            $('.home-list-view').css('width', '100%');
        var currentWidth = $(this).width(); // Get the current width
            $('.home-chronicle-list div.list-container div.card div.type').css('left', '90%');
        $(this).data("originalWidth", currentWidth); // Store the original width
        } else if ($('.home-chronicle-block').is(':visible')) {
        $(this).css("width", "calc(60% - 2px)");
            updateWidthBlockView();
      });
         }
 
         showArticleWrapper.hide();
      // 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
      });
     }
     }


     $('.card').on('click', function(event) {
     // Apply the fade-out effect to both #list and #list-list elements
        // Check if the click event is originating from a link within .people or .type, or any other specific area
    $(".list-container").addClass("fade-out");
        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;
  // closeModal function
        }
  function closeModal() {
   
    if ($(".home-chronicle-list").is(":visible")) {
        // Prevent further event handling if the card has the 'event' class
      $(".home-list-view").css("width", "100%");
        if ($(this).hasClass('event')) {
      $(".home-chronicle-list div.list-container div.card div.type").css(
            event.stopImmediatePropagation();
        "left",
            openEvent(this, event);
        "90%"
            $('.list-container').removeClass('fade-out');
      );
            closeModal();
    } else if ($(".home-chronicle-block").is(":visible")) {
        } else {
      updateWidthBlockView();
            // Handle cards without the 'event' class
    }
            openModal(this, event);
     showArticleWrapper.hide();
            setShowArticleRotationEffect();
  }
        }
     });


    $('#show-article-wrapper').on('click', '.related-article', function(event) {
  $(".card").on("click", function (event) {
        openModal(this, event); // Call openModal when a related-article is clicked
    // Check if the click event is originating from a link within .people or .type, or any other specific area
        setShowArticleRotationEffect();
    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;
     }


     function cacheBust(url) {
     // Prevent further event handling if the card has the 'event' class
        return url + (url.indexOf('?') > -1 ? '&' : '?') + '_=' + Date.now();
    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();
     }
     }
  });


    // Kill any previous print handlers
  $("#show-article-wrapper").on("click", ".related-article", function (event) {
    $(document).off('click.print', '#print-button');
    openModal(this, event); // Call openModal when a related-article is clicked
    setShowArticleRotationEffect();
  });


    // Warm the font cache in the PARENT document (no Date.now; you already version via ?v=)
  // --- PRINT HELPERS ---
    function preloadFontForPrint() {
  // Warm the font cache in the *parent* document.
        var link = document.createElement('link');
  function preloadFontForPrint() {
        link.rel = 'preload';
    var link = document.createElement("link");
        link.as = 'font';
    link.rel = "preload";
        link.type = 'font/woff2';
    link.as = "font";
        link.href = '/fonts/HALColant-TextRegular.woff2?v=20250820';
    link.type = "font/woff2";
        link.crossOrigin = 'anonymous';
    link.href = "/fonts/HALColant-TextRegular.woff2?v=20250820";
        document.head.appendChild(link);
    link.crossOrigin = "anonymous";
        // keep it; no need to remove immediately
    document.head.appendChild(link);
     }
    // keep it; no need to remove
  }
 
  // Simple cache buster
  function cacheBust(url) {
     return url + (url.indexOf("?") > -1 ? "&" : "?") + "_=" + Date.now();
  }
 
  // Kill any previous print handlers
  $(document).off("click.print", "#print-button");
 
  $(document).on("click.print", "#print-button", function () {
    // debounce to avoid double/racing prints
    var $btn = $("#print-button");
    if ($btn.data("busy")) return;
    $btn.data("busy", true);


    $(document).on('click.print', '#print-button', function () {
     preloadFontForPrint();
     preloadFontForPrint();


     var title = window.currentEntryTitle; // e.g. "090"
     var title = window.currentEntryTitle; // e.g. "090"
     if (!title) { console.warn('[print] no currentEntryTitle'); window.print(); return; }
     if (!title) {
      console.warn("[print] no currentEntryTitle");
      window.print();
      $btn.data("busy", false);
      return;
    }


     var pageUrl = mw.util.getUrl(title);
     var pageUrl = mw.util.getUrl(title);
     var pageUrlFresh = pageUrl + (pageUrl.indexOf('?') > -1 ? '&' : '?') + '_=' + Date.now();
     var pageUrlFresh = cacheBust(pageUrl);
     console.log('[print] fetching page HTML:', pageUrlFresh);
     console.log("[print] fetching page HTML:", pageUrlFresh);


     $.get(pageUrlFresh).done(function (html) {
     $.get(pageUrlFresh)
         var $tmp = $('<div>').html(html);
      .done(function (html) {
         var $print = $tmp.find('.print-only').first();
         var $tmp = $("<div>").html(html);
         console.log('[print] .print-only found:', $print.length);
         var $print = $tmp.find(".print-only").first();
        if (!$print.length) { console.warn('[print] no .print-only found; fallback print'); window.print(); return; }
         console.log("[print] .print-only found:", $print.length);


         var iframe = document.createElement('iframe');
        if (!$print.length) {
         iframe.style.position = 'fixed';
          console.warn("[print] no .print-only found; fallback print");
         iframe.style.right = '0';
          window.print();
         iframe.style.bottom = '0';
          $btn.data("busy", false);
         iframe.style.width = '0';
          return;
         iframe.style.height = '0';
        }
         iframe.style.border = '0';
 
        // Build hidden iframe
         var iframe = document.createElement("iframe");
         iframe.style.position = "fixed";
         iframe.style.right = "0";
         iframe.style.bottom = "0";
         iframe.style.width = "0";
         iframe.style.height = "0";
         iframe.style.border = "0";
         document.body.appendChild(iframe);
         document.body.appendChild(iframe);


         var doc = iframe.contentDocument || iframe.contentWindow.document;
         var doc = iframe.contentDocument || iframe.contentWindow.document;
         doc.open();
         doc.open();
         doc.write('<!doctype html><html><head><meta charset="utf-8"><title>Print</title></head><body></body></html>');
         doc.write(
          '<!doctype html><html><head><meta charset="utf-8"><title>Print</title></head><body></body></html>'
        );
         doc.close();
         doc.close();


         // 1) Inject PRINT CSS with onload so we can await it
         // Ensure relative URLs (fonts/images) resolve inside iframe
         var printCssUrl = '/index.php?title=MediaWiki:Print.css&action=raw&ctype=text/css';
         var base = doc.createElement("base");
         var printCssFresh = printCssUrl + (printCssUrl.indexOf('?') > -1 ? '&' : '?') + '_=' + Date.now();
        base.href = location.origin + "/";
         doc.head.appendChild(base);


         var linkCss = doc.createElement('link');
        // Inject PRINT CSS (cache-busted) and await it
         linkCss.rel = 'stylesheet';
        var printCssUrl =
          "/index.php?title=MediaWiki:Print.css&action=raw&ctype=text/css";
        var printCssFresh = cacheBust(printCssUrl);
 
         var linkCss = doc.createElement("link");
         linkCss.rel = "stylesheet";
         linkCss.href = printCssFresh;
         linkCss.href = printCssFresh;


         var cssLoaded = new Promise(function(resolve, reject){
         var cssLoaded = new Promise(function (resolve) {
        linkCss.onload = function(){ resolve(); };
          linkCss.onload = function () {
        linkCss.onerror = function(){ console.warn('[print] CSS failed to load'); resolve(); }; // don’t block print entirely
            resolve();
          };
          linkCss.onerror = function () {
            console.warn("[print] CSS failed to load");
            resolve();
          }; // don't block
         });
         });


         // 2) Preload the font INSIDE the iframe too (best chance Chrome has it in time)
         // Preload the font *inside* iframe (Chrome becomes much happier)
         var linkFont = doc.createElement('link');
         var linkFont = doc.createElement("link");
         linkFont.rel = 'preload';
         linkFont.rel = "preload";
         linkFont.as = 'font';
         linkFont.as = "font";
         linkFont.type = 'font/woff2';
         linkFont.type = "font/woff2";
         linkFont.href = '/fonts/HALColant-TextRegular.woff2?v=20250820';
         linkFont.href = "/fonts/HALColant-TextRegular.woff2?v=20250820";
         linkFont.crossOrigin = 'anonymous';
         linkFont.crossOrigin = "anonymous";


         doc.head.appendChild(linkFont);
         doc.head.appendChild(linkFont);
         doc.head.appendChild(linkCss);
         doc.head.appendChild(linkCss);


         // 3) Inject the printable HTML
         // Inject the printable HTML
         doc.body.innerHTML = $print.prop('outerHTML');
         doc.body.innerHTML = $print.prop("outerHTML");


         // 4) Wait for images (decode) + fonts + css
         // Wait helpers
         function waitImages() {
         function waitImages() {
        var imgs = Array.from(doc.images || []);
          var imgs = Array.from(doc.images || []);
        if (!imgs.length) return Promise.resolve();
          if (!imgs.length) return Promise.resolve();
        return Promise.all(imgs.map(function(img){
          return Promise.all(
            // decode() is best; fallback to load/error
            imgs.map(function (img) {
            if (img.decode) {
              if (img.decode) return img.decode().catch(function () {}); // ignore decode failures
            return img.decode().catch(function(){ /* ignore */ });
              return new Promise(function (res) {
            }
                if (img.complete) return res();
            return new Promise(function(res){ if (img.complete) return res(); img.onload = img.onerror = function(){ res(); }; });
                img.onload = img.onerror = function () {
        }));
                  res();
                };
              });
            })
          );
         }
         }


         function waitFonts(timeoutMs) {
         function waitFonts(timeoutMs) {
        // If fonts API missing (older engine), resolve immediately
          if (!doc.fonts || !doc.fonts.ready) return Promise.resolve();
        if (!doc.fonts || !doc.fonts.ready) return Promise.resolve();
          var ready = doc.fonts.ready;
        var ready = doc.fonts.ready;
          var t = new Promise(function (res) {
        if (typeof Promise.race !== 'function') return ready;
            setTimeout(res, timeoutMs || 1200);
         // timeout guard so we never hang
          });
         var t = new Promise(function(res){ setTimeout(res, timeoutMs || 1200); });
          return Promise.race([ready, t]);
        return Promise.race([ready, t]);
        }
 
         // **Load the specific face** so Chrome actually uses it
         function waitSpecificFont(timeoutMs) {
          if (!doc.fonts || !doc.fonts.load) return Promise.resolve();
          var p = Promise.all([
            doc.fonts.load('400 16px "HALColant-TextRegular"'),
            doc.fonts.load('normal 16px "HALColant-TextRegular"'),
          ]);
          var t = new Promise(function (res) {
            setTimeout(res, timeoutMs || 1200);
          });
          return Promise.race([p, t]);
         }
         }


         function nextFrame() {
         function nextFrame() {
        return new Promise(function(res){ (iframe.contentWindow.requestAnimationFrame || setTimeout)(res, 0); });
          return new Promise(function (res) {
            (iframe.contentWindow.requestAnimationFrame || setTimeout)(res, 0);
          });
         }
         }
        // Extra cleanup guard (Chrome sometimes delays afterprint)
        iframe.contentWindow.onafterprint = function () {
          setTimeout(function () {
            if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
          }, 100);
          $btn.data("busy", false);
        };


         Promise.all([
         Promise.all([
        cssLoaded,
          cssLoaded,
        waitImages(),
          waitImages(),
        waitFonts(1200),
          waitFonts(1200),
        nextFrame(), // settle layout
          waitSpecificFont(1200),
         ]).then(function(){
          nextFrame(), // settle layout
        try { iframe.contentWindow.focus(); iframe.contentWindow.print(); }
         ]).then(function () {
        finally { setTimeout(function () { document.body.removeChild(iframe); }, 500); }
          try {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
          } finally {
            // fallback cleanup in case onafterprint doesn't fire
            setTimeout(function () {
              if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
              $btn.data("busy", false);
            }, 1000);
          }
         });
         });
      })
      .fail(function (xhr) {
        console.warn(
          "[print] fetch failed:",
          xhr && xhr.status,
          xhr && xhr.statusText
        );
        window.print();
        $("#print-button").data("busy", false);
      });
  });
  // 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;


     }).fail(function (xhr) {
     if (!areFiltersActive) {
         console.warn('[print] fetch failed:', xhr && xhr.status, xhr && xhr.statusText);
      if (isOutsideWrapper && !isOnCard) {
         window.print();
         $(".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);


    // Close modal with Close button
      // Remove empty elements in the entire card
    $('#close-button').on('click', function () {
      $(this)
        $('.list-container').removeClass('fade-out');
        .find("*")
         closeModal();
        .each(function () {
          if ($(this).is(":empty") || $(this).html().trim() === "<br>") {
            $(this).remove();
          }
         });
     });
     });
  }


    // Close modal and remove fade out also when clicking outside of card
  // NRS ENTRIES  ---------------------  SECTION //
    $(document).on('mousedown', function (event) {
  console.log("Document ready!"); // Check if document ready event is triggered
        var isOutsideWrapper = !showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0;
 
        var isOnCard = $(event.target).closest('.card, .list-card').length > 0;
  if ($("#show-article-wrapper-entry").length) {
       
    console.log("Element with id 'show-article-wrapper-entry' found!"); // Check if the target element exists
        if (!areFiltersActive) {
            if (isOutsideWrapper && !isOnCard) {
                $('.list-container').removeClass('fade-out');
                showArticleWrapper.css('display', 'none');
                closeModal();  // Use closeModal() for cleanup
            }
        }
    });


     // Hover effect for scrolling
     // Your existing formatParagraphs function
     $('#show-article-wrapper').hover(function () {
     function formatParagraphs(text) {
        // On hover, enable scrolling on #show-article-wrapper
      var paragraphs = text.split("\n").filter(function (p) {
        $(this).css('overflow-y', 'auto');
         return p.trim() !== "";
         $(this).css('overflow-x', 'hidden');
      });
    }, function () {
      return paragraphs
        // On hover out, disable scrolling on #show-article-wrapper
         .map(function (p) {
         $(this).css('overflow-y', 'hidden');
          return "<p>" + p.trim() + "</p>";
         $(this).css('overflow-x', 'hidden');
         })
     });
        .join("");
     }


     // Format community card, when in the Community Entries page
     // Check if ".article-description" exists and format its text
     if ($('.community-card').length) {
     if ($(".article-description").length) {
        formatCommunityCardDescriptions();
      var descriptionText = $(".article-description").text();
      var formattedDescription = formatParagraphs(descriptionText);
      $(".article-description").html(formattedDescription); // Set the formatted text
     }
     }


     function formatCommunityCardDescriptions() {
     // Check if ".article-reflection" exists and format its text
        $('.community-card').each(function() {
    if ($(".article-reflection").length) {
            // Format paragraphs in community-description
      var reflectionText = $(".article-reflection").text();
            var descriptionContainer = $(this).find('.community-description');
      var formattedReflection = formatParagraphs(reflectionText);
            var rawDescription = descriptionContainer.text();
      $(".article-reflection").html(formattedReflection); // Set the formatted 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();
                }
            });
        });
     }
     }
   
   }
    // NRS ENTRIES  ---------------------   SECTION //
    console.log("Document ready!"); // Check if document ready event is triggered
   
    if ($("#show-article-wrapper-entry").length) {
        console.log("Element with id 'show-article-wrapper-entry' found!"); // Check if the target element exists
       
        // Your existing formatParagraphs function
        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('');
        }


        // Check if ".article-description" exists and format its text
  // SEARCH  ---------------------  SECTION //
        if ($(".article-description").length) {
  // Check if div with class "mw-search-results-info" exists
            var descriptionText = $(".article-description").text();
  if ($(".mw-search-results-info").length) {
            var formattedDescription = formatParagraphs(descriptionText);
    // Select the child <p> element and check its content
            $(".article-description").html(formattedDescription); // Set the formatted text
    var $paragraph = $(".mw-search-results-info > p");
        }
    var currentText = $paragraph.text().trim();


        // Check if ".article-reflection" exists and format its text
    // Check if the current text is not "There were no results matching the query."
        if ($(".article-reflection").length) {
    if (currentText !== "There were no results matching the query.") {
            var reflectionText = $(".article-reflection").text();
      // Overwrite the content with "Search results"
            var formattedReflection = formatParagraphs(reflectionText);
      $paragraph.text("Pages related to your Search");
            $(".article-reflection").html(formattedReflection); // Set the formatted text
        }
     }
     }
  }
  // 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");


    // SEARCH  ---------------------  SECTION //
     // Check if the title has already been encountered
     // Check if div with class "mw-search-results-info" exists
     if (encounteredTitles[title]) {
     if ($('.mw-search-results-info').length) {
      // Hide the duplicate search result
        // Select the child <p> element and check its content
      $(this).hide();
        var $paragraph = $('.mw-search-results-info > p');
    } else {
        var currentText = $paragraph.text().trim();
      // Mark the title as encountered
       
      encounteredTitles[title] = true;
        // 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
  // Remove unwanted white spaces between lines
    $('.mw-search-result-heading').each(function() {
  $(".mw-search-results-container")
        // Get the title of the current search result
    .contents()
        var title = $(this).find('a').attr('title');
    .filter(function () {
      return this.nodeType === 3; // Filter text nodes
    })
    .remove();


        // Check if the title has already been encountered
  // Edits regarding Search Results
        if (encounteredTitles[title]) {
  // Define the new form HTML as a string
            // Hide the duplicate search result
  var newFormHtml =
            $(this).hide();
    '<form action="/index.php" id="searchform">' +
        } else {
    '<div id="simpleSearchSpecial" class="right-inner-addon">' +
            // Mark the title as encountered
    "<span>[ Search ]</span>" +
            encounteredTitles[title] = true;
    '<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>" +
    // Remove unwanted white spaces between lines
    "</form>";
    $('.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();


    // Check if #submit button exists and add event listener if it does
  // Replace the div with id="searchText" with the new form
    var submitButton = document.querySelector('#submit');
  $("#searchText").replaceWith(newFormHtml);
    console.log("Submit button:", submitButton);


    if (submitButton) {
  // Target the button based on its complex class structure
        console.log("#submit button found.");
  $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();


        // Add click event listener
  // Check if #submit button exists and add event listener if it does
        submitButton.addEventListener('click', function(event) {
  var submitButton = document.querySelector("#submit");
            console.log("Submit button clicked.");
  console.log("Submit button:", submitButton);
            event.preventDefault(); // Prevent the default link behavior


            var email = 'submit@softwear.directory';
  if (submitButton) {
            var subject = 'new entry to the softwear directory';
    console.log("#submit button found.");
            var body = '☺ the following content could be interesting for the directory:\n\n' +
                      '[ author / creator ]\n\n' +
                      '---\n\n' +
                      '[ title ]\n\n' +
                      '---\n\n' +
                      '[ why should it be included? ]\n\n' +
                      '---\n\n' +
                      '[ link or pdf ]\n\n' +
                      '---\n\n' +
                      '[ your name / contact / social ]\n\n' +
                      '---';


            var mailtoLink = 'mailto:' + encodeURIComponent(email) +
    // Add click event listener
                            '?subject=' + encodeURIComponent(subject) +
    submitButton.addEventListener("click", function (event) {
                            '&body=' + encodeURIComponent(body).replace(/%20/g, ' ');
      console.log("Submit button clicked.");
      event.preventDefault(); // Prevent the default link behavior


            window.location.href = mailtoLink;
      var email = "submit@softwear.directory";
         });
      var subject = "new entry to the softwear directory";
    }
      var body =
        "☺ the following content could be interesting for the directory:\n\n" +
        "[ author / creator ]\n\n" +
         "---\n\n" +
        "[ title ]\n\n" +
        "---\n\n" +
        "[ why should it be included? ]\n\n" +
        "---\n\n" +
        "[ link or pdf ]\n\n" +
        "---\n\n" +
        "[ your name / contact / social ]\n\n" +
        "---";


    // Tooltip for "wander elsewhere..." on .card.event
      var mailtoLink =
    var tooltip = $('<div class="tooltip-popup">wander elsewhere...</div>').appendTo('body');
        "mailto:" +
        encodeURIComponent(email) +
        "?subject=" +
        encodeURIComponent(subject) +
        "&body=" +
        encodeURIComponent(body).replace(/%20/g, " ");


    $('.card.event').on('mouseenter', function () {
      window.location.href = mailtoLink;
        tooltip.css('opacity', 1);
     });
     });
  }
  // Tooltip for "wander elsewhere..." on .card.event
  var tooltip = $(
    '<div class="tooltip-popup">wander elsewhere...</div>'
  ).appendTo("body");


    $('.card.event').on('mousemove', function (e) {
  $(".card.event").on("mouseenter", function () {
        var offsetX = 10; // right of cursor
    tooltip.css("opacity", 1);
        var offsetY = -30; // above cursor
  });
        tooltip.css({
            left: e.clientX + offsetX + 'px',
            top: e.clientY + offsetY + 'px'
        });
    });


    $('.card.event').on('mouseleave', function () {
  $(".card.event").on("mousemove", function (e) {
        tooltip.css('opacity', 0);
    var offsetX = 10; // right of cursor
    var offsetY = -30; // above cursor
    tooltip.css({
      left: e.clientX + offsetX + "px",
      top: e.clientY + offsetY + "px",
     });
     });
  });


    mw.loader.using('mediawiki.api', function () {
  $(".card.event").on("mouseleave", function () {
        // Only run on form edit page
    tooltip.css("opacity", 0);
        if (mw.config.get('wgCanonicalSpecialPageName') === 'FormEdit') {
  });
            new mw.Api().post({
                action: 'purge',
                titles: 'Main'
            }).fail(function (err) {
                // Optional: leave a minimal fallback error log
                console.warn("Main page purge failed", err);
            });
        }
    });


  mw.loader.using("mediawiki.api", function () {
    // Only run on form edit page
    if (mw.config.get("wgCanonicalSpecialPageName") === "FormEdit") {
      new mw.Api()
        .post({
          action: "purge",
          titles: "Main",
        })
        .fail(function (err) {
          // Optional: leave a minimal fallback error log
          console.warn("Main page purge failed", err);
        });
    }
  });
});
});

Revision as of 13:22, 26 August 2025

$(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
  });

  // Loop through each card to format related articles
  cards.each(function () {
    // Check if the card has related articles
    var relatedArticles = $(this).find(".related-articles");
    if (relatedArticles.length > 0) {
      // Get all the related article elements
      var relatedArticleElements = relatedArticles.find(".related-article");

      // Create an array to store unique related articles
      var uniqueArticles = [];

      // Loop through each related article element
      relatedArticleElements.each(function () {
        // Remove <p> tags from the article
        $(this).find("p").remove();

        // Convert the article HTML to a string
        var articleHTML = $(this)[0].outerHTML;

        // Check if the article HTML already exists in the uniqueArticles array
        if ($.inArray(articleHTML, uniqueArticles) === -1) {
          // If it doesn't exist, add it to the uniqueArticles array
          uniqueArticles.push(articleHTML);
        }
      });

      // Clear the content of the related articles container
      relatedArticles.empty();

      // Append the unique related articles back to the container
      relatedArticles.append(uniqueArticles.join(""));
    }
  });

  // 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);
        }
      }
    );
  }

  function processEventCards() {
    $(".card.event").each(function () {
      var $card = $(this);
      var existingContainer = $card.find(".container-people-date");

      // Create container if missing
      if (existingContainer.length === 0) {
        existingContainer = $('<div class="container-people-date"></div>');
        $card.append(existingContainer); // temp placement
      }

      // Detach people and date
      var people = $card.find(".people").detach();
      var date = $card.find(".date").detach();

      // BLOCK VIEW (gallery)
      if ($card.closest(".home-chronicle-block").length) {
        existingContainer.append(people).append(date);

        // Place container after title
        if (!existingContainer.is($card.find(".title").next())) {
          $card.find(".title").after(existingContainer);
        }

        // LIST VIEW
      } else if ($card.closest(".home-chronicle-list").length) {
        // Only append .people into container
        existingContainer.empty().append(people);

        // Place container before title
        $card.find(".title").before(existingContainer);

        // Place date after title
        $card.find(".title").after(date);
      }
    });
  }

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

    $(".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();

      // 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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();

    $(".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();

      // 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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();
      $(".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();
      $(".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");
    var resetButton = $(".reset-button");

    filtersDiv.toggleClass("is-visible");

    if (filtersDiv.hasClass("is-visible")) {
      filtersDiv.css("display", "grid").hide().slideDown(100);
      $(this).text("[FILTER]");
      // Attach click handler to document
      $(document).on("mousedown.hideFilters", function (event) {
        var isOutsideFilters =
          !filtersDiv.is(event.target) &&
          filtersDiv.has(event.target).length === 0;
        var isOnToggle = $(event.target).closest(".general-toggle").length > 0;

        if (isOutsideFilters && !isOnToggle) {
          filtersDiv.removeClass("is-visible").slideUp(100, function () {
            $(this).css("display", "none");
          });
          $(".general-toggle").text("[FILTER]");
          // Remove the document click handler
          $(document).off("mousedown.hideFilters");
        }
      });
    } else {
      filtersDiv.slideUp(100, function () {
        $(this).css("display", "none");
      });
      $(this).text("[FILTER]");
      // Remove the document click handler
      $(document).off("mousedown.hideFilters");
    }

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

  // 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);

    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);

    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 to remove active filters
  $(".reset-filter").click(function (event) {
    event.stopPropagation(); // Prevent event bubbling

    // Remove 'active' class from all filter buttons
    $("#filters .values button").removeClass("active");
    $(".open-filter").removeClass("active-filter");

    // Reset and hide the filter counts
    $(".count-filtered-cards").text("").hide();

    filterCards(); // Reapply filtering based on the updated active buttons

    // Update other UI elements as needed, excluding the general toggle button
    updateLastVisibleCard();
    updateWidthBlockView();
    processEventCards();
    updateViews();
  });

  $("#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();
  });

  // Hide filters when window is scrolled
  $(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("[FILTER]"); // 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>" +
      '<div class="image-container">' +
      '<div class="arrows-and-image">' +
      navigationHtml +
      '<img src="' +
      image.src +
      '" alt="' +
      image.alt +
      '">' +
      "</div>" +
      '<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();
    var pageTitle = $(cardElement).data("page") || null; // e.g. "090"
    window.currentEntryTitle = pageTitle;

    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 subjectHtml = $(cardElement).find(".related-article-subject").html();
      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<span class="text-symbol">⤴</span>]</a>';
      }
      if (externalLinkURL) {
        articleContentHtml +=
          '<a href="' +
          externalLinkURL +
          '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</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">' +
        subjectHtml +
        "</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 subjectHtml = $(cardElement).find(".subject").html();
      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<span class="text-symbol">⤴</span>]</a>';
      }
      if (externalLinkURL) {
        articleContentHtml +=
          '<a href="' +
          externalLinkURL +
          '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</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">' +
        subjectHtml +
        "</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();
  });

  // --- PRINT HELPERS ---
  // Warm the font cache in the *parent* document.
  function preloadFontForPrint() {
    var link = document.createElement("link");
    link.rel = "preload";
    link.as = "font";
    link.type = "font/woff2";
    link.href = "/fonts/HALColant-TextRegular.woff2?v=20250820";
    link.crossOrigin = "anonymous";
    document.head.appendChild(link);
    // keep it; no need to remove
  }

  // Simple cache buster
  function cacheBust(url) {
    return url + (url.indexOf("?") > -1 ? "&" : "?") + "_=" + Date.now();
  }

  // Kill any previous print handlers
  $(document).off("click.print", "#print-button");

  $(document).on("click.print", "#print-button", function () {
    // debounce to avoid double/racing prints
    var $btn = $("#print-button");
    if ($btn.data("busy")) return;
    $btn.data("busy", true);

    preloadFontForPrint();

    var title = window.currentEntryTitle; // e.g. "090"
    if (!title) {
      console.warn("[print] no currentEntryTitle");
      window.print();
      $btn.data("busy", false);
      return;
    }

    var pageUrl = mw.util.getUrl(title);
    var pageUrlFresh = cacheBust(pageUrl);
    console.log("[print] fetching page HTML:", pageUrlFresh);

    $.get(pageUrlFresh)
      .done(function (html) {
        var $tmp = $("<div>").html(html);
        var $print = $tmp.find(".print-only").first();
        console.log("[print] .print-only found:", $print.length);

        if (!$print.length) {
          console.warn("[print] no .print-only found; fallback print");
          window.print();
          $btn.data("busy", false);
          return;
        }

        // Build hidden iframe
        var iframe = document.createElement("iframe");
        iframe.style.position = "fixed";
        iframe.style.right = "0";
        iframe.style.bottom = "0";
        iframe.style.width = "0";
        iframe.style.height = "0";
        iframe.style.border = "0";
        document.body.appendChild(iframe);

        var doc = iframe.contentDocument || iframe.contentWindow.document;
        doc.open();
        doc.write(
          '<!doctype html><html><head><meta charset="utf-8"><title>Print</title></head><body></body></html>'
        );
        doc.close();

        // Ensure relative URLs (fonts/images) resolve inside iframe
        var base = doc.createElement("base");
        base.href = location.origin + "/";
        doc.head.appendChild(base);

        // Inject PRINT CSS (cache-busted) and await it
        var printCssUrl =
          "/index.php?title=MediaWiki:Print.css&action=raw&ctype=text/css";
        var printCssFresh = cacheBust(printCssUrl);

        var linkCss = doc.createElement("link");
        linkCss.rel = "stylesheet";
        linkCss.href = printCssFresh;

        var cssLoaded = new Promise(function (resolve) {
          linkCss.onload = function () {
            resolve();
          };
          linkCss.onerror = function () {
            console.warn("[print] CSS failed to load");
            resolve();
          }; // don't block
        });

        // Preload the font *inside* iframe (Chrome becomes much happier)
        var linkFont = doc.createElement("link");
        linkFont.rel = "preload";
        linkFont.as = "font";
        linkFont.type = "font/woff2";
        linkFont.href = "/fonts/HALColant-TextRegular.woff2?v=20250820";
        linkFont.crossOrigin = "anonymous";

        doc.head.appendChild(linkFont);
        doc.head.appendChild(linkCss);

        // Inject the printable HTML
        doc.body.innerHTML = $print.prop("outerHTML");

        // Wait helpers
        function waitImages() {
          var imgs = Array.from(doc.images || []);
          if (!imgs.length) return Promise.resolve();
          return Promise.all(
            imgs.map(function (img) {
              if (img.decode) return img.decode().catch(function () {}); // ignore decode failures
              return new Promise(function (res) {
                if (img.complete) return res();
                img.onload = img.onerror = function () {
                  res();
                };
              });
            })
          );
        }

        function waitFonts(timeoutMs) {
          if (!doc.fonts || !doc.fonts.ready) return Promise.resolve();
          var ready = doc.fonts.ready;
          var t = new Promise(function (res) {
            setTimeout(res, timeoutMs || 1200);
          });
          return Promise.race([ready, t]);
        }

        // **Load the specific face** so Chrome actually uses it
        function waitSpecificFont(timeoutMs) {
          if (!doc.fonts || !doc.fonts.load) return Promise.resolve();
          var p = Promise.all([
            doc.fonts.load('400 16px "HALColant-TextRegular"'),
            doc.fonts.load('normal 16px "HALColant-TextRegular"'),
          ]);
          var t = new Promise(function (res) {
            setTimeout(res, timeoutMs || 1200);
          });
          return Promise.race([p, t]);
        }

        function nextFrame() {
          return new Promise(function (res) {
            (iframe.contentWindow.requestAnimationFrame || setTimeout)(res, 0);
          });
        }

        // Extra cleanup guard (Chrome sometimes delays afterprint)
        iframe.contentWindow.onafterprint = function () {
          setTimeout(function () {
            if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
          }, 100);
          $btn.data("busy", false);
        };

        Promise.all([
          cssLoaded,
          waitImages(),
          waitFonts(1200),
          waitSpecificFont(1200),
          nextFrame(), // settle layout
        ]).then(function () {
          try {
            iframe.contentWindow.focus();
            iframe.contentWindow.print();
          } finally {
            // fallback cleanup in case onafterprint doesn't fire
            setTimeout(function () {
              if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
              $btn.data("busy", false);
            }, 1000);
          }
        });
      })
      .fail(function (xhr) {
        console.warn(
          "[print] fetch failed:",
          xhr && xhr.status,
          xhr && xhr.statusText
        );
        window.print();
        $("#print-button").data("busy", false);
      });
  });

  // 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();
          }
        });
    });
  }

  // NRS ENTRIES  ---------------------   SECTION //
  console.log("Document ready!"); // Check if document ready event is triggered

  if ($("#show-article-wrapper-entry").length) {
    console.log("Element with id 'show-article-wrapper-entry' found!"); // Check if the target element exists

    // Your existing formatParagraphs function
    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("");
    }

    // Check if ".article-description" exists and format its text
    if ($(".article-description").length) {
      var descriptionText = $(".article-description").text();
      var formattedDescription = formatParagraphs(descriptionText);
      $(".article-description").html(formattedDescription); // Set the formatted text
    }

    // Check if ".article-reflection" exists and format its text
    if ($(".article-reflection").length) {
      var reflectionText = $(".article-reflection").text();
      var formattedReflection = formatParagraphs(reflectionText);
      $(".article-reflection").html(formattedReflection); // Set the formatted text
    }
  }

  // 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();

  // Check if #submit button exists and add event listener if it does
  var submitButton = document.querySelector("#submit");
  console.log("Submit button:", submitButton);

  if (submitButton) {
    console.log("#submit button found.");

    // Add click event listener
    submitButton.addEventListener("click", function (event) {
      console.log("Submit button clicked.");
      event.preventDefault(); // Prevent the default link behavior

      var email = "submit@softwear.directory";
      var subject = "new entry to the softwear directory";
      var body =
        "☺ the following content could be interesting for the directory:\n\n" +
        "[ author / creator ]\n\n" +
        "---\n\n" +
        "[ title ]\n\n" +
        "---\n\n" +
        "[ why should it be included? ]\n\n" +
        "---\n\n" +
        "[ link or pdf ]\n\n" +
        "---\n\n" +
        "[ your name / contact / social ]\n\n" +
        "---";

      var mailtoLink =
        "mailto:" +
        encodeURIComponent(email) +
        "?subject=" +
        encodeURIComponent(subject) +
        "&body=" +
        encodeURIComponent(body).replace(/%20/g, " ");

      window.location.href = mailtoLink;
    });
  }

  // Tooltip for "wander elsewhere..." on .card.event
  var tooltip = $(
    '<div class="tooltip-popup">wander elsewhere...</div>'
  ).appendTo("body");

  $(".card.event").on("mouseenter", function () {
    tooltip.css("opacity", 1);
  });

  $(".card.event").on("mousemove", function (e) {
    var offsetX = 10; // right of cursor
    var offsetY = -30; // above cursor
    tooltip.css({
      left: e.clientX + offsetX + "px",
      top: e.clientY + offsetY + "px",
    });
  });

  $(".card.event").on("mouseleave", function () {
    tooltip.css("opacity", 0);
  });

  mw.loader.using("mediawiki.api", function () {
    // Only run on form edit page
    if (mw.config.get("wgCanonicalSpecialPageName") === "FormEdit") {
      new mw.Api()
        .post({
          action: "purge",
          titles: "Main",
        })
        .fail(function (err) {
          // Optional: leave a minimal fallback error log
          console.warn("Main page purge failed", err);
        });
    }
  });
});
Retrieved from "https://softwear.directory/index.php?title=MediaWiki:Common.js&oldid=5114"