Widget:FilterInterviews

mw.loader.using(['Module:InterviewArchive']).done(function (module) {   initFilterInterviews(module.generateInterview); });

function initFilterInterviews(generateInterview) { (async function {        // Fetch the JSON data from the JoJo Wiki Interviews page        const response = await fetch('https://jojowiki.com/JoJo_Wiki:Interviews?action=raw');        const jsonData = await response.json;        const interviews = jsonData.interviews;        const tlStatus = ['Translated', 'Incomplete Translation', 'Not translated'];        const trStatus = ['Japanese Transcript Available', 'Incomplete Transcript', 'No Transcript'];        const type = ['Interview', 'Comment', 'Interviews and Comments'];        const dateRanges = ['1981-1995', '1996-2005', '2006-2015', '2016-2020', '2021-2025'];

// Helper functions

// This is for interviewees to remove the link part of their name function extractName(link) { // For wikicode links if (link.startsWith() && link.endsWith()) { return link.slice(2, -2); }

// For Wikipedia template links if (link.startsWith('')) { return link.slice(4, -2); }

// For external links const externalLinkPattern = /^\[(.*?)\s(.*?)\]$/; const match = link.match(externalLinkPattern); if (match) { return match[2]; }

return link; }

// Get interviewees function getInterviewees(data) { const intervieweeSet = new Set;

data.interviews.forEach((interview) => {               if (interview.interviewee) {                    interview.interviewee.forEach((link) => { const name = extractName(link); intervieweeSet.add(name); });               }            }            );

const intervieweeNames = Array.from(intervieweeSet); }

// Get tags function getTags(data) { const tagSet = new Set;

data.interviews.forEach((interview) => {               if (interview.tags) {                    interview.tags.forEach((tag) => { tagSet.add(tag); });               }            }            );

const tagNames = Array.from(tagSet); }

// Filter functions function filterByDate(interview, minYear, maxYear) { const dateString = interview.date; const yearPattern = /(\d{4})/; const yearMatch = dateString.match(yearPattern);

if (yearMatch) { const interviewYear = parseInt(yearMatch[1]); return interviewYear >= minYear && interviewYear <= maxYear; } else { return false; }       }

function filterByInterviewee(interview, interviewee) { return interview.interviewee.some((intervieweeItem) => intervieweeItem.toLowerCase === interviewee.toLowerCase); }

function filterByTranslationStatus(interview, status) { return interview.translation === status; }

function filterByTranscriptStatus(interview, status) { return interview.transcript === status; }

function filterByType(interview, type) { return interview.type === type; }

function filterByMedia(interview, media) { return interview.media === media; }

function filterByTag(interview, tag) { return interview.tags.some((tagItem) => tagItem.toLowerCase === tag.toLowerCase); }

// Apply filters and update the DOM function applyFilters { // Read filter values from the DOM const dateRange = document.getElementById('date-range-filter').value; const [minYear, maxYear] = dateRange.split('-').map(Number);

// Apply filters to the interviews array const filteredInterviews = interviews.filter(interview => filterByDate(interview, minYear, maxYear));

// Update the interviews DOM elements based on the filteredInterviews array const interviewContainer = document.getElementById('interview-container'); interviewContainer.innerHTML = '';

mw.loader.using('mediawiki.api', function {                const api = new mw.Api;                filteredInterviews.forEach(interview => { api.parse(generateInterview(interview)).done(function (html) {                       const interviewDiv = document.createElement('div');                        interviewDiv.innerHTML = html;                        interviewContainer.appendChild(interviewDiv);                    }); });           });        }

const dateFilter = document.querySelector('.filter-select'); if (dateFilter) { // Add event listeners to filter input elements dateFilter.addEventListener('change', applyFilters);

// Initialize Select2 for each filter input element if (typeof Select2 !== 'undefined') { new Select2(dateFilter); }       }

// Generate the required HTML elements function createFilterSelect(id, label) { const container = document.createElement('div'); container.className = 'filter-container';

const filterLabel = document.createElement('label'); filterLabel.htmlFor = id; filterLabel.textContent = label; container.appendChild(filterLabel);

const select = document.createElement('select'); select.id = id; select.className = 'filter-select'; container.appendChild(select);

return container; }

function populateSelect(select, options) { options.forEach(option => {               const optionElement = document.createElement('option');                optionElement.value = option;                optionElement.textContent = option;                select.appendChild(optionElement);            }); }

const filterContainer = document.getElementById('filter-container');

// Date Range filter const dateRangeFilter = createFilterSelect('date-range-filter', 'Date Range'); filterContainer.appendChild(dateRangeFilter); populateSelect(dateRangeFilter.querySelector('select'), dateRanges);

// Other filters would follow a similar pattern: // 1. Create the filter using createFilterSelect // 2. Append the filter to the filter container // 3. Populate the filter with the appropriate options using populateSelect

// Initialize Select2 and add event listeners after the elements have been added to the DOM const filterSelects = document.querySelectorAll('.filter-select'); filterSelects.forEach(select => {           select.select2;            select.addEventListener('change', applyFilters);        });

// Call applyFilters initially to display interviews based on the default date range applyFilters; }); }

function runWhenJQueryAndDOMReady { if (window.jQuery && document.readyState === 'complete') { initFilterInterviews; } else { setTimeout(runWhenJQueryAndDOMReady, 100); } }

runWhenJQueryAndDOMReady;