Biographical Directory of Documentation and Information - User contributions [en]

Samantha Hastings

2026-05-18T15:52:48Z

Hthach: Created page with "This is a stub. Contact us if you'd like to author the page."

This is a stub. Contact us if you'd like to author the page.

File:OHData.csv

2026-05-18T15:52:01Z

Hthach: Hthach uploaded a new version of File:OHData.csv

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-03-29T13:25:52Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = [];
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

function personName(person) {
return ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';

var s = String(value).trim();

// First: look for a 4-digit year anywhere in the string
var m4 = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
if (m4) return m4[1];

// Next: handle common numeric dates like 4/7/11 or 4-7-11
var m2 = s.match(/^\d{1,2}[\/-]\d{1,2}[\/-](\d{2})$/);
if (m2) {
var yy = Number(m2[1]);

// Adjust pivot if needed
return String(yy <= 29 ? 2000 + yy : 1900 + yy);
}

return '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function extractUrls(value) {
if (!value) return [];
var s = String(value);

var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== CSV PARSER ======
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

if (!key) continue;
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING ======
function buildPersonHeaderHTML(person) {
var name = personName(person);
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';

if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var meta = lifeStr ? '<span>' + esc(lifeStr) + '</span>' : '';

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(name, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + name + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session) {
var name = personName(person);
var title = session.recorded;

var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">Information unavailable. Please contact us if you have details about this record.</span>';
} else if (groups.length === 1) {
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i]);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio ohr-m-0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);

if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');

