clappr
Version:
An extensible media player for the web
1,539 lines (994 loc) • 166 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UIObject - Clappr</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="icon" href="../assets/favicon.ico">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="https://cloud.githubusercontent.com/assets/244265/6373134/a845eb50-bce7-11e4-80f2-592ba29972ab.png" title="Clappr"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 0.2.41</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/BaseObject.html">BaseObject</a></li>
<li><a href="../classes/Container.html">Container</a></li>
<li><a href="../classes/ContainerPlugin.html">ContainerPlugin</a></li>
<li><a href="../classes/Core.html">Core</a></li>
<li><a href="../classes/CoreFactory.html">CoreFactory</a></li>
<li><a href="../classes/Events.html">Events</a></li>
<li><a href="../classes/Loader.html">Loader</a></li>
<li><a href="../classes/Playback.html">Playback</a></li>
<li><a href="../classes/Player.html">Player</a></li>
<li><a href="../classes/UIContainerPlugin.html">UIContainerPlugin</a></li>
<li><a href="../classes/UIObject.html">UIObject</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/base.html">base</a></li>
<li><a href="../modules/components.html">components</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>UIObject Class</h1>
<div class="box meta">
<div class="extends">
Extends <a href="../classes/BaseObject.html" class="crosslink">BaseObject</a>
</div>
<div class="foundat">
Defined in: <a href="../files/src_base_ui_object.js.html#l12"><code>src/base/ui_object.js:12</code></a>
</div>
Module: <a href="../modules/base.html">base</a>
</div>
<div class="box intro">
<p>A base class to create ui object.</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_UIObject" class="method item">
<h3 class="name"><code>UIObject</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l12"><code>src/base/ui_object.js:12</code></a>
</p>
</div>
<div class="description">
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
<li class="api-class-tab properties"><a href="#properties">Properties</a></li>
<li class="api-class-tab events"><a href="#events">Events</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods extends">
<li class="index-item method">
<a href="#method_$">$</a>
</li>
<li class="index-item method private">
<a href="#method__ensureElement">_ensureElement</a>
</li>
<li class="index-item method inherited">
<a href="#method_constructor">constructor</a>
</li>
<li class="index-item method">
<a href="#method_delegateEvents">delegateEvents</a>
</li>
<li class="index-item method inherited">
<a href="#method_listenTo">listenTo</a>
</li>
<li class="index-item method inherited">
<a href="#method_listenToOnce">listenToOnce</a>
</li>
<li class="index-item method inherited">
<a href="#method_off">off</a>
</li>
<li class="index-item method inherited">
<a href="#method_on">on</a>
</li>
<li class="index-item method inherited">
<a href="#method_once">once</a>
</li>
<li class="index-item method">
<a href="#method_remove">remove</a>
</li>
<li class="index-item method">
<a href="#method_render">render</a>
</li>
<li class="index-item method">
<a href="#method_setElement">setElement</a>
</li>
<li class="index-item method inherited">
<a href="#method_stopListening">stopListening</a>
</li>
<li class="index-item method">
<a href="#method_tagName">tagName</a>
</li>
<li class="index-item method inherited">
<a href="#method_trigger">trigger</a>
</li>
<li class="index-item method">
<a href="#method_undelegateEvents">undelegateEvents</a>
</li>
</ul>
</div>
<div class="index-section properties">
<h3>Properties</h3>
<ul class="index-list properties extends">
<li class="index-item property">
<a href="#property_$el">$el</a>
</li>
<li class="index-item property">
<a href="#property_attributes">attributes</a>
</li>
<li class="index-item property">
<a href="#property_cid">cid</a>
</li>
<li class="index-item property">
<a href="#property_el">el</a>
</li>
<li class="index-item property">
<a href="#property_events">events</a>
</li>
<li class="index-item property inherited">
<a href="#property_uniqueId">uniqueId</a>
</li>
</ul>
</div>
<div class="index-section events">
<h3>Events</h3>
<ul class="index-list events extends">
<li class="index-item event inherited">
<a href="#event_CONTAINER_BITRATE">CONTAINER_BITRATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_HIGHDEFINITIONUPDATE">CONTAINER_HIGHDEFINITIONUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_LOADEDMETADATA">CONTAINER_LOADEDMETADATA</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_MEDIACONTROL_HIDE">CONTAINER_MEDIACONTROL_HIDE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_MEDIACONTROL_SHOW">CONTAINER_MEDIACONTROL_SHOW</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_OPTIONS_CHANGE">CONTAINER_OPTIONS_CHANGE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_PLAYBACKSTATE">CONTAINER_PLAYBACKSTATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_PROGRESS">CONTAINER_PROGRESS</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_READY">CONTAINER_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_SEEK">CONTAINER_SEEK</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_SETTINGSUPDATE">CONTAINER_SETTINGSUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_STATE_BUFFERFULL">CONTAINER_STATE_BUFFERFULL</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_STATE_BUFFERING">CONTAINER_STATE_BUFFERING</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_TIMEUPDATE">CONTAINER_TIMEUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CORE_OPTIONS_CHANGE">CORE_OPTIONS_CHANGE</a>
</li>
<li class="index-item event inherited inherited">
<a href="#event_CORE_READY">CORE_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_CONTAINERCHANGED">MEDIACONTROL_CONTAINERCHANGED</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_FULLSCREEN">MEDIACONTROL_FULLSCREEN</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_HIDE">MEDIACONTROL_HIDE</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_MOUSELEAVE_SEEKBAR">MEDIACONTROL_MOUSELEAVE_SEEKBAR</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_MOUSEMOVE_SEEKBAR">MEDIACONTROL_MOUSEMOVE_SEEKBAR</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_NOTPLAYING">MEDIACONTROL_NOTPLAYING</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_PLAYING">MEDIACONTROL_PLAYING</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_SHOW">MEDIACONTROL_SHOW</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_BITRATE">PLAYBACK_BITRATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_BUFFERFULL">PLAYBACK_BUFFERFULL</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_BUFFERING">PLAYBACK_BUFFERING</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_DVR">PLAYBACK_DVR</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_ENDED">PLAYBACK_ENDED</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_ERROR">PLAYBACK_ERROR</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_HIGHDEFINITIONUPDATE">PLAYBACK_HIGHDEFINITIONUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LEVEL_SWITCH_END">PLAYBACK_LEVEL_SWITCH_END</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LEVEL_SWITCH_START">PLAYBACK_LEVEL_SWITCH_START</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LEVELS_AVAILABLE">PLAYBACK_LEVELS_AVAILABLE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LOADEDMETADATA">PLAYBACK_LOADEDMETADATA</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PAUSE">PLAYBACK_PAUSE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PLAY">PLAYBACK_PLAY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PLAYBACKSTATE">PLAYBACK_PLAYBACKSTATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PROGRESS">PLAYBACK_PROGRESS</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_READY">PLAYBACK_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_SETTINGSUPDATE">PLAYBACK_SETTINGSUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_STOP">PLAYBACK_STOP</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_TIMEUPDATE">PLAYBACK_TIMEUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_ENDED">PLAYER_ENDED</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_ERROR">PLAYER_ERROR</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_FULLSCREEN">PLAYER_FULLSCREEN</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_PAUSE">PLAYER_PAUSE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_PLAY">PLAYER_PLAY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_READY">PLAYER_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_RESIZE">PLAYER_RESIZE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_SEEK">PLAYER_SEEK</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_STOP">PLAYER_STOP</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_TIMEUPDATE">PLAYER_TIMEUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_VOLUMEUPDATE">PLAYER_VOLUMEUPDATE</a>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_$" class="method item">
<h3 class="name"><code>$</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>selector</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l101"><code>src/base/ui_object.js:101</code></a>
</p>
</div>
<div class="description">
<p>selects within the component.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">selector</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
<p>a selector to find within the component.</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>:
<p>an element, if it exists.</p>
</div>
</div>
<div class="example">
<h4>Example:</h4>
<div class="example-content">
<pre class="code prettyprint"><code class="language-javascript">fullScreenBarUIComponent.$('.button-full') //will return only <code>.button-full</code> within the component
</code></pre>
</div>
</div>
</div>
<div id="method__ensureElement" class="method item private">
<h3 class="name"><code>_ensureElement</code></h3>
<span class="paren">()</span>
<span class="flag private">private</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l188"><code>src/base/ui_object.js:188</code></a>
</p>
</div>
<div class="description">
<p>ensures the creation of this ui component</p>
</div>
</div>
<div id="method_constructor" class="method item">
<h3 class="name"><code>constructor</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>options</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/BaseObject.html#method_constructor">
BaseObject
</a>
but overwritten in
<a href="../files/src_base_ui_object.js.html#l86"><code>src/base/ui_object.js:86</code></a>
</p>
</div>
<div class="description">
<p>it builds an ui component by:</p>
<ul>
<li>creating an id for the component <code>cid</code></li>
<li>making sure the element is created <code>$el</code></li>
<li>delegating all <code>events</code> to the element</li>
</ul>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">options</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>the options object</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_delegateEvents" class="method item">
<h3 class="name"><code>delegateEvents</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>events</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l151"><code>src/base/ui_object.js:151</code></a>
</p>
</div>
<div class="description">
<p>delegates all the original <code>events</code> on <code>element</code> to its callbacks</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">events</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>:
<p>itself</p>
</div>
</div>
</div>
<div id="method_listenTo" class="method item inherited">
<h3 class="name"><code>listenTo</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>obj</code>
</li>
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>callback</code>
</li>
<li class="arg">
<code>context</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_listenTo">Events</a>:
<a href="../files/src_base_events.js.html#l167"><code>src/base/events.js:167</code></a>
</p>
</div>
<div class="description">
<p>listen to an event indefinitely for a given <code>obj</code></p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">obj</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">callback</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">context</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
<div class="example">
<h4>Example:</h4>
<div class="example-content">
<pre class="code prettyprint"><code class="language-javascript">this.listenTo(this.core.playback, Events.PLAYBACK_PAUSE, this.callback)
</code></pre>
</div>
</div>
</div>
<div id="method_listenToOnce" class="method item inherited">
<h3 class="name"><code>listenToOnce</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>obj</code>
</li>
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>callback</code>
</li>
<li class="arg">
<code>context</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_listenToOnce">Events</a>:
<a href="../files/src_base_events.js.html#l179"><code>src/base/events.js:179</code></a>
</p>
</div>
<div class="description">
<p>listen to an event once for a given <code>obj</code></p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">obj</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">callback</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">context</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
<div class="example">
<h4>Example:</h4>
<div class="example-content">
<pre class="code prettyprint"><code class="language-javascript">this.listenToOnce(this.core.playback, Events.PLAYBACK_PAUSE, this.callback)
</code></pre>
</div>
</div>
</div>
<div id="method_off" class="method item inherited">
<h3 class="name"><code>off</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>callback</code>
</li>
<li class="arg">
<code>context</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_off">Events</a>:
<a href="../files/src_base_events.js.html#l86"><code>src/base/events.js:86</code></a>
</p>
</div>
<div class="description">
<p>stop listening to an event</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">callback</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">context</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_on" class="method item inherited">
<h3 class="name"><code>on</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>callback</code>
</li>
<li class="arg">
<code>context</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_on">Events</a>:
<a href="../files/src_base_events.js.html#l53"><code>src/base/events.js:53</code></a>
</p>
</div>
<div class="description">
<p>listen to an event indefinitely, if you want to stop you need to call <code>off</code></p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">callback</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">context</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_once" class="method item inherited">
<h3 class="name"><code>once</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>callback</code>
</li>
<li class="arg">
<code>context</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_once">Events</a>:
<a href="../files/src_base_events.js.html#l68"><code>src/base/events.js:68</code></a>
</p>
</div>
<div class="description">
<p>listen to an event only once</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">callback</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">context</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_remove" class="method item">
<h3 class="name"><code>remove</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l124"><code>src/base/ui_object.js:124</code></a>
</p>
</div>
<div class="description">
<p>removes the ui component from DOM</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>:
<p>itself</p>
</div>
</div>
</div>
<div id="method_render" class="method item">
<h3 class="name"><code>render</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l115"><code>src/base/ui_object.js:115</code></a>
</p>
</div>
<div class="description">
<p>render the component, usually attach it to a real existent <code>element</code></p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>:
<p>itself</p>
</div>
</div>
</div>
<div id="method_setElement" class="method item">
<h3 class="name"><code>setElement</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>element</code>
</li>
<li class="arg">
<code>delegate</code>
</li>
</ul><span class="paren">)</span>
</div>
<span class="returns-inline">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l136"><code>src/base/ui_object.js:136</code></a>
</p>
</div>
<div class="description">
<p>set element to <code>el</code> and <code>$el</code></p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">element</code>
<span class="type"><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/HTMLElement" class="crosslink external" target="_blank">HTMLElement</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">delegate</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<div class="param-description">
<p>whether is delegate or not</p>
</div>
</li>
</ul>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>:
<p>itself</p>
</div>
</div>
</div>
<div id="method_stopListening" class="method item inherited">
<h3 class="name"><code>stopListening</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>obj</code>
</li>
<li class="arg">
<code>name</code>
</li>
<li class="arg">
<code>callback</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_stopListening">Events</a>:
<a href="../files/src_base_events.js.html#l144"><code>src/base/events.js:144</code></a>
</p>
</div>
<div class="description">
<p>stop listening an event for a given object</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">obj</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
<li class="param">
<code class="param-name">callback</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function" class="crosslink external" target="_blank">Function</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_tagName" class="method item">
<h3 class="name"><code>tagName</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l39"><code>src/base/ui_object.js:39</code></a>
</p>
</div>
<div class="description">
<p>gets the tag name for the ui component</p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>:
<p>tag's name</p>
</div>
</div>
</div>
<div id="method_trigger" class="method item inherited">
<h3 class="name"><code>trigger</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>name</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/Events.html#method_trigger">Events</a>:
<a href="../files/src_base_events.js.html#l122"><code>src/base/events.js:122</code></a>
</p>
</div>
<div class="description">
<p>triggers an event given its <code>name</code></p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">name</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<div class="param-description">
</div>
</li>
</ul>
</div>
</div>
<div id="method_undelegateEvents" class="method item">
<h3 class="name"><code>undelegateEvents</code></h3>
<span class="paren">()</span>
<span class="returns-inline">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>
</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_base_ui_object.js.html#l178"><code>src/base/ui_object.js:178</code></a>
</p>
</div>
<div class="description">
<p>undelegats all the <code>events</code></p>
</div>
<div class="returns">
<h4>Returns:</h4>
<div class="returns-description">
<span class="type"><a href="../classes/UIObject.html" class="crosslink">UIObject</a></span>:
<p>itself</p>