MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.js (view source)

Revision as of 14:47, 28 February 2024

13,297 bytes removed ,  28 February 2024
no edit summary
No edit summary
Tag: Reverted
No edit summary
Tag: Reverted
Line 1: Line 1:
$(document).ready(function () {
$(document).ready(function () {
var areFiltersActive = false;
     var communityFeatured = $('#community-featured');
     var communityFeatured = $('#community-featured');
     var communityFeaturedBlock1 = $('#community-featured-block-1');
     var communityListFeatured = $('#community-list-featured');
    var communityFeaturedBlock2 = $('#community-featured-block-2');
     var cards = $('.card');
    var communityFeaturedBlock3 = $('#community-featured-block-3');
    var communityFeaturedList1 = $('#community-featured-list-1');
    var communityFeaturedList2 = $('#community-featured-list-2');
     var communityFeaturedList3 = $('#community-featured-list-3');
     var filteredCards = $('.filtered-list-item');
     var filteredCards = $('.filtered-list-item');
     var showArticleWrapper = $('#show-article-wrapper');
     var showArticleWrapper = $('#show-article-wrapper');
     var list = $('#list');
     var list = $('#list');
     var listList = $('#list-list');
     var listList = $('#list-list');
     var filteredListItems = $('#list .filtered-list-item, #list-block-1 .filtered-list-item, #list-block-2 .filtered-list-item, #list-block-3 .filtered-list-item');
     var filteredListItems = $('#list .filtered-list-item'); // Selecting filtered-list-items in #list
     var listLists = [$('#list'), $('#list-block-1'), $('#list-block-2'), $('#list-block-3'), $('#list-list'), $('#list-list-1'), $('#list-list-2'), $('#list-list-3')]; // Store jQuery objects in an array
     var originalListWidth = list.width(); // Store the original width for #list
var originalWidths = listLists.map(function(list) {
    var originalListListWidth = listList.width(); // Store the original width for #list-list
    return list.width();
});
      
      
     updateCommunityFeaturedPosition('block', '1');
     // Initial check to set the visibility based on the current state of filters
    updateFeaturedVisibility();
      
      
     // Insert the community featured element after the second card
     if (communityFeatured.length && filteredCards.length >= 2) {
if (communityFeatured.length && filteredCards.length >= 2) {
        // Detach and insert the community featured element after the second card
    console.log("Community Featured element and at least two filtered cards found.");
        communityFeatured.detach();
    communityFeatured.detach();
        filteredCards.eq(1).after(communityFeatured);
    filteredCards.eq(1).after(communityFeatured);
    communityFeatured.show();
    console.log("Community Featured element has been moved after the second filtered card.");
} else {
    if (!communityFeatured.length) {
        console.log("No Community Featured element found.");
    }
    if (filteredCards.length < 2) {
        console.log("Less than two filtered cards found. Found: ", filteredCards.length);
    }
}


    function updateCommunityFeaturedPosition(view, section) {
        // Show the community-featured element after positioning it
    // Only proceed if filters are not active
        communityFeatured.show();
    if (!areFiltersActive) {
        // Hide all communityFeatured elements initially
        $('[id^="community-featured-"]').hide();
   
        // Determine the appropriate communityFeatured element based on the current view and section
        var communityFeatured;
        if (view === 'block') {
            communityFeatured = $('#community-featured-block-' + section);
        } else if (view === 'list') {
            communityFeatured = $('#community-featured-list-' + section);
        }
   
        // Position the appropriate communityFeatured element after the second card if it exists
        if (communityFeatured.length) {
            var filteredCards = communityFeatured.closest('.list-container').find('.filtered-list-item');
            if (filteredCards.length >= 2) {
                communityFeatured.detach();
                filteredCards.eq(1).after(communityFeatured);
                communityFeatured.show();
            }
        }
    }
     }
     }


    // Check if the specific element exists on the page
// Check if we are on a page that requires community card formatting
    if ($('#show-article-wrapper-entry').length > 0 || $('#show-article-wrapper').length > 0) {
if ($('.community-card').length) {
        var images = []; // Initialize an empty array to store the images
    formatCommunityCardDescriptions();
}


         // Find all image containers within the article content and extract the necessary information
    if (communityListFeatured.length && filteredCards.length >= 4) {
         $('.article-images .image-container').each(function() {
         // Detach and insert the community featured element after the second card
            var img = $(this).find('img');
         communityListFeatured.detach();
            var captionDiv = $(this).find('div[class^="caption-image"]');
        filteredCards.eq(3).after(communityListFeatured);
            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) {
         // Show the community-featured element after positioning it
            setupImageToggle(images); // Call the setupImageToggle function with the images array
        communityListFeatured.show();
            updateImageLabel(1, images.length); // Set the label for the first image immediately
        }
     }
     }
      
      
     // Using delegated event handling for both #list, #list-list and their variations
     // Using delegated event handling for both #list and #list-list
$('#list, #list-list, #list-block-1, #list-block-2, #list-block-3, #list-list-1, #list-list-2, #list-list-3').on('mousedown', '.filtered-value-option', function(event) {
$('#list, #list-list').on('mousedown', '.filtered-value-option', function(event) {
    console.log("Filter clicked within context:", this);
    console.log("Filter clicked within context:", this);
    // Check context and hide the corresponding communityFeatured element
    if ($(this).closest('#list').length) {
    var context = $(this).closest('[id]').attr('id'); // Get the closest parent with an ID
        console.log("Context: #list");
    switch (context) {
        console.log("Before hiding, Community Featured display:", communityFeatured.css('display'));
        case 'list':
        console.log("After hiding, Community Featured display:", communityFeatured.css('display'));
            communityFeatured.hide();
    } else if ($(this).closest('#list-list').length) {
            break;
        console.log("Context: #list-list");
        case 'list-block-1':
        console.log("Before hiding, Community List Featured display:", communityListFeatured.css('display'));
            communityFeaturedBlock1.hide();
        console.log("After hiding, Community List Featured display:", communityListFeatured.css('display'));
            break;
        case 'list-block-2':
            communityFeaturedBlock2.hide();
            break;
        case 'list-block-3':
            communityFeaturedBlock3.hide();
            break;
        case 'list-list-1':
            communityFeaturedList1.hide();
            break;
        case 'list-list-2':
            communityFeaturedList2.hide();
            break;
        case 'list-list-3':
            communityFeaturedList3.hide();
            break;
        default:
            // If the context does not match any case, you can log it or handle it as needed
            console.log("Unknown context:", context);
    }
    }
Line 123: Line 56:
});
});


    // Format paragraphs
 
     function formatParagraphs(text) {
     function formatParagraphs(text) {
    var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
    var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' });
Line 129: Line 62:
}
}
    // Format community card, when in the Community Entries page
if ($('.community-card').length) {
    formatCommunityCardDescriptions();
}
function formatCommunityCardDescriptions() {
function formatCommunityCardDescriptions() {
    console.log("Formatting community card descriptions");
    console.log("Formatting community card descriptions");
Line 159: Line 87:
     var filtersDiv = $('.filtered-filters');
     var filtersDiv = $('.filtered-filters');


    // Open and Close button for filters
     if (toggleButton.length && filtersDiv.length) {
     if (toggleButton.length && filtersDiv.length) {
        console.log("Button and Filters div found with jQuery.");
         toggleButton.on('click', function(event) {
         toggleButton.on('click', function(event) {
             event.preventDefault();
             event.preventDefault();
Line 175: Line 104:
             }
             }
         });
         });
     }  
     } else {
 
        console.log("Button or Filters div not found with jQuery.");
     // Function to check if filters are cleared for given selectors and update visibility of corresponding community elements
    }
function updateCommunityElementsVisibility(selectors, communityElements) {
   
    for (var i = 0; i < selectors.length; i++) {
    $('.button-open-nrs').click(function() {
        var selector = selectors[i];
        var queryDiv = $('.entry-nrs-query');
        var communityElement = communityElements[i]; // Access the corresponding community element
        if (queryDiv.css('display') === 'none') {
            queryDiv.css('display', 'flex'); // Set to flex when showing
        } else {
            queryDiv.css('display', 'none'); // Set to none when hiding
        }
    });
      
// Function to check if filters are cleared and update visibility of community elements
function checkFiltersCleared(selector, communityElement) {
    var checkedFilters = $(selector + ' .filtered-value-option input[type="checkbox"]:checked');
    console.log("Checked filters count in " + selector + ":", checkedFilters.length);
        var checkedFilters = $(selector + ' .filtered-value-option input[type="checkbox"]:checked');
    if (checkedFilters.length === 0) {
        console.log("Checked filters count in " + selector + ":", checkedFilters.length);
        console.log("All filters are cleared in " + selector);
        communityElement.show();
        // If no filters are checked, show the community element associated with this selector
    } else {
        if (checkedFilters.length === 0) {
        console.log("Some filters are still active in " + selector);
            console.log("All filters are cleared in " + selector);
        communityElement.hide(); // Hide the element if any filters are active
            communityElement.show();
        } else {
            console.log("Some filters are still active in " + selector);
            communityElement.hide(); // Hide the community element if any filters are active
        }
    }
    }
}
}


// Event delegation for filter changes in block view
$('#list').on('change', '.filtered-value-option input[type="checkbox"]', function() {
    checkFiltersCleared('#list', communityFeatured); // Call the function directly without delay
});
// Event delegation for filter changes in list view
$('#list-list').on('change', '.filtered-value-option input[type="checkbox"]', function() {
    checkFiltersCleared('#list-list', communityListFeatured); // Call the function directly without delay
});


// Initial checks
checkFiltersCleared('#list', communityFeatured);
checkFiltersCleared('#list-list', communityListFeatured);


    // Initial checks
// Function to check if all filters are cleared and return boolean
    var selectors = [
function areFiltersCleared(selector) {
    '#list',
    var checkedFilters = $(selector + ' .filtered-value-option input[type="checkbox"]:checked');
    '#list-block-1',
    return checkedFilters.length === 0;
    '#list-block-2',
}
    '#list-block-3',
    '#list-list-1',
    '#list-list-2',
    '#list-list-3'
];
var communityElements = [
    $('#community-featured'),
    $('#community-featured-block-1'),
    $('#community-featured-block-2'),
    $('#community-featured-block-3'),
    $('#community-featured-list-1'),
    $('#community-featured-list-2'),
    $('#community-featured-list-3')
];
 
    // Call the function to initially set the visibility based on filters
    updateCommunityElementsVisibility(selectors, communityElements);
 
    // You can also call this function in response to filter changes or page events where filters might be modified
    $('#list, #list-block-1, #list-block-2, #list-block-3, #list-list-1, #list-list-2, #list-list-3').on('change', '.filtered-value-option input[type="checkbox"]', function() {
        areFiltersActive = $('.filtered-value-option input[type="checkbox"]:checked').length > 0;
    updateCommunityElementsVisibility(selectors, communityElements);
    });
 
 
// Function to open the modal and adjust the list
// Function to open the modal and adjust the list
function openModal(cardElement, event) {
function openModal(cardElement, event) {
Line 237: Line 160:
    showArticleWrapper.css('display', 'block');
    showArticleWrapper.css('display', 'block');


    // Set new width using .each() to iterate over the jQuery objects
    var wrapperWidth = showArticleWrapper.outerWidth(true);
$.each(listLists, function(index, list) {
    console.log('Wrapper width:', wrapperWidth);
    list.css('cssText', 'width: 60% !important;');
    var adjustment = 25; // Adjust this value as needed to close the gap
});
    list.width(originalListWidth - wrapperWidth + adjustment).css('margin-right', (wrapperWidth - adjustment) + 'px');
        // Adjust width of filtered-list-items in #list
    listList.width(originalListListWidth - wrapperWidth + adjustment).css('margin-right', (wrapperWidth - adjustment) + 'px');
    filteredListItems.css('width', 'calc(33.333% - 0px)');
    // Adjust width of filtered-list-items in #list
    filteredListItems.css('width', 'calc(33.3% - 2px)');
     
     
    // Hide communityFeatured
    // Hide communityFeatured
    $('[id^="community-featured"]').hide();
    communityFeatured.hide();
    communityListFeatured.hide();
    // Clear existing content in modal
    // Clear existing content in modal
Line 252: Line 178:
     
     
    if (isRelatedArticle) {
    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
        // Handle related-article elements
        var entryNumber = $(cardElement).find('.related-article-entry-number').text();
        var entryNumber = $(cardElement).find('.related-article-entry-number').text();
        var peopleHtml = $(cardElement).find('.related-article-people').html();
        var peopleHtml = $(cardElement).find('.people').html();
        var title = $(cardElement).find('.related-article-title').text();
        var title = $(cardElement).find('.related-article-title').text();
        var typeHtml = $(cardElement).find('.related-article-type').html();
        var typeHtml = $(cardElement).find('.type').html();
            var externalLinkURL = $(cardElement).find('.related-article-link a').attr('href');
        var entity = $(cardElement).find('.related-article-entity').text();
        // Debug logs
        var discipline = $(cardElement).find('.related-article-discipline').text();
        console.log('Related Article - Entry Number:', entryNumber);
        var subject = $(cardElement).find('.related-article-subject').text();
        console.log('Related Article - People:', people);
        var description = $(cardElement).find('.related-article-description').html();
        console.log('Related Article - Title:', title);
        var reflection = $(cardElement).find('.related-article-reflection').html();
        console.log('Related Article - Type:', type);
        var quote = $(cardElement).find('.related-article-quote').text();
        var modificationDate = $(cardElement).find('.related-article-modification-date').text();
 
        // Update modal content for related-article
        // Update modal content for related-article
             $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
             $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
        var articleContentHtml = '<div class="article-title-link">';
        var articleContentHtml = '<div class="article-title-link">';
        articleContentHtml += '<p class="article-title">' + title + '</p>';
        articleContentHtml += '<p class="article-title">' + title + '</p>';
        if (externalLinkURL) {
            articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon"><img src="/images/6/6d/Link-arrow-new.png" alt="Link"></a>';
        }
        articleContentHtml += '</div>'; // Close the new div
        // Append type, entity, discipline, and subject details
        articleContentHtml += '<p class="article-type">' + typeHtml + '</p>' +
        '<div class="article-metadata">' +
            '<div class="article-metadata-column">' +
                '<p class="article-metadata-label">Entity</p>' +
                '<p class="article-metadata-value">' + entity + '</p>' +
            '</div>' +
            '<div class="article-metadata-column">' +
                '<p class="article-metadata-label">Discipline</p>' +
                '<p class="article-metadata-value">' + discipline + '</p>' +
            '</div>' +
            '<div class="article-metadata-column">' +
                '<p class="article-metadata-label">Subject(s)</p>' +
                '<p class="article-metadata-value">' + subject + '</p>' +
            '</div>' +
        '</div>';
            // Add images if any
        if (cardImages.length > 0) {
            var initialImage = cardImages[0]; // Use the first image initially
            articleContentHtml +=
                '<div class="article-images">' +
                    getImageHtml(initialImage, 0, cardImages.length) +
                '</div>';
        } 
// Add non-image content (description, reflection, etc.)   
articleContentHtml +=
    (description ? '<p class="article-label-description">Description</p>' +
    '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
    (reflection ? '<p class="article-label-reflection">Reflection</p>' +
    '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
    (quote ? '<p class="article-label-quote">Quote</p>' +
    '<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 {
    } else {
Line 405: Line 264:
                '</div>';
                '</div>';
        }       
        }       
        // Add non-image content (description, reflection, etc.)  
        // Add non-image content (description, reflection, etc.)
articleContentHtml +=  
        articleContentHtml +=  
    (description ? '<p class="article-label-description">Description</p>' +
        (description ? '<p class="article-label-description">Description</p>' +
    '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
        '<div class="article-description">' + formatParagraphs(description) + '</div>' : '') +
    (reflection ? '<p class="article-label-reflection">Reflection</p>' +
        (reflection ? '<p class="article-label-reflection">Reflection</p>' +
    '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
        '<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') +
    (quote ? '<p class="article-label-quote">Quote</p>' +
        (quote ? '<p class="article-label-quote">Quote</p>' +
    '<p class="article-quote">' + quote + '</p>' : '') +
        '<div class="article-quote">“' + formatParagraphs(quote) + '”</div>' : '') +
    '<p class="article-label-modification-date">Added on</p>' +
        '<p class="article-label-modification-date">Added on</p>' +
    '<div class="article-modification-date">' + modificationDate + '</div>';
        '<div class="article-modification-date">' + formatSimpleDate(modificationDate) + '</div>'
        $('#article-content').html(articleContentHtml);
        $('#article-content').html(articleContentHtml);
Line 421: Line 280:
        if (relatedArticlesHtml && relatedArticlesHtml.trim().length > 0) {
        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();
            $('#related-articles').html('<div class="related-articles-label">Related Articles</div><div class="related-articles-container">' + relatedArticlesHtml + '</div>').show();
        }  
        } else {
            $('#related-articles').html('<div class="related-articles-label">No related articles found.</div>').show();
        }
    }
    function formatSimpleDate(inputDate) {
        // Remove spaces from the date string
        var dateWithoutSpaces = inputDate.replace(/\s/g, '');
   
        // Assuming dateWithoutSpaces is in the format "XX XX XX"
        var formattedDate = dateWithoutSpaces.slice(0, 2) + '.' + dateWithoutSpaces.slice(2, 4) + '.' + dateWithoutSpaces.slice(4);
   
        return formattedDate;
    }
    }
    // Apply the fade-out effect to both #list and #list-list elements
    // Apply the fade-out effect to both #list and #list-list elements
    $('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').addClass('fade-out');
    $('#list, #list-list').addClass('fade-out');
   
    // End of openModal
    // End of openModal
}
}


// Function to check if all filters are cleared in block view and its variations
// Function to check if all filters are cleared in block view
    function checkBlockFiltersCleared() {
function checkBlockFiltersCleared() {
        var selectors = ['#list', '#list-block-1', '#list-block-2', '#list-block-3'];
    var checkedFilters = $('#list .filtered-value-option input[type="checkbox"]:checked');
        for (var i = 0; i < selectors.length; i++) {
    console.log("Checked filters count:", checkedFilters.length);
            var selector = selectors[i];
            var checkedFilters = $(selector + ' .filtered-value-option input[type="checkbox"]:checked');
    if (checkedFilters.length === 0) {
            console.log('Checked filters count in ' + selector + ':', checkedFilters.length);
        console.log("All filters are cleared in block view");
        communityFeatured.show();
    } else {
        console.log("Some filters are still active in block view");
    }
}
// Function to check if all filters are cleared in list view
function checkListFiltersCleared() {
    var checkedFilters = $('#list-list .filtered-value-option input[type="checkbox"]:checked');
    console.log("Checked filters count:", checkedFilters.length);
    if (checkedFilters.length === 0) {
        console.log("All filters are cleared in list view");
        communityListFeatured.show();
    } else {
        console.log("Some filters are still active in list view");
    }
}
// Function to update the visibility of featured elements based on filters
function updateFeaturedVisibility() {
    if ($('#list .filtered-value-option input[type="checkbox"]:checked').length === 0) {
        communityFeatured.show();
    } else {
        communityFeatured.hide();
    }
    if ($('#list-list .filtered-value-option input[type="checkbox"]:checked').length === 0) {
        communityListFeatured.show();
    } else {
        communityListFeatured.hide();
    }
}


            if (checkedFilters.length === 0) {
                console.log('All filters are cleared in ' + selector);
                // Show all community elements related to block views
                $('#community-featured, #community-featured-block-1, #community-featured-block-2, #community-featured-block-3').show();
            } else {
                console.log('Some filters are still active in ' + selector);
                // Hide all community elements related to block views
                $('#community-featured, #community-featured-block-1, #community-featured-block-2, #community-featured-block-3').hide();
            }
        }
    }
    // Function to check if all filters are cleared in list view and its variations
    function checkListFiltersCleared() {
        var selectors = ['#list-list', '#list-list-1', '#list-list-2', '#list-list-3'];
        for (var i = 0; i < selectors.length; i++) {
            var selector = selectors[i];
            var checkedFilters = $(selector + ' .filtered-value-option input[type="checkbox"]:checked');
            console.log('Checked filters count in ' + selector + ':', checkedFilters.length);
            if (checkedFilters.length === 0) {
                console.log('All filters are cleared in ' + selector);
                // Show all community elements related to list views
                $('#community-featured, #community-featured-list-1, #community-featured-list-2, #community-featured-list-3').show();
            } else {
                console.log('Some filters are still active in ' + selector);
                // Hide all community elements related to list views
                $('#community-featured, #community-featured-list-1, #community-featured-list-2, #community-featured-list-3').hide();
            }
        }
    }


// closeModal function
// closeModal function
function closeModal() {
function closeModal() {
    showArticleWrapper.hide();
    showArticleWrapper.hide();
 
    list.width(originalListWidth).css('margin-right', '0');
    // Revert width of filtered-list-items in listLists
    listList.width(originalListListWidth).css('margin-right', '0');
    $.each(listLists, function(index, list) {
   
    list.width(originalWidths[index]);
    // Revert width of filtered-list-items in #list
});
    filteredListItems.css('width', 'calc(20% - 2px)');
        // Revert width of filtered-list-items in #list
    filteredListItems.css('width', 'calc(20% - 0px)');
    // Check if filters are cleared before showing the featured content
    // Check if filters are cleared before showing the featured content
Line 484: Line 356:
    checkListFiltersCleared();
    checkListFiltersCleared();
}
}
    // Button to open [Nr.s]
    $('.button-open-nrs').click(function() {
        var queryDiv = $('.entry-nrs-query');
        if (queryDiv.css('display') === 'none') {
            queryDiv.css('display', 'flex');
        } else {
            queryDiv.css('display', 'none');
        }
    });
function setShowArticleRotationEffect() {
const offset = 20;
const showArticle = document.querySelector('#show-article');
    const h = showArticle.clientHeight;
    const theta = -Math.atan(offset/h);
const a = Math.cos(theta);
const b = Math.sin(theta);
const c = -Math.sin(theta);
const d = Math.cos(theta);
const showArticleBefore = document.querySelector('#show-article-before');
const transformValue = 'matrix('+a+','+b+','+c+','+d+',0,0)';
showArticleBefore.style.transform = transformValue;
}


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


     function setupImageToggle(images) {
     function setupImageToggle(images) {
    var currentIndex = 0;
        var currentIndex = 0;
        var totalImages = images.length;
   
        function toggleImage() {
            currentIndex = (currentIndex + 1) % totalImages;
            var image = images[currentIndex];
            console.log("Toggling to image index:", currentIndex, "Src:", image.src);
            $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, totalImages));
        }
   
        // Updated event binding
        $('#article-content').on('click', '.image-container img', function () {
            console.log("Image clicked");
            toggleImage();
        });
    }
   
    function getImageHtml(image, currentIndex, totalImages) {
        var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
        return '<p class="article-label-image">' + imageLabel + '</p>' +
            '<div class="image-container">' +
                '<img src="' + image.src + '" alt="' + image.alt + '">' +
                '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
            '</div>';
    }
   
$(document).on('mousedown', function (event) {
    console.log('Document mousedown event triggered');
    console.log('Event target:', event.target);
    function toggleImage() {
    var isOutsideWrapper = !showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0;
        currentIndex = (currentIndex + 1) % images.length;
    // Check if the click is directly on a .card or .list-card, or inside one of them
        var image = images[currentIndex];
    var isOnCard = $(event.target).closest('.card, .list-card').length > 0;
        updateImageLabel(currentIndex + 1, images.length); // Update the label on toggle
        $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, images.length));
    }
    $('#article-content').on('click', '.image-container img', function() {
    console.log('Is outside wrapper:', isOutsideWrapper);
        toggleImage();
    console.log('Is on card:', isOnCard);
    });
}
   
    function getImageHtml(image, currentIndex, totalImages) {
    var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
    return '<p class="article-label-image">' + imageLabel + '</p>' +
        '<div class="image-container">' +
            '<img src="' + image.src + '" alt="' + image.alt + '">' +
            '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
        '</div>';
}
function updateImageLabel(currentIndex, totalImages) {
    if (isOutsideWrapper && !isOnCard) {
    var imageLabel = currentIndex + '/' + totalImages + ' IMAGES';
        console.log('Hiding fixed column');
    $('#article-content .article-label-image').text(imageLabel); // Update or set the label text
        $('#list, #list-list').removeClass('fade-out');
}
        showArticleWrapper.css('display', 'none');
   
    } else {
    // Close modal with Close button
        console.log('Click inside wrapper or on card');
    }
});
 
$('#close-button').on('click', function () {
$('#close-button').on('click', function () {
    $('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').removeClass('fade-out');
    $('#list, #list-list').removeClass('fade-out');
    closeModal();
    closeModal();
});
});


     // Close modal and remove fade out also when clicking outside of card
     // Revert changes when clicking outside the modal
     $(document).on('mousedown', function (event) {
     $(document).on('mousedown', function(event) {
        var isOutsideWrapper = !showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0;
    if (!showArticleWrapper.is(event.target) && showArticleWrapper.has(event.target).length === 0) {
        var isOnCard = $(event.target).closest('.card, .list-card').length > 0;
        closeModal();
       
    }
        if (!areFiltersActive) {
});
        if (isOutsideWrapper && !isOnCard) {
            console.log('Closing modal from outside wrapper and not on card');
            $('#list, #list-list, #list-list-1, #list-list-2, #list-list-3, #list-block-1, #list-block-2, #list-block-3').removeClass('fade-out');
        showArticleWrapper.css('display', 'none');
            closeModal(); // Use closeModal() for cleanup
        }
        }
    });


     // Hover effect for scrolling
     // Hover effect for scrolling
Line 581: Line 437:
         $(this).css('overflow-y', 'hidden');
         $(this).css('overflow-y', 'hidden');
     });
     });
   
    // ALL VIEWS IN ONE PAGE
