4,554
edits
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 112: | Line 112: | ||
function openModal(element) { | function openModal(element) { | ||
console.log('Modal opening for:', element); | |||
var cardImages = []; | |||
for (var i = 1; i <= 5; i++) { | |||
var imageClass = '.image' + i; | |||
var captionClass = '.caption-image' + i; | |||
var imageElem = $(element).find(imageClass + ' img'); | |||
console.log('Processing image:', imageClass, 'Found:', imageElem.length > 0); | |||
if (imageElem.length) { | |||
var captionText = $(element).find(imageClass + ' ' + captionClass).text(); | |||
console.log('Caption for', imageClass, ':', captionText); | |||
cardImages.push({ | |||
link: $(element).find(imageClass + ' a').attr('href'), | |||
src: imageElem.attr('src'), | |||
alt: imageElem.attr('alt'), | |||
caption: captionText, | |||
captionClass: 'caption-image' + i | |||
}); | |||
} | |||
} | |||
console.log('Collected images:', cardImages); | |||
if (cardImages.length > 1) { | |||
setupImageToggle(cardImages); | |||
} | |||
var entryNumber = $(this).find('.entry-number').text(); | |||
var title = $(this).find('.title').text(); | |||
var externalLinkURL = $(this).find('.link a').attr('href'); | |||
var peopleHtml = $(this).find('.people').html(); | |||
var typeHtml = $(this).find('.type').html(); | |||
var entity = $(this).find('.entity').text(); | |||
var discipline = $(this).find('.discipline').text(); | |||
var subject = $(this).find('.subject').text(); | |||
var description = $(this).find('.description').html(); | |||
var reflection = $(this).find('.reflection').html(); | |||
var quote = $(this).find('.quote').text(); | |||
var modificationDate = $(this).find('.modification-date').text(); | |||
var relatedArticlesHtml = $(this).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>'; | |||
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>' + | |||
'<div class="article-quote">“' + formatParagraphs(quote) + '”</div>' : '') + | |||
'<p class="article-label-modification-date">Added on</p>' + | |||
'<div class="article-modification-date">' + formatSimpleDate(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(); | |||
} 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 the #list element | |||
$('#list').addClass('fade-out'); | |||
// Prevent further propagation to the document | |||
event.stopPropagation(); | |||
} | |||
// Delegate for block-view page | |||
$('#list').on('mousedown', '.card', function (event) { | |||
if ($(event.target).closest('.people a, .type a').length) { | |||
return; | |||
} | |||
openModal(this); | |||
}); | |||
// Delegate for list-view page | |||
$('#list-list').on('mousedown', '.list-card', function (event) { | |||
if ($(event.target).closest('.people a, .type a').length) { | |||
return; | |||
} | |||
openModal(this); | |||
}); | |||
function setupImageToggle(images) { | function setupImageToggle(images) { |