Outlast Apps - Javascript API

oa.accept()

The most basic call you can perform is oa.accept() which will prompt the user to login with the platform specified in the application settings (typically Facebook). This method takes three parameters: on accept, on deny, permissions.

{function|string} callback_success A function to call or url to redirect to if accept is successful.
{function|string} [callback_failed] A function to call or url to redirect to when the authentication fails – response object is passed. If not given, nothing will happen.
{string} [scope] The permissions scope separated by commas. Defaults to the Outlast App setting. See here for Facebook’s permissions.

If you are using oa.accept() to display popup windows, you will need to use this trick so that popup blockers do not interfere.

oa.terms()

Display terms and conditions for the current app or another.

{string} [oaappid='current app id'] If you specify an app id you can display another app’s terms. Defaults to the current app.

Checks and radios: simple

You can create graphical checkboxes and radio buttons easily with Outlast Apps helper js outlastapp-helper.js.

The difference between checkboxes and radio buttons is the same as in HTML. Radio buttons will have one answer per group and cannot be turned off and on. Checkboxes can have multiple answers and can be turned off and on.

You can create them using data attributes. By default, you must specify a group and value for your checkbox/radio:

• data-oacheckbox, data-oaradio This defines which group the item is in. Every checkbox/radio must have one of these.
• data-oacheckbox-value, data-oaradio-value The value that target input is set to. The target input is either set by data-oacheckbox-target or by default it is the input that has the id of the group. See example.

Here’s an example of the most simple implementation (a simple accept our terms and conditions):

<a class="checkbox" id="agree" data-oacheckbox="terms" data-oacheckbox-value="yes"></a>
<label>i accept the <a onclick="oa.terms();">terms and conditions</a></label>
<input type="hidden" id="terms" name="terms" value="">

When clicked, the a element will have an on class toggled. You can use any other HTML element you want.

Of course, often you will have several radio buttons or checkboxes:

What do you like?
<a data-oacheckbox="question1" data-oacheckbox-value="coffee">Coffee</a>
<a data-oacheckbox="question1" data-oacheckbox-value="tea">Tea</a>
<input type="hidden" id="question1" name="question1" value="">

If the user checks both in this example, the input will have the value coffee,tea. If you set this to oaradio instead, the user will only be able to choose one.

Checks and radios: advanced

There are some additional data attributes you can set to control how checkboxes and radios work in Outlast Apps. All of these are optional:

• data-oacheckbox-target, data-oaradio-target This sets the id of the hidden input whoes value should be set to data-oaradio-value. As seen above, this defaults to the checkbox groups’s name. (optional)
• data-oacheckbox-add-class, data-oaradio-add-class This takes a JSON object where the key is the selector class, value is the class to add. This will be applied when the item is selected. Be sure to use double quotes: {“class1″:”name_of_class_to_add”,”class2″:”name_of_class_to_add”} (optional)
• data-oacheckbox-remove-class, data-oaradio-remove-class This takes a JSON object where the key is the selector class, value is the class to remove. This will be applied when the item is unselected. Be sure to use double quotes: {“class1″:”name_of_class_to_remove”,”class2″:”name_of_class_to_remove”} (optional)
• data-oacheckbox-click-element, data-oaradio-click-element By default, the element with the data attribute becomes clickable. If you want to specify an alternate element as the click handler, use this data attribute. Warning It must be a parent of data-oacheckbox (or radio) element!

Voting and rating

[todo: add docs]