Manipulating plugin on button click

[Anatoly03]

Forum URL: area26.boards.net

So I'm currently working and trying to get into plugins and I already read through the PB API, currently working on a votes system (to get into plugins).

At this point, I have a fully working UI redesign for the votes container (using jQuery, I assume that's the only way to do so).

For the votings I have two buttons: Up- and Downvotes. How do I call an event upon their clicks, which will manipulate the key?

// Topics/Posts Manipulator

$(function() {
   let plugin = pb.plugin.get('user_reputation');
   
   $('div.posts div.content table.list tr.post').each( function () {
       let post_id = +$(this).attr('id').substring(5, $(this).attr('id').length); // [GET POST ID: WORKS]
       let votes = 0;
       
       if (pb.plugin.key('vote').get(post_id)) {
           let arr = JSON.parse(pb.plugin.key('vote').get(post_id));
           
           arr.foreach(function(el) {
               votes += el.value;
           });
       } else {
           pb.plugin.key('vote').set({ object_id: post_id, value: '[]' });
       }
       
       /* [CUT: JQUERY MANIPULATES UI HERE; THIS PART WORKS VERY WELL] */
   });
   /* [CUT] */
});
The Ui (first cut in above code) is generated like this:


$('div.mini-profile', this).append(
           '<div class="vote-area"><table><tr>'
           + '<td width="20%"><a class="vote-button"><span class="vote-button">&#9650;</span></a></td>'
           + '<td class="votes-count" width="60%">' + votes + '</td>'
           + '<td width="20%"><a class="vote-button"><span class="vote-button">&#9660;</span></a></td>'
           + '</tr></table></div><br>'
       );
For the vote buttons, I have already tried putting an onclick="vote(0)", and then just calling the function vote(), which was located above: It didn't work.

How do I call a function in the plugin upon button click (and preferably make it safe against invaders)?



LATEST EDIT:


let votes = 0;
       
       if (pb.plugin.key('vote').get(post_id)) {
           let arr = JSON.parse(pb.plugin.key('vote').get(post_id));
           
           arr.foreach(function(el) {
               votes += el.value;
           });
       } else {
           pb.plugin.key('vote').set({ object_id: post_id, value: '[]' });
       }

Doesn't work either anymore after having reloaded the page. Sadly there are not as many examples on how to write plugins with keys.

[Anatoly03]

$('div.mini-profile a.vote-up', this).on('click', function() {
           $(this).parent().parent().find('td.votes-count').html(
               +$(this).parent().parent().find('td.votes-count').html() + 1
           );
           vote(post_id, +1);
       });
Looks like a solution I just found.

[Chris]

Short answer is scope, your vote function is not defined within the global scope but is instead defined within another function which will go out of scope once the parent function in which it was defined closes, without a closure reference to that vote function it will be undefined.

You can either define the function as window.vote = function(){//blah} or set an event handler on the element that references the vote function while it is still in scope to form a closure that will be maintained once the enclosing function goes out of scope.


Edit: I see you found a solution using closure reference

You may also want to look into the can_write API before attempting to write to a key



key_type: {
USER: 1,
SUPER_USER: 2,
THREAD: 3,
POST: 4,
CONVERSATION: 5,
MESSAGE: 6,
SUPER_FORUM: 7
},
status: {
ERROR_REQUEST_TIMEOUT: 1,
ERROR_INVALID_RESPONSE: 2,
ERROR_KEY_LENGTH: 16,
ERROR_KEY_PERMISSION: 32,
ERROR_KEY_INVALID_DATA: 64
}

[Anatoly03]

Hi Chris Phyffer ,

do you also know how I would go about getting the current users' id?

Since all posts are .td#post-IDHERE, I thought I'd get this post id, but getting the current users' id is a bit confusing to me.

I currently have this for the buttons:

$('div.mini-profile a.vote-up', this).on('click', function() {
           $(this).parent().parent().find('td.votes-count').html(
               +$(this).parent().parent().find('td.votes-count').html() + 1
           );
           $(this).parent().parent().find('td a.vote-up span').addClass('active');
           $(this).parent().parent().find('td a.vote-down span').removeClass('active');
           vote(post_id, +1);
       });
And this for vote(p, i):

function vote(post_id, i) {
       console.log(i);
       let arr = JSON.parse(pb.plugin.key('vote').get(post_id));
       arr.push({
           v: i,
           by: 'untitled_user'
       });
       pb.plugin.key('vote').set({ object_id: post_id, value: JSON.stringify(arr) });
   }
Where I'd like to have for the by: 'untitled_user' just an empty placeholder where I'll need the users' id.

I've read about keys, and it was told to use JSON hashes, so I went on with the parsing and stringify-ing.

Finally, for displaying the value of the likes, I have:

$('div.posts div.content table.list tr.post').each( function () {
       let post_id = +$(this).attr('id').substring(5, $(this).attr('id').length);
       let votes = 0;
       
       if (pb.plugin.key('vote').get(post_id)) {
           let arr = JSON.parse(pb.plugin.key('vote').get(post_id));
           
           if (arr.length > 0) {
               arr.forEach(function(el) {
                   votes += el.v;
               });
           }
       } else {
           pb.plugin.key('vote').set({ object_id: post_id, value: '[]' });
       }
   ...
May you tell, based on your experience, if this is a way to do so?

Regards,
Anatoly



E: Last code segment is currently not working, but this will be fixed soon. It's forEach, not foreach.

I got the vote system working, now the only thing that I need would be staff like if member.isLoggedIn, member.getId, etc.


E3: I saw it was support earlier, but it's not in the official API anymore.

I found the pb.data() in the api, while it's not very well documented

[Chris]

You can easily see the data hash that pb.data() draws its returned values from by inspecting the proboards.dataHash object in your console, that way you can construct your pb.data() requests without having to search tons of posts to see what is available. However keep in mind that you should not be referencing that proboards.dataHash directly in any production code since it is deprecated and will be removed sometime in the future.