Support

Hi,

I want to add a ::before pseudo-element in front of my title.
My first try was to add a list as a field which contained:

• Published
• Accepted
• Submitted
• Writing

I talked quite sometime with my friend chatGPT/Copilot/Perplexity however, my knowledge isn't that good in PHP (read, BAD).

As a dirty workaround I changed the titlename to e.g. Published: bla bla bla

I created a script which I put under debug that searches for the title, if Published is found it replaced it with a bullet, and changed the color.

It worked great when I loaded the page with JFilter results, however, when I change the filter en press Show results it doesnt work again.
I learned that it only looked for these words when the page is loaded and JFilter works dynamically.

As a quick and really dirty I put a SetInterval to 200msec which works. However, I don't like this idea because:

1. CPU load or whatever load for the website
2. When I open the article I have to write another script to delete Published: there....

Hi,

I want to add a ::before pseudo-element in front of my title.
My first try was to add a list as a field which contained:

• Published
• Accepted
• Submitted
• Writing

I talked quite sometime with my friend chatGPT/Copilot/Perplexity however, my knowledge isn't that good in PHP (read, BAD).

As a dirty workaround I changed the titlename to e.g. Published: bla bla bla

I created a script which I put under debug that searches for the title, if Published is found it replaced it with a bullet, and changed the color.

It worked great when I loaded the page with JFilter results, however, when I change the filter en press Show results it doesnt work again.
I learned that it only looked for these words when the page is loaded and JFilter works dynamically.

As a quick and really dirty I put a SetInterval to 200msec which works. However, I don't like this idea because:

1. CPU load or whatever load for the website
2. When I open the article I have to write another script to delete Published: there....

I wonder if it is possible to do a ::before pseudo-element based on the choise of the list in the field, or the dirty method adding e.g. Published: but without the SetInterval, so when I press Show Results (and I'll figure something out when I open the article).

For now I put it on 1000msec so you can see what I made so far: Link
 

function applyStatusColors() {
const titles = document.querySelectorAll('.result-title');
titles.forEach(title => {
if (!title.dataset.colorApplied) { // Prevent reapplying changes multiple times
const match = title.textContent.match(/(Published|Accepted|Submitted|Writing):/i);
if (match) {
const status = match[1].toLowerCase();
title.innerHTML = title.innerHTML.replace(
/(Published|Accepted|Submitted|Writing):/i,
`<span style="color: ${getStatusColor(status)}; font-size: 1.2em;">&#8226;</span>`
);
title.dataset.colorApplied = "true"; // Mark as processed
}
}
});
}

function getStatusColor(status) {
const colors = {
published: 'green',
accepted: 'blue',
submitted: 'orange',
writing: 'red'
};
return colors[status] || 'gray';
}
document.addEventListener("jfilters.ajax.complete", () => {
applyStatusColors();
});

// Periodically check for updates
setInterval(() => {
applyStatusColors();
}, 10000); // Polling every 500ms (adjust as needed)

New link, changes something in my menu :)

Link

Thanks to some AI, and an forum thread here I found the solution, I found that the event was called JfResultsUpdate

function applyStatusColors() {
const titles = document.querySelectorAll('.result-title');
titles.forEach(title => {
if (!title.dataset.colorApplied) { // Prevent reapplying changes multiple times
const match = title.textContent.match(/(Open|Closed|To be opened):/i);
if (match) {
const status = match[1].toLowerCase();
title.innerHTML = title.innerHTML.replace(
/(Open|Closed|To be opened):/i,
`<span style="color: ${getStatusColor(status)}; font-size: 1.2em;">&#8226;</span>`
);
title.dataset.colorApplied = "true"; // Mark as processed
}
}
});
}

function getStatusColor(status) {
const colors = {
open: 'green',
closed: 'orange',
tbo: 'red',
};
return colors[status] || 'gray';
}

// Run once on page load
applyStatusColors();

// Listen for the JFilter results update event
document.addEventListener("JfResultsUpdate", () => {
applyStatusColors();
});