Addon Development Help - Update Setting via Anchor, Refresh View

Jonathan W

I'm developing my first plugin (Yay!) and I've found some other plugins that have been very helpful in figuring things out. There's one thing I can't seem to find a reference of anywhere or documentation of.

I have added a "Hide" link to comments and discussions, allowing people to collapse comments. I've got the code and table set up, and it handles the clicks properly, but it doesn't work how I want. I want it so when you click "Hide", it fires off to the handler (right now it goes to /discussion/hide/--etc) and then either refreshes the page so the comment hides (not ideal) or hides the comment and changes "Hide" to "Show".

Now I know part of what I'm looking for is going to be accomplished with javascript and CSS, but I'm not sure how to do it the right way with Garden. Any suggestions?

vrijvlinder

Please check this out , it may be what you need.

https://jqueryui.com/hide/

Jonathan W

Thank you. I have some of that down now actually - I kept poking at it. Right now I'm trying to find the best way to handle the action. I have a script written with jQuery that handles the visual hiding of the comment. I have the Url handled as well. I just need to figure out the best practice for doing this. I can do a Get request from jQuery to the Url (i.e. "/discussion/hide/2/15/5") but I'd like to return something to that request on the chance that it fails. Sort of off from my original question, but I don't like to just ask and give up. Also jsfiddle and codepen are lovely for hammering through ideas.

R_J

In order not to clutter the interface, I would recommend to add the "Hide Comment" option in the CommentOptions:

public function DiscussionController_CommentOptions_Handler($Sender) {
    $Comment = $Sender->EventArguments['Comment'];
    $Sender->EventArguments['CommentOptions']['HideComment'] = array(
        'Label' => T('Hide'),
        'Url' => 'vanilla/discussion/hidecomment/'.$Comment->CommentID),
        'Class' => 'HideComment Hijack'
    );
}

Hiding/unhiding is best done with toggling a class that does the hiding. If you use what Vanilla offers you, you can use the class Hidden together with jQuerys toggle function. You simply have to bind an on click event to hidden comments.

$( ".HideComment" ).on( "click", function() {
  $( this ).toggleClass( "Hidden" );
}); 

Don't forget to not only hide the comment, but to add a placeholder instead so that a comment can be unhidden!

R_J

When using the php snippet above, the ajax request will be done automatically by Vanilla. If you like to do it yourself, you would have to enclose it in the javascript on click function.

The url for the ajax request should only contain the CommentID. Do the permission check (SessionUserID = Discussion->InsertUserID) in the function that is called. Otherwise users could spoof such requests.

You could add a message at the end of your function

...
    if (db action was successful) {
        $Sender->InformMessage(T('The comment has been hidden'));
    } else {
        $Sender->InformMessage(T('WAAAAA! Something aweful has happened! You have to click the hide button again!'));
    }
}

And I would recommend that way, because it is more the Vanilla way, instead of creating some sophisticated js magic by yourself.

hgtonight

To add to @R_J's excellent response, the global.js file will pick up and "take care" of any anchor that has the Hijack class. This will fire off an AJAX request to the href and also parse the return result. Any errors or messages you set on the controller will be automatically parsed as inform messages.

Bleistivt

The Popup class works just a well for showing the content of an internal page in a popup.

There are also several predefined DOM manipulation options that can be used through the JsonTarget() function.

Example - Making an announcement row disappear after it has been dismissed:

$Sender->JsonTarget("#Discussion_$DiscussionID", NULL, 'SlideUp');

https://github.com/vanilla/vanilla/blob/fd6484/applications/vanilla/controllers/class.discussioncontroller.php#L375

All available options:
https://github.com/vanilla/vanilla/blob/4d13c1/js/global.js#L479-L532

I haven't seen this anywhere yet, but you can also call your own JavaScript functions using the "Callback" type. Note that the function needs to be a global function, i.e. it needs to be a property of window. The function will be executed in the context (this) of the selected target.

Jonathan W

I think what I'm missing now is how to handle the AJAX request. I've seen some plugins use $Sender->SetData() and SetJson as well. Then there's the empty Render() and some use for example: $Sender->Render('confirm', , 'plugins/Ignore');

The code works as far as firing back to the URL and handling the data. When the page is refreshed, the comment is hidden. What I was trying to do was to use $Sender->JsonTarget("#Comment_{$CommentID}", 'HiddenComment','AddClass'); to toggle it live without a page reload. I'm also trying to send a few InformMessages, but nothing is going through.

I was getting 404s until I changed the Ajax type to data.

Jonathan W

Ahh! I got that sorted. Now I just need to poke my javascript once the Json magic works!

phreak

@Jonathan W: Are you building a plugin that let users decide on hiding discussions that are not interesting to them? It would be cool if you could OS the plugin if this is possible for you, there might be more people that have a need for that.

Jonathan W

I've finished the first major part of it. I'm testing it now and plan on releasing it. It hides individual comments within a discussion for now, but I did write it to support discussions as well. All that needs to be done for discussions is to write the code on how to handle the actions. I have the option ready to go into the discussion option menu, but I haven't decided how I'd want hidden discussions to work yet.

As for comments, I borrowed the functionality used in the Ignore plugin, as it was exactly what I was looking for. It leaves a faded (opacity 40%) header of the hidden comment that can be shown again with a click. You can then remove the hide preference by using the Menu item again.

For discussions, I'd probably have to come up with a toggle to "Show Hidden" and then allow the user to use the menu to remove the hide preference that way. I might work on that later today.

My forums are going to be mostly self-moderated. That means I want users to choose what they see and don't see. I'm also planning on either extending this plugin, or writing one based on this, to allow the author of a discussion to hide comments for everyone in that discussion. So if a troll tries to derail a thread, the author can hide the comments from that troll. I'll still allow users to view the hidden comments (safeguard against an author abusing self-moderation), but yeah.

When I do post it, I'd like some feedback from the veterans here too! I feel like I made some kludgey choices.

Jonathan W

@hgtonight @R_J - With what I said above, I realized that it shouldn't be hard to do... I'm just not sure what to tap for the "Show Hidden" link/button/etc. I thought there might be an easy way to insert it in where the PageControls are placed, but I can't see how. I did some looking and there's no FireEvent() to catch. I'd prefer it to be a small text hyperlink that just toggles a CSS class. The actual "unhiding" will be in the Options menu for each discussion.

Any suggestions? And thanks all for all the help

Jonathan W

@phreak http://vanillaforums.org/addon/hidecomments-plugin-1.0.0 or https://github.com/xorith/HideComments.git

I decided to go with just comments for now. I figured I could always release a new version with discussions.