|
|
| Line 112: |
Line 112: |
| | | |
| function openModal(element) { | | function openModal(element) { |
| console.log('Clicked on card:', this);
| | console.log('Modal opening for:', element); |
| showArticleWrapper.css('display', 'block');
| | |
|
| | var cardImages = []; |
| var cardImages = [];
| | for (var i = 1; i <= 5; i++) { |
| for (var i = 1; i <= 5; i++) {
| | var imageClass = '.image' + i; |
| var imageClass = '.image' + i;
| | var captionClass = '.caption-image' + i; |
| var captionClass = '.caption-image' + i;
| | var imageElem = $(element).find(imageClass + ' img'); |
| var imageElem = $(this).find(imageClass + ' img');
| | |
|
| | console.log('Processing image:', imageClass, 'Found:', imageElem.length > 0); |
| if (imageElem.length) {
| | |
| var captionText = $(this).find(imageClass + ' ' + captionClass).text();
| | if (imageElem.length) { |
| cardImages.push({
| | var captionText = $(element).find(imageClass + ' ' + captionClass).text(); |
| link: $(this).find(imageClass + ' a').attr('href'),
| | console.log('Caption for', imageClass, ':', captionText); |
| src: imageElem.attr('src'),
| | |
| alt: imageElem.attr('alt'),
| | cardImages.push({ |
| caption: captionText,
| | link: $(element).find(imageClass + ' a').attr('href'), |
| captionClass: 'caption-image' + i
| | src: imageElem.attr('src'), |
| });
| | alt: imageElem.attr('alt'), |
| }
| | caption: captionText, |
| }
| | captionClass: 'caption-image' + i |
|
| | }); |
| if (cardImages.length > 1) {
| | } |
| setupImageToggle(cardImages);
| | } |
| }
| | |
|
| | console.log('Collected images:', cardImages); |
| var entryNumber = $(this).find('.entry-number').text();
| | |
| var title = $(this).find('.title').text();
| | // Your existing code to handle the images and modal content |
| 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();
| | // Delegate for block-view page |
| var discipline = $(this).find('.discipline').text();
| | $('#list').on('mousedown', '.card', function (event) { |
| var subject = $(this).find('.subject').text();
| | if ($(event.target).closest('.people a, .type a').length) { |
| var description = $(this).find('.description').html();
| | return; |
| var reflection = $(this).find('.reflection').html();
| | } |
| var quote = $(this).find('.quote').text();
| | openModal(this); |
| var modificationDate = $(this).find('.modification-date').text();
| | }); |
| var relatedArticlesHtml = $(this).find('.related-articles').html();
| | |
|
| | // Delegate for list-view page |
| $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + peopleHtml + '</p>');
| | $('#list-list').on('mousedown', '.list-card', function (event) { |
| var articleContentHtml = '<div class="article-title-link">';
| | if ($(event.target).closest('.people a, .type a').length) { |
| articleContentHtml += '<p class="article-title">' + title + '</p>';
| | return; |
| if (externalLinkURL) {
| | } |
| articleContentHtml += '<a href="' + externalLinkURL + '" target="_blank" class="external-link-icon"><img src="/images/6/6d/Link-arrow-new.png" alt="Link"></a>';
| | openModal(this); |
| }
| | }); |
| 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) { |