// Handle List View Button
$(".list-view-button").click(function() {
    // Show list view and list sorting buttons, hide block view and block sorting buttons
    $(".list-view").show();
    $(".block-view").hide();
    $(".list-sorting-buttons").show();
    $(".block-sorting-buttons").hide();
    $(".list-view > div").hide();
    $(".chronicle-list").show();
});
// Handle Block View Button
$(".block-view-button").click(function() {
    // Show block view and block sorting buttons, hide list view and list sorting buttons
    $(".block-view").show();
    $(".list-view").hide();
    $(".block-sorting-buttons").css('display', 'flex');
    $(".list-sorting-buttons").hide();
    $(".block-view > div").hide();
    $(".chronicle-block").show();
});
// Handle List Sorting Buttons
$(".chronicle-list-button").click(function() {
    // Show only the chronicle list
    $(".list-view > div").hide();
    $(".chronicle-list").show();
});
$(".random-list-button").click(function() {
    // Show only the random list
    $(".list-view > div").hide();
    $(".random-list").show();
});
$(".alphabetical-list-button").click(function() {
    // Show only the alphabetical list
    $(".list-view > div").hide();
    $(".alphabetical-list").show();
});
// Similar event handlers can be added for block view buttons if needed
// Handle Block Sorting Buttons
$(".chronicle-block-button").click(function() {
    // Show only the chronicle block
    $(".block-view > div").hide();
    $(".chronicle-block").show();
});
$(".random-block-button").click(function() {
    // Show only the random block
    $(".block-view > div").hide();
    $(".random-block").show();
});
$(".alphabetical-block-button").click(function() {
    // Show only the alphabetical block
    $(".block-view > div").hide();
    $(".alphabetical-block").show();
});
// NEW TEST
// Handle Block View Button in home
    $(".home-block-view-button").click(function() {
        $(".home-block-view").show();
        $(".home-list-view").hide();
        $(".home-block-sorting-buttons").css('display', 'flex');
        $(".home-list-sorting-buttons").hide();
        $(".home-block-view > div").hide();
        $(".home-chronicle-block").show();
   
        // Update the position of the communityFeatured elements for the chronicle block view
        updateCommunityFeaturedPosition('block', '1'); // '1' corresponds to chronicle
    });
    // Handle List View Button in home
    $(".home-list-view-button").click(function() {
        $(".home-list-view").show();
        $(".home-block-view").hide();
        $(".home-list-sorting-buttons").css('display', 'flex');
        $(".home-block-sorting-buttons").hide();
        $(".home-list-view > div").hide();
        $(".home-chronicle-list").show();
        // Update the position of the communityFeatured elements for the chronicle list view
        updateCommunityFeaturedPosition('list', '1'); // '1' corresponds to chronicle
    });
