4,090
edits
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 1: | Line 1: | ||
$(document).ready(function () { | $(document).ready(function() { | ||
// Global variables | |||
var | var cards = $('.card'); | ||
var showArticleWrapper = $('#show-article-wrapper'); | var showArticleWrapper = $('#show-article-wrapper'); | ||
var list | var areFiltersActive = false; | ||
var | var homeChronicleBlockWidth = 0; | ||
var homeChronicleListWidth = 0; | |||
// Show the block view container once everything is set up | |||
$('.home-block-view').show(); | |||
// 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(); | |||
// 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); | |||
}); | |||
} | |||
$('.home-list-view-button').click(function() { | |||
$(".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(); | |||
// Assuming the switch might involve some animations, you might need a slight delay | |||
setTimeout(function() { | |||
homeChronicleListWidth = $('.home-chronicle-list').width(); | |||
console.log("Updated homeChronicleListWidth:", homeChronicleListWidth); | |||
}, 100); | |||
}); | |||
$('.home-block-view-button').click(function() { | |||
$('.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(); | |||
// Use setTimeout to allow any CSS transitions to complete. | |||
setTimeout(function() { | |||
homeChronicleBlockWidth = $('.home-chronicle-block').width(); | |||
console.log("Updated homeChronicleBlockWidth:", homeChronicleBlockWidth); | |||
}, 100); | |||
}); | |||
// BLOCK VIEW SORTING BUTTONS | |||
$('.home-chronicle-block-button').click(function() { | |||
sortChronologically(); | |||
updateLastVisibleCard(); | |||
}); | |||
$('.home-random-block-button').click(function() { | |||
randomizeCards('.list-container .card'); | |||
updateLastVisibleCard(); | |||
}); | |||
$('.home-alphabetical-block-button').click(function() { | |||
sortAlphabetically('.list-container .card'); | |||
updateLastVisibleCard(); | |||
}); | |||
// LIST VIEW SORTING BUTTONS | |||
$('.home-chronicle-list-button').click(function() { | |||
sortChronologically(); | |||
updateLastVisibleCard(); | |||
}); | |||
$('.home-random-list-button').click(function() { | |||
randomizeCards('.list-container .card'); | |||
updateLastVisibleCard(); | |||
}); | |||
$('.home-alphabetical-list-button').click(function() { | |||
sortAlphabetically('.list-container .card'); | |||
updateLastVisibleCard(); | |||
}); | |||
// Additional Utility Functions | |||
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); | |||
}); | |||
} | |||
// FILTERS --------------------- SECTION // | |||
// General Filters Toggle Button | |||
$('.general-toggle').click(function() { | |||
var filtersDiv = $('#filters'); | |||
filtersDiv.toggleClass('is-visible'); | |||
if (filtersDiv.hasClass('is-visible')) { | |||
filtersDiv.css('display', 'grid').hide().slideDown(100); | |||
$(this).text('[Close]'); | |||
$('.reset-button').show(); | |||
} else { | |||
filtersDiv.slideUp(100, function() { | |||
$(this).css('display', 'none'); | |||
}); | |||
$(this).text('[Open]'); | |||
$('.reset-button').hide(); | |||
} | |||
updateLastVisibleCard(); | |||
}); | |||
// Specific Toggle for Filter Sections like TYPE, ENTITY, etc. | |||
$('.open-filter').click(function(event) { | |||
event.stopPropagation(); // Prevent the click event from bubbling up | |||
var filterType = $(this).closest('.filter').data('filter'); | |||
$('#values-' + filterType).toggle(); // Toggle the visibility of the specific filter values | |||
// Toggle active class based on the visibility of the filter values | |||
if ($('#values-' + filterType).is(':visible')) { | |||
$(this).addClass('active-filter'); | |||
} else { | |||
$(this).removeClass('active-filter'); | |||
} | } | ||
updateLastVisibleCard(); | |||
}); | |||
function filterCards() { | |||
$('.card').show(); // Initially show all cards | |||
console.log("Filtering cards..."); | |||
$('.filter').each(function() { | |||
var filterType = $(this).data('filter'); // e.g., 'type', 'entity', etc. | |||
var selectedValues = $(this).find('.values button.active').map(function() { | |||
return $(this).parent('a').attr('title').toLowerCase(); // Assuming case-insensitive | |||
}).get(); | |||
if (selectedValues.length > 0) { | |||
$('.card').each(function() { | |||
var card = $(this); | |||
var hasMatchingValue = selectedValues.some(function(value) { | |||
var textContent = card.find('.' + filterType).text().toLowerCase(); | |||
var contentArray = textContent.split(/,|\s+/); // Split by commas or spaces | |||
return contentArray.includes(value); // Check for exact matches in the array | |||
}); | |||
if (!hasMatchingValue) { | |||
card.hide(); // Hide the card if it doesn't match the filter | |||
} | |||
}); | |||
} | |||
}); | |||
// Update the styling for the last visible card | |||
updateLastVisibleCard(); | |||
} | |||
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'); | |||
} | } | ||
// Reset function | |||
$('.reset-filter').click(function() { | |||
// Remove 'active' class from all filter buttons | |||
$('#filters .values button').removeClass('active'); | |||
$('.open-filter').removeClass('active-filter'); | |||
// Show all cards that might have been hidden by the filters | |||
$('.card').show(); | |||
updateLastVisibleCard(); | |||
}); | |||
$('#filters .values button').click(function() { | |||
$(this).toggleClass('active'); | |||
filterCards(); // Re-apply the filters based on the updated active buttons | |||
updateLastVisibleCard(); | |||
}); | |||
// MODAL ARTICLE --------------------- SECTION // | |||
// Format paragraphs | // Format paragraphs | ||
function formatParagraphs(text) { | function formatParagraphs(text) { | ||
Line 41: | Line 229: | ||
return paragraphs.map(function (p) { return '<p>' + p.trim() + '</p>'; }).join(''); | 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; | |||
function toggleImage() { | |||
currentIndex = (currentIndex + 1) % images.length; | |||
var | var image = images[currentIndex]; | ||
updateImageLabel(currentIndex + 1, images.length); // Update the label on toggle | |||
$('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, images.length)); | |||
} | |||
$('#article-content').on('click', '.image-container img', function() { | |||
toggleImage(); | |||
}); | |||
} | |||
} | function getImageHtml(image, currentIndex, totalImages) { | ||
var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES'; | |||
return '<p class="article-label-image">' + imageLabel + '</p>' + | |||
'<div class="image-container">' + | |||
'<img src="' + image.src + '" alt="' + image.alt + '">' + | |||
'<div class="' + image.captionClass + '">' + image.caption + '</div>' + | |||
'</div>'; | |||
} | |||
function updateImageLabel(currentIndex, totalImages) { | |||
var imageLabel = currentIndex + '/' + totalImages + ' IMAGES'; | |||
$('#article-content .article-label-image').text(imageLabel); // Update or set the label text | |||
} | } | ||
function openModal(cardElement, event) { | |||
event.stopPropagation(); // Prevent the event from bubbling up | |||
showArticleWrapper.css('display', 'block'); | |||
// | |||
// Clear existing content in modal | |||
// Existing modal logic... | |||
console.log(" | // Use the stored widths | ||
if ($('.home-chronicle-list').is(':visible')) { | |||
// Use homeChronicleListWidth to adjust modal or perform other actions | |||
console.log("Using homeChronicleListWidth:", homeChronicleListWidth); | |||
} else if ($('.home-chronicle-block').is(':visible')) { | |||
// Use homeChronicleBlockWidth to adjust modal or perform other actions | |||
console.log("Using homeChronicleBlockWidth:", homeChronicleBlockWidth); | |||
} | |||
// Existing modal logic... | |||
$('.list-container').addClass('fade-out'); | |||
} | |||
function openModal(cardElement, event) { | |||
event.stopPropagation(); // Prevent the event from bubbling up | |||
var isRelatedArticle = $(cardElement).hasClass('related-article'); | var isRelatedArticle = $(cardElement).hasClass('related-article'); | ||
showArticleWrapper.css('display', 'block'); | showArticleWrapper.css('display', 'block'); | ||
// Clear existing content in modal | // Clear existing content in modal | ||
$('#article-title').empty(); | $('#article-title').empty(); | ||
Line 286: | Line 480: | ||
} | } | ||
// Use the stored widths | |||
if ($('.home-chronicle-list').is(':visible')) { | |||
// Use homeChronicleListWidth to adjust modal or perform other actions | |||
console.log("Using homeChronicleListWidth:", homeChronicleListWidth); | |||
} else if ($('.home-chronicle-block').is(':visible')) { | |||
// Use homeChronicleBlockWidth to adjust modal or perform other actions | |||
console.log("Using homeChronicleBlockWidth:", homeChronicleBlockWidth); | |||
} | |||
// 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-container').addClass('fade-out'); | ||
} | |||
// closeModal function | |||
function closeModal() { | function closeModal() { | ||
showArticleWrapper.hide(); | showArticleWrapper.hide(); | ||
} | } | ||
function setShowArticleRotationEffect() { | |||
const offset = 20; | const offset = 20; | ||
const showArticle = document.querySelector('#show-article'); | const showArticle = document.querySelector('#show-article'); | ||
Line 327: | Line 513: | ||
} | } | ||
// | // Event listener for cards | ||
cards.on('click', function(event) { | |||
openModal(this, event); // Call openModal function, passing the current element and event | |||
setShowArticleRotationEffect(); | |||
}); | |||
// Close modal with Close button | // Close modal with Close button | ||
$('#close-button').on('click', function () { | $('#close-button').on('click', function () { | ||
$(' | $('.list-container').removeClass('fade-out'); | ||
closeModal(); | closeModal(); | ||
}); | }); | ||
Line 383: | Line 532: | ||
if (!areFiltersActive) { | if (!areFiltersActive) { | ||
if (isOutsideWrapper && !isOnCard) { | if (isOutsideWrapper && !isOnCard) { | ||
$('.list-container').removeClass('fade-out'); | |||
$(' | |||
showArticleWrapper.css('display', 'none'); | showArticleWrapper.css('display', 'none'); | ||
closeModal(); // Use closeModal() for cleanup | closeModal(); // Use closeModal() for cleanup | ||
Line 392: | Line 540: | ||
// Hover effect for scrolling | // Hover effect for scrolling | ||
$('#show-article-wrapper').hover(function () { | |||
// On hover, enable scrolling on #show-article-wrapper | // On hover, enable scrolling on #show-article-wrapper | ||
$(this).css('overflow-y', 'auto'); | $(this).css('overflow-y', 'auto'); | ||
Line 399: | Line 547: | ||
$(this).css('overflow-y', 'hidden'); | $(this).css('overflow-y', 'hidden'); | ||
}); | }); | ||
}); | }); |