/*
CodeBaby Delivery Manager
Copyright (c) 2009 CodeBaby Corp.
All rights reserved.
This source code can only be distributed in accordance with the terms of the
license agreement with CodeBaby.
$Rev: 1555 $
$Date: 2010-01-05 09:07:40 -0700 (Tue, 05 Jan 2010) $
$URL: https://codebaby.svn.cvsdude.com/codebabysuite/trunk/cdm/javascript/src/CodeBaby.js $
*/
/*
Object: CodeBaby
Holds all CodeBaby objects, classes and functions.
*/
CodeBaby = {}; //Create CodeBaby object to act as a namespace
/*
Title: Getting Started
CodeBaby conversations are created in CodeBaby Suite, which
generate data to be used by CodeBaby Delivery Manager (CDM). CDM is a
JavaScript library that enables CodeBaby conversations.
To add a CodeBaby conversation to a web page:
- Plan a conversation in CodeBaby Suite
- Create the conversation segments using CodeBaby Create Studio
- Deliver the conversation via the Deploy button in CodeBaby Suite
- Add the CDM script tag to the web page. The exact contents of the script tag are shown in the Deliver dashboard of CodeBaby Suite. See
In this example, we include the JavaScript file ${cb.cdm.bootJSPath}, which is
the 2.1.1.2802 version
of the boot CDM JavaScript file. This is a lightweight file that does has
the minimal code to initialize CodeBaby conversation JavaScript and prepare
to load other files.
We also pass configuration settings to the script via the query portion of the
src attribute (the part after the ?) via the CodeBaby parameter.
The value of the CodeBaby parameter is a semi-colon separated list of
name:value pairs for configuration settings.
The minimal set of setting to start a conversation are:
account - The id of the account, 1001 in the example above. This value
is always required.
conversation - The id of the conversation, set to 1234 in the example. This
means we want to use conversation 1234 created in CodeBaby Suite.
page - The name of the page as assigned in CodeBaby Suite.
Passing these values tells CDM which conversation is to be enacted on this page.
Many parameters can be passed via any one of three different methods: the page url, the src attribute, or programmatically.
See "Methods for setting configuration values" in for details.
Topic: Positioning
By default, CDM looks for an HTML element called CodeBabyParent and places
the digital character player inside of that element. However, the CodeBabyParent
element is not required; if not found, the player will be placed in the tag.
Some configuration items assist in positioning:
player.parent - The name of the div that will contain the player
player.wrapper - The name of the div that is created to hold the player
within . This wrapper is used for positioning and styling.
If the default value already exists in the page, then this should be changed.
player.position - CSS-style position attribute for the wrapper
player.left - CSS-style position attribute for the wrapper
player.top - CSS-style top attribute for the wrapper
Also, the wrapper may obtained via .
Then it may be positioned or otherwise styled via its style attribute.
For example
>
> // Position 100 px down, and place a solid border around the player.
>
> var wrapper = CodeBaby.flashPlayer.getWrapperElement();
> if (wrapper != null){
> wrapper.style.position = "absolute";
> wrapper.style.top = "100px"; // don't forget the px!
> wrapper.style.borderStyle = "solid";
> }
>
The wrapper is not created until the player has been initialized, which may
not happen until a segment is about to play. To deal with this, add
a listener so that you know when the wrapper has been created
>
> // places a solid border around the player
>
> CodeBaby.flashPlayer.addChangeListener("wrapperElement",function(event){
> if (event.newValue != null){
> var el = event.newValue;
> el.style.borderStyle = "solid";
> }
> });
>
*/
/*
Topic: Debugging
Various debugging messages have been placed in CDM, and you can view these
by turning on debugging through configuration, see . Debug messages
are logged at different levels, from TRACE (most detail) to FATAL (least detail).
For example, to get messages logged in the INFO level through to FATAL:
>
>
>
By default, these are logged to the browser's console, which is accessed
in different ways in different browsers.
You can add your own listener to the logger so you can view the messages
in different ways:
>
You can also log your own messages via or other
convenience methods in .
See for details.
*/
/*
Topic: Account and conversation configuration JavaScript
CodeBaby Suite enables you to add custom JavaScript code directly from the Suite application. This code is loaded
after the CDM boot files, via the account and conversation configuration files
(the first file loaded by the script tag).
The primary use of these files is to:
- Modifying the DOM dynamically. In many situations, links or buttons on the page
must be modified in order to successfully implement a CodeBaby conversation.
In an ideal situation, including the single
If you want to look directly at each JavaScript source file, it is available
on the CodeBaby Delivery Network server under ${cb.cdm.jsPath}.
Generally, the source for each class or object is in a file based on its name.
Take away the CodeBaby prefix (except for the CodeBaby object) and use the
rest for the file name. For example, the CodeBaby.util object can be found in
src/util.js.
*/
/*
Topic: Dialog Boxes
Dialog boxes are an important part of conversations, but are not included in CDM.
Because dialog boxes are primarily visual component that may require distinct
styles, and may require specialized libraries to support them (such as jQuery).
For this reason, CDM makes calls to a dialog box interface that must be
implemented outside of CDM, named CodeBaby.ui.dialogBoxManager.
See for details.
*/
/*
Topic: Having a conversation
When a page loads the CodeBaby conversation automatically
executes for that page (unless configured otherwise; see ).
For example, if the conversation map has a connection
from the page with the description 'When the page loads, play the Greeting segment', then
the Greeting segment plays when the page loads and the conversation follow from there.
For example, the segment may show a dialog box, and the user can select
a choice, which causes a connection to be followed, etc.
Throttling logic, such as only showing the Greeting segment on the first visit,
may be implemented by having a connection from the page node to a conditional node.
The conditional node logic returns a value that plays the Greeting segment only
on the first visit. This is the prefered way to implement throttling, rather
than configuring to "no" in the configuration scripts.
*/
/*
Topic: Triggering conversation actions
In some cases you may want to trigger an action on a node based on a user action
or some logic in the page.
Any node may be triggered by adding a "Respond" node to the map, and calling
("trigger node name").
For example, if you want to play the "Greeting" segment when a button is clicked:
- Add a Trigger node to the conversation map, and give it a name like "Play Greeting"
- In the web page, add the code:
>
*/
/*
Topic: Playing a Segment
Segment playing is automatically managed through the API.
However, it is simple to play a segment programmatically after you create
the object.
For example
>
> var vid = new CodeBaby.SegmentVideo("doesn't matter","what you put here");
> vid.setUrl("http://cdm.codebaby.com/accounts/1001/conversations/1234/videos/5.flv"
> CodeBaby.player.play(vid);
>
Execute this code only after the page has finished loading and CodeBaby.start has
executed. For example,
link it to a