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>