Core API

Expand All | Collapse All

Getting Started

Getting started is easy. Simply include AccDC like so:

<script type="text/javascript" src="Acc.DC.API.js"> // Initialize AccDC </script>

Core

Important:

When declaring AccDC Objects, the "id" and "role" properties are required to be set for every object.
("id" must be unique, "role" does not) E.G.
// Shell of an AccDC Object declaration { id: 'myObj', role: 'Test Object', ... }
Any registered AccDC Object can be accessed through the "$A.reg" object using its "id". E.G.
var dc = $A.reg.myObj; // or var dc = $A.reg['myObj'];
The "dc" object, when returned as an argument to AccDC Object methods, is synonymous with "this", and refers to the current AccDC Object instance.
Tip: To see where dynamic insertion is used to insert AccDC Objects into the DOM, or which screen reader accessible hidden text is being rendered, disable CSS in your browser.
This will show you the hierarchy of rendered elements, and is useful when testing localization for hidden content.

$A()

The "$A()" function registers an array of AccDC Object declarations.

Parameters:

AccDCObject: Optional: An AccDC Object instance to declare as the parent object for all subsequently registered AccDC Objects in the second argument.
(To assign top-level status instead, simply pass an array of AccDC Object declarations as the first parameter.)
AccDC Object Mappings[]: Required: An array of AccDC Object declarations to register.
Overrides{}: Optional: Key/value map that will be merged with all AccDC Object declarations
Wait: Optional: Default=False: True or False to delay processing until the DOM has fully loaded
DisableAsync: Optional: Default=False: True or False to prevent asynchronous loading of AccDC Objects.

Syntax


// Register an array of top-level AccDC Objects

$A([

// Object1 

{

...

},

// Object2 

{

...

},

// Object3 

{

...

}

],

// Pass a key/value map to be merged with all AccDC Objects when registered

{

...

});

// Now register an array of child AccDC Objects with dc as the parent AccDC Object

$A(dc, [

// Object1 

{

...

},

// Object2 

{

...

}

// End array, pass no overrides, and delay processing until the DOM has fully loaded.

], null, true);

$A.morph()

The "$A.morph()" method converts any DOM node into an AccDC Object at runtime.

Parameters:

AccDC Object to be registered as the parent: Optional
DOM node to convert.: Required
AccDC Object Declaration{}: Required

Syntax


// Convert a DOM node into a top-level AccDC Object

var DOMNode = document.getElementById('cartGraphic');

$A.morph(DOMNode, {

id: 'myObj',

role: 'Obj Role',

...

});

// Or convert a DOM node into a child AccDC Object with "dc" as the registered parent AccDC Object

var DOMNode = document.getElementById('cartGraphic');

$A.morph(dc, DOMNode, {

id: 'myObj',

role: 'Obj Role',

...

});

$A.destroy()

The "$A.destroy()" method destroys an AccDC Object and removes it from memory.

Parameters:

id : The ID of the AccDC Object to destroy
preserveData : True or False (default)
False = Destroy the AccDC Object including embedded DOM nodes.
True = Convert the AccDC Object into a standard DOM node.

Syntax


// Destroy the AccDC Object with id="myObj", and convert it into a standard DOM node

$A.destroy('myObj', true);

// Or just destroy it...

$A.destroy('myObj');

.id

The "id" property is the object reference for all registered AccDC Objects.

The "id" property must be unique for every AccDC Object.

Syntax


// Assign a unique ID

$A([

{

id: 'OverviewTab',

...

}

]);

.trigger

The "trigger" property is a CSS Selector or DOM node that assigns triggering element(s) for an AccDC Object.

Syntax


// Assign a triggering element using a CSS Selector

$A([

{

trigger: 'a.helpLink',

...

}

]);

// Assign a triggering element using a DOM node

$A([

{

trigger: document.getElementById('helpLnk2'),

...

}

]);

Important

Use the "setTrigger()" or "unsetTrigger()" methods specified in the Traversal and Manipulation section to set or unset triggering elements at runtime.
When the "trigger" property is a Form, "returnFocus" will look for the first Input with type="submit" within the Form when returning focus to the triggering element.
When the "trigger" property specifies an A tag that does not contain an href attribute, href="#" is automatically added to the A tag to ensure keyboard accessibility.

