Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
300 lines (285 sloc) 10 KB


The component layer is composed of 3 distinct classes -- Component, TemplateComponent, and CompositeComponent -- all of which support their own unique methods, properties, and options. These classes also extend functionality from the Base class.

More information on these classes can be found in the component system documentation.


Inherits all options from the Base class.

Option Type Default Description
ajax object Object of options to pass to $.ajax(). These will be overridden if necessary.
className string Class name to append to the target element. Allows for custom styles.
context element The element to attach delegated events to, or to use as a parent. Defaults to the document body.
template string The HTML used to create the component element.
templateFrom string The ID of an element to use as the template.
wrapperClass string The class name to set on the composite wrapper.
wrapperTemplate string <div class="toolkit-plugin"></div> The HTML used to create the wrapper element.


Inherits all events from the Base class.

Event Arguments Description
hiding Triggered before the element is hidden.
hidden Triggered after the element is hidden.
load string:response Triggered after an AJAX call has finished but before the response is rendered. Only triggers for HTML responses.
process mixed:response Triggered after an AJAX call has finished and only if the response is non-HTML (JSON, XML, etc).
showing Triggered before the element is shown.
shown Triggered after the element is shown.


Inherits all properties from the Base class.

Property Type Description
element element The primary element used by the component. Is built from the template or templateFrom options, or is passed through the constructor.
namespace string The namespace for the current instance. The namespace is extracted from a data attribute on the primary element.
node element The element that currently activated the component. Primarily used by "created" components.
elements collection A collection of elements used by the component.
nodes collection A collection of elements that are used for activating the component.
wrapper element The wrapping element that contains all the individual elements.


Inherits all methods from the Base class.

Method Description
hide() Hide the element.
id([string:...args]) Generate a unique CSS class name using the components name, UID, and defined arguments.
inheritOptions(object:options, element:element) Inherit and merge options from the target elements data attributes.
loadContent(string:content[, object:params]) Attempts to load content and then position() it. If the content is a URL, request it. If the content is an ID, fetch it. If the content is a literal string, use it. Params will be passed as a 2nd argument to requestData().
ns([string:element[, string:block]]) Generate a unique CSS data attribute selector based off the component and the namespace.
position(string:response) Handles HTML AJAX responses. Will re-position the element depending on the component.
process(mixed:response) Handles non-HTML AJAX responses. If the response is JSON and a callback property exists, the function defined will be triggered (JSONP style).
readOption(element:element, string:key) Read an option from an elements data attribute else fallback to the original option.
readValue(element:element, mixed:query) Extract a value from an element using a defined query. The query may be an element property, attribute, or function callback.
render(mixed:template) Render a template and return a jQuery element.
requestData(string|object:options[, object:params]) Requests data from a URL using an AJAX call. Will automatically prepare an XHR object and inherit settings from options.ajax. The first argument can either be a URL or an object of AJAX options.
setElement(element:element) Set the primary element and extract a namespace.
setOptions(object:options[, element:inheritFrom]) Set the options to use in the component. Will alter options based on current device and will inherit from data attributes if an element is passed.
show([element:node]) Show the element and set an optional activating node.
createElement([object:options]) Create an element from the template or templateFrom options. Will set class names on the element based on defined options.
createElement(element:node[, object:options]) Works exactly like the parent method but will extract custom options from the node.
createWrapper() Create the wrapper element from the wrapperTemplate option.
hideElements() Hide all elements within the wrapper.
loadElement(element:node[, func:callback]) Find and return an element that is tied to the node. If no element exists, create it, assign a unique ID, and cache it. An optional callback can be defined to modify the element when it's created.
You can’t perform that action at this time.