if (open) {
panel.classList.add('ohr-hidden');
div.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
div.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted ohr-center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');

if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted ohr-mt-sm">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters();
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-03-29T13:24:46Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = [];
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

function personName(person) {
return ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';

var s = String(value).trim();

// First: look for a 4-digit year anywhere in the string
var m4 = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
if (m4) return m4[1];

// Next: handle common numeric dates like 4/7/11 or 4-7-11
var m2 = s.match(/^\d{1,2}[\/-]\d{1,2}[\/-](\d{2})$/);
if (m2) {
var yy = Number(m2[1]);

// Adjust pivot if needed
return String(yy <= 29 ? 2000 + yy : 1900 + yy);
}

return '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function extractUrls(value) {
if (!value) return [];
var s = String(value);

var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== CSV PARSER ======
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

if (!key) continue;
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING ======
function buildPersonHeaderHTML(person) {
var name = personName(person);
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';

if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var meta = lifeStr ? '<span>' + esc(lifeStr) + '</span>' : '';

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(name, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + name + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session) {
var name = personName(person);
var title = session.recorded;

var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">Information unavailable. Please contact us if you have details about this session.</span>';
} else if (groups.length === 1) {
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i]);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio ohr-m-0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);

if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');

if (open) {
panel.classList.add('ohr-hidden');
div.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
div.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted ohr-center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');

if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted ohr-mt-sm">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters();
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

File:OHData.csv

2026-03-28T21:55:25Z

Hthach: Hthach uploaded a new version of File:OHData.csv

Arthur Jack Meadows

2026-03-28T20:32:17Z

Hthach:

__NOINDEX__
[[File:Jack-meadows.jpg|alt=Arthur Jack Meadows|thumb|<nowiki>Arthur Jack Meadows | Credit </nowiki>[https://www.asist.org/2016/08/18/jack-meadows-1934-2016/ ASIS&T]]]
NOTE: This is a stub.

Arthur Jack Meadows (1934 - 2016) was a British astronomer and information scientist whose career spanned astronomy, history of science, and information studies. He founded the astronomy department at the University of Leicester and later advanced information science at Loughborough University. A prolific scholar, he authored over 30 books and 250 articles, and played key roles in professional organizations. His work reflected a lifelong commitment to understanding and improving the communication of knowledge.

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-03-28T19:42:56Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = [];
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

function personName(person) {
return ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function extractUrls(value) {
if (!value) return [];
var s = String(value);

var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== CSV PARSER ======
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

if (!key) continue;
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING ======
function buildPersonHeaderHTML(person) {
var name = personName(person);
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';

if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var meta = lifeStr ? '<span>' + esc(lifeStr) + '</span>' : '';

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(name, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + name + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session) {
var name = personName(person);
var title = session.recorded;

var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">Information unavailable. Please contact us if you have details about this session.</span>';
} else if (groups.length === 1) {
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i]);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio ohr-m-0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);

if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');

if (open) {
panel.classList.add('ohr-hidden');
div.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
div.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted ohr-center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');

if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted ohr-mt-sm">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters();
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-03-28T19:40:33Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }
.ohr-center { text-align: center; }
.ohr-mt-sm { margin-top: 0.5rem; }
.ohr-m-0 { margin: 0; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state - Enhanced contrast */
.ohr-item.is-open {
background: #f1f5f9;
border-color: #94a3b8;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #57606a;
font-weight: 650;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #cbd5e1;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.4;
color: #374151;
}

/* --- Links --- */
.ohr-links {
margin-top: 0.25rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #111;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid #cbd5e1;
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* Indented content under the session title */
.ohr-session > *:not(.ohr-session__title) {
margin-left: 0.6rem;
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151;
margin: 0.2rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.1s ease;
}

.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #94a3b8;
color: #111;
}

.ohr-acc-btn:active {
transform: translateY(1px);
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.2rem;
border-top: none;
padding-top: 0.2rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.82rem;
border: 1px solid #feb2b2;
text-align: center;
}

List of Oral Histories

2026-03-28T19:36:34Z

Hthach: Created page with " <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv"> <div id="ohr-loading" class="ohr-muted" style="text-align:center; padding: 1rem;"> Loading oral history records… </div> <div id="ohr-error" class="ohr-hidden"></div> <div id="ohr-list" class="ohr-list"></div> </div>"

<div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
<div id="ohr-loading" class="ohr-muted" style="text-align:center; padding: 1rem;">
Loading oral history records…
</div>

<div id="ohr-error" class="ohr-hidden"></div>

<div id="ohr-list" class="ohr-list"></div>
</div>

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-03-28T19:34:35Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Sort sessions inside each person by Date From/To year (descending)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded; // No more "(Interview #)" suffix

// Determine which resource types exist for this session
var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">Record details are currently unknown. Please contact us if you can provide additional information.</span>';
} else if (groups.length === 1) {
// Single type → no subheading needed; keep on one line (wrap as needed)
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
// Multiple types → labeled groups on separate lines
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');

if (open) {
panel.classList.add('ohr-hidden');
div.classList.remove('is-open'); // ✅ closed state
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
div.classList.add('is-open'); // ✅ open state
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:55:53Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state - Enhanced contrast */
.ohr-item.is-open {
background: #f1f5f9;
border-color: #94a3b8; /* Darkened border for definition */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #57606a; /* Darkened for better accessibility (WCAG AA) */
font-weight: 650;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #cbd5e1;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.4; /* Slightly more air for readability */
color: #374151; /* Darker for better contrast */
}

/* --- Links --- */
.ohr-links {
margin-top: 0.25rem; /* Reduced from 0.35rem to sit closer to bio */
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #111;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid #cbd5e1; /* Sessions now own the border separating them from the Wiki button section */
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* Indented content under the session title (labels and buttons) */
.ohr-session > *:not(.ohr-session__title) {
margin-left: 0.6rem; /* Ensures indentation even if headings are hidden */
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151;
margin: 0.2rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.1s ease;
}

.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #94a3b8;
color: #111;
}

.ohr-acc-btn:active {
transform: translateY(1px);
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

/* Divider now only handles vertical spacing to avoid duplicate lines */
.ohr-divider {
margin-top: 0.2rem; /* Reduced from 0.4rem */
border-top: none;
padding-top: 0.2rem; /* Reduced from 0.4rem */
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.82rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:54:26Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state - Enhanced contrast */
.ohr-item.is-open {
background: #f1f5f9;
border-color: #94a3b8; /* Darkened border for definition */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #57606a; /* Darkened for better accessibility (WCAG AA) */
font-weight: 650;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #cbd5e1;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.4; /* Slightly more air for readability */
color: #374151; /* Darker for better contrast */
}

/* --- Links --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #111;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid #cbd5e1; /* Sessions now own the border separating them from the Wiki button section */
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* Indented content under the session title (labels and buttons) */
.ohr-session > *:not(.ohr-session__title) {
margin-left: 0.6rem; /* Ensures indentation even if headings are hidden */
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151;
margin: 0.2rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.1s ease;
}

.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #94a3b8;
color: #111;
}

.ohr-acc-btn:active {
transform: translateY(1px);
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

/* Divider now only handles vertical spacing to avoid duplicate lines */
.ohr-divider {
margin-top: 0.4rem;
border-top: none;
padding-top: 0.4rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.82rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:52:09Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state - Enhanced contrast */
.ohr-item.is-open {
background: #f1f5f9;
border-color: #94a3b8; /* Darkened border for definition */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #57606a; /* Darkened for better accessibility (WCAG AA) */
font-weight: 650;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #cbd5e1;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.4; /* Slightly more air for readability */
color: #374151; /* Darker for better contrast */
}

/* --- Links --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #111;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0;
border-left: none;
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* Indented labels and buttons under the session title */
.ohr-resource-label,
.ohr-links-stack {
padding-left: 0.5rem; /* Indentation for alignment hierarchy */
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151;
margin: 0.2rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.1s ease;
}

.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #94a3b8;
color: #111;
}

.ohr-acc-btn:active {
transform: translateY(1px);
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.4rem;
border-top: 1px solid #cbd5e1; /* Restored border between Wiki button and Sessions */
padding-top: 0.4rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.82rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:50:26Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state - Enhanced contrast */
.ohr-item.is-open {
background: #f1f5f9;
border-color: #94a3b8; /* Darkened border for definition */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #57606a; /* Darkened for better accessibility (WCAG AA) */
font-weight: 650;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #cbd5e1;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.4; /* Slightly more air for readability */
color: #374151; /* Darker for better contrast */
}

/* --- Links --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #111;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0;
border-left: none;
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151;
margin: 0.2rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.1s ease;
}

.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #94a3b8;
color: #111;
}

.ohr-acc-btn:active {
transform: translateY(1px);
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.4rem;
border-top: none; /* Removed the border as requested */
padding-top: 0.4rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.82rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:48:28Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
font-family: inherit;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state - Enhanced contrast */
.ohr-item.is-open {
background: #f1f5f9;
border-color: #94a3b8; /* Darkened border for definition */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #57606a; /* Darkened for better accessibility (WCAG AA) */
font-weight: 650;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #cbd5e1;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.4; /* Slightly more air for readability */
color: #374151; /* Darker for better contrast */
}

/* --- Links --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
color: #111;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #cbd5e1; /* Darker indicator */
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800; /* Extra bold for visibility */
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151; /* High contrast charcoal */
margin: 0.2rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: #fff; /* Solid white background for the button */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.45rem;
font-size: 0.72rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
transition: all 0.1s ease;
}

.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #94a3b8;
color: #111;
}

.ohr-acc-btn:active {
transform: translateY(1px); /* Slight click feedback */
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.4rem;
border-top: 1px solid #cbd5e1;
padding-top: 0.4rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.82rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-22T21:45:58Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Sort sessions inside each person by Date From/To year (descending)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded; // No more "(Interview #)" suffix

// Determine which resource types exist for this session
var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">No links available for this session.</span>';
} else if (groups.length === 1) {
// Single type → no subheading needed; keep on one line (wrap as needed)
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
// Multiple types → labeled groups on separate lines
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');

if (open) {
panel.classList.add('ohr-hidden');
div.classList.remove('is-open'); // ✅ closed state
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
div.classList.add('is-open'); // ✅ open state
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-22T21:45:20Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Sort sessions inside each person by Date From/To year (descending)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded; // No more "(Interview #)" suffix

// Determine which resource types exist for this session
var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">No links available for this session.</span>';
} else if (groups.length === 1) {
// Single type → no subheading needed; keep on one line (wrap as needed)
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
// Multiple types → labeled groups on separate lines
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-22T21:43:52Z

Hthach:

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-22T21:42:00Z

Hthach:

/* ===== OralHistoryRecords-Updated.js ===== */
/* global mw */
(function () {
'use strict';

var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

var PEOPLE = [];
var FILTER = { q: '' };

function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
return (s || '').replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '').toString().toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

function extractUrls(value) {
if (!value) return [];
var re = /https?:\/\/[^\s"'<>()]+/g;
return (value.match(re) || []);
}

function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

div.innerHTML =
'<div class="ohr-head">' +
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(person.name) + '</h3>' +
'</div>' +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
person.content +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);

if (btn && panel) {
btn.addEventListener('click', function () {
var isOpen = !panel.classList.contains('ohr-hidden');

if (isOpen) {
panel.classList.add('ohr-hidden');
div.classList.remove('is-open');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
div.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

onReady(function () {
if ($('ohr-directory')) {
buildToolbar($('ohr-directory'));
}
});

})();

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:41:46Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count {
margin-left: auto;
font-size: 0.82rem;
color: #6b7280;
}

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Open (expanded) state */
.ohr-item.is-open {
background: #f1f5f9; /* slate tint */
border-color: #cbd5e1;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}

.ohr-titleblock { flex: 1 1 auto; min-width: 0; }

.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.78rem;
color: #4a5568;
}

.ohr-meta span.ohr-label {
color: #718096;
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}

.ohr-meta .ohr-dot {
margin: 0 0.25rem;
color: #e2e8f0;
}

/* --- Bio --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
transition: all 0.15s ease;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible,
.ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #edf2f7;
}

.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #57606a;
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #4a5568;
cursor: pointer;
transition: all 0.15s ease;
}

.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
color: #2d3748;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #edf2f7;
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:38:40Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem; /* Balanced padding (0.5rem top/bottom) */
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Darker blue background for the open state */
.ohr-item.is-open {
background: #eef6ff;
border-color: #cbdcf0;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin-top: 0.05rem; /* Slight gap for breathing room */
font-size: 0.78rem;
color: #4a5568;
}
.ohr-meta span.ohr-label {
color: #718096; /* Darkened slightly for better visibility */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #e2e8f0; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem; /* Balanced top margin to match item top padding */
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #edf2f7;
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* WCAG Compliant Resource Labels */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #57606a; /* Darkened to meet WCAG contrast ratios */
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #4a5568; /* Darkened for better contrast */
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
color: #2d3748;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #edf2f7;
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:38:18Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem; /* Balanced padding (0.5rem top/bottom) */
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Darker blue background for the open state.
Applying !important to the container ensures the highlight is visible.
*/
.ohr-item.is-open {
background: #dae9ff !important;
border-color: #a5c7f9;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1; /* Tight line-height to fix perceived padding issues */
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin-top: 0.1rem; /* Precise small gap */
font-size: 0.78rem;
color: #4a5568;
line-height: 1; /* Match name for symmetry */
}
.ohr-meta span.ohr-label {
color: #57606a; /* Darker labels for contrast */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #d1d5db; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem; /* Balanced top margin to match item top padding */
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #a5c7f9; /* Match open state border color */
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* WCAG Compliant Resource Labels - High Contrast */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800; /* Extra weight for visibility */
letter-spacing: 0.03em;
text-transform: uppercase;
color: #374151; /* Charcoal for accessibility compliance */
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: white; /* Solid bg for better definition */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #374151;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
}

/* Accordion Panel Background */
.ohr-acc-panel {
margin-top: 0.35rem;
background: transparent; /* Ensures the panel matches the item's background */
border-radius: 0.25rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #a5c7f9; /* Match active border color */
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:37:15Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem; /* Balanced padding (0.5rem top/bottom) */
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Darker blue background for the open state.
We use !important here to ensure that even if a hover state
or specific script-injected style exists, the "Open" look persists.
*/
.ohr-item.is-open {
background: #dae9ff !important;
border-color: #a5c7f9;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1; /* Tight line-height to fix perceived padding issues */
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin-top: 0.1rem; /* Precise small gap */
font-size: 0.78rem;
color: #4a5568;
line-height: 1; /* Match name for symmetry */
}
.ohr-meta span.ohr-label {
color: #57606a; /* Darker labels for contrast */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #d1d5db; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem; /* Balanced top margin to match item top padding */
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #a5c7f9; /* Match open state border color */
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* WCAG Compliant Resource Labels - High Contrast */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800; /* Extra weight for visibility */
letter-spacing: 0.03em;
text-transform: uppercase;
color: #374151; /* Charcoal for accessibility compliance */
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: white; /* Solid bg for better definition */
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #374151;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #a5c7f9; /* Match active border color */
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:35:13Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem; /* Balanced padding (0.5rem top/bottom) */
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Darker blue background for the open state */
.ohr-item.is-open {
background: #eef6ff;
border-color: #cbdcf0;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin-top: 0.05rem; /* Slight gap for breathing room */
font-size: 0.78rem;
color: #4a5568;
}
.ohr-meta span.ohr-label {
color: #718096; /* Darkened slightly for better visibility */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #e2e8f0; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem; /* Balanced top margin to match item top padding */
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #edf2f7;
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* WCAG Compliant Resource Labels */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #57606a; /* Darkened to meet WCAG contrast ratios */
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #4a5568; /* Darkened for better contrast */
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
color: #2d3748;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #edf2f7;
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:34:17Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.75rem;
}

#ohr-search {
flex: 1 1 240px;
padding: 0.4rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.4rem;
font-size: 0.9rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Enhanced Focus State */
#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ohr-count { margin-left: auto; font-size: 0.85rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.6rem;
padding: 0.75rem 1rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 0.6rem;
border: 1px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Container Hover Depth */
.ohr-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
border-color: #e0e7ff;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.5rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.05rem;
font-weight: 750;
color: #000;
line-height: 1.2;
}

/* Refined Metadata Colors */
.ohr-meta {
margin-top: 0.1rem;
font-size: 0.85rem;
color: #111; /* Value color */
}
.ohr-meta span.ohr-label {
color: #6b7280; /* Softer label color */
font-weight: 500;
}
.ohr-meta .ohr-dot { margin: 0 0.3rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.4rem 0 0;
font-size: 0.9rem;
line-height: 1.4;
color: #374151;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.6rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.ohr-link, .ohr-acc-btn {
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.6rem;
font-size: 0.8rem;
font-weight: 600;
border-radius: 0.5rem;
text-decoration: none;
color: #1f2937;
background: #dce8f6;
border: 1px solid #c8d9ef;
}

.ohr-link:hover {
background: #cfdff3;
border-color: #b0c9e8;
}

/* Focus states for buttons */
.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session { margin-top: 0.35rem; }
.ohr-session__title {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.2rem;
color: #111827;
}

.ohr-resource-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #6b7280;
margin: 0.15rem 0 0.25rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.4rem;
padding: 0.25rem 0.5rem;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}

.ohr-acc-panel {
margin-top: 0.6rem;
}

.ohr-divider {
margin-top: 0.6rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.6rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.4rem;
padding: 0.75rem;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:33:27Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
/* These styles help integrate the list into a multi-column layout */
.ohr-container {
max-width: 1100px; /* Narrower container for better readability */
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem; /* Tighter gap between list and sidebar */
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem; /* Reduced from 0.75rem */
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #f8fbff;
border-radius: 0.4rem; /* Sharper corners for a cleaner look */
padding: 0.4rem 0.75rem; /* Significantly reduced vertical padding */
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
margin-bottom: 0.3rem; /* Tighter vertical rhythm in the list */
border: 1px solid rgba(224, 231, 255, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Container Hover Depth */
.ohr-item:hover {
transform: translateY(-1px);
box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.06);
border-color: #cbd5e1;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center; /* Keep everything vertically centered for unexpanded state */
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.95rem; /* Slightly smaller for density */
font-weight: 700;
color: #111;
line-height: 1.1;
}

/* Refined Metadata Colors */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.8rem;
color: #374151;
}
.ohr-meta span.ohr-label {
color: #94a3b8; /* Lighter label color for better hierarchy */
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #e2e8f0; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.25rem 0 0; /* Reduced margin */
font-size: 0.85rem;
line-height: 1.3;
color: #4b5563;
/* Option: uncomment below to limit bio length in list view */
/* display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; */
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.4rem;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}

.ohr-link, .ohr-acc-btn {
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.45rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 0.3rem;
text-decoration: none;
color: #1f2937;
background: #eef4fb; /* Softer background */
border: 1px solid #d9e6f5;
}

.ohr-link:hover {
background: #e1ecf8;
border-color: #c4d8f0;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session { margin-top: 0.25rem; }
.ohr-session__title {
font-size: 0.88rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #111827;
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #a1a1aa;
margin: 0.1rem 0 0.15rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.35rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 0.3rem;
padding: 0.15rem 0.4rem;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #374151;
}

.ohr-acc-panel {
margin-top: 0.4rem;
}

.ohr-divider {
margin-top: 0.4rem;
border-top: 1px solid rgba(0,0,0,0.05);
padding-top: 0.4rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.3rem;
padding: 0.6rem;
font-size: 0.85rem;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:32:31Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
/* Aggressively balanced padding */
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Clearer Blue Background for Open State */
.ohr-item.is-open {
background: #dae9ff !important; /* Forced darker blue background */
border-color: #a5c7f9;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1; /* Forced tight line-height to remove vertical 'lead' */
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin: 0.1rem 0 0; /* Minimal top margin for alignment */
font-size: 0.78rem;
color: #4a5568;
line-height: 1; /* Match name for symmetry */
}
.ohr-meta span.ohr-label {
color: #57606a; /* Darker labels for contrast */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #d1d5db; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.6rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #a5c7f9;
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* High Contrast Resource Labels (WCAG AA Compliant) */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 800; /* Bolder for legibility */
letter-spacing: 0.04em;
text-transform: uppercase;
color: #374151; /* Darker charcoal for high contrast */
margin: 0.25rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #374151;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.4rem;
border-top: 1px solid #a5c7f9;
padding-top: 0.4rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:30:42Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
/* Balanced padding: 0.5rem top for name, 0.5rem bottom for meta */
padding: 0.5rem 0.75rem;
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* Significantly clearer blue background for the open state */
.ohr-item.is-open {
background: #e1effe; /* Deeper, more distinct light blue */
border-color: #b6d4fe; /* Defined border for the expanded card */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin-top: 0.05rem;
margin-bottom: 0; /* Ensures the years sit precisely 0.5rem from the bottom edge */
font-size: 0.78rem;
color: #4a5568;
}
.ohr-meta span.ohr-label {
color: #718096;
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #d1d5db; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem;
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #cbdcf0; /* Subtle blue line to match expanded state */
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* WCAG Compliant Resource Labels - Darkened for high contrast */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #4a5568;
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #4a5568;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
color: #2d3748;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #cbdcf0; /* Divider matches expanded border */
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:28:25Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem; /* Balanced padding (0.5rem top/bottom) */
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

.ohr-item.is-open {
background: #eef6ff;
border-color: #cbdcf0;
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Metadata Hierarchy */
.ohr-meta {
margin-top: 0.05rem; /* Slight gap for breathing room */
font-size: 0.78rem;
color: #4a5568;
}
.ohr-meta span.ohr-label {
color: #718096; /* Darkened slightly for better visibility */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #e2e8f0; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem; /* Balanced top margin to match item top padding */
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #edf2f7;
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #57606a; /* Darkened to meet WCAG contrast ratios */
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #4a5568; /* Darkened for better contrast */
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
color: #2d3748;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #edf2f7;
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:25:12Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
.ohr-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.5rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.35rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.3rem;
font-size: 0.88rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.ohr-count { margin-left: auto; font-size: 0.82rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #fcfdfe;
border-radius: 0.3rem;
padding: 0.5rem 0.75rem; /* Balanced padding (0.5rem top/bottom) */
box-shadow: 0 1px 2px rgba(0,0,0,0.02);
margin-bottom: 0.2rem;
border: 1px solid #edf2f7;
transition: background 0.15s ease, border-color 0.15s ease;
}

.ohr-item:hover {
background: #f8fbff;
border-color: #cbd5e1;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.4rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 0.92rem;
font-weight: 700;
color: #1a202c;
line-height: 1.2;
}

/* Refined Metadata Hierarchy */
.ohr-meta {
margin-top: 0.05rem; /* Slight gap for breathing room */
font-size: 0.78rem;
color: #4a5568;
}
.ohr-meta span.ohr-label {
color: #718096; /* Darkened slightly for better visibility */
font-weight: 600;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.ohr-meta .ohr-dot { margin: 0 0.25rem; color: #e2e8f0; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.5rem 0 0.2rem; /* Balanced top margin to match item top padding */
font-size: 0.82rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.35rem;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}

.ohr-link, .ohr-acc-btn {
transition: all 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
border-radius: 0.25rem;
text-decoration: none;
color: #2d3748;
background: #edf2f7;
border: 1px solid #e2e8f0;
}

.ohr-link:hover {
background: #e2e8f0;
border-color: #cbd5e1;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy (Expanded State) --- */
.ohr-session {
margin-top: 0.2rem;
padding-left: 0.25rem;
border-left: 2px solid #edf2f7;
}
.ohr-session__title {
font-size: 0.85rem;
font-weight: 700;
margin: 0 0 0.1rem;
color: #1a202c;
}

/* WCAG Compliant Resource Labels */
.ohr-resource-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #57606a; /* Darkened to meet WCAG contrast ratios */
margin: 0.15rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.3rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
padding: 0.15rem 0.4rem;
font-size: 0.72rem;
font-weight: 600;
color: #4a5568; /* Darkened for better contrast */
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f7fafc;
border-color: #cbd5e1;
color: #2d3748;
}

.ohr-acc-panel {
margin-top: 0.35rem;
}

.ohr-divider {
margin-top: 0.35rem;
border-top: 1px solid #edf2f7;
padding-top: 0.35rem;
}

/* --- Error --- */
.ohr-error {
color: #c53030;
background: #fff5f5;
border-radius: 0.3rem;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid #feb2b2;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:22:31Z

Hthach:

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:20:45Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Page Layout Adjustments --- */
/* These styles help integrate the list into a multi-column layout */
.ohr-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}

.ohr-layout-grid {
display: flex;
gap: 1.5rem; /* Reduced gap between list and sidebar */
align-items: flex-start;
}

.ohr-list-wrapper {
flex: 1;
min-width: 0;
}

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.75rem;
}

#ohr-search {
flex: 1 1 200px;
padding: 0.4rem 0.6rem;
border: 1px solid #d1d5db;
border-radius: 0.4rem;
font-size: 0.9rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#ohr-search:focus-visible {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ohr-count { margin-left: auto; font-size: 0.85rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #f8fbff; /* Slightly lighter for better contrast with page bg */
border-radius: 0.5rem;
padding: 0.6rem 0.9rem; /* Further reduced padding */
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
margin-bottom: 0.4rem; /* Tight list spacing */
border: 1px solid rgba(224, 231, 255, 0.5);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Container Hover Depth */
.ohr-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07);
border-color: #cbd5e1;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.5rem;
align-items: center;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1rem; /* Scaled down slightly more */
font-weight: 700;
color: #111;
line-height: 1.2;
}

/* Refined Metadata Colors */
.ohr-meta {
margin-top: 0.05rem;
font-size: 0.82rem;
color: #374151;
}
.ohr-meta span.ohr-label {
color: #6b7280;
font-weight: 500;
}
.ohr-meta .ohr-dot { margin: 0 0.3rem; color: #d1d5db; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.35rem 0 0;
font-size: 0.88rem;
line-height: 1.35;
color: #4b5563;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

.ohr-link, .ohr-acc-btn {
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.2rem 0.5rem;
font-size: 0.78rem;
font-weight: 600;
border-radius: 0.4rem;
text-decoration: none;
color: #1f2937;
background: #e5effa;
border: 1px solid #d1e2f6;
}

.ohr-link:hover {
background: #dce8f6;
border-color: #b0c9e8;
}

.ohr-link:focus-visible, .ohr-acc-btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

/* --- Session hierarchy --- */
.ohr-session { margin-top: 0.3rem; }
.ohr-session__title {
font-size: 0.9rem;
font-weight: 700;
margin: 0 0 0.15rem;
color: #111827;
}

.ohr-resource-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #9ca3af;
margin: 0.1rem 0 0.2rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.4rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #e5e7eb;
border-radius: 0.35rem;
padding: 0.2rem 0.45rem;
font-size: 0.78rem;
font-weight: 600;
color: #4b5563;
cursor: pointer;
}
.ohr-acc-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #111;
}

.ohr-acc-panel {
margin-top: 0.5rem;
}

.ohr-divider {
margin-top: 0.5rem;
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 0.5rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.4rem;
padding: 0.75rem;
text-align: center;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:15:46Z

Hthach:

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-22T21:11:33Z

Hthach:

/* ===== Oral History Records (Compact CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
margin-bottom: 0.75rem; /* Reduced from 1rem */
}
#ohr-search {
flex: 1 1 240px;
padding: 0.4rem 0.6rem; /* Slimmer padding */
border: 1px solid #d1d5db;
border-radius: 0.4rem;
font-size: 0.9rem;
}
#ohr-search:focus { outline: 2px solid #9ec5fe; outline-offset: 2px; }
.ohr-count { margin-left: auto; font-size: 0.85rem; color: #6b7280; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.6rem;
padding: 0.75rem 1rem; /* Reduced from 1rem 1.25rem */
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
margin-bottom: 0.6rem; /* Tighter list spacing */
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.5rem;
align-items: center; /* Centered instead of top-aligned for single-line names */
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.05rem; /* Slightly smaller */
font-weight: 750;
color: #000;
line-height: 1.2;
}
.ohr-meta {
margin-top: 0.1rem;
font-size: 0.85rem; /* Smaller meta text */
color: #111;
}
.ohr-meta .ohr-dot { margin: 0 0.3rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.4rem 0 0; /* Reduced from 0.65rem */
font-size: 0.9rem;
line-height: 1.4;
color: #374151;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.6rem; /* Reduced from 0.75rem */
display: flex;
flex-wrap: wrap;
gap: 0.5rem; /* Tighter button grouping */
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.6rem; /* Even more compact */
font-size: 0.8rem;
font-weight: 600;
border-radius: 0.5rem;
text-decoration: none;
color: #1f2937;
background: #dce8f6;
border: 1px solid #c8d9ef;
transition: background 0.1s ease;
}
.ohr-link:hover {
background: #cfdff3;
}

/* --- Session hierarchy (Inside Accordion) --- */
.ohr-session { margin-top: 0.35rem; }
.ohr-session__title {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 0.2rem;
color: #111827;
}

.ohr-resource-label {
font-size: 0.7rem; /* Tiny labels */
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #6b7280;
margin: 0.15rem 0 0.25rem;
}

.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.4rem;
padding: 0.25rem 0.5rem;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.ohr-acc-btn:hover { background: rgba(0,0,0,0.04); }

.ohr-acc-panel {
margin-top: 0.6rem;
}

.ohr-divider {
margin-top: 0.6rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.6rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.4rem;
padding: 0.75rem;
text-align: center;
}

File:OHData.csv

2026-02-21T22:07:43Z

Hthach: Hthach uploaded a new version of File:OHData.csv

File:OHData.csv

2026-02-21T22:00:03Z

Hthach: Hthach uploaded a new version of File:OHData.csv

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-21T20:55:37Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Sort sessions inside each person by Date From/To year (descending)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded; // No more "(Interview #)" suffix

// Determine which resource types exist for this session
var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">No links available for this session.</span>';
} else if (groups.length === 1) {
// Single type → no subheading needed; keep on one line (wrap as needed)
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
// Multiple types → labeled groups on separate lines
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

File:OHData.csv

2026-02-21T20:50:45Z

Hthach: Hthach uploaded a new version of File:OHData.csv

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-21T20:02:27Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Sort sessions inside each person by Date From/To year (descending)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded;

// If multiple sessions have identical "Recorded YEAR", add tiny disambiguator:
if (person.sessions.length > 1) title = title + ' (Interview ' + (idx + 1) + ')';

// Determine which resource types exist for this session
var groups = [
{ kind: 'Video', urls: session.video },
{ kind: 'Audio', urls: session.audio },
{ kind: 'Transcript', urls: session.transcripts }
].filter(function (g) { return g.urls && g.urls.length; });

var links = '';

if (!groups.length) {
links = '<span class="ohr-muted">No links available for this session.</span>';
} else if (groups.length === 1) {
// Single type → no subheading needed; keep on one line (wrap as needed)
links =
'<div class="ohr-links">' +
buildLinkListHTML(name, groups[0].kind, groups[0].urls) +
'</div>';
} else {
// Multiple types → labeled groups on separate "lines"
links =
'<div class="ohr-links-stack">' +
groups.map(function (g) {
return (
'<div class="ohr-resource-group">' +
'<div class="ohr-resource-label">' + esc(g.kind) + '</div>' +
'<div class="ohr-links">' +
buildLinkListHTML(name, g.kind, g.urls) +
'</div>' +
'</div>'
);
}).join('') +
'</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-21T20:01:49Z

Hthach:

/* ===== Oral History Records (CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
margin-bottom: 1rem;
}
#ohr-search {
flex: 1 1 280px;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.95rem;
}
#ohr-search:focus { outline: 2px solid #9ec5fe; outline-offset: 2px; }
.ohr-count { margin-left: auto; font-size: 0.9rem; color: #6b7280; }
#ohr-search::placeholder { color: #9ca3af; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
margin-bottom: 0.9rem;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.1rem;
font-weight: 750;
color: #000;
line-height: 1.25;
}
.ohr-meta {
margin-top: 0.15rem;
font-size: 0.92rem;
color: #111;
}
.ohr-meta span { color: #374151; }
.ohr-meta .ohr-dot { margin: 0 0.4rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.65rem 0 0;
font-size: 0.95rem;
line-height: 1.45;
color: #000;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem; /* increased spacing between buttons */
}

/* Tuned, calmer access buttons */
.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.32rem 0.7rem; /* compact but readable */
font-size: 0.82rem;
font-weight: 500;
border-radius: 0.75rem; /* more rounded */
text-decoration: none;
color: #1f2937; /* a bit darker */
background: #dce8f6; /* slightly darker */
border: 1px solid #c8d9ef; /* subtle but defined */
transition: background 0.15s ease, color 0.15s ease;
}
.ohr-link:hover {
background: #cfdff3;
color: #111827;
}

/* --- Session hierarchy --- */
.ohr-session { margin-top: 0.4rem; }
.ohr-session__title {
font-size: 1rem;
font-weight: 650;
margin: 0.1rem 0 0.35rem;
color: #111827;
}

/* Resource group label (Audio / Video / Transcript) */
.ohr-resource-label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6b7280;
margin: 0.2rem 0 0.35rem;
}

/* Stack resource groups vertically when 2+ types exist */
.ohr-links-stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.6rem;
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
}
.ohr-acc-btn:hover { background: rgba(0,0,0,0.03); }
.ohr-acc-panel { margin-top: 0.8rem; }
.ohr-divider {
margin-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.75rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
margin-top: 1rem;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-21T19:57:25Z

Hthach:

/* ===== Oral History Records (CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
margin-bottom: 1rem;
}
#ohr-search {
flex: 1 1 280px;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.95rem;
}
#ohr-search:focus { outline: 2px solid #9ec5fe; outline-offset: 2px; }
.ohr-count { margin-left: auto; font-size: 0.9rem; color: #6b7280; }
#ohr-search::placeholder { color: #9ca3af; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
margin-bottom: 0.9rem;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.1rem;
font-weight: 750;
color: #000;
line-height: 1.25;
}
.ohr-meta {
margin-top: 0.15rem;
font-size: 0.92rem;
color: #111;
}
.ohr-meta span { color: #374151; }
.ohr-meta .ohr-dot { margin: 0 0.4rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.65rem 0 0;
font-size: 0.95rem;
line-height: 1.45;
color: #000;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem; /* increased from 0.5rem */
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.32rem 0.7rem; /* slightly larger but still compact */
font-size: 0.82rem;
font-weight: 500;
border-radius: 0.75rem; /* more rounded */
text-decoration: none;
color: #1f2937; /* darker gray */
background: #dce8f6; /* slightly darker */
border: 1px solid #c8d9ef; /* subtle but defined */
transition: background 0.15s ease, color 0.15s ease;
}

.ohr-link:hover {
background: #cfdff3;
color: #111827;
}

/* --- Chips (Chips view) --- */
.ohr-chips {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ohr-chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
text-decoration: none;
font-size: 0.88rem;
font-weight: 650;
background: #e5eef8;
color: #111;
border: 1px solid #cfe0f3;
}
.ohr-chip:hover { background: #d6e6f8; }

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.6rem;
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
}
.ohr-acc-btn:hover { background: rgba(0,0,0,0.03); }
.ohr-acc-panel { margin-top: 0.8rem; }
.ohr-divider {
margin-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.75rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
margin-top: 1rem;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-21T19:56:53Z

Hthach:

/* ===== Oral History Records (CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
margin-bottom: 1rem;
}
#ohr-search {
flex: 1 1 280px;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.95rem;
}
#ohr-search:focus { outline: 2px solid #9ec5fe; outline-offset: 2px; }
.ohr-count { margin-left: auto; font-size: 0.9rem; color: #6b7280; }
#ohr-search::placeholder { color: #9ca3af; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
margin-bottom: 0.9rem;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.1rem;
font-weight: 750;
color: #000;
line-height: 1.25;
}
.ohr-meta {
margin-top: 0.15rem;
font-size: 0.92rem;
color: #111;
}
.ohr-meta span { color: #374151; }
.ohr-meta .ohr-dot { margin: 0 0.4rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.65rem 0 0;
font-size: 0.95rem;
line-height: 1.45;
color: #000;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem; /* increased from 0.5rem */
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.32rem 0.7rem; /* slightly larger but still compact */
font-size: 0.82rem;
font-weight: 300;
border-radius: 0.75rem; /* more rounded */
text-decoration: none;
color: #1f2937; /* darker gray */
background: #dce8f6; /* slightly darker */
border: 1px solid #c8d9ef; /* subtle but defined */
transition: background 0.15s ease, color 0.15s ease;
}

.ohr-link:hover {
background: #cfdff3;
color: #111827;
}

/* --- Chips (Chips view) --- */
.ohr-chips {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ohr-chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
text-decoration: none;
font-size: 0.88rem;
font-weight: 650;
background: #e5eef8;
color: #111;
border: 1px solid #cfe0f3;
}
.ohr-chip:hover { background: #d6e6f8; }

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.6rem;
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
}
.ohr-acc-btn:hover { background: rgba(0,0,0,0.03); }
.ohr-acc-panel { margin-top: 0.8rem; }
.ohr-divider {
margin-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.75rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
margin-top: 1rem;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-21T19:55:42Z

Hthach:

/* ===== Oral History Records (CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
margin-bottom: 1rem;
}
#ohr-search {
flex: 1 1 280px;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.95rem;
}
#ohr-search:focus { outline: 2px solid #9ec5fe; outline-offset: 2px; }
.ohr-count { margin-left: auto; font-size: 0.9rem; color: #6b7280; }
#ohr-search::placeholder { color: #9ca3af; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
margin-bottom: 0.9rem;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.1rem;
font-weight: 750;
color: #000;
line-height: 1.25;
}
.ohr-meta {
margin-top: 0.15rem;
font-size: 0.92rem;
color: #111;
}
.ohr-meta span { color: #374151; }
.ohr-meta .ohr-dot { margin: 0 0.4rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.65rem 0 0;
font-size: 0.95rem;
line-height: 1.45;
color: #000;
}

/* --- Links (Directory & Accordion) --- */
.ohr-links {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem; /* increased from 0.5rem */
}

.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.32rem 0.7rem; /* slightly larger but still compact */
font-size: 0.82rem;
font-weight: 500;
border-radius: 0.75rem; /* more rounded */
text-decoration: none;
color: #1f2937; /* darker gray */
background: #dce8f6; /* slightly darker */
border: 1px solid #c8d9ef; /* subtle but defined */
transition: background 0.15s ease, color 0.15s ease;
}

.ohr-link:hover {
background: #cfdff3;
color: #111827;
}

/* --- Chips (Chips view) --- */
.ohr-chips {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ohr-chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
text-decoration: none;
font-size: 0.88rem;
font-weight: 650;
background: #e5eef8;
color: #111;
border: 1px solid #cfe0f3;
}
.ohr-chip:hover { background: #d6e6f8; }

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.6rem;
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
}
.ohr-acc-btn:hover { background: rgba(0,0,0,0.03); }
.ohr-acc-panel { margin-top: 0.8rem; }
.ohr-divider {
margin-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.75rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
margin-top: 1rem;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.css

2026-02-21T19:54:07Z

Hthach:

/* ===== Oral History Records (CSS) ===== */

/* --- Layout --- */
.ohr-list { display: block; }

/* --- Utilities --- */
.ohr-hidden { display: none; }
.ohr-muted { color: #6b7280; }

/* --- Toolbar --- */
.ohr-toolbar {
display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
margin-bottom: 1rem;
}
#ohr-search {
flex: 1 1 280px;
padding: 0.5rem 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
font-size: 0.95rem;
}
#ohr-search:focus { outline: 2px solid #9ec5fe; outline-offset: 2px; }
.ohr-count { margin-left: auto; font-size: 0.9rem; color: #6b7280; }
#ohr-search::placeholder { color: #9ca3af; }

/* --- Record container --- */
.ohr-item {
background: #f5faff;
border-radius: 0.75rem;
padding: 1rem 1.25rem;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
margin-bottom: 0.9rem;
}

/* --- Header row --- */
.ohr-head {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.ohr-titleblock { flex: 1 1 auto; min-width: 0; }
.ohr-name {
margin: 0;
font-size: 1.1rem;
font-weight: 750;
color: #000;
line-height: 1.25;
}
.ohr-meta {
margin-top: 0.15rem;
font-size: 0.92rem;
color: #111;
}
.ohr-meta span { color: #374151; }
.ohr-meta .ohr-dot { margin: 0 0.4rem; color: #9ca3af; }

/* --- Bio / summary --- */
.ohr-bio {
margin: 0.65rem 0 0;
font-size: 0.95rem;
line-height: 1.45;
color: #000;
}

/* --- Links (Directory & Accordion) --- */
.ohr-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.55rem; /* smaller */
font-size: 0.82rem; /* slightly smaller */
font-weight: 500; /* less bold */
border-radius: 0.5rem; /* less pill-like */
text-decoration: none;
color: #374151; /* softer text color */
background: #eef4fb; /* very light background */
border: 1px solid #dbe7f5; /* subtle border */
}

.ohr-link:hover {
background: #e2edf9;
color: #111;
}

/* --- Chips (Chips view) --- */
.ohr-chips {
margin-top: 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ohr-chip {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.65rem;
border-radius: 9999px;
text-decoration: none;
font-size: 0.88rem;
font-weight: 650;
background: #e5eef8;
color: #111;
border: 1px solid #cfe0f3;
}
.ohr-chip:hover { background: #d6e6f8; }

/* --- Accordion view --- */
.ohr-acc-btn {
margin-left: auto;
flex: 0 0 auto;
background: transparent;
border: 1px solid #d1d5db;
border-radius: 0.6rem;
padding: 0.35rem 0.6rem;
font-size: 0.9rem;
font-weight: 650;
cursor: pointer;
}
.ohr-acc-btn:hover { background: rgba(0,0,0,0.03); }
.ohr-acc-panel { margin-top: 0.8rem; }
.ohr-divider {
margin-top: 0.75rem;
border-top: 1px solid rgba(0,0,0,0.08);
padding-top: 0.75rem;
}

/* --- Error --- */
.ohr-error {
color: #b91c1c;
background: #fee2e2;
border-radius: 0.5rem;
padding: 1rem;
text-align: center;
margin-top: 1rem;
}

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-21T19:49:25Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio Link',
video: 'Video Link',
transcripts: 'Transcript Link'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip (since you said you made it—this enforces it)
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

// Keep even if only one type exists (common case)
map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Optional: sort sessions inside each person by Date From (or recorded year)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
// Descending (newest first)
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var life = lifespan(person);
// Lifespan helper expects COL-based row; we’ll compute inline for person object:
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
// Could add “# sessions” but keeping minimalist

var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded;
// If multiple sessions have identical "Recorded YEAR", add tiny disambiguator:
if (person.sessions.length > 1) title = title + ' (Interview ' + (idx + 1) + ')';

var links = '';
links += buildLinkListHTML(name, 'Video', session.video);
links += buildLinkListHTML(name, 'Audio', session.audio);
links += buildLinkListHTML(name, 'Transcript', session.transcripts);

if (!links) {
links = '<span class="ohr-muted">No links available for this session.</span>';
} else {
links = '<div class="ohr-links">' + links + '</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

File:OHData.csv

2026-02-21T19:47:35Z

Hthach: Hthach uploaded a new version of File:OHData.csv

File:OHData.csv

2026-02-21T19:29:32Z

Hthach: Hthach uploaded a new version of File:OHData.csv

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-21T19:28:50Z

Hthach:

/* ===== OralHistoryRecords-Updated.js (Grouped by Person Key, Option 2) ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG (MUST MATCH CSV HEADERS EXACTLY) ======
var COL = {
personKey: 'Person Key',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link',
audio: 'Audio links',
video: 'Video links',
transcripts: 'Transcripts links'
};

// ====== STATE ======
var PEOPLE = []; // grouped person records
var FILTER = { q: '' };

// ====== UTILS ======
function $(id) { return document.getElementById(id); }

function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}

function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}

function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}

function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');
return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(row) {
var y1 = toYear(row[COL.dateFrom]);
var y2 = toYear(row[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return 'Recorded (date unknown)';
}

function fullName(row) {
var first = (row[COL.first] || '').trim();
var last = (row[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(row) {
var b = (row[COL.birth] || '').trim();
var d = (row[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Extract URLs from a cell that may include commentary, newlines, semicolons, etc.
// We only call this for link columns.
function extractUrls(value) {
if (!value) return [];
var s = String(value);

// Match http/https URLs up to whitespace/quote/angle bracket
var re = /https?:\/\/[^\s"'<>()]+/g;
var m = s.match(re) || [];

// De-dupe while preserving order
var seen = Object.create(null);
var out = [];
for (var i = 0; i < m.length; i++) {
var url = m[i].trim();
// Strip trailing punctuation that often sticks to URLs
url = url.replace(/[);.,]+$/g, '');
if (!url) continue;
if (!seen[url]) {
seen[url] = true;
out.push(url);
}
}
return out;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles quotes, commas in quotes, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });
var out = [];

for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== GROUPING ======
function firstNonEmpty(a, b) {
var A = (a || '').trim();
if (A) return A;
return (b || '').trim();
}

function groupByPersonKey(rows) {
var map = Object.create(null);

for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var key = (row[COL.personKey] || '').trim();

// If Person Key is missing, skip (since you said you made it—this enforces it)
if (!key) continue;

// Also require full name to avoid junk records
if (!fullName(row)) continue;

if (!map[key]) {
map[key] = {
key: key,
first: (row[COL.first] || '').trim(),
last: (row[COL.last] || '').trim(),
birth: (row[COL.birth] || '').trim(),
death: (row[COL.death] || '').trim(),
wiki: (row[COL.wiki] || '').trim(),
bio: (row[COL.bio] || '').trim(),
sessions: []
};
} else {
// Fill any missing person-level fields from other rows
map[key].first = firstNonEmpty(map[key].first, row[COL.first]);
map[key].last = firstNonEmpty(map[key].last, row[COL.last]);
map[key].birth = firstNonEmpty(map[key].birth, row[COL.birth]);
map[key].death = firstNonEmpty(map[key].death, row[COL.death]);
map[key].wiki = firstNonEmpty(map[key].wiki, row[COL.wiki]);
map[key].bio = firstNonEmpty(map[key].bio, row[COL.bio]);
}

// Session links: extract URLs ONLY from the 3 link columns
var session = {
recorded: recordedLabel(row),
dateFrom: (row[COL.dateFrom] || '').trim(),
dateTo: (row[COL.dateTo] || '').trim(),
video: extractUrls(row[COL.video]),
audio: extractUrls(row[COL.audio]),
transcripts: extractUrls(row[COL.transcripts])
};

// Keep even if only one type exists (common case)
map[key].sessions.push(session);
}

// Convert to array and sort by last, first
var people = Object.keys(map).map(function (k) { return map[k]; });

people.sort(function (a, b) {
var A = norm((a.last || '') + ' ' + (a.first || ''));
var B = norm((b.last || '') + ' ' + (b.first || ''));
return A.localeCompare(B);
});

// Optional: sort sessions inside each person by Date From (or recorded year)
people.forEach(function (p) {
p.sessions.sort(function (s1, s2) {
var y1 = toYear(s1.dateFrom) || toYear(s1.dateTo) || '';
var y2 = toYear(s2.dateFrom) || toYear(s2.dateTo) || '';
// Descending (newest first)
if (y1 && y2) return Number(y2) - Number(y1);
if (y1 && !y2) return -1;
if (!y1 && y2) return 1;
return 0;
});
});

return people;
}

// ====== RENDERING (OPTION 2) ======
function buildPersonHeaderHTML(person) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var life = lifespan(person);
// Lifespan helper expects COL-based row; we’ll compute inline for person object:
var b = (person.birth || '').trim();
var d = (person.death || '').trim();
var lifeStr = '';
if (b && d) lifeStr = b + '–' + d;
else if (b && !d) lifeStr = b + '–';
else if (!b && d) lifeStr = '–' + d;

var metaBits = [];
if (lifeStr) metaBits.push('<span>' + esc(lifeStr) + '</span>');
// Could add “# sessions” but keeping minimalist

var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>'
);
}

function buildWikiLinkHTML(url) {
url = (url || '').trim();
if (!url) return '';
return '<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(url) + '">Read Wiki Page</a>';
}

function buildLinkListHTML(personName, kind, urls) {
if (!urls || !urls.length) return '';
var out = [];
for (var i = 0; i < urls.length; i++) {
var label = 'Access ' + personName + '’s ' + kind +
(urls.length > 1 ? (' (Part ' + (i + 1) + '/' + urls.length + ')') : '');
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
return out.join('');
}

function buildSessionHTML(person, session, idx) {
var name = ((person.first || '').trim() + ' ' + (person.last || '').trim()).trim();
var title = session.recorded;
// If multiple sessions have identical "Recorded YEAR", add tiny disambiguator:
if (person.sessions.length > 1) title = title + ' (Interview ' + (idx + 1) + ')';

var links = '';
links += buildLinkListHTML(name, 'Video', session.video);
links += buildLinkListHTML(name, 'Audio', session.audio);
links += buildLinkListHTML(name, 'Transcript', session.transcripts);

if (!links) {
links = '<span class="ohr-muted">No links available for this session.</span>';
} else {
links = '<div class="ohr-links">' + links + '</div>';
}

return (
'<div class="ohr-session">' +
'<div class="ohr-session__title">' + esc(title) + '</div>' +
links +
'</div>'
);
}

function makeAccordionPerson(person, idx) {
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

var wikiLink = buildWikiLinkHTML(person.wiki);
var bio = (person.bio || '').trim();

var sessionsHTML = '';
for (var i = 0; i < person.sessions.length; i++) {
sessionsHTML += buildSessionHTML(person, person.sessions[i], i);
}

div.innerHTML =
'<div class="ohr-head">' +
buildPersonHeaderHTML(person) +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
(wikiLink ? '<div class="ohr-divider"><div class="ohr-links">' + wikiLink + '</div></div>' : '') +
'<div class="ohr-divider">' + sessionsHTML + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function renderAccordion(people) {
var container = $('ohr-list');
if (!container) return;

if (!people.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var frag = document.createDocumentFragment();
for (var i = 0; i < people.length; i++) {
frag.appendChild(makeAccordionPerson(people[i], i));
}
container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' people') : (n + ' of ' + total + ' people');
}

// ====== FILTERING ======
function applyFilters() {
var q = norm(FILTER.q);

var filtered = PEOPLE.filter(function (p) {
if (!q) return true;

var hay = norm(
(p.first || '') + ' ' +
(p.last || '') + ' ' +
(p.bio || '') + ' ' +
(p.birth || '') + ' ' +
(p.death || '') + ' ' +
(p.wiki || '')
);

// Also include session recorded labels in search (years)
for (var i = 0; i < p.sessions.length; i++) {
hay += ' ' + norm(p.sessions[i].recorded || '');
}

return hay.indexOf(q) !== -1;
});

renderAccordion(filtered);
updateCount(filtered.length, PEOPLE.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== ERRORS ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== MAIN ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
var rows = parseCSV(text);
PEOPLE = groupByPersonKey(rows);

if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters(); // initial render
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-21T18:45:10Z

Hthach:

/* ===== OralHistoryRecords-Updated.js ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG ======
// These must match your CSV header names exactly.
var COL = {
transcripts: 'Transcript Link',
audio: 'Audio Link',
video: 'Video Link',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
bio: 'Short Bio',
wiki: 'Wiki Link'
};

// ====== STATE ======
var ALL = [];
var FILTER = { q: '' };

// ====== UTILS ======
function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}
function $(id) { return document.getElementById(id); }
function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}
function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}
function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Pattern 1: page controls view via <div id="ohr-directory" data-view="...">
function getViewMode() {
var root = $('ohr-directory');
var mode = (root && root.getAttribute('data-view')) ? root.getAttribute('data-view').trim().toLowerCase() : '';
if (mode === 'accordion' || mode === 'chips' || mode === 'directory') return mode;
return 'directory';
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';

// wgScript is usually "/index.php" on your site (matches your working URL style)
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');

return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(person) {
var y1 = toYear(person[COL.dateFrom]);
var y2 = toYear(person[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return '';
}

// IMPORTANT: Only split on commas for the 3 link columns (Audio/Video/Transcripts).
// Other columns may contain commas as normal punctuation.
function splitLinkCell(value) {
if (!value) return [];
return String(value)
.split(',')
.map(function (x) { return x.trim(); })
.filter(Boolean);
}

// Must have both first & last name
function hasValidName(person) {
var first = (person[COL.first] || '').trim();
var last = (person[COL.last] || '').trim();
return !!(first && last);
}

function fullName(person) {
var first = (person[COL.first] || '').trim();
var last = (person[COL.last] || '').trim();
return (first && last) ? (first + ' ' + last) : '';
}

function lifespan(person) {
var b = (person[COL.birth] || '').trim();
var d = (person[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// Directory + Chips: truncate to 300 chars.
// Accordion: full bio.
function truncate(text, maxChars) {
if (!text) return '';
var s = String(text).trim();
if (s.length <= maxChars) return s;
return s.slice(0, maxChars).trim() + '…';
}

function buildAccessLabel(name, kind, idx, total) {
var part = (total > 1) ? (' (Part ' + (idx + 1) + '/' + total + ')') : '';
var kindTitle = kind.charAt(0).toUpperCase() + kind.slice(1);
return 'Access ' + name + '’s ' + kindTitle + part;
}

function buildChipText(kind, idx, total) {
var kindTitle = kind.charAt(0).toUpperCase() + kind.slice(1);
if (total > 1) return kindTitle + ' ' + (idx + 1) + '/' + total;
return kindTitle;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, bios…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles: quotes, embedded commas, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });

var out = [];
for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== Rendering building blocks ======
function buildHeaderHTML(person) {
var name = fullName(person);
var life = lifespan(person);
var rec = recordedLabel(person);

var metaBits = [];
if (life) metaBits.push('<span>' + esc(life) + '</span>');
if (rec) metaBits.push('<span>' + esc(rec) + '</span>');

var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-head">' +
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>' +
'</div>'
);
}

function buildWikiLinkHTML(person, cls) {
var wiki = (person[COL.wiki] || '').trim();
if (!wiki) return '';
return '<a class="' + cls + '" target="_blank" rel="noopener" href="' + esc(wiki) + '">Read Wiki Page</a>';
}

function buildLinksHTML(person, style) {
var name = fullName(person);

var video = splitLinkCell(person[COL.video]);
var audio = splitLinkCell(person[COL.audio]);
var transcripts = splitLinkCell(person[COL.transcripts]);

var out = [];

function add(kind, urls) {
for (var i = 0; i < urls.length; i++) {
var label = buildAccessLabel(name, kind, i, urls.length);

if (style === 'chips') {
var chipText = buildChipText(kind, i, urls.length);
out.push(
'<a class="ohr-chip" target="_blank" rel="noopener" href="' + esc(urls[i]) + '"' +
' title="' + esc(label) + '"' +
' aria-label="' + esc(label) + '"' +
'>' + esc(chipText) + '</a>'
);
} else {
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
}
}

// Wiki link first (if present)
if (style === 'chips') {
var wikiChip = buildWikiLinkHTML(person, 'ohr-chip');
if (wikiChip) out.push(wikiChip);
} else {
var wikiLink = buildWikiLinkHTML(person, 'ohr-link');
if (wikiLink) out.push(wikiLink);
}

if (video.length) add('video', video);
if (audio.length) add('audio', audio);
if (transcripts.length) add('transcript', transcripts);

if (!out.length) return '';

if (style === 'chips') return '<div class="ohr-chips">' + out.join('') + '</div>';
return '<div class="ohr-links">' + out.join('') + '</div>';
}

// ====== Views ======
function makeDirectoryItem(person) {
var bio = truncate((person[COL.bio] || '').trim(), 300); // truncated
var div = document.createElement('div');
div.className = 'ohr-item';
div.innerHTML =
buildHeaderHTML(person) +
(bio ? '<p class="ohr-bio">' + esc(bio) + '</p>' : '') +
buildLinksHTML(person, 'links');
return div;
}

function makeAccordionItem(person, idx) {
var bio = (person[COL.bio] || '').trim(); // full bio (Option 2)
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

div.innerHTML =
'<div class="ohr-head">' +
'<div class="ohr-titleblock">' +
(function () {
var name = fullName(person);
var life = lifespan(person);
var rec = recordedLabel(person);

var metaBits = [];
if (life) metaBits.push('<span>' + esc(life) + '</span>');
if (rec) metaBits.push('<span>' + esc(rec) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '')
);
})() +
'</div>' +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(bio ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(bio) + '</p></div>' : '') +
'<div class="ohr-divider">' + buildLinksHTML(person, 'links') + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function makeChipsItem(person) {
var bio = truncate((person[COL.bio] || '').trim(), 300); // truncated
var div = document.createElement('div');
div.className = 'ohr-item';
div.innerHTML =
buildHeaderHTML(person) +
(bio ? '<p class="ohr-bio">' + esc(bio) + '</p>' : '') +
buildLinksHTML(person, 'chips');
return div;
}

function renderList(rows) {
var container = $('ohr-list');
if (!container) return;

if (!rows.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var mode = getViewMode();
var frag = document.createDocumentFragment();

for (var i = 0; i < rows.length; i++) {
if (mode === 'accordion') frag.appendChild(makeAccordionItem(rows[i], i));
else if (mode === 'chips') frag.appendChild(makeChipsItem(rows[i]));
else frag.appendChild(makeDirectoryItem(rows[i]));
}

container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count'); if (!el) return;
el.textContent = (n === total) ? (total + ' records') : (n + ' of ' + total + ' records');
}

// ====== Filtering ======
function applyFilters() {
var q = norm(FILTER.q);

// Remove invalid-name records entirely
var valid = ALL.filter(function (row) {
return hasValidName(row);
});

var filtered = valid.filter(function (row) {
if (!q) return true;
var hay = norm(
(row[COL.first] || '') + ' ' +
(row[COL.last] || '') + ' ' +
(row[COL.bio] || '') + ' ' +
(row[COL.birth] || '') + ' ' +
(row[COL.death] || '') + ' ' +
(row[COL.dateFrom] || '') + ' ' +
(row[COL.dateTo] || '')
);
return hay.indexOf(q) !== -1;
});

filtered.sort(function (a, b) {
var A = norm((a[COL.last] || '') + ' ' + (a[COL.first] || ''));
var B = norm((b[COL.last] || '') + ' ' + (b[COL.first] || ''));
return A.localeCompare(B);
});

renderList(filtered);
updateCount(filtered.length, valid.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== Errors ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== Main ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
ALL = parseCSV(text);
if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters();
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();

MediaWiki:Gadget-OralHistoryRecords-Updated.js

2026-02-21T18:29:55Z

Hthach:

/* ===== OralHistoryRecords-Updated.js ===== */
/* global mw */
(function () {
'use strict';

// ====== COLUMN CONFIG ======
// These must match your CSV header names exactly.
var COL = {
transcript: 'Transcript Identifier',
audio: 'Audio Identifier',
video: 'Video Identifier',
first: 'First Name',
last: 'Last Name',
birth: 'Birth Year',
death: 'Death Year',
dateFrom: 'Date From',
dateTo: 'Date To',
summary: 'Summary',
wiki: 'Wiki Link'
};

// ====== STATE ======
var ALL = [];
var FILTER = { q: '' };

// ====== UTILS ======
function onReady(fn) {
if (document.readyState !== 'loading') fn();
else document.addEventListener('DOMContentLoaded', fn);
}
function $(id) { return document.getElementById(id); }
function esc(s) {
s = (s == null ? '' : String(s));
return s.replace(/[&<>"']/g, function (c) {
return ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]);
});
}
function norm(s) {
return (s || '')
.toString()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
}
function debounce(fn, ms) {
var t;
return function () {
var a = arguments, self = this;
clearTimeout(t);
t = setTimeout(function () { fn.apply(self, a); }, ms);
};
}

// Pattern 1: page controls view via <div id="ohr-directory" data-view="...">
function getViewMode() {
var root = $('ohr-directory');
var mode = (root && root.getAttribute('data-view')) ? root.getAttribute('data-view').trim().toLowerCase() : '';
if (mode === 'accordion' || mode === 'chips' || mode === 'directory') return mode;
return 'directory';
}

// Optional override:
// <div id="ohr-directory" data-csv="/index.php/Special:FilePath/OHData.csv">
function getCsvUrl() {
var root = $('ohr-directory');
var override = root ? (root.getAttribute('data-csv') || '').trim() : '';

// wgScript is usually "/index.php" on your site (matches your working URL style)
var base = override || ((mw.config.get('wgScript') || '/index.php') + '/Special:FilePath/OHData.csv');

return base + (base.indexOf('?') === -1 ? '?' : '&') + 'cb=' + Date.now();
}

function toYear(value) {
if (!value) return '';
var s = String(value).trim();
var m = s.match(/\b(1[6-9]\d{2}|20\d{2}|21\d{2})\b/);
return m ? m[1] : '';
}

function recordedLabel(person) {
var y1 = toYear(person[COL.dateFrom]);
var y2 = toYear(person[COL.dateTo]);
if (y1 && y2) return (y1 === y2) ? ('Recorded ' + y1) : ('Recorded ' + y1 + '–' + y2);
if (y1) return 'Recorded ' + y1;
if (y2) return 'Recorded ' + y2;
return '';
}

function splitLinksCSV(value) {
if (!value) return [];
return String(value)
.split(',')
.map(function (x) { return x.trim(); })
.filter(Boolean);
}

// NEW RULE: must have both first and last name to be valid
function hasValidName(person) {
var first = (person[COL.first] || '').trim();
var last = (person[COL.last] || '').trim();
return !!(first && last);
}

function fullName(person) {
var first = (person[COL.first] || '').trim();
var last = (person[COL.last] || '').trim();
if (!first || !last) return '';
return (first + ' ' + last).trim();
}

function lifespan(person) {
var b = (person[COL.birth] || '').trim();
var d = (person[COL.death] || '').trim();
if (b && d) return b + '–' + d;
if (b && !d) return b + '–';
if (!b && d) return '–' + d;
return '';
}

// NEW RULE: summary limited to 300 chars
function truncateSummary(text, maxChars) {
if (!text) return '';
var s = String(text).trim();
if (s.length <= maxChars) return s;
return s.slice(0, maxChars).trim() + '…';
}

function buildAccessLabel(name, kind, idx, total) {
var part = (total > 1) ? (' (Part ' + (idx + 1) + '/' + total + ')') : '';
var kindTitle = kind.charAt(0).toUpperCase() + kind.slice(1);
return 'Access ' + name + '’s ' + kindTitle + part;
}

function buildChipText(kind, idx, total) {
var kindTitle = kind.charAt(0).toUpperCase() + kind.slice(1);
if (total > 1) return kindTitle + ' ' + (idx + 1) + '/' + total;
return kindTitle;
}

// ====== UI ======
function buildToolbar(root) {
var toolbar = document.createElement('div');
toolbar.className = 'ohr-toolbar';

var search = document.createElement('input');
search.id = 'ohr-search';
search.type = 'search';
search.placeholder = 'Search names, summaries…';
search.setAttribute('aria-label', 'Search oral history records');

var count = document.createElement('div');
count.id = 'ohr-count';
count.className = 'ohr-count';
count.setAttribute('aria-live', 'polite');

toolbar.appendChild(search);
toolbar.appendChild(count);
root.insertBefore(toolbar, root.firstChild);
}

// ====== ROBUST CSV PARSER ======
// Handles: quotes, embedded commas, embedded newlines, escaped quotes ("")
function parseCSV(text) {
if (!text) return [];

text = String(text).replace(/\r\n/g, '\n').replace(/\r/g, '\n');

var rows = [];
var row = [];
var field = '';
var i = 0;
var inQuotes = false;

while (i < text.length) {
var c = text[i];

if (inQuotes) {
if (c === '"') {
if (i + 1 < text.length && text[i + 1] === '"') {
field += '"';
i += 2;
continue;
}
inQuotes = false;
i += 1;
continue;
}
field += c;
i += 1;
continue;
}

if (c === '"') {
inQuotes = true;
i += 1;
continue;
}
if (c === ',') {
row.push(field);
field = '';
i += 1;
continue;
}
if (c === '\n') {
row.push(field);
field = '';
rows.push(row);
row = [];
i += 1;
continue;
}

field += c;
i += 1;
}

row.push(field);
if (row.length > 1 || (row.length === 1 && row[0] !== '')) rows.push(row);

if (!rows.length) return [];

var headers = rows[0].map(function (h) { return (h || '').trim(); });

var out = [];
for (var r = 1; r < rows.length; r++) {
var values = rows[r];

// Skip totally empty rows
var nonEmpty = false;
for (var k = 0; k < values.length; k++) {
if (String(values[k] || '').trim() !== '') { nonEmpty = true; break; }
}
if (!nonEmpty) continue;

var obj = {};
for (var c2 = 0; c2 < headers.length; c2++) {
var key = headers[c2];
if (!key) continue;
obj[key] = (c2 < values.length) ? values[c2] : '';
}
out.push(obj);
}
return out;
}

// ====== Rendering building blocks ======
function buildHeaderHTML(person) {
var name = fullName(person);
var life = lifespan(person);
var rec = recordedLabel(person);

var metaBits = [];
if (life) metaBits.push('<span>' + esc(life) + '</span>');
if (rec) metaBits.push('<span>' + esc(rec) + '</span>');

var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<div class="ohr-head">' +
'<div class="ohr-titleblock">' +
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '') +
'</div>' +
'</div>'
);
}

function buildWikiLinkHTML(person, cls) {
var wiki = (person[COL.wiki] || '').trim();
if (!wiki) return '';
return '<a class="' + cls + '" target="_blank" rel="noopener" href="' + esc(wiki) + '">Read Wiki Page</a>';
}

function buildLinksHTML(person, style) {
var name = fullName(person);

var video = splitLinksCSV(person[COL.video]);
var audio = splitLinksCSV(person[COL.audio]);
var transcript = splitLinksCSV(person[COL.transcript]);

var out = [];

function add(kind, urls) {
for (var i = 0; i < urls.length; i++) {
var label = buildAccessLabel(name, kind, i, urls.length);

if (style === 'chips') {
var chipText = buildChipText(kind, i, urls.length);
out.push(
'<a class="ohr-chip" target="_blank" rel="noopener" href="' + esc(urls[i]) + '"' +
' title="' + esc(label) + '"' +
' aria-label="' + esc(label) + '"' +
'>' + esc(chipText) + '</a>'
);
} else {
out.push(
'<a class="ohr-link" target="_blank" rel="noopener" href="' + esc(urls[i]) + '">' +
esc(label) +
'</a>'
);
}
}
}

// Wiki link first (if present)
if (style === 'chips') {
var wikiChip = buildWikiLinkHTML(person, 'ohr-chip');
if (wikiChip) out.push(wikiChip);
} else {
var wikiLink = buildWikiLinkHTML(person, 'ohr-link');
if (wikiLink) out.push(wikiLink);
}

if (video.length) add('video', video);
if (audio.length) add('audio', audio);
if (transcript.length) add('transcript', transcript);

if (!out.length) return '';

if (style === 'chips') return '<div class="ohr-chips">' + out.join('') + '</div>';
return '<div class="ohr-links">' + out.join('') + '</div>';
}

// ====== Views ======
function makeDirectoryItem(person) {
var summary = truncateSummary((person[COL.summary] || '').trim(), 300);
var div = document.createElement('div');
div.className = 'ohr-item';
div.innerHTML =
buildHeaderHTML(person) +
(summary ? '<p class="ohr-bio">' + esc(summary) + '</p>' : '') +
buildLinksHTML(person, 'links');
return div;
}

function makeAccordionItem(person, idx) {
var summary = truncateSummary((person[COL.summary] || '').trim(), 300);
var div = document.createElement('div');
div.className = 'ohr-item';

var panelId = 'ohr-panel-' + idx;
var btnId = 'ohr-btn-' + idx;

div.innerHTML =
'<div class="ohr-head">' +
'<div class="ohr-titleblock">' +
(function () {
var name = fullName(person);
var life = lifespan(person);
var rec = recordedLabel(person);

var metaBits = [];
if (life) metaBits.push('<span>' + esc(life) + '</span>');
if (rec) metaBits.push('<span>' + esc(rec) + '</span>');
var meta = metaBits.join('<span class="ohr-dot">·</span>');

return (
'<h3 class="ohr-name">' + esc(name) + '</h3>' +
(meta ? '<div class="ohr-meta">' + meta + '</div>' : '')
);
})() +
'</div>' +
'<button class="ohr-acc-btn" id="' + btnId + '" type="button" aria-expanded="false" aria-controls="' + panelId + '">Details</button>' +
'</div>' +
'<div class="ohr-acc-panel ohr-hidden" id="' + panelId + '">' +
(summary ? '<div class="ohr-divider"><p class="ohr-bio" style="margin:0">' + esc(summary) + '</p></div>' : '') +
'<div class="ohr-divider">' + buildLinksHTML(person, 'links') + '</div>' +
'</div>';

var btn = div.querySelector('#' + btnId);
var panel = div.querySelector('#' + panelId);
if (btn && panel) {
btn.addEventListener('click', function () {
var open = !panel.classList.contains('ohr-hidden');
if (open) {
panel.classList.add('ohr-hidden');
btn.setAttribute('aria-expanded', 'false');
btn.textContent = 'Details';
} else {
panel.classList.remove('ohr-hidden');
btn.setAttribute('aria-expanded', 'true');
btn.textContent = 'Hide';
}
});
}

return div;
}

function makeChipsItem(person) {
var summary = truncateSummary((person[COL.summary] || '').trim(), 300);
var div = document.createElement('div');
div.className = 'ohr-item';
div.innerHTML =
buildHeaderHTML(person) +
(summary ? '<p class="ohr-bio">' + esc(summary) + '</p>' : '') +
buildLinksHTML(person, 'chips');
return div;
}

function renderList(rows) {
var container = $('ohr-list');
if (!container) return;

if (!rows.length) {
container.innerHTML = '<p class="ohr-muted" style="text-align:center">No matching records.</p>';
return;
}

var mode = getViewMode();
var frag = document.createDocumentFragment();

for (var i = 0; i < rows.length; i++) {
if (mode === 'accordion') frag.appendChild(makeAccordionItem(rows[i], i));
else if (mode === 'chips') frag.appendChild(makeChipsItem(rows[i]));
else frag.appendChild(makeDirectoryItem(rows[i]));
}

container.innerHTML = '';
container.appendChild(frag);
}

function updateCount(n, total) {
var el = $('ohr-count');
if (!el) return;
el.textContent = (n === total) ? (total + ' records') : (n + ' of ' + total + ' records');
}

// ====== Filtering ======
function applyFilters() {
var q = norm(FILTER.q);

// First remove invalid-name records entirely
var valid = ALL.filter(function (row) {
return hasValidName(row);
});

var filtered = valid.filter(function (row) {
if (!q) return true;
var hay = norm(
(row[COL.first] || '') + ' ' +
(row[COL.last] || '') + ' ' +
(row[COL.summary] || '') + ' ' +
(row[COL.birth] || '') + ' ' +
(row[COL.death] || '') + ' ' +
(row[COL.dateFrom] || '') + ' ' +
(row[COL.dateTo] || '')
);
return hay.indexOf(q) !== -1;
});

filtered.sort(function (a, b) {
var A = norm((a[COL.last] || '') + ' ' + (a[COL.first] || ''));
var B = norm((b[COL.last] || '') + ' ' + (b[COL.first] || ''));
return A.localeCompare(B);
});

renderList(filtered);
updateCount(filtered.length, valid.length);
}

function attachHandlers() {
var qInput = $('ohr-search');
if (qInput) {
qInput.addEventListener('input', debounce(function () {
FILTER.q = qInput.value.trim();
applyFilters();
}, 200));
}
}

// ====== Errors ======
function displayError(message) {
var loading = $('ohr-loading');
var error = $('ohr-error');
if (loading) loading.classList.add('ohr-hidden');
if (error) {
error.classList.remove('ohr-hidden');
error.classList.add('ohr-error');
error.innerHTML =
'<p><strong>Failed to load records.</strong></p>' +
'<p class="ohr-muted" style="margin-top:0.5rem">' + esc(message) + '</p>';
}
}

// ====== Main ======
function fetchAndRender() {
var root = $('ohr-directory');
var loading = $('ohr-loading');
var container = $('ohr-list');
if (!root || !container) return;

buildToolbar(root);

fetch(getCsvUrl(), { credentials: 'include', cache: 'no-store' })
.then(function (res) {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.text();
})
.then(function (text) {
ALL = parseCSV(text);
if (loading) loading.classList.add('ohr-hidden');
attachHandlers();
applyFilters();
})
.catch(function (err) {
displayError('There was an error accessing the records. Details: ' + err.message);
console.error(err);
});
}

onReady(function () {
if ($('ohr-directory')) {
mw.loader.using([]).then(fetchAndRender);
}
});
})();