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:
- CPU load or whatever load for the website
- 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:
- CPU load or whatever load for the website
- 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;">•</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)