/**
|
* Manages view states: grid, list, or table
|
*/
|
class ViewController {
|
constructor(container, store) {
|
this.a11y = window.jvbA11y;
|
this.error = window.jvbError;
|
|
this.container = container;
|
this.initElements();
|
this.settings = window.jvbUserSettings;
|
|
this.store = store;
|
|
this.isTimeline = !!document.querySelector('[data-timeline]');
|
|
this.items = {
|
list: new Map(),
|
grid: new Map(),
|
table: new Map(),
|
}
|
this.currentView = this.container.dataset.view ?? 'grid';
|
this.selectedItems = new Set();
|
this.subscribers = new Set();
|
|
this.init();
|
}
|
|
initElements() {
|
this.selectors = {
|
grid: '.item-grid',
|
table: {
|
table: 'form.table',
|
form: 'table',
|
body: 'table body',
|
header: 'table thead',
|
footer: 'table tfoot',
|
selectedColumns: '.all-filters .multi-select',
|
columns: 'thead th'
|
},
|
bulk: {
|
count: '.bulk-controls .selected-count',
|
control: '.bulk-controls .bulk-actions',
|
select: '.bulk-controls select',
|
selectAll: '.select-all'
|
}
|
}
|
|
this.ui = window.uiFromSelectors(this.selectors, this.container);
|
}
|
|
init() {
|
// Subscribe to store updates
|
this.store.subscribe((event, data) => {
|
switch(event) {
|
case 'items-saved':
|
// this.handleDataUpdate(data);
|
break;
|
case 'data-loaded':
|
this.handleItemsUpdate();
|
break;
|
case 'item-saved':
|
// this.updateItem(data.item);
|
break;
|
case 'item-deleted':
|
// this.deleteItem(data.item);
|
break;
|
}
|
});
|
|
// Set up view switcher
|
this.setupViewSwitcher();
|
this.changeHandler = this.handleChange.bind(this);
|
this.clickHandler = this.handleClick.bind(this);
|
this.lastSelected = null;
|
|
document.addEventListener('change', this.changeHandler);
|
document.addEventListener('click', this.clickHandler);
|
}
|
|
handleClick(e) {
|
let select = e.target.closest('.select-item-label');
|
if (select) {
|
if (e.shiftKey) {
|
e.preventDefault();
|
this.handleRangeSelection(e.target);
|
} else {
|
this.lastSelected = e.target.closest('.item');
|
}
|
}
|
}
|
|
handleRangeSelection(target) {
|
if (!this.lastSelected) {
|
this.lastSelected = target.closest('.item');
|
return;
|
}
|
|
const current = target.closest('.item');
|
const all = Array.from(this.container.querySelectorAll('.item'));
|
|
const lastIndex = all.indexOf(this.lastSelected);
|
const currentIndex = all.indexOf(current);
|
|
if (lastIndex === -1 || currentIndex === -1) {
|
this.lastSelected = current;
|
return;
|
}
|
|
const start = Math.min(lastIndex, currentIndex);
|
const end = Math.max(lastIndex, currentIndex);
|
|
let newSelections = 0;
|
for (let i = start; i <= end; i++) {
|
let item = all[i];
|
this.selectedItems.add(item.dataset.id);
|
let checkbox = item.querySelector('.select-item');
|
if (checkbox && !checkbox.checked) {
|
checkbox.checked = true;
|
newSelections++;
|
}
|
}
|
|
this.updateSelectionUI();
|
window.jvbA11y.announce(`Selected ${newSelections} items in range.`);
|
|
|
}
|
|
handleChange(e) {
|
if (e.target.closest('.select-all')) {
|
this.selectAll(e.target.checked);
|
} else if (e.target.closest('.select-item')) {
|
this.toggleSelection(e.target.closest('.item').dataset.id);
|
} else if (e.target.closest('details.multi-select')) {
|
this.toggleColumns(e.target.id, e.target.checked);
|
}
|
}
|
|
toggleColumns(column, show) {
|
let theColumn = this.ui.table.columns.filter(col => col.className === column);
|
// console.log(theColumn);
|
// console.log('Toggle Columns');
|
// console.log(column, show);
|
// console.log(this.ui.table.columns);
|
}
|
|
setupViewSwitcher() {
|
document.querySelectorAll('[data-view]').forEach(btn => {
|
this.settings.addSetting(btn);
|
btn.addEventListener('click', () => {
|
this.currentView = btn.dataset.view;
|
this.render();
|
});
|
});
|
|
const checkedView = document.querySelector('[data-view]:checked');
|
if (checkedView) {
|
this.currentView = checkedView.dataset.view;
|
}
|
}
|
|
/**
|
* Handle items update
|
*/
|
handleItemsUpdate() {
|
this.render();
|
}
|
|
render() {
|
if (!this.store) {
|
console.error('No store connected to renderer');
|
return;
|
}
|
const items = this.store.getFiltered();
|
|
// Handle empty state
|
if (items.length === 0) {
|
console.log('Nothing to show');
|
this.renderEmpty();
|
return;
|
}
|
|
switch(this.currentView) {
|
case 'grid':
|
this.renderGrid(items);
|
break;
|
case 'table':
|
this.renderTable(items);
|
break;
|
case 'list':
|
this.renderList(items);
|
break;
|
}
|
|
this.updateSelectionUI();
|
}
|
|
renderEmpty() {
|
this.toggleTable(false);
|
window.removeChildren(this.ui.grid);
|
|
const empty = window.getTemplate('emptyState');
|
if (empty) {
|
this.ui.grid.appendChild(empty);
|
this.a11y?.announce('No items found');
|
}
|
}
|
|
renderGrid(items) {
|
this.toggleGrid();
|
this.toggleTable(false);
|
|
this.ui.grid.classList.remove('list-view');
|
this.ui.grid.classList.add('grid-view');
|
|
|
const fragment = document.createDocumentFragment();
|
|
items.forEach(item => {
|
let card = this.renderGridItem(item);
|
fragment.appendChild(card);
|
});
|
this.ui.grid.appendChild(fragment);
|
}
|
renderGridItem(item) {
|
if (this.items.grid.has(item.id)) {
|
return this.items.grid.get(item.id);
|
}
|
const card = window.getTemplate('gridView');
|
card.dataset.id = item.id;
|
|
if (item._pending) card.classList.add('pending');
|
|
let [
|
checkbox,
|
label,
|
img,
|
edit,
|
trash
|
] = [
|
card.querySelector('input'),
|
card.querySelector('label'),
|
card.querySelector('img'),
|
card.querySelector('[data-action="edit"]'),
|
card.querySelector('[data-action="trash"]'),
|
];
|
|
[
|
checkbox.value,
|
checkbox.id,
|
checkbox.checked,
|
label.htmlFor,
|
edit.dataset.id,
|
trash.dataset.id
|
] = [
|
item.id,
|
`select-${item.id}`,
|
this.selectedItems.has(`${item.id}`),
|
`select-${item.id}`,
|
item.id,
|
item.id
|
];
|
// if (this.store.config.storeName === 'progress') {
|
// [
|
// img.src,
|
// img.alt,
|
// ] = [
|
// item.images[item.fields['timeline'][0].post_thumbnail]?.medium??'',
|
// item.images[item.fields['timeline'][0].post_thumbnail]?.alt??'',
|
// ];
|
// } else {
|
[
|
img.src,
|
img.alt,
|
] = [
|
item.images[item.fields.post_thumbnail]?.medium??'',
|
item.images[item.fields.post_thumbnail]?.alt??'',
|
];
|
|
// }
|
|
this.items.grid.set(item.id, card);
|
return card;
|
}
|
|
toggleTable(on) {
|
if (this.ui.table.selectedColumns) {
|
this.ui.table.selectedColumns.hidden = !on;
|
}
|
|
if (on && !this.ui.table.table) {
|
let table = window.getTemplate('contentTable');
|
this.container.append(table);
|
this.ui.table.table = this.container.querySelector('form.table');
|
this.ui.table.form = this.ui.table.table.querySelector('table');
|
this.ui.table.header = this.ui.table.form.querySelector('thead');
|
this.ui.table.footer = this.ui.table.form.querySelector('tfoot');
|
this.ui.table.body = this.ui.table.form.querySelector('tbody');
|
this.ui.table.columns = this.container.querySelectorAll(this.selectors.table.columns);
|
}
|
|
if (this.ui.table.table) {
|
this.ui.table.table.hidden = !on;
|
if (on) {
|
this.notify('table-view', this.ui.table.table);
|
}else {
|
this.notify('not-table-view', this.ui.table.table);
|
}
|
|
if (this.ui.table.body){
|
window.removeChildren(this.ui.table.body);
|
}
|
}
|
|
if (this.ui.table.selectedColumns) {
|
this.ui.table.selectedColumns.hidden = !on;
|
}
|
}
|
|
toggleGrid() {
|
window.removeChildren(this.ui.grid);
|
}
|
|
renderTable(items) {
|
this.toggleTable(true);
|
this.toggleGrid();
|
|
items.forEach(item => {
|
|
let row = (this.isTimeline) ? this.renderTimelineTableItem(item) : this.renderTableItem(item);
|
|
if (this.ui.table.body) {
|
this.ui.table.body.append(row);
|
} else {
|
if (!this.ui.table.footer) {
|
this.ui.table.footer = this.ui.table.table.querySelector('tfoot');
|
}
|
this.ui.table.form.insertBefore(row, this.ui.table.footer);
|
}
|
|
});
|
|
window.jvbSelector.scanExistingFields();
|
|
}
|
|
renderTableItem(item) {
|
if (this.items.table.has(item.id)) {
|
return this.items.table.get(item.id);
|
}
|
|
const row = window.getTemplate('tableView');
|
row.dataset.id = item.id;
|
|
[
|
row.querySelector('.select-item').id,
|
row.querySelector('.select-item').value,
|
row.querySelector('.select-item').checked,
|
row.querySelector('.select-item + label').htmlFor,
|
] = [
|
item.id,
|
item.id,
|
this.selectedItems.has(`${item.id}`),
|
item.id,
|
];
|
let status = row.querySelector(`input[name="post_status"][value="${item.status}"]`);
|
if (status) {
|
status.checked = true;
|
}
|
|
if (Object.hasOwn(this.ui.table.table.dataset, 'edit')) {
|
new window.jvbPopulate(row, item);
|
} else {
|
for (let [key, value] of Object.entries(item)) {
|
let col = row.querySelector(`[data-field="${key}"]`);
|
if (col) {
|
let p = col.querySelector('p');
|
if (col.dataset.fieldType === 'date') {
|
value = window.formatTimeAgo(value);
|
}
|
p.textContent = value;
|
}
|
}
|
}
|
|
|
// Clean up after population
|
this.cleanupTableRow(row);
|
|
this.items.table.set(item.id, row);
|
return row;
|
}
|
|
renderTimelineTableItem(item) {
|
if (this.items.table.has(item.id)) {
|
return this.items.table.get(item.id);
|
}
|
|
const row = window.getTemplate('tableView');
|
row.dataset.id = item.id;
|
|
[
|
row.querySelector('.select-item').id,
|
row.querySelector('.select-item').value,
|
row.querySelector('.select-item').checked,
|
row.querySelector('.select-item + label').htmlFor,
|
] = [
|
item.id,
|
item.id,
|
this.selectedItems.has(`${item.id}`),
|
item.id,
|
];
|
|
let timelinePoint = row.querySelector('.timeline-point');
|
let tbody = row;
|
|
// Populate shared fields
|
let sharedRow = row.querySelector('tr.shared');
|
new window.jvbPopulate(sharedRow, item);
|
this.prefixTimelineFieldNames(sharedRow, item.id);
|
this.cleanupTableRow(sharedRow);
|
|
// Handle timeline points
|
if (item.fields.timeline && typeof item.fields.timeline === 'object') {
|
const timelineArray = Object.entries(item.fields.timeline);
|
|
timelineArray.forEach(([imgId, timeline], index) => {
|
let point = timelinePoint.cloneNode(true);
|
point.dataset.index = index;
|
point.dataset.imageId = imgId;
|
|
// NEW: Create item-like structure for timeline point
|
const timelineItem = {
|
fields: timeline,
|
images: item.images,
|
taxonomies: {} // Timeline points don't have taxonomies
|
};
|
|
new window.jvbPopulate(point, timelineItem);
|
|
this.cleanupTableRow(point);
|
let imgdata = item.images[timeline.post_thumbnail];
|
if (imgdata) {
|
point.querySelector('.field.upload').title = imgdata['image-title'];
|
}
|
|
this.prefixTimelineFieldNames(point, timeline.id);
|
|
tbody.insertBefore(point, timelinePoint);
|
});
|
}
|
|
timelinePoint.remove();
|
|
this.items.table.set(item.id, row);
|
return row;
|
}
|
|
/**
|
* Timeline uses bracket notation: [postId]fieldName
|
* This matches the collectTimeline() method in FormController
|
*/
|
prefixTimelineFieldNames(row, postId) {
|
row.querySelectorAll('input, textarea, select').forEach(field => {
|
const currentName = field.name;
|
|
if (!currentName || currentName.startsWith('[') ||
|
currentName === 'form-id' || currentName.startsWith('_')) {
|
return;
|
}
|
|
// Use bracket notation for timeline
|
|
let label = field.nextElementSibling;
|
field.name = `[${postId}]${currentName}`;
|
if (label && label.tagName === 'LABEL') {
|
field.id = `[${postId}]${field.id}`;
|
label.htmlFor = field.id;
|
}
|
});
|
}
|
|
cleanupTableRow(row) {
|
row.querySelectorAll('td[data-field]').forEach(field => {
|
// Remove labels (they're in the header)
|
field.querySelectorAll('label:not(.select-item-label,.radio-option,[for*="select-item"])').forEach(label => {
|
if (!label.closest('.radio-options')) {
|
label.remove();
|
}
|
});
|
|
// Special handling for image/upload fields
|
// if (field.dataset.fieldType === 'image' || field.dataset.fieldType === 'upload') {
|
// const itemGrid = field.querySelector('.item-grid');
|
// const uploadContainer = field.querySelector('.file-upload-container');
|
//
|
// // If grid has items (populated), just remove upload UI
|
// if (itemGrid && itemGrid.children.length > 0) {
|
// // Remove upload controls but keep the populated items
|
// field.querySelectorAll('.progress, .upload-select, .status, details:not(.item-grid details)').forEach(el => {
|
// el.remove();
|
// });
|
// // Keep upload container hidden if it was hidden
|
// if (uploadContainer && uploadContainer.hidden) {
|
// uploadContainer.hidden = true;
|
// }
|
// } else {
|
// // No items, remove all upload UI
|
// field.querySelectorAll('.file-upload-wrapper, .progress, .upload-select, .status, details').forEach(el => {
|
// el.remove();
|
// });
|
// }
|
// }
|
|
// Remove toggle labels for true_false fields
|
if (field.dataset.fieldType === 'true_false') {
|
field.querySelector('.toggle-label')?.remove();
|
}
|
|
// Remove field labels for checkbox/radio groups
|
if (['checkbox', 'radio', 'select'].includes(field.dataset.fieldType)) {
|
field.querySelector('.label')?.remove();
|
}
|
});
|
}
|
|
renderList(items) {
|
this.toggleGrid();
|
this.toggleTable(false);
|
|
this.ui.grid.classList.remove('grid-view');
|
this.ui.grid.classList.add('list-view');
|
|
items.forEach(item => {
|
let row = this.renderListItem(item);
|
this.ui.grid.appendChild(row);
|
});
|
}
|
|
renderListItem(item) {
|
if (this.items.list.has(item.id)) {
|
return this.items.list.get(item.id);
|
}
|
const row = window.getTemplate('listView');
|
row.dataset.id = item.id;
|
|
if (item._pending) row.classList.add('pending');
|
let select = row.querySelector('.select-item');
|
let label = row.querySelector('.select-item + label');
|
[
|
select.id,
|
select.value,
|
select.checked,
|
label.htmlFor
|
] = [
|
item.id,
|
item.id,
|
this.selectedItems.has(`${item.id}`),
|
item.id,
|
];
|
|
row.querySelectorAll('[data-attr]').forEach(attr => {
|
if (item[attr.dataset['attr']] !== ''){
|
attr.textContent = item[attr.dataset['attr']];
|
} else {
|
attr.remove();
|
}
|
});
|
row.querySelectorAll('[data-field]').forEach(field => {
|
let value = item.fields[field.dataset['field']];
|
if (value !== '') {
|
if (field.tagName === 'DIV') {
|
field.innerHTML = value;
|
} else {
|
field.textContent = value;
|
}
|
} else {
|
field.remove();
|
}
|
});
|
|
let img = row.querySelector('img');
|
if (img) {
|
[
|
img.src,
|
img.alt
|
] = [
|
item.images[item.fields.post_thumbnail]?.medium??'',
|
item.images[item.fields.post_thumbnail]?.alt??'',
|
]
|
}
|
this.items.list.set(item.id, row);
|
return row;
|
}
|
|
setupTimelineDragHandler() {
|
if (!this.isTimeline || this.currentView !== 'table') return;
|
|
// Clean up existing handler if any
|
if (this.timelineDragHandler) {
|
this.timelineDragHandler.destroy();
|
}
|
|
this.timelineDragHandler = new window.jvbDragHandler({
|
draggableSelector: '.timeline-point',
|
dropTargetSelector: '.timeline-point',
|
handleSelector: '.drag-handle',
|
|
getItemId: (element) => {
|
return element.dataset.imageId;
|
},
|
|
getSelectedItems: () => {
|
return [];
|
},
|
|
validateDrop: (itemIds, dropTarget) => {
|
const draggedRow = document.querySelector(`.timeline-point[data-image-id="${itemIds[0]}"]`);
|
if (!draggedRow) return false;
|
|
const draggedTbody = draggedRow.closest('tbody');
|
const targetTbody = dropTarget.closest('tbody');
|
|
return draggedTbody === targetTbody;
|
},
|
|
onDragStart: (itemIds, element) => {
|
element.classList.add('is-dragging');
|
},
|
|
onDrop: (itemIds, dropTarget) => {
|
const draggedRow = document.querySelector(`.timeline-point[data-image-id="${itemIds[0]}"]`);
|
if (!draggedRow) return;
|
|
// Remove all drop indicators
|
document.querySelectorAll('.drop-above, .drop-below').forEach(el => {
|
el.classList.remove('drop-above', 'drop-below');
|
});
|
|
const tbody = draggedRow.closest('tbody');
|
const dropPosition = dropTarget.dataset.dropPosition;
|
|
// Insert based on drop position
|
if (dropPosition === 'above') {
|
tbody.insertBefore(draggedRow, dropTarget);
|
} else {
|
tbody.insertBefore(draggedRow, dropTarget.nextSibling);
|
}
|
|
draggedRow.classList.remove('is-dragging');
|
this.updateTimelineOrder(tbody);
|
},
|
|
onDragEnd: (itemIds, success) => {
|
// Clean up all drag classes
|
document.querySelectorAll('.is-dragging, .drop-above, .drop-below').forEach(el => {
|
el.classList.remove('is-dragging', 'drop-above', 'drop-below');
|
});
|
},
|
|
previewElement: '.drag-handle',
|
previewOptions: {
|
offset: { x: -20, y: -20 },
|
showCount: false
|
}
|
});
|
|
// Add custom hover logic for better drop positioning
|
this.addTimelineDragHoverLogic();
|
}
|
|
addTimelineDragHoverLogic() {
|
let currentHover = null;
|
|
document.addEventListener('pointermove', (e) => {
|
if (!document.querySelector('.timeline-point.is-dragging')) return;
|
|
const target = e.target.closest('.timeline-point:not(.is-dragging)');
|
if (!target) {
|
if (currentHover) {
|
currentHover.classList.remove('drop-above', 'drop-below');
|
delete currentHover.dataset.dropPosition;
|
currentHover = null;
|
}
|
return;
|
}
|
|
// Determine if we're in the top or bottom half
|
const rect = target.getBoundingClientRect();
|
const midpoint = rect.top + (rect.height / 2);
|
const isTopHalf = e.clientY < midpoint;
|
|
// Update classes
|
if (currentHover && currentHover !== target) {
|
currentHover.classList.remove('drop-above', 'drop-below');
|
delete currentHover.dataset.dropPosition;
|
}
|
|
target.classList.remove('drop-above', 'drop-below');
|
target.classList.add(isTopHalf ? 'drop-above' : 'drop-below');
|
target.dataset.dropPosition = isTopHalf ? 'above' : 'below';
|
|
currentHover = target;
|
});
|
}
|
updateTimelineOrder(tbody) {
|
const postId = parseInt(tbody.dataset.id);
|
const rows = Array.from(tbody.querySelectorAll('.timeline-point'));
|
|
const item = this.store.get(postId);
|
if (!item) return;
|
|
let timeline = {};
|
// Update menu_order for each timeline point
|
rows.forEach((row, index) => {
|
const imgID = row.dataset.imageId;
|
timeline[imgID] = item.fields.timeline[imgID];
|
});
|
item.fields.timeline = timeline;
|
|
// Update store (triggers autosave)
|
this.store.save(item);
|
this.notify('order-changed', postId);
|
this.a11y?.announce(`Timeline order updated. ${rows.length} steps reordered.`);
|
}
|
|
extractRowFields(row) {
|
const fields = {};
|
row.querySelectorAll('[data-field]').forEach(cell => {
|
const fieldName = cell.dataset.field;
|
const input = cell.querySelector('input, textarea, select');
|
|
if (input) {
|
if (input.type === 'checkbox') {
|
fields[fieldName] = input.checked;
|
} else {
|
fields[fieldName] = input.value;
|
}
|
}
|
});
|
return fields;
|
}
|
|
toggleSelection(id) {
|
if (this.selectedItems.has(id)) {
|
this.selectedItems.delete(id);
|
} else {
|
this.selectedItems.add(id);
|
}
|
this.updateSelectionUI();
|
}
|
|
selectAll(check) {
|
const items = this.container.querySelectorAll('.item');
|
if (!check) {
|
this.selectedItems.clear();
|
this.ui.bulk.selectAll.checked = false;
|
this.ui.bulk.select.value = '';
|
}
|
items.forEach(item => {
|
if (check) {
|
this.selectedItems.add(item.dataset.id)
|
}
|
|
item.querySelector('.select-item').checked = check;
|
});
|
|
this.updateSelectionUI();
|
}
|
|
clearSelection() {
|
this.selectAll(false);
|
this.ui.bulk.select.value = '';
|
}
|
|
updateSelectionUI() {
|
const count = this.selectedItems.size;
|
|
if (this.ui.bulk.control) {
|
this.ui.bulk.control.hidden = count === 0;
|
}
|
if (this.ui.bulk.count) {
|
let item = count === 1 ? 'item' : 'items';
|
this.ui.bulk.count.hidden = count === 0;
|
this.ui.bulk.count.textContent = count === 0 ? '' : `${count} ${item} selected`;
|
}
|
}
|
|
|
/**
|
* Event system
|
*/
|
subscribe(callback) {
|
this.subscribers.add(callback);
|
return () => this.subscribers.delete(callback);
|
}
|
|
notify(event, data) {
|
this.subscribers.forEach(cb => cb(event, data));
|
}
|
}
|
|
window.jvbViews = ViewController;
|