// Handle List Sorting Buttons in home for the chronicle list
    $(".home-chronicle-list-button").click(function() {
        // Show only the chronicle list
        $(".home-list-view > div").hide();
        $(".home-chronicle-list").show();
        // Update the position of the communityFeatured element for the chronicle list view
        updateCommunityFeaturedPosition('list', '1'); // '1' corresponds to chronicle
    });
    // Similarly, you would update the handlers for the random list button and alphabetical list button:
    $(".home-random-list-button").click(function() {
        // Show only the random list
        $(".home-list-view > div").hide();
        $(".home-random-list").show();
        // Update the position of the communityFeatured element for the random list view
        updateCommunityFeaturedPosition('list', '2'); // '2' corresponds to random
    });
    $(".home-alphabetical-list-button").click(function() {
        // Show only the alphabetical list
        $(".home-list-view > div").hide();
        $(".home-alphabetical-list").show();
        // Update the position of the communityFeatured element for the alphabetical list view
        updateCommunityFeaturedPosition('list', '3'); // '3' corresponds to alphabetical
    });
// Handle Block Sorting Buttons
$(".home-chronicle-block-button").click(function() {
    // Show only the chronicle block
    $(".home-block-view > div").hide();
    $(".home-chronicle-block").show();
        // Update the position of the communityFeatured element for the alphabetical list view
        updateCommunityFeaturedPosition('block', '1'); // '1' corresponds to chronicle
});
$(".home-random-block-button").click(function() {
    // Show only the random block
    $(".home-block-view > div").hide();
    $(".home-random-block").show();
        // Update the position of the communityFeatured element for the random list view
        updateCommunityFeaturedPosition('block', '2'); // '2' corresponds to random
});
$(".home-alphabetical-block-button").click(function() {
    // Show only the alphabetical block
    $(".home-block-view > div").hide();
    $(".home-alphabetical-block").show();
        // Update the position of the communityFeatured element for the alphabetical list view
        updateCommunityFeaturedPosition('block', '3'); // '3' corresponds to alphabetical
});
});
});
Retrieved from "https://softwear.directory/log/Special:MobileDiff/3608"

Navigation menu