Is it possible to show post numbers for each post (Or easy to do via CSS or similar). My use case is running forum mafia, where allowing users to easily refer to a post without the bulk of quoting it would be amazing.
Just press the link button under each post, and the post number is visible there.
It is hard to say if this is what you are looking for, but it should get you close.
We use that CSS to put #1, #2, et al on a topic after the date/timestamp.
Yes, it is, this is amazing
Thanks so much!
a.post-date span {
margin-right: 1em;
}
a.post-date:after {
content: "#"attr(data-post-number);
}
This doesn’t seem to work anymore. Is there a current way to show post numbers?
Now post a tag does not have a data-post-number identifier, this css style does not work, I do not know there is another way to solve?
Not without javascript.
Thanks for the reply, is this a plugin that needs to be written to call the api? Or is it simply written in the theme component?
Thank you very much. I have solved the problem now!
api.decorateCooked(() => {
var add_post_number_timer = setTimeout(() => {
var articles = document.getElementsByTagName("article");
for (var i = 0; i < articles.length; i++) {
var post_date = articles[i].getElementsByClassName("post-date");
if (post_date.length != 0) {
var post_number = articles[i].getAttribute("id").replace("post_", "");
post_date[1].setAttribute("data-post-number", post_number);
}
}
clearTimeout(add_post_number_timer);
}, 500);
}, {
id: 'add_post_number'
});
Awesome! You figured out how to do it.
Here are a few improvements you can do:
-
api.decoratedCooked
will be deprecated and is called on every post.
You can usedecorateCookedElement
instead, which works without jQuery. -
An
element
representing the current post is passed to the API; you can use it as your post context. -
You can work with the
schedule
function from ember to wait for the element to be rendered.
import { schedule } from "@ember/runloop";
// const { schedule } = require("@ember/runloop"); // use this if running in Admin UI
api.decorateCookedElement((element, /* helper */) => {
schedule("afterRender", () => {
const article = element.closest("article");
if (article) {
article.dataset.postNumber = article.id.replace("post_", "");
}
});
});
Thank you very much for the correction.