Using CLIO Functions
Overview
There are several functions that have been created for use in the interface or other activity types that were included as part of the CLIO web application, making it so they can be integrated into new activity types.
Interface
These functions are used to control various underlying parts of the CLIO Interface.
getCurrentURL
Description: Returns an object with information about the current URL.
Arguments: none
Example:
getCurrentURL();
Output:
{
"url": "http://10.0.0.50//clio/development/?program=NICOToothSleuth&activity=pathfinder",
"base": "http://10.0.0.50//clio/development/",
"hash": "",
"program": "NICOToothSleuth",
"activity": "pathfinder",
"menu": ""
}
removeBodyClassByPrefix
Description: Removes all classes from body that begin with a prefix.
Arguments: prefix
| Argument | Description | Expected Parameter |
|---|---|---|
| prefix | The prefix for the classes to be removed from the body element. | String |
Example:
removeBodyClassByPrefix("theme_");
Output:
(All classes that start with “theme_” will be removed from the “body” object.)
removeSelectorClassByPrefix
Description: Removes all classes from the selector that begin with a prefix.
Arguments: selector, prefix
| Argument | Description | Expected Parameter |
|---|---|---|
| selector | An ID (“#unique_id”) or class (“.class”) selector. | Valid element class or id |
| prefix | The prefix for the classes to be removed from the selected element. | String |
Example:
removeBodyClassByPrefix("#menu_content_wrapper", "menu_");
Output:
(All classes beginning with “menu_” will be removed from the element with the id of “menu_content_wrapper”)
applyTheme
Description: Loads the selected theme from the CLIO theme folder and applies it, unless there is an accessibility contrast mode enabled. This does not automatically remove existing theme classes and should be used in conjunction with removeBodyClassByPrefix(“theme_”).
Arguments: theme
| Argument | Description | Expected Parameter |
|---|---|---|
| theme | The name of the theme, not including the “theme_” prefix. | String |
Example:
applyTheme("default");
Output:
(Loads the “theme_default.css” stylesheet from the CLIO web application’s “theme” folder, contained within the “css” folder. Then, CLIO will verify that an accessibility contrast mode is not enabled before applying the “theme_default” class to the “body” element.)
AJAX
These functions are used to asynchronously load and parse various types of data without needing to reload the web application through the use of AJAX (or AJAJ).
parseJSONContent
Description: Returns an object parsed from a JSON file.
Arguments: file
| Argument | Description | Expected Parameter |
|---|---|---|
| file | The JSON file to be loaded and parsed. | Relative location from the CLIO JS directory. |
Example:
parseJSONContent(“test.json”);
Output:
{
“Test”: “Content”
}
loadHTML
Description: Returns an HTML string parsed from an HTML file.
Arguments: file
| Argument | Description | Expected Parameter |
|---|---|---|
| file | The HTML file to be loaded and parsed. | Relative location from the CLIO JS directory. |
Example:
var template = loadHTML(“template.html”);
$(“#activity_content”).html(template)
Output:
(Creates a variable containing the contents of the “template.html” file, and uses it to replace the HTML content of the “activity_content” container.)
parseDirectory
Description: Returns an array of strings containing the name of each file in a directory.
Arguments: directory
| Argument | Description | Expected Parameter |
|---|---|---|
| directory | The directory to be parsed. | Relative location from the CLIO JS directory. |
Example:
var directory_contents = parseDirectory(“contents/”);
Output:
[
“Test”,
“Test2”,
“Test3”
]
loadScript
Description: Loads a script from a URL before adding it to the DOM and initializing it for use.
Arguments: url
| Argument | Description | Expected Parameter |
|---|---|---|
| url | The JavaScript file to be loaded. | Relative location from the CLIO JS directory. |
Example:
loadScript(“test.js”);
Output:
(The “test.js” JavaScript file is loaded and appended to the “Head” element.)
Rich Text
These functions are used to parse the BBCode-like format that the interface uses to encode rich text into plain text.
BBCodeParser.process
Description: Decodes the BBCode-like tag system into more usable HTML.
Arguments: content
| Argument | Description | Expected Parameter |
|---|---|---|
| content | A string to be decoded into HTML. | Text with embedded BBCode tags |
Example:
BBCodeParser.process(“[p][b]Title[/b][i]This[/i] is a test.[/p]”)
Output:
<p><b>Title</b><i>This</i> is a test.</p>
Settings
These functions are used to get and set various settings in LocalStorage. These are use specifically by the Settings menu.
clearSettings
Description: Resets all settings by clearing the HTML5 LocalStorage cache.
Arguments: none
Example:
clearSettings();
Output:
(The LocalStorage cache is emptied.)
getSetting
Description: Retrieves a setting from the LocalStorage cache by its name, or returns a default if field is empty.
Arguments: setting_name, setting_default
| Argument | Description | Expected Parameter |
|---|---|---|
| setting_name | A unique identifier used to store a string in the LocalStorage cache. | String |
| setting_default | Value returned when there is nothing found in the LocalStorage cache. | String |
Example:
setSetting(“setting__theme”,”aqua”)
getSetting(“setting__theme”,”default”)
Output:
aqua
setSetting
Description: Saves a setting in the LocalStorage cache by a unique name.
Arguments: setting_name, user_setting
| Argument | Description | Expected Parameter |
|---|---|---|
| setting_name | A unique identifier used to store a string in the LocalStorage cache. | String |
| user_setting | A string to be in the LocalStorage cache under the above name. | String |
Example:
setSetting(“setting__theme”,”aqua”)
getSetting(“setting__theme”,”default”)
Output:
aqua
Accessibility
These functions are used to get and set various accessibility settings in SessionStorage. These are use specifically by the Accessibility menu.
clearAccessability
Description: Manually resets accessibility options by returning them to defaults. This is used by the Accessibility menu "Reset Accessibility button" to reset options without reloading the page.
Arguments: none
Example:
clearAccessibility();
Output:
(All accessibility settings are returned to their default states and the dropdown menus are updated.)
getAccessibility
Description: Retrieves an accessibility setting from the SessionStorage cache by its name, or returns a default if field is empty.
Arguments: setting_name, setting_default
| Argument | Description | Expected Parameter |
|---|---|---|
| setting_name | A unique identifier used to store a string in the SessionStorage cache. | String |
| setting_default | Returned when there is nothing found in the SessionStorage cache. | String |
Example:
setAccessibility(“accessibility__colorblind”,”true”)
getAccessibility(“accessibility__colorblind”,”false”)
Output:
true
setAccessibility
Description: Saves an accessibility setting in the SessionStorage cache by a unique name.
Arguments: setting_name, user_setting
| Argument | Description | Expected Parameter |
|---|---|---|
| setting_name | A unique identifier used to store a string in the SessionStorage cache. | String |
| user_setting | A string to be in the SessionStorage cache under the above name. | String |
Example:
setAccessibility(“accessibility__colorblind”,”true”)
getAccessibility(“accessibility__colorblind”,”false”)
Output:
true
LocalStorage
These functions are used to get and set strings and JSON objects from the HTML LocalStorage cache. The LocalStorage cache persists between different sessions, even if the web browser is closed.
SessionStorage
These functions are used to get and set strings and JSON objects within the HTML SessionStorage cache. The SessionStorage cache exists only for the current session of the application, such as a single tab or window, and is cleared when ended.
Program
These functions are used to load new CLIO programs and information about them.
Activity
These functions are used to load activities and the information about them. They can also be used to create new types of meta activities.
Audience
These functions are used to load information about the audiences that are tied to a Program.
Discussions
These functions are used to load discussions that are displayed in the Facilitation menu when in Facilitator Mode.
Scrollbars
These functions are used to load the custom scrollbar.
Look Closer
These functions are used to create and destroy Look Closer pop-ups, which are used within the interface for prompts and modal windows, as well as by activity types to display rich text and media.
