Please help me create my very first plugin [Proxy Test]

[Retread]

Proxy Test

Overview:

• This plugin will make use of www.ipqualityscore.com/vpn-ip-address-check/lookup/
  
• $[user.ip] will be appended to the URL above for User Profiles and $[post.ip] will be appended for Posts
• Buttons will appear next to existing buttons in the User Profiles and Posts
  
• The same classes in the Plain Vanilla style sheet for buttons will be used, so the buttons will match regardless of theme.
  
• A conditional will be employed to insure $[user.ip] (or $[post.ip]) are valid variables for the current user.  This will prevent the appearance of buttons for members who do not have the privilege, so they won't see buttons which won't work for them.
  
• The only option I'm planning is to allow the 'Proxy Test' button text to be changed by the staff member managing the plugin.
  
• No keys will be needed
  

Initial status:

• For testing purposes, I've created this little code snippet and placed it in the User Profile layout template to create a functional button and locate it to the left of the existing buttons.
  {if $[user.ip]}
<a class="button" href="https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/$[user.ip]" role="button" target="_blank">Proxy Test</a>
{/if}
  SPOILER: Click to show
  
  
  
• I've also created this snippet to test the button for each post, and placed it in the Thread (Post List tab) template.
  {if $[post.ip]}
<a class="button" href="https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/$[post.ip]" role="button" target="_blank">Proxy Test</a>
{/if}
  SPOILER: Click to show
  
  
  
• I can navigate through the Plugin Manager and build areas and I know where the Create Plugin button is.  But beyond that, I'm totally clueless as to what goes where.
  

I have plenty of time and I'm in no hurry. I'd like this to be a learning experience so I'm not asking for someone to write the plugin for me. Just some guidance through the process. I'm aware this may take several times back-and-forth in conversation to reach the goal line. It may be necessary to build one chunk at a time. I'm okay with that.

If anyone has the patience to deal with a Plugin Virgin, here I am.

---

Current Status:

I've taken my first baby steps and here's the Javascript component:
$(document).ready (function () {
   let ptest_user_html = "<a class='button' target='_blank' title='ipqualityscore.com' href='https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/$[user.ip]'  role='button'>Proxy Test</a>";
   let ptest_post_html = "<a class='button' target='_blank' title='ipqualityscore.com' href='https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/$[post.ip]'  role='button'>Proxy Test</a>";
       {
           $("#options-container").add().after(ptest_user_html);
           $(".post-options.button").add().after(ptest_post_html);
       }
});

This creates the elements necessary for the button in the User Profile and Posts. And it places those elements at the appropriate locations. But of course $[user.ip] and $[post.ip] have no meaning other than text since they're not being used within the context of a layout template.

As I see it, I have two remaining major tasks:

Task 1

1. Test the current user and determine if they have the power to View/Search by IP.
2. Make a conditional to proceed only if they have that power. 
   

Task 2

1. Find each occurrence of $("#options-container") or $(".post-options.button") in the document.
   
2. Determine the $[user.ip] (or $[post.ip] ) associated with it.
   
3. Place that value in the html string which goes in that particular location.
4. Add the html string to the document.
5. Repeat A~D until all occurrences have been tended to.
   

If anyone could guide me through how I would accomplish either of these tasks, I will be internally grateful.

[Retread]

I updated the OP to reflect the current status.

[Retread]

Aug 11, 2019 18:07:41 GMT -8 Lynx said:

Template variables won't work in a JS component.

Yes, I'm keenly aware of that and I mentioned it in the OP in the paragraph below the code box I described as 'baby steps'. But I need the value associated with those variables. And they will exist on the page unless someone is using a theme where $[options] (on the User Profile template) or $[post.select_options] has been gutted.

Let's talk about the User Profile to start with, since that will be a bit easier. If I use the inspector on my browser, I can see the div for the controls and what's nested beneath. The part I'm interested in, looks like this:
<div class="float-right controls">
<ul class="options_menu user-menu hide ui-menu ui-helper-clearfix ui-selectMenu" style="display: none;">
<li class="warn_user"><a><span class="icon"></span>Warn Member</a><span class="arrow right"><span></span></span></li>
<li class="disable"><a><span class="icon"></span>Disable Account</a><span class="arrow right"><span></span></span></li>
<li class="searchIP actionable ui-menu-has-sub-menu" data-ip="**.***.***.***"><a><span class="icon"></span>IP **.***.***.***</a><ul>
<li class="ipSearchThreads"><a><span class="icon"></span>Threads</a><span class="arrow right"><span></span></span></li>
<li class="ipSearchPosts"><a><span class="icon"></span>Posts</a><span class="arrow right"><span></span></span></li>
<li class="ipSearchMembers"><a><span class="icon"></span>Members</a><span class="arrow right"><span></span></span></li>
<li class="ipSearchLogs"><a><span class="icon"></span>Security Logs</a><span class="arrow right"><span></span></span></li>
</ul>(I replaced the digits in the IPs with asterisks)

If there's a way I can use JS to search the html of the page, looking for the string : li class="searchIP actionable ui-menu-has-sub-menu" data-ip=" and if it doesn't find it, then stop and don't create the button.

If is does find that string, then I would want to grab whatever immediately follows it but stop at "
What's between the "" is exactly what I need and in the format I need it.

Edit:
So apparently JS can't go quite that deep.  Now I'm thinking I need something *sort of* like this:
var rawmeat = document.getElementsByClassName("searchIP actionable ui-menu-has-sub-menu");
But since there is an <a><span class="icon"></span> nested beneath that, I'm not sure how to deal with getting to the IP **.***.***.*** inside.

Once I get that, then it would be necessary to slice off the IP from the front of it, and I'd have the meat for the sandwich being made below.

Then it would be a matter of combining
<a class='button' target='_blank' title='ipqualityscore.com' href='https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/

with the string JS just grabbed for me, and

' role='button'>Proxy Test</a>

Then I'd have the piece I need to add after $("#options-container")

---

Does that concept make sense or am I on the wrong path?

[CrazyBoy]

Retread  

Hi,



I have made some changes on your plugin,Proxy Test

I edited the target to "blank or self"

I know that you know how to edit it but i'll give you what i did

Here is the code after the changes

/* function to add IP button wherever it finds an IP submenu */

function addProxyTest() {

$('.controls').each(function (index, element) {

let Marker = $(element),IP_Mayo = Marker.find('.searchIP') ,sandwich

/* Button text from settings if entered, else use IP address */

let IPtext = IP_Mayo.find('>a').text().replace('IP ', ''), Btext = pb.plugin.get('proxy_test').settings.btext || IPtext;

if (IP_Mayo.length > 0) {

sandwich = $('<a></a>', {

"class": "button",

"target": pb.plugin.get('proxy_test').settings.target,

"title": "ipqualityscore.com",

"href": "https://www.ipqualityscore.com/free-ip-lookup-proxy-vpn-test/lookup/",

"role": "button"

}).append(Btext);

sandwich[0].href += IPtext;

Marker.find("#options-container, .post-options.button").after(sandwich);

}

})

}

/* run on document ready */

$(addProxyTest);

/* Listen for Proboards changes (e.g. page change, post delete, etc.) and rerun the function to handle any new content */

pb.events.on('afterSearch', addProxyTest)

in the photo it's checkbox,but with radio box will looks more better

is your plugin this why i told you about the changes

edit: i didn't export this one plugin,i only tested this options.