MediaWiki:Mobile.js: Difference between revisions

Latest revision as of 09:40, 15 July 2024

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

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

	// Select the divs and wrap them in a new div with class 'container-nav-links'
    $('.head-nav.head-col, .head-links.head-col').wrapAll('<div class="container-nav-links"></div>');
    
	// Detach the div with the class .header-date
    var detachedHeaderDate = $('.header-date').detach();

    // Append the detached .header-date div under the div with the id #header-container
    $('#header-container').append(detachedHeaderDate);
    
	// Find the div with the class .home-block-view
    var targetDiv = $('.home-block-view');

    // Create a new div with the message for mobile viewing and insert it before the target div
    var messageDiv = $('<div><p class="message-for-mobile">This directory is not mobile ready (yet). Please switch to desktop mode for a better viewing experience.</p></div>');
    targetDiv.before(messageDiv);

    // Create another new div for the latest 5 entries and insert it before the .home-block-view element
    var latestEntriesDiv = $('<div class="latest-5-entries"><p>Latest 5 added entries</p></div>');
    targetDiv.before(latestEntriesDiv);
	
	sortAndDisplayLastFiveCards();

	// Attach click event handler to the "View more entries" link
    $("#view-more-link").click(function() {
        // Open the custom popup
        openCustomPopup();
    });

	// Function to open the custom popup
	function openCustomPopup() {
		// Create custom popup HTML
		var popupHTML = '<div id="custom-popup">' +
						'<div class="popup-content">' +
						'<button id="close-popup">[ CLOSE ]</button>' +
						'<p>To view this content, please switch to desktop view!</p>' +
						'</div>' +
						'</div>';

		// Append custom popup to the body
		$("body").append(popupHTML);

		// Show custom popup
		$("#custom-popup").fadeIn();
        $("body").children().not("#custom-popup").addClass("fade-out-alert");
	}

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

		// Filter out cards with the 'event' class
		cards = cards.filter(function(card) {
			return !$(card).hasClass('event');
		});

		// Sort the remaining cards in descending order based on the .entry-number
		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
		});

		// Hide all cards initially
		$('.list-container .card').hide();

		// Append only the last 5 sorted cards (excluding .event cards) back to the container and show them
		var lastFiveCards = cards.slice(0, 5);
		$.each(lastFiveCards, function(index, item) {
			$(item).show(); // Ensure the card is visible
			$('.list-container').append(item); // Re-append the card to the container
		});

		// Insert the "View more entries >>" link after all the cards
		$('.list-container').after('<div id="view-more-footer"><div id="view-more-link">View more entries >></div></div>');
	}

	$('body').show(); // Only if you want to show some loading indicator

	$(".header-about a").contents().unwrap();

    // Intercept clicks on disabled links
	$(".header-authors a, .header-community a, .header-people a, .people a, .type a").click(function(event) {
		event.preventDefault(); // Prevent default action (following the link)
		openCustomPopup();
	});

    // Replace logo text in head-box with a space
    $('.head-box div.logo p').replaceWith('<br>');

	// Close custom popup when close button is clicked
	$("body").on("click", "#close-popup", function() {
		$("#custom-popup").fadeOut(function() {
			$(this).remove(); // Remove popup from DOM after fading out
		});
		$("body").children().removeClass("fade-out-alert"); // Remove fade-out class from elements except the popup
	});

    // Variable to keep track of whether .about-hide is visible
    var isAboutVisible = false;

    // Attach click event to toggle .about-hide
    $(".header-about").click(function(){
        // Toggle the visibility of .about-hide based on the current state
        if (isAboutVisible) {
            $(".about-hide").hide();
            isAboutVisible = false;
        } else {
            $(".about-hide").show();
            isAboutVisible = true;
        }
        
        // Toggle the underline class
        $(this).toggleClass('underline');
    });

	// 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 openModal(cardElement, event) {
        event.stopPropagation(); // Prevent the event from bubbling up
        console.log("openModal function called.");
	    showArticleWrapper.css('display', 'block');

	    // Clear existing content in modal
	    $('#article-title').empty();
	    $('#article-content').empty();
	    
		// Handle card elements (existing logic)
    var cardImages = [];
    for (var i = 1; i <= 5; i++) {
        var imageClass = '.image' + i;
        var captionClass = '.caption-image' + i;
        var imageElem = $(cardElement).find(imageClass + ' img');

        if (imageElem.length) {
            var captionText = $(cardElement).find(imageClass + ' ' + captionClass).text();
            cardImages.push({
                link: $(cardElement).find(imageClass + ' a').attr('href'),
                src: imageElem.attr('src'),
                alt: imageElem.attr('alt'),
                caption: captionText,
                captionClass: 'caption-image' + i
            });
        }
    }
		
		if (cardImages.length > 1) {
			setupImageToggle(cardImages);
		}
		var entryNumber = $(cardElement).find('.entry-number').text();
		var title = $(cardElement).find('.title').text();
		var peopleHtml = $(cardElement).find('.people').html();
		var typeHtml = $(cardElement).find('.type').html(); 
		var externalPdfURL = $(cardElement).find('.pdf a').attr('href');       
		var externalLinkURL = $(cardElement).find('.link a').attr('href');
		var entity = $(cardElement).find('.entity').text();
		var discipline = $(cardElement).find('.discipline').text();
		var subject = $(cardElement).find('.subject').text();
		var description = $(cardElement).find('.description').html();
		var reflection = $(cardElement).find('.reflection').html();
		var quote = $(cardElement).find('.quote').text();
		var externalReferenceHtml = $(cardElement).find('.external-reference').html();
		var modificationDate = $(cardElement).find('.modification-date').text();
		var relatedArticlesHtml = $(cardElement).find('.related-articles').html();

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

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

		// Create a div that will wrap the links
		articleContentHtml += '<div class="link-pdf">';
		if (externalPdfURL) {
			articleContentHtml += '<a href="' + externalPdfURL + '" target="_blank" class="pdf-link-icon">[PDF]</a>';
		}
		if (externalLinkURL) {
			articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon">[WEB]</a>';
		}
		// Close the .link-pdf div
		articleContentHtml += '</div>';
		articleContentHtml += '</div>'; // Close the new div

		// Append type, entity, discipline, and subject details
		articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
		'<div class="article-metadata">' +
			'<div class="article-metadata-column">' +
				'<p class="article-metadata-label">Entity</p>' +
				'<p class="article-metadata-value">' + entity + '</p>' +
			'</div>' +
			'<div class="article-metadata-column">' +
				'<p class="article-metadata-label">Discipline</p>' +
				'<p class="article-metadata-value">' + discipline + '</p>' +
			'</div>' +
			'<div class="article-metadata-column">' +
				'<p class="article-metadata-label">Subject(s)</p>' +
				'<p class="article-metadata-value">' + subject + '</p>' +
			'</div>' +
		'</div>';
		// Add images if any
		if (cardImages.length > 0) {
			var initialImage = cardImages[0]; // Use the first image initially
			var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
			articleContentHtml +=
				'<div class="article-images">' +
					getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
				'</div>';
		}
		// Add non-image content (description, reflection, etc.)    
		articleContentHtml += 
		(description ? '<p class="article-label-description">Description</p>' +
		'<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
		(reflection ? '<p class="article-label-reflection">Reflection</p>' +
		'<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
		(externalReferenceHtml ? '<p class="article-label-external-reference">References</p>' +
		'<p class="article-external-reference">' + externalReferenceHtml + '</p>' : '') +
		(quote ? '<p class="article-label-quote">Quote</p>' +
		'<p class="article-quote">' + quote + '</p>' : '') +
		'<p class="article-label-modification-date">Added on</p>' +
		'<div class="article-modification-date">' + modificationDate + '</div>';

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

    }

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

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