The link between PB and JS

[Vu1canF0rce]

Kudos to the topics and YT videos that help design a [basic] plugin. I do still have an overarching issue...understanding the link between the proprietary ProBoards programming and everyday HTML/CSS/JavaScript programming.


Main example. The PB programming language vs the standard programming syntax of JavaScript:

if (something)
{
do this
}


vs


{if $[some_proboards_variable]}
do this
{/if}


From programming in the past it wasn't too difficult to grasp the somewhat subtle syntax style changes.

The problem I have is, as indicated already, learning how to link the two together in a plugin. The secondary example I provide is the example of wanting to create a very basic plugin to disable/hide the display name option on ones profile except from staff.

Now I know JavaScript and have picked up on majority of the proprietary PB language but when I began to build a plugin of my own I found no where to integrate, or link, these two contrasts together.

Although, this is not part of my desired plugin, the example below using stock JS along with proprietary PB variables will present my problem in a better fashion:

if !$[current_user.is_member]

{

   pb.window.alert('Prompt', 'Welcome back, $[current_user].');

}

   else

   {

       alert("Register with us.")

   }

Hopefully my inquiry makes sense and I will gladly clarify if need be.

Andrew

[Tim Camara]

The simple answer is that the two don't link at all. The proprietary PB tags are meant specifically to work with our templating system, in much the same way that you would use any other templating language (smarty, handlebars, etc.). That all works to help our servers display the HTML of the page. Alongside that, we allow you to add in JavaScript to further customize the look and functionality of pages. If you want to take advantage of both, you can add both kinds of components to the same plugin. You'll also notice that we do provide some of the same information to both the template variables and the JavaScript variables. (on any given page, run proboards.dataHash in your JS console to see the available variables) You can call all of these variables and more through our Developer API.

To use your example code, you could do something like this in a JS component:

var user = pb.data('user');

if(user.is_logged_in){
pb.window.alert('Prompt', 'Welcome back, ' + user.name);
}
else {
pb.window.alert('Register With Us');
}
or you could do it this way in a global component: (Though I don't recommend this method, as writing the JS in it's own component is more efficient.  This is provided merely as an example of how this could be done.)

{if $[current_user.is_member]}
<script>
var user = pb.data('user');
pb.window.alert('Prompt', 'Welcome back, ' + user.name);
</script>
{else}
<script>

pb.window.alert('Register With Us');
</script>
{/if}

[Vu1canF0rce]

Nov 8, 2013 11:56:01 GMT -8 Tim Camara said:

The simple answer is that the two don't link at all. The proprietary PB tags are meant specifically to work with our templating system, in much the same way that you would use any other templating language (smarty, handlebars, etc.). That all works to help our servers display the HTML of the page. Alongside that, we allow you to add in JavaScript to further customize the look and functionality of pages. If you want to take advantage of both, you can add both kinds of components to the same plugin. You'll also notice that we do provide some of the same information to both the template variables and the JavaScript variables. (on any given page, run proboards.dataHash in your JS console to see the available variables) You can call all of these variables and more through our Developer API.

To use your example code, you could do something like this in a JS component:

var user = pb.data('user');

if(user.is_logged_in){
pb.window.alert('Prompt', 'Welcome back, ' + user.name);
}
else {
pb.window.alert('Register With Us');
}
or you could do it this way in a global component: (Though I don't recommend this method, as writing the JS in it's own component is more efficient.  This is provided merely as an example of how this could be done.)

{if $[current_user.is_member]}
<script>
var user = pb.data('user');
pb.window.alert('Prompt', 'Welcome back, ' + user.name);
</script>
{else}
<script>

pb.window.alert('Register With Us');
</script>
{/if}

Thanks Tim Camara for the info. I understand a bit better. I browsed thru the api site but didn't understand the references until I read your clarification. I'll try to work on the intended plugin and post back if I need a hand.

Andrew

[Vu1canF0rce]

Well, I tried and successfully failed to use the dev api site. The main reason is that there are no real examples and I suppose that even though you clarified the syntax logistics I simply cannot connect the "context" (i.e., context being knowing the commands, variables, functions, etc.).

For instance, the "members" api page provides: select ( [options], callback ) as the syntax example but does not provide a real/dummy example. In such, I have no idea what values the "options" parameter coincide with or where to get them. I followed thru to the Mozilla dev webpage for objects and I know how to "write" the syntax but again, this goes back to the original issue of understanding the context of the programming schema. The proboards.dataHash was not helpful on this either so I ran dry on understanding what options to use. So, my plugin days have come and gone in a fast blur so I'll head on over to the request board for assistance. Requested it here.

Thanks again Tim Camara for your assistance,

Andrew

[Wormopolis]

doesnt this plugin already exist?