I wish to customize inline commenting feature to better suit my site. Since you guys as the devs have the best knowledge about how discuz works, I figured it would be the most effective to ask you guys how to best go about applying the changes.
1. I wish to write a wp_insert_post_data filter that will change the post content before it gets saved into the database. In this filter, I wish to wrap every paragraph of the post automatically in [wpdiscuz-feedback] tags. Now, my question is, the id you guys use, do you have some special requirements for its value? Is it supposed to be unique per post, or unique per entire site? Would setting it to something like "post-slug-1" and "post-slug-2" work fine?
2. Since I intend for every paragraph to be "commendable-upon", I would like to remove the default green icon that appears at the end of the paragraph (wpd-inline-icon). Of course, I can do that simply by css. The issue here is that people still need to be able to comment on those paragraphs, and without an icon to click, they can't open the interface. The way I want people to open the commenting interface is by clicking on that paragraph of text itself.
So the question: Is there a simple way to hook javascript that is supposed to open up the commenting interface when that icon is clicked to instead open up when the text itself is clicked? Knowing how this entire thing works, what do you think the best way would be to go about it? What does the javascript hook on? The class name? What class name?
(P.S. The comment count that appears next to the green icon is fine. I want to keep that.)
3. The popup that opens up that shows all inline comments needs serious work. Firstly, this happens
Nevermind the text not wrapping, the key issue here is that directly embedding images works in the actual comments section, but when displayed in the popup, none of the filtering is done on the comments. In fact, the popup is severely lacking in many ways. It doesn't allow people to vote on comments or reply to them. Instead of heavily modifying it, would it be simpler to just replace it with a popup that looks like the normal comments section, but is filtering comments just to display the paragraph comments of the paragraph we are viewing? Perhaps I could show the comments in a sidebar, or just a large popup?
The only change that I'd like to make to make it different from the normal commenting section is that there is no need to show the quote of the paragraph.
How would I best go about implementing that change?
Example of an inline commenting system that is close to what I have in mind:
Can't edit the post anymore, so adding another question here in the comments.
4. I wish to add a fourth button to the comment display that will only display comments that are NOT inline comments.
What's the best way to go about it? Any hooks I can use? What files I would need to edit? Any Discuz functions that will be useful for it?
1. I wish to write a wp_insert_post_data filter that will change the post content before it gets saved into the database. In this filter, I wish to wrap every paragraph of the post automatically in [wpdiscuz-feedback] tags. Now, my question is, the id you guys use, do you have some special requirements for its value? Is it supposed to be unique per post, or unique per entire site? Would setting it to something like "post-slug-1" and "post-slug-2" work fine?
The ID should be unique for each shortcode. The ID can be generated using the post slug with some numbers at the end of the URL. However, you should make the codes work before the wpDiscuz ones.
The wpDiscuz uses priority 10 (third argument) for the post_updated hook, you can set the priority for example 9.
2. Since I intend for every paragraph to be "commendable-upon", I would like to remove the default green icon that appears at the end of the paragraph (wpd-inline-icon).
This will be hard to do. The action is added on the icon. If you hide the icon it'll be very hard to display the form if you've hidden the icon.
3. The popup that opens up that shows all inline comments needs serious work. Firstly, this happens
This cannot be done, as far as the there is not necessary to use buttons. This is designed to show the recent comment excerpt.
4. I wish to add a fourth button to the comment display that will only display comments that are NOT inline comments.
You can use the wpdiscuz_filtering_buttons to display button. The wpdiscuz_filter_args hook will allow you to help to filter the comments.
@asti Thank you very much for the reply!
1. and 4. Got it. 👍 Thanks.
2.
This will be hard to do. The action is added on the icon. If you hide the icon it'll be very hard to display the form if you've hidden the icon.
How is it added to the icon? I ask so I can know how to best hijack it / replicate the behavior with something else.
As a last resort, I can just make it invisible and programmatically click it via javascript when something else is clicked, no? Though, I should know what exactly to trigger the click on. What element are you watching? The svg? How do you know which one of them is clicked? I don't see them having an id. Or do you pick the id up from the div parent?
3.
This cannot be done, as far as the there is not necessary to use buttons.
What exactly can't be done? I don't understand what you are trying to say.
New questions:
5. How is the filtering/ordering of comments done with the filtering buttons? I mean, is it done server-side or client-side? Are all comments (or a certain number) prefetched from the server and then dynamically reordered/filtered out with the filtering buttons on the form, or is there an ajax request sent every time a user clicks on the buttons which then send back the comments that are supposed to be shown?
6. Is there an easy way, like using a hook or something, that will allow me to display a spinner when an operation is in progress for the sake of user feedback? The operations that I am talking about are upvoting comments and posting comments. Injecting the spinner into HTML can be done relatively easily, but how can I know whether the operation is in process so I can actually show/hide it? Of course, I can do some hocus pocus with javascript that'll do something when buttons are pressed and monitor HTML for changes brought upon by ajax, but I'd rather not get down and dirty if it can be done in a cleaner/simpler way.
7. Regarding filtering buttons from 4). Is it possible to make a button that will have a different function depending on a user-sent parameter? I am thinking about adding a button that will only display inline comments that are left on a specific paragraph. I'd get the id of a paragraph the user clicks on and then use the id to filter the comments shown by that custom filter button. Is that possible?
8. Also, a totally unrelated question to the topic, but I still wanted to ask. Does Discuz have an official roadmap with features/improvements you plan on adding in the future? Or a place where users can suggest what additions they'd like to see in the future? Are you still working on adding new stuff into discuz or have you moved your focus to developing other things?
There are a lot of fantastic features I've seen on other sites that have commenting features, that I'd love to see in discuz too, and I wouldn't mind paying for it.
The function is added in the element with the .wpd-inline-icon class, that detects the parent form ID.
What exactly can't be done? I don't understand what you are trying to say.
This is just designed to show some excerpt of the recent comment. The buttons should not be there.
5. How is the filtering/ordering of comments done with the filtering buttons? I mean, is it done server-side or client-side?
It's a server-side operation.
regarding the point 6. Please try to explain in other words.
7. Regarding filtering buttons from 4). Is it possible to make a button that will have a different function depending on a user-sent parameter?
You can use the following codes.
Put this one in the active theme functions.php file to register the custom js function:
add_filter("wpdiscuz_js_options", function ($wpdiscuzOptionsJs, $options) {
$wpdiscuzOptionsJs["dataFilterCallbacks"][] = "myFunction";
return $wpdiscuzOptionsJs;
}, 10, 2);
wpdiscuzAjaxObj.myFunction = function (data, isNative, isShowTopLoading) {
//
};
8. Also, a totally unrelated question to the topic, but I still wanted to ask. Does Discuz have an official roadmap with features/improvements you plan on adding in the future? Or a place where users can suggest what additions they'd like to see in the future? Are you still working on adding new stuff into discuz or have you moved your focus to developing other things?
You can create a new topic with the "suggestion" tag. We'll take those into consideration.
@asti Thank you very much for the replies. You've been most helpful.
Regarding 6)
When users click a like button on a comment, for a while nothing happens. There is no feedback that they have indeed clicked the button and that their "like" is now in process. Only a few seconds later does the ajax request do a round trip and show the changed number of upvotes.
What I would like is to display a spinning gif (like wordpress' built-in spinner css class) next to the button they have pressed to let them know that they are supposed to wait.
Also, the comments are loaded asynchronously on my site, and that might take a while. So what I currently have, is users visiting the page, and then wondering whether the page has no comments or if it's some kind of display issue. Only a few moments later do the comments actually load.
So to avoid this lack of feedback, I would like to display a spinner in the comments section before they actually load so that the visitors know that comments exist, their browser is just in the process of fetching them.
When users click a like button on a comment, for a while nothing happens.
It displays the loading bar. You can check it here: https://wpdiscuz.com/demo/
I would like to display a spinner in the comments section before they actually load so that the visitors know that comments exist, their browser is just in the process of fetching them.
You can use the following js code. Just put it in the active theme js files:
jQuery(document).ready(function(){
jQuery ('#wpdiscuz-loading-bar').show();
});
It displays the loading bar. You can check it here: https://wpdiscuz.com/demo/
You mean that thingy that appears in the upper-right corner and no one ever notices?
Uh... how should I put this...
Comments are never in the upper-right corner. They are at the bottom center of the page.
If you click upvote down there, you are looking for feedback where you clicked. Your eyes aren't looking in the complete opposite corner of the page and thus you will not see it.
Also, it is likely to be covered up by navigation bars or other elements, because theme makers do not expect something to pop up up there.
And lastly, even if we, for a moment let go of all that and assume that the conditions are perfect and people will definitely notice it, it still communicates nothing without a context. So you see a loading animation in the upper right, but what does it mean? Something is progress? But what?
That's why putting the spinner in the proper place is so important. It automatically gives it context and thus meaning.
It would be great if you could update future versions of discuz so that you show the loading animation where it belongs and not in the upper right corner. I know it's much easier to just get a div by ID and say show. But easier for developers isn't necessarily the best for the users.
And when I say "where it belongs", I mean:
1. If user has clicked the up/down vote, the loading animation should appear to the right of the downvote button.
2. If the comments on the page are still loading, then a loading animation should appear exactly in the spot where comments will appear after they load. Seeing a loading gif there is clearly saying "hey, you are looking for comments, but as you can tell by seeing me in their place, they are still loading"
3. If the user has written a comment and submitted it, and is then waiting for a response from the server, the comment form should be grayed out, and a loading gif should appear next to the button used to submit the form.
These are some universal practices used by all sites and apps that we regularly use.
The only time when you want to display a loading/spinning animation in the upper right corner of the screen is if the site/app is automatically doing something in the background. Such as, if it is automatically saving user's progress. In such cases, this is something you want to be subtle because it's not your goal to interrupt whatever the user is doing, but to just give them a gentle reminder that they shouldn't close the app while saving is in process or to reassure them that their work has been saved.
Now, since I don't know whether you'd be willing to implement such a change, nor how long it might take, I want to ask about how to patch it up myself:
I want to inject my own spinner next to the number of votes. I can inject the HTML in various ways and I can even show it on click of the upvote button, but how would I hide it after the upvoting process is done? Knowing how the whole PHP and javascript side of discuz works, is there an easy or best way to go about it?
You can use the following js code.
The code itself works, the problem is that it doesn't communicate anything to the site visitors. As already mentioned, it is barely noticeable, and secondly, how would they know that a loading animation that subtly appears in the upper right corner actually means to tell them "hey, the comments are still loading"
If it is comment-related, it should appear in the comment area, not somewhere random.
Now, I could use CSS to reposition it to appear below the comments, but then that would turn it invisible in other scenarios where the loading animation is supposed to appear, such as upvoting. People are in most cases upvoting the most upvoted (ergo first) comment from the list of comments in which case the loading div would be off the screen.
...thinking further about it, after the initial loading is done, I could use javascript to change the css to reposition it back to the upper right corner? 🤔
But, man, all of this seems like I am using hacks to fix something that should work properly out of the box. It really leaves an unpleasant taste in my mouth.
