From 58e8ae0759ccfa97c478ccae4e0778bdce70966f Mon Sep 17 00:00:00 2001
From: Jake Vanderwerf <get@jakevanderwerf.ca>
Date: Thu, 22 Jan 2026 22:40:02 +0000
Subject: [PATCH] =DirectoryManager.php updates, some javascript tweaks for CRUD.js, and minor style changes
---
src/feed/view.js | 226 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 130 insertions(+), 96 deletions(-)
diff --git a/src/feed/view.js b/src/feed/view.js
index 4e118c4..103423b 100644
--- a/src/feed/view.js
+++ b/src/feed/view.js
@@ -6,6 +6,7 @@
this.a11y = window.jvbA11y;
this.error = window.jvbError;
this.cache = new window.jvbCache('feed');
+ this.templates = window.jvbTemplates;
this.config = {
source: '',
@@ -20,6 +21,7 @@
}
init() {
this.initElements();
+ this.defineTemplates();
this.initListeners();
this.initFilters();
@@ -27,12 +29,20 @@
requestIdleCallback(() => {
this.initStore();
this.initTaxonomies();
+
+ this.processCachedFilters();
+ this.processURLFilters();
+ this.updateFilterUI();
this.initGallery();
}, { timeout: 2000 });
} else {
setTimeout(() => {
this.initStore();
this.initTaxonomies();
+
+ this.processCachedFilters();
+ this.processURLFilters();
+ this.updateFilterUI();
this.initGallery();
}, 100);
}
@@ -56,10 +66,12 @@
buttons: {
loadMore: 'button.load-more',
remove: '.remove-term',
- clearFilters: 'button.clear-filters'
+ clearFilters: 'button.clear-filters',
+ refresh: 'button[data-action="refresh"]'
}
};
this.ui = window.uiFromSelectors(this.selectors, this.container);
+ this.ui.buttons.refresh = document.querySelector(this.selectors.buttons.refresh);
//Add content and taxonomies
this.ui.content = this.ui.filters.container.querySelectorAll('[name="content"]');
@@ -103,9 +115,6 @@
if (this.config.source) defaults.source = this.config.source;
this.filters = defaults;
- this.processCachedFilters();
- this.processURLFilters();
- this.updateFilterUI();
this.defaults = {...defaults};
}
updateFilterUI() {
@@ -121,8 +130,8 @@
if(group) {
for (let input of group) {
let [filter, value] = [input.dataset.filter, input.value];
- if (!Object.hasOwn(this.filters, filter)) break;
- let doit = this.filters[filter] === value;
+ if (!Object.hasOwn(this.store.filters, filter)) break;
+ let doit = this.store.filters[filter] === value;
if (doit) {
input.checked = doit;
break;
@@ -131,13 +140,13 @@
}
});
- if (Object.hasOwn(this.filters, 'taxonomy')) {
- for (let [taxonomy, terms] of Object.entries(this.filters.taxonomy)) {
+ if (Object.hasOwn(this.store.filters, 'taxonomy')) {
+ for (let [taxonomy, terms] of Object.entries(this.store.filters.taxonomy)) {
terms.forEach(termId => {
termId = parseInt(termId);
const term = this.selector.store.get(termId);
if (term) {
- this.createTermElement(term);
+ this.createTermElement(termId);
}
});
}
@@ -164,6 +173,12 @@
if (remove) {
this.removeSelectedTerm(remove);
}
+
+ let refresh = window.targetCheck(e, this.selectors.buttons.refresh);
+ if (refresh) {
+ this.store.clearCache();
+ this.store.fetch();
+ }
}
nextPage() {
@@ -204,6 +219,9 @@
...this.defaults,
taxonomy: null
});
+
+ this.updateURL();
+ this.saveToCacheFilters();
}
resetFilters(filters) {
@@ -213,6 +231,9 @@
... filters
}
this.store.setFilters(filters);
+
+ this.updateURL();
+ this.saveToCacheFilters();
}
getFieldId(taxonomy) {
@@ -315,17 +336,9 @@
const term = this.selector.store.get(termId);
if (!term) return;
if (this.ui.selected.querySelector(`[data-id="${termId}"]`)) return;
- let icon = this.getTaxonomyIcon(term.taxonomy);
- let template = window.getTemplate('feedTerm');
- if (!template) return;
- let [iconEl,span] = [template.querySelector('.icon'), template.querySelector('span')];
- if (!iconEl || !span) return;
- template.dataset.id = term.id;
- template.dataset.taxonomy = term.taxonomy;
- iconEl.className = `icon icon-${icon}`;
- span.textContent = term.name;
- this.ui.selected.append(template);
+ term.icon = this.getTaxonomyIcon(term.taxonomy);
+ this.ui.selected.append(this.templates.create('feedTerm', term));
}
processCachedFilters() {
@@ -338,31 +351,41 @@
}
processURLFilters() {
- if (this.filters.page > 1) return false;
+ if (!this.isFirstPage()) return false;
const params = new URLSearchParams(window.location.search);
if (!params.toString()) return false;
-
+ let shouldUpdate = false;
this.allowedFilters.forEach(filter => {
let value = params.get(`f_${filter}`);
if (value) {
+ shouldUpdate = true;
this.filters[filter] = value;
}
});
+ let hasTax = false;
params.forEach((value, key) => {
if (key.startsWith('f_tax_')) {
+ hasTax = true;
+ shouldUpdate = true;
const taxonomy = key.replace('f_tax_','');
this.taxFilters[taxonomy] = value.split(',').map(Number);
}
});
+ if (shouldUpdate) {
+ if (hasTax) {
+ this.filters.taxonomy = this.taxFilters;
+ }
+ this.resetFilters(this.filters);
+ }
return true;
}
updateURL() {
const params = new URLSearchParams();
this.allowedFilters.forEach(key => {
- if (Object.hasOwn(this.filters, key) && this.filters[key] !== this.defaults[key]) {
- params.set(`f_${key}`, this.filters[key]);
+ if (Object.hasOwn(this.store.filters, key) && this.store.filters[key] !== this.defaults[key]) {
+ params.set(`f_${key}`, this.store.filters[key]);
}
});
@@ -371,29 +394,31 @@
params.set(`f_tax_${tax}`, terms.join(','));
}
}
+
const newURL = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
- if (newURL !== window.location.pathname) {
- window.history.pushState({filters:this.filters}, '', newURL)
+ const currentURL = window.location.pathname + window.location.search; // Change this line
+
+ if (newURL !== currentURL) {
+ window.history.pushState({filters:this.store.filters}, '', newURL);
}
}
saveToCacheFilters() {
- // Save each filter that's changed from defaults
- Object.keys(this.filters).forEach(filter => {
- if (this.filters[filter] !== this.defaults[filter]) {
- this.cache.set(
- `${this.config.source}_${this.config.context}_${filter}`,
- this.filters[filter]
- );
+ Object.keys(this.store.filters).forEach(filter => {
+ const cacheKey = `${this.config.source}_${this.config.context}_${filter}`;
+
+ if (this.store.filters[filter] !== this.defaults[filter]) {
+ this.cache.set(cacheKey, this.store.filters[filter]);
+ } else {
+ this.cache.remove(cacheKey);
}
});
- // Also save taxonomy filters
+ const taxCacheKey = `${this.config.source}_${this.config.context}_taxonomy`;
if (Object.keys(this.taxFilters).length > 0) {
- this.cache.set(
- `${this.config.source}_${this.config.context}_taxonomy`,
- this.taxFilters
- );
+ this.cache.set(taxCacheKey, this.taxFilters);
+ } else {
+ this.cache.remove(taxCacheKey);
}
}
@@ -438,10 +463,6 @@
this.ui.buttons.loadMore.hidden = !this.store.lastResponse?.has_more??true;
}
break;
- case 'filters-changed':
- this.updateURL();
- this.saveToCacheFilters();
- break;
}
});
}
@@ -459,26 +480,18 @@
this.showEmptyState();
this.a11y.announceItems(0, this.isFirstPage());
} else {
- const fragment = document.createDocumentFragment();
- const processBatch = (startIndex) => {
- const endIndex = Math.min(startIndex + 10, items.length);
- for (let i = startIndex; i < endIndex; i++) {
- const item = items[i];
- const element = this.createItemElement(item);
- fragment.append(element);
- }
- if (endIndex < items.length) {
- requestAnimationFrame(() => processBatch(endIndex));
- } else {
+ window.chunkIt(
+ items,
+ (item) => this.createItemElement(item),
+ (fragment) => {
this.removePlaceholders();
this.ui.grid.append(fragment);
-
if (this.config.gallery) this.gallery.buildGalleryItems('.item img');
this.a11y.makeNavigable(this.ui.grid.querySelectorAll('.item:not([data-keyboard-nav])'));
this.a11y.announceItems(items.length, !this.isFirstPage(), this.store.lastResponse?.has_more??false);
- }
- };
- processBatch(0);
+ },
+ 5
+ ).then(()=>{});
}
this.updateFilterControls();
@@ -486,48 +499,11 @@
showEmptyState() {
window.removeChildren(this.ui.grid);
- let template = window.getTemplate('emptyState');
- if (!template) return;
- this.ui.grid.append(template);
-
+ this.ui.grid.append(this.templates.create('emptyState'));
}
createItemElement(item) {
- let template = window.getTemplate(`feedItem${window.uppercaseFirst(item.content)}`);
- const isTimeline = Object.hasOwn(template.dataset, 'timeline');
-
- for (let [fieldName, value] of Object.entries(item.fields)) {
- if (isTimeline && ['timeline', 'number'].includes(fieldName)) continue;
-
- let el = template.querySelector(`[data-field="${fieldName}"]`);
- if (!el) continue;
- if (value === '') {
- el.remove();
- continue;
- }
-
- if (this.isImageField(item, value)) {
- this.formatImageField(el, value, item);
- } else if (this.isTaxonomyField(item, fieldName)) {
- this.formatTaxonomyField(el, item, fieldName, value);
- } else if (this.isTimeField(el)) {
- this.formatTimeField(el, value);
- } else {
- this.formatField(el, value);
- }
- }
-
- let link = template.querySelector('a');
- if (link && item.url !== '') {
- [link.href, link.title] =
- [item.url, `View ${item.fields['post_title']??'Item'}`];
- }
-
- if (isTimeline) {
- this.addTimelineElements(item, template);
- }
-
- return template;
+ return this.templates.create(`feedItem${window.uppercaseFirst(item.content)}`, item);
}
splitIDs(value) {
return String(value).split(',').map((value) => parseInt(value.trim())).filter(value=>value);
@@ -640,7 +616,7 @@
];
if (afterEl) {
- afterEl.textContent = `After ${item.fields.number} Tx`;
+ afterEl.textContent = `After ${item.fields.number - 1} Tx`;
}
if (number) {
number.textContent = item.fields.number;
@@ -660,6 +636,64 @@
}
}
+ defineTemplates() {
+ const T = this.templates;
+ const f = this;
+
+ T.define('feedTerm', {
+ refs: {
+ icon: '.icon',
+ span: 'span'
+ },
+ setup({el, refs, manyRefs, data}) {
+ el.dataset.id = data.id;
+ el.dataset.taxonomy = data.taxonomy;
+ if (refs.icon) refs.icon.className = `icon icon=${data.icon}`;
+ if (refs.span) refs.span.textContent = data.name;
+ }
+ });
+ T.define('emptyState');
+
+ this.contentTypes.forEach(content => {
+ T.define(`feedItem${window.uppercaseFirst(content)}`, {
+ refs: {
+ link: 'a',
+ },
+ manyRefs: {
+ fields: '[data-field]',
+ },
+ setup({el, refs, manyRefs, data}) {
+ const isTimeline = Object.hasOwn(el.dataset, 'timeline');
+ if (manyRefs.fields) {
+ for (let field of manyRefs.fields) {
+ if (isTimeline && ['timeline','number'].includes(field.dataset.field)) continue;
+
+ const value = Object.hasOwn(data.fields, field.dataset.field)? data.fields[field.dataset.field] : false;
+ if (!value) {
+ field.remove();
+ continue;
+ }
+ if (f.isImageField(data, value)) {
+ f.formatImageField(field, value, data);
+ } else if (f.isTaxonomyField(data, field.dataset.field)) {
+ f.formatTaxonomyField(field, data, field.dataset.field, value);
+ } else if (f.isTimeField(field)) {
+ f.formatTimeField(field, value);
+ } else {
+ f.formatField(field, value);
+ }
+ }
+ if (refs.link && data.url !== '') {
+ refs.link.href = data.url;
+ refs.link.title = `View ${data.fields['post_title']??'Item'}`;
+ }
+ if (isTimeline ) f.addTimelineElements(data, el);
+ }
+ }
+ })
+ });
+ }
+
// addPlaceholders() {
// let total = this.contentTypes.length;
// const fragment = document.createDocumentFragment();
--
Gitblit v1.10.0