dhorn/Protocol-oral-history-project
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

enhance grid layout and functionality for articles; improve spacing and sigil generation

Browse Source
This commit is contained in:
Drew
2025-04-07 12:22:06 -06:00
parent ac88d5e4d0
commit fa2579bc08
4 changed files with 144 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
static/js/wompum.js
View File

@ -1,7 +1,6 @@
class WompumGrid {
constructor(element, metadata) {
constructor(element) {
this.gridElement = element;
this.metadata = metadata;
this.gridSize = {
columns: parseInt(element.dataset.columns) || 7,
rows: parseInt(element.dataset.rows) || 5
@ -10,27 +9,19 @@ class WompumGrid {
// Set grid template columns based on data attribute or default
this.gridElement.style.gridTemplateColumns = `repeat(${this.gridSize.columns}, 1fr)`;
// Generate sigils for each metadata component
this.sigils = {
narrator: Sigil.generate(metadata.narrator),
subject: Sigil.generate(metadata.subject),
facilitator: Sigil.generate(metadata.facilitator)
};
// Initialize color calculator
this.colorCalculator = new ColorCalculator();
// Store sigils as data attributes for future use
this.gridElement.dataset.narratorSigil = JSON.stringify(this.sigils.narrator);
this.gridElement.dataset.subjectSigil = JSON.stringify(this.sigils.subject);
this.gridElement.dataset.facilitatorSigil = JSON.stringify(this.sigils.facilitator);
// Generate sigil from text content if provided
const text = element.dataset.text || '';
this.sigil = Sigil.generate(text);
this.gridElement.dataset.sigil = JSON.stringify(this.sigil);
}
// Get sigil digit for a cell based on its section and position
getSigilDigit(section, position) {
const sigil = this.sigils[section];
if (!sigil || !sigil.length) return 0;
return sigil[position % sigil.length];
// Get sigil digit for a cell based on its position
getSigilDigit(position) {
if (!this.sigil || !this.sigil.length) return 0;
return this.sigil[position % this.sigil.length];
}
// Get influences from adjacent cells
@ -60,18 +51,35 @@ class WompumGrid {
return influences;
}
// Apply metadata-based design to the grid
// Create basic grid cells
createGrid() {
const totalCells = this.gridSize.columns * this.gridSize.rows;
for (let i = 0; i < totalCells; i++) {
const cell = document.createElement('div');
const column = i % this.gridSize.columns;
const row = Math.floor(i / this.gridSize.columns);
cell.className = 'wompum-cell';
cell.setAttribute('data-cell-index', i);
cell.setAttribute('data-column', column);
cell.setAttribute('data-row', row);
// Set sigil digit based on cell position
const sigilDigit = this.getSigilDigit(i);
cell.setAttribute('data-sigil-digit', sigilDigit);
this.gridElement.appendChild(cell);
}
}
applyMetadataDesign() {
const cells = this.gridElement.querySelectorAll('.wompum-cell');
cells.forEach(cell => {
const section = cell.dataset.section;
const column = parseInt(cell.dataset.column);
const row = parseInt(cell.dataset.row);
// Get sigil digit for this cell
const sigilDigit = this.getSigilDigit(section, row);
cell.dataset.sigilDigit = sigilDigit;
const sigilDigit = parseInt(cell.dataset.sigilDigit);
// Get influences from adjacent cells
const influences = this.getInfluences(column, row);
@ -82,40 +90,51 @@ class WompumGrid {
});
}
// Initialize the grid
init() {
if (!this.gridElement) return;
this.createGrid();
this.applyMetadataDesign();
this.setGridAreas();
}
}
class ArticleGrid extends WompumGrid {
constructor(element, metadata) {
super(element);
this.metadata = metadata;
// Generate sigils for each metadata component
this.sigils = {
narrator: Sigil.generate(metadata.narrator),
subject: Sigil.generate(metadata.subject),
facilitator: Sigil.generate(metadata.facilitator)
};
// Store sigils as data attributes
Object.entries(this.sigils).forEach(([key, value]) => {
this.gridElement.dataset[`${key}Sigil`] = JSON.stringify(value);
});
}
// Define grid areas for each section
setGridAreas() {
const totalColumns = this.gridSize.columns;
const narratorColumns = 2;
const facilitatorColumns = 2;
const subjectColumns = totalColumns - narratorColumns - facilitatorColumns;
this.gridElement.style.gridTemplateAreas = `
"narrator subject facilitator"
`;
// this.gridElement.style.gridTemplateColumns = `${narratorColumns}fr ${subjectColumns}fr ${facilitatorColumns}fr`;
getSigilDigit(position, section) {
const sigil = this.sigils[section];
if (!sigil || !sigil.length) return 0;
return sigil[position % sigil.length];
}
// Create the grid cells with position awareness
createGrid() {
const totalCells = this.gridSize.columns * this.gridSize.rows;
const narratorColumns = 2;
const facilitatorColumns = 2;
for (let i = 0; i < totalCells; i++) {
const cell = document.createElement('div');
const column = i % this.gridSize.columns;
const row = Math.floor(i / this.gridSize.columns);
// Determine which section this cell belongs to
// Determine section based on column position
let section;
if (column < 2) section = 'narrator';
else if (column >= this.gridSize.columns - 2) section = 'facilitator';
if (column < narratorColumns) section = 'narrator';
else if (column >= this.gridSize.columns - facilitatorColumns) section = 'facilitator';
else section = 'subject';
cell.className = 'wompum-cell';
@ -124,26 +143,33 @@ class WompumGrid {
cell.setAttribute('data-column', column);
cell.setAttribute('data-row', row);
// Set sigil digit based on section and position
const sigilDigit = this.getSigilDigit(row, section);
cell.setAttribute('data-sigil-digit', sigilDigit);
this.gridElement.appendChild(cell);
}
}
}
// Wait for DOM to be ready
// Initialize grids
document.addEventListener('DOMContentLoaded', () => {
// Find all grid elements
const gridElements = document.querySelectorAll('.wompum-grid');
// Initialize a grid for each element found
gridElements.forEach(element => {
// Initialize basic grids
document.querySelectorAll('.wompum-grid').forEach(element => {
const grid = new WompumGrid(element);
grid.init();
});
// Initialize article grids
document.querySelectorAll('.wompum-article-grid').forEach(element => {
let metadata = {};
try {
metadata = JSON.parse(element.dataset.metadata || '{}');
} catch (e) {
console.error('Error parsing metadata for grid:', e);
console.error('Error parsing metadata for article grid:', e);
}
const wompum = new WompumGrid(element, metadata);
wompum.init();
const grid = new ArticleGrid(element, metadata);
grid.init();
});
});
});