MediaWiki:Common.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
$(document).ready(function () {
var communityFeatured = $('#community-featured');
var showArticleWrapper = $('#show-article-wrapper');
var listViews = ['#list', '#list-list', '#list-list-1', '#list-list-2', '#list-list-3', '#list-block-1', '#list-block-2', '#list-block-3'];
var originalWidths = listViews.map(selector => $(selector).width());
// Adjust community featured placement based on filtered list items
function adjustCommunityFeaturedPlacement() {
var filteredCards = $('.filtered-list-item');
if (filteredCards.length >= 2) {
communityFeatured.detach().insertAfter(filteredCards.eq(1)).show();
}
}
// Setup image toggle functionality for articles with multiple images
function setupArticleImageToggle() {
var images = $('.article-images .image-container').map(function () {
var $this = $(this);
return {
src: $this.find('img').attr('src'),
alt: $this.find('img').attr('alt'),
caption: $this.find('div').text(),
captionClass: $this.find('div').attr('class')
};
}).get();
if (images.length > 1) {
var currentIndex = 0;
$('.article-images .image-container').on('click', 'img', function () {
currentIndex = (currentIndex + 1) % images.length;
displayImage(images[currentIndex], currentIndex, images.length);
});
displayImage(images[0], 0, images.length); // Display the first image initially
}
}
function displayImage(image, index, total) {
var imageLabel = (index + 1) + '/' + total + ' IMAGES';
var imageHtml = '<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>';
$('.article-images').html(imageHtml);
}
// Function to open modal
function openModal(cardElement) {
showArticleWrapper.show();
listViews.forEach(function(selector, index) {
$(selector).css('width', '60%');
});
populateModalContent(cardElement);
}
// Populate modal content based on the card element
function populateModalContent(cardElement) {
var isRelatedArticle = $(cardElement).hasClass('related-article');
var cardImages = [];
// Handle image collection for both related and regular articles
var imageSelectorPrefix = isRelatedArticle ? '.related-article-image' : '.image';
var captionSelectorPrefix = isRelatedArticle ? '.related-article-caption-image' : '.caption-image';
for (var i = 1; i <= 5; i++) {
var imageElem = $(cardElement).find(imageSelectorPrefix + i + ' img');
if (imageElem.length) {
var captionText = $(cardElement).find(imageSelectorPrefix + i + ' ' + captionSelectorPrefix + i).text();
cardImages.push({
src: imageElem.attr('src'),
alt: imageElem.attr('alt'),
caption: captionText,
captionClass: captionSelectorPrefix + i
});
}
}
if (cardImages.length > 1) {
setupImageToggle(cardImages);
}
// Common data extraction
var entryNumber = $(cardElement).find(isRelatedArticle ? '.related-article-entry-number' : '.entry-number').text();
var peopleHtml = $(cardElement).find(isRelatedArticle ? '.related-article-people' : '.people').html();
var title = $(cardElement).find(isRelatedArticle ? '.related-article-title' : '.title').text();
var typeHtml = $(cardElement).find(isRelatedArticle ? '.related-article-type' : '.type').html();
var externalLinkURL = $(cardElement).find(isRelatedArticle ? '.related-article-link a' : '.link a').attr('href');
var entity = $(cardElement).find(isRelatedArticle ? '.related-article-entity' : '.entity').text();
var discipline = $(cardElement).find(isRelatedArticle ? '.related-article-discipline' : '.discipline').text();
var subject = $(cardElement).find(isRelatedArticle ? '.related-article-subject' : '.subject').text();
var description = $(cardElement).find(isRelatedArticle ? '.related-article-description' : '.description').html();
var reflection = $(cardElement).find(isRelatedArticle ? '.related-article-reflection' : '.reflection').html();
var quote = $(cardElement).find(isRelatedArticle ? '.related-article-quote' : '.quote').text();
var modificationDate = $(cardElement).find(isRelatedArticle ? '.related-article-modification-date' : '.modification-date').text();
// Constructing the modal content
var articleContentHtml = '<div class="article-title-link">' +
'<p class="article-title">' + title + '</p>' +
(externalLinkURL ? '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon"><img src="/images/6/6d/Link-arrow-new.png" alt="Link"></a>' : '') +
'</div>' +
'<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>' +
(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>';
// Set the content
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
$('#article-content').html(articleContentHtml);
// If there are images, add the first one
if (cardImages.length > 0) {
var initialImage = cardImages[0];
var imagesHtml = '<div class="article-images">' + getImageHtml(initialImage, 0, cardImages.length) + '</div>';
$('#article-content').find('.article-images').html(imagesHtml);
}
}
function formatParagraphs(text) {
return text.split('\n').map(function(paragraph) {
return paragraph.trim() ? '<p>' + paragraph.trim() + '</p>' : '';
}).join('');
}
function getImageHtml(image, currentIndex, totalImages) {
return '<div class="image-container">' +
'<img src="' + image.src + '" alt="' + image.alt + '">' +
'<div class="' + image.captionClass + '">' + image.caption + '</div>' +
'</div>';
}
// Close modal and revert changes
function closeModal() {
showArticleWrapper.hide();
listViews.forEach(function(selector, index) {
$(selector).width(originalWidths[index]);
});
communityFeatured.show();
}
// Event delegation for opening modal on card click
$(listViews.join(', ')).on('mousedown', '.card, .list-card', function(event) {
if (!$(event.target).closest('.people a, .type a').length) {
openModal(this);
}
});
// Close modal when clicking outside
$(document).on('mousedown', function(event) {
if (!$(event.target).closest(showArticleWrapper).length && !$(event.target).closest('.card, .list-card').length) {
closeModal();
}
});
// Toggle view buttons logic
function setupViewToggleButtons() {
$(".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() {
// Show block view and block sorting buttons, hide list view and list sorting buttons
$(".home-block-view").show();
$(".home-list-view").hide();
$(".home-block-sorting-buttons").css('display', 'flex');
$(".home-list-sorting-buttons").hide();
$(".home-block-view > div").hide();
$(".home-chronicle-block").show();
});
// Handle List View Button in home
$(".home-list-view-button").click(function() {
// Show list view and list sorting buttons, hide block view and block sorting buttons
$(".home-list-view").show();
$(".home-block-view").hide();
$(".home-list-sorting-buttons").css('display', 'flex');
$(".home-block-sorting-buttons").hide();
$(".home-list-view > div").hide();
$(".home-chronicle-list").show();
});
// Handle List Sorting Buttons in home
$(".home-chronicle-list-button").click(function() {
// Show only the chronicle list
$(".home-list-view > div").hide();
$(".home-chronicle-list").show();
});
$(".home-random-list-button").click(function() {
// Show only the random list
$(".home-list-view > div").hide();
$(".home-random-list").show();
});
$(".home-alphabetical-list-button").click(function() {
// Show only the alphabetical list
$(".home-list-view > div").hide();
$(".home-alphabetical-list").show();
});
// Handle Block Sorting Buttons
$(".home-chronicle-block-button").click(function() {
// Show only the chronicle block
$(".home-block-view > div").hide();
$(".home-chronicle-block").show();
});
$(".home-random-block-button").click(function() {
// Show only the random block
$(".home-block-view > div").hide();
$(".home-random-block").show();
});
$(".home-alphabetical-block-button").click(function() {
// Show only the alphabetical block
$(".home-block-view > div").hide();
$(".home-alphabetical-block").show();
});
}
// Initial setup calls
adjustCommunityFeaturedPlacement();
setupArticleImageToggle();
setupViewToggleButtons();
// Any other initial setups can be added here
});