.bind

The "bind" property assigns one or more event binders to the triggering element.

Supported binders:

blur
focus
focusin
focusout
load
resize
scroll
unload
click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave
change
select
submit
keydown
keypress
keyup
error
(Custom)

Syntax


// Assign event bindings for the triggering element(s)

$A([

{

bind: 'click',

...

}

]);

// Assign multiple event bindings

$A([

{

bind: 'click focus mouseover',

...

}

]);

Important

To ensure that all AccDC Objects are equally accessible to screen reader and keyboard only users, keyboard event handlers should always be included whenever possible;
Specifically: 'click'
Use the "setTrigger()" method specified in the Traversal and Manipulation section to set new triggering elements at runtime.

.mode

The "mode" property specifies the fetch method for pulling content into an AccDC Object.

Supports:

DOM Nodes
Text
HTML
XHTML
XML
Script Objects
JSON
JSONP

Options

0 : Source Code (default): A literal HTML string or a DOM node
1 : Load: Load content from an external resource and insert it within the AccDC Object
2 : Get: Load content from an external resource using an HTTP GET Request
3 : GetJSON: Load JSON-encoded data from an external resource using a GET HTTP Request
4 : GetScript: Load JavaScript from an external resource using a GET HTTP Request and execute it
5 : Post: Load content from an external resource using an HTTP POST Request
6 : AJAX: Perform an asynchronous HTTP (AJAX) Request

Syntax


$A([

{

mode: 1,

...

}

]);

// Set the mode property at runtime

$A.reg.myObjId.mode = 4;

// Set the mode property before an AccDC Object is opened

$A([

{

runBefore: function(dc){

dc.mode = 1;

// or

this.mode = 1;

},

...

}

]);

Important

The "mode" property works in conjunction with the "source" property and the callback functions listed within the Mode Handlers section;
(The "mode" property determines the method, the "source" property specifies the resource, and the Mode Handler provides the callback.)
Mode Value Differentials:
1. When mode=0, only the value of the "source" property is rendered;
2. When mode=1, the value of the "source" property is used as a resource locator, and the "hLoad()" function is called as the Mode Handler;
3. When mode=either 2 through 5, the value of the "source" property is used as a resource locator, and the value of the "content" property (which must be set within the relevant Mode Handler) is rendered;
4. When mode=6, the value of the "ajaxOptions.url" property is used as a resource locator, and the value of the "content" property (which must be set within the "hSuccess()" Mode Handler) is rendered.

.source (Mode0-5 Property)

The "source" property is a string or DOM node that specifies either literal content or a resource locator specifying where content will be pulled into an AccDC Object.

Accepted value types:

A String or DOM node representing literal source code to render;
A relative or absolute file path as a resource locator.

Syntax


// Set the source with mode=0: literal source

$A([

{

source: '<div class="error">Error: Your password must be 8 characters in length.</div>',

// Or

source: document.getElementById('dialogContent'),

...

}

]);

// Set the source with mode=1: resource locator

$A([

{

source: 'files/analytics.php',

// Or by specifying a CSS Selector in the string to pull in a sub-section

source: 'files/help.php #ContextSensitiveHelp',

...

}

]);

// Set the source with mode=2-5: resource locator

$A([

{

source: 'generate/isbn.php',

// Or

source: 'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',

// Or

source: 'http://whatsock.com/js/demo.js',

...

}

]);

// Dynamically set the source at runtime

$A.reg.myId.source = 'files/core/s1.htm';

Important

When "$A.reg[]" is used to dynamically change the "source" property at runtime, the change will take affect the next time the AccDC Object opens.

$A.query(): "$A.query()" is a shorthand method for returning an array of DOM nodes using a CSS Selector, or executing a callback on each returned object.; Syntax
// Format: .query(Selector, Root, Callback) // Get an array of all links in a list var links = $A.query('ul.menuList a'); // Or the same using a root node var links = $A.query('ul.menuList a', document.getElementById('rootDiv')); // Or execute a callback on all matched nodes $A.query('ul.menuList a', function(index, value){ alert(this.href); }); // Or the same using a root node $A.query('ul.menuList a', document.getElementById('rootDiv'), function(index, value){ alert(this.href); });