oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/overview-summary-Animator.js.html
JT Smith 4f68a0933c added YUI and YUI-ext 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
2006-11-07 23:15:57 +00:00

444 lines
21 KiB
HTML
Raw Blame History

<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
parent.document.title="Animator.js Overview";
}
</script>
</head>
<body bgcolor="white" onload="asd();" style="margin:15px;">
<center>
<h2>Animator.js</h2>
</center>
<h4>Summary</h4>
<p>
</p>
<table border="1" cellpadding="3" cellspacing="0" width="100%">
<tr bgcolor="#CCCCFF" class="TableHeadingColor">
<td colspan="2" class="title-cell">
<b>Class Summary</b>
</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.Animator.html">YAHOO.ext.Animator</a></b></td>
<td>Provides support for syncing animations for multiple <a href="YAHOO.ext.Actor.html#">YAHOO.ext.Actor</a>s.<br><br>
<br><br>This example can be seen in action <a href="http://jackslocum.blogspot.com/2006/08/splitbar-component-for-yahoo-ui.html" target="_new">here</a> by clicking on "Click here and I will point it out".<br>
<pre><code>
var animator = new YAHOO.ext.Animator();
var cursor = new YAHOO.ext.Actor('cursor-img', animator);
var click = new YAHOO.ext.Actor('click-img', animator);
var resize = new YAHOO.ext.Actor('resize-img', animator);
</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.Animator.AnimSequence.html">YAHOO.ext.Animator.AnimSequence</a></b></td>
<td>Used by <a href="YAHOO.ext.Animator.html#">YAHOO.ext.Animator</a> to sequence animations.</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.Animator.CompositeSequence.html">YAHOO.ext.Animator.CompositeSequence</a></b></td>
<td>Used by <a href="YAHOO.ext.Animator.html#">YAHOO.ext.Animator</a> to run multiple animation sequences at once.</td>
</tr>
</table>
<hr/>
<!-- ========== METHOD SUMMARY =========== -->
<!-- ========== END METHOD SUMMARY =========== -->
<pre class="sourceview"><span class="comment">/**
* <span class="attrib">@class</span>
* Provides support for syncing animations for multiple {<span class="attrib">@link</span> YAHOO.ext.Actor}s.&lt;br&gt;&lt;br&gt;
* &lt;br&gt;&lt;br&gt;This example can be seen in action &lt;a href="http://jackslocum.blogspot.com/2006/08/splitbar-component-for-yahoo-ui.html" target="_new"&gt;here&lt;/a&gt; by clicking on "Click here and I will point it out".&lt;br&gt;
* &lt;pre&gt;&lt;code&gt;
var animator = new YAHOO.ext.Animator();
var cursor = new YAHOO.ext.Actor('cursor-img', animator);
var click = new YAHOO.ext.Actor('click-img', animator);
var resize = new YAHOO.ext.Actor('resize-img', animator);
// start capturing
animator.startCapture();
// these animations will be run in sequence
cursor.show();
cursor.moveTo(500,400);
cursor.moveTo(20, getEl('navbar').getY()+10, true, .75);
click.show();
click.alignTo(cursor, 'tl', [-4, -4]);
// Add an async function call, pass callback to argument 1
animator.addAsyncCall(Blog.navbar.undockDelegate, 1);
// pause .5 seconds
animator.pause(.5);
// again, these animations will be run in sequence
click.hide(true, .7);
cursor.alignTo('splitter', 'tr', [0, +100], true, 1);
resize.alignTo('splitter', 'tr', [-12, +100]);
// start sync block: these animations will run at the same time
animator.beginSync();
cursor.hide();
resize.show();
animator.endSync();
// play the captured animation sequences, call myCallback when done
animator.play(myCallback);
* &lt;/code&gt;&lt;/pre&gt;
* <span class="attrib">@extends</span> YAHOO.ext.Element
* <span class="attrib">@requires</span> YAHOO.ext.Element
* <span class="attrib">@requires</span> YAHOO.util.Dom
* <span class="attrib">@requires</span> YAHOO.util.Event
* <span class="attrib">@requires</span> YAHOO.util.CustomEvent
* <span class="attrib">@requires</span> YAHOO.util.Anim
* <span class="attrib">@requires</span> YAHOO.util.ColorAnim
* <span class="attrib">@requires</span> YAHOO.util.Motion
* <span class="attrib">@constructor</span>
* <span class="attrib">@param</span> {String/HTMLElement} el The dom element or element id
* <span class="attrib">@param</span> {&lt;i&gt;YAHOO.ext.Animator&lt;/i&gt;} animator (optional) The Animator that will capture this Actor's actions
* <span class="attrib">@param</span> {&lt;i&gt;Boolean&lt;/i&gt;} selfCapture (optional) Whether this actor should capture it's own actions to support self playback without an animator (defaults to false)
*/</span>
YAHOO.ext.Animator = <span class="reserved">function</span>(<span class="comment">/*Actors...*/</span>){
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.actors = [];
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.playlist = new YAHOO.ext.Animator.AnimSequence();
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.captureDelegate = <span class="reserved">this</span>.capture.createDelegate(<span class="reserved">this</span>);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.playDelegate = <span class="reserved">this</span>.play.createDelegate(<span class="reserved">this</span>);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.syncing = false;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.stopping = false;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.playing = false;
<span class="reserved">for</span>(var i = 0; i &lt; arguments.length; i++){
<span class="reserved">this</span>.addActor(arguments[i]);
}
};
YAHOO.ext.Animator.<span class="reserved">prototype</span> = {
<span class="comment">/**
* <span class="attrib">@private</span>
*/</span>
capture : <span class="reserved">function</span>(actor, action){
<span class="reserved">if</span>(<span class="reserved">this</span>.syncing){
<span class="reserved">if</span>(!<span class="reserved">this</span>.syncMap[actor.id]){
<span class="reserved">this</span>.syncMap[actor.id] = new YAHOO.ext.Animator.AnimSequence();
}
<span class="reserved">this</span>.syncMap[actor.id].add(action);
}<span class="reserved">else</span>{
<span class="reserved">this</span>.playlist.add(action);
}
},
<span class="comment">/**
* Add an actor. The actor is also set to capturing = true.
* <span class="attrib">@param</span> {YAHOO.ext.Actor} actor
*/</span>
addActor : <span class="reserved">function</span>(actor){
actor.onCapture.subscribe(<span class="reserved">this</span>.captureDelegate);
<span class="reserved">this</span>.actors.push(actor);
},
<span class="comment">/**
* Start capturing actions on the added actors.
* <span class="attrib">@param</span> {&lt;i&gt;Boolean&lt;/i&gt;} clearPlaylist Whether to also create a new playlist
*/</span>
startCapture : <span class="reserved">function</span>(clearPlaylist){
<span class="reserved">for</span>(var i = 0; i &lt; <span class="reserved">this</span>.actors.length; i++){
var a = <span class="reserved">this</span>.actors[i];
<span class="reserved">if</span>(!<span class="reserved">this</span>.isCapturing(a)){
a.onCapture.subscribe(<span class="reserved">this</span>.captureDelegate);
}
a.capturing = true;
}
<span class="reserved">if</span>(clearPlaylist){
<span class="reserved">this</span>.playlist = new YAHOO.ext.Animator.AnimSequence();
}
},
<span class="comment">/**
* Checks whether this animator is listening to a specific actor.
* <span class="attrib">@param</span> {YAHOO.ext.Actor} actor
*/</span>
isCapturing : <span class="reserved">function</span>(actor){
var subscribers = actor.onCapture.subscribers;
<span class="reserved">if</span>(subscribers){
<span class="reserved">for</span>(var i = 0; i &lt; subscribers.length; i++){
<span class="reserved">if</span>(subscribers[i] &amp;&amp; subscribers[i].contains(<span class="reserved">this</span>.captureDelegate)){
<span class="reserved">return</span> true;
}
}
}
<span class="reserved">return</span> false;
},
<span class="comment">/**
* Stop capturing on all added actors.
*/</span>
stopCapture : <span class="reserved">function</span>(){
<span class="reserved">for</span>(var i = 0; i &lt; <span class="reserved">this</span>.actors.length; i++){
var a = <span class="reserved">this</span>.actors[i];
a.onCapture.unsubscribe(<span class="reserved">this</span>.captureDelegate);
a.capturing = false;
}
},
<span class="comment">/**
* Start a multi-actor sync block. By default all animations are run in sequence. While in the sync block
* each actor's own animations will still be sequenced, but all actors will animate at the same time.
*/</span>
beginSync : <span class="reserved">function</span>(){
<span class="reserved">this</span>.syncing = true;
<span class="reserved">this</span>.syncMap = {};
},
<span class="comment">/**
* End the multi-actor sync block
*/</span>
endSync : <span class="reserved">function</span>(){
<span class="reserved">this</span>.syncing = false;
var composite = new YAHOO.ext.Animator.CompositeSequence();
<span class="reserved">for</span>(key in <span class="reserved">this</span>.syncMap){
<span class="reserved">if</span>(typeof <span class="reserved">this</span>.syncMap[key] != <span class="literal">'function'</span>){
composite.add(<span class="reserved">this</span>.syncMap[key]);
}
}
<span class="reserved">this</span>.playlist.add(composite);
<span class="reserved">this</span>.syncMap = null;
},
<span class="comment">/**
* Starts playback of the playlist, also stops any capturing. To start capturing again call {<span class="attrib">@link</span> #startCapture}.
* <span class="attrib">@param</span> {&lt;i&gt;Function&lt;/i&gt;} oncomplete (optional) Callback to execute when playback has completed
*/</span>
play : <span class="reserved">function</span>(oncomplete){
<span class="reserved">if</span>(<span class="reserved">this</span>.playing) <span class="reserved">return</span>; <span class="comment">// can't play the same animation twice at once</span>
<span class="reserved">this</span>.stopCapture();
<span class="reserved">this</span>.playlist.play(oncomplete);
},
<span class="comment">/**
* Stop at the next available stopping point
*/</span>
stop : <span class="reserved">function</span>(){
<span class="reserved">this</span>.playlist.stop();
},
<span class="comment">/**
* Check if this animator is currently playing
*/</span>
isPlaying : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.playlist.isPlaying();
},
<span class="comment">/**
* Clear the playlist
*/</span>
clear : <span class="reserved">function</span>(){
<span class="reserved">this</span>.playlist = new YAHOO.ext.Animator.AnimSequence();
},
<span class="comment">/**
* Add a function call to the playlist.
* <span class="attrib">@param</span> {Function} fcn The function to call
* <span class="attrib">@param</span> {&lt;i&gt;Array&lt;/i&gt;} args The arguments to call the function with
* <span class="attrib">@param</span> {&lt;i&gt;Object&lt;/i&gt;} scope (optional) The scope of the function
*/</span>
addCall : <span class="reserved">function</span>(fcn, args, scope){
<span class="reserved">this</span>.playlist.add(new YAHOO.ext.Actor.Action(scope, fcn, args || []));
},
<span class="comment">/**
* Add an async function call to the playlist.
* <span class="attrib">@param</span> {Function} fcn The function to call
* <span class="attrib">@param</span> {Number} callbackIndex The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED.
* <span class="attrib">@param</span> {&lt;i&gt;Array&lt;/i&gt;} args The arguments to call the function with
* <span class="attrib">@param</span> {&lt;i&gt;Object&lt;/i&gt;} scope (optional) The scope of the function
*/</span>
addAsyncCall : <span class="reserved">function</span>(fcn, callbackIndex, args, scope){
<span class="reserved">this</span>.playlist.add(new YAHOO.ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex));
},
<span class="comment">/**
* Add a pause to the playlist (in seconds)
* <span class="attrib">@param</span> {Number} seconds The number of seconds to pause.
*/</span>
pause : <span class="reserved">function</span>(seconds){
<span class="reserved">this</span>.playlist.add(new YAHOO.ext.Actor.PauseAction(seconds));
}
};
<span class="comment">/**
* <span class="attrib">@class</span> Used by {<span class="attrib">@link</span> YAHOO.ext.Animator} to sequence animations. Generally used internally. Documentation to come.&lt;br&gt;&lt;br&gt;
*/</span>
YAHOO.ext.Animator.AnimSequence = <span class="reserved">function</span>(){
<span class="reserved">this</span>.actions = [];
<span class="reserved">this</span>.nextDelegate = <span class="reserved">this</span>.next.createDelegate(<span class="reserved">this</span>);
<span class="reserved">this</span>.playDelegate = <span class="reserved">this</span>.play.createDelegate(<span class="reserved">this</span>);
<span class="reserved">this</span>.oncomplete = null;
<span class="reserved">this</span>.playing = false;
<span class="reserved">this</span>.stopping = false;
<span class="reserved">this</span>.actionIndex = -1;
};
YAHOO.ext.Animator.AnimSequence.<span class="reserved">prototype</span> = {
add : <span class="reserved">function</span>(action){
<span class="reserved">this</span>.actions.push(action);
},
next : <span class="reserved">function</span>(){
<span class="reserved">if</span>(<span class="reserved">this</span>.stopping){
<span class="reserved">this</span>.playing = false;
<span class="reserved">if</span>(<span class="reserved">this</span>.oncomplete){
<span class="reserved">this</span>.oncomplete(<span class="reserved">this</span>, false);
}
<span class="reserved">return</span>;
}
var nextAction = <span class="reserved">this</span>.actions[++<span class="reserved">this</span>.actionIndex];
<span class="reserved">if</span>(nextAction){
nextAction.play(<span class="reserved">this</span>.nextDelegate);
}<span class="reserved">else</span>{
<span class="reserved">this</span>.playing = false;
<span class="reserved">if</span>(<span class="reserved">this</span>.oncomplete){
<span class="reserved">this</span>.oncomplete(<span class="reserved">this</span>, true);
}
}
},
play : <span class="reserved">function</span>(oncomplete){
<span class="reserved">if</span>(<span class="reserved">this</span>.playing) <span class="reserved">return</span>; <span class="comment">// can't play the same sequence twice at once</span>
<span class="reserved">this</span>.oncomplete = oncomplete;
<span class="reserved">this</span>.stopping = false;
<span class="reserved">this</span>.playing = true;
<span class="reserved">this</span>.actionIndex = -1;
<span class="reserved">this</span>.next();
},
stop : <span class="reserved">function</span>(){
<span class="reserved">this</span>.stopping = true;
},
isPlaying : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.playing;
},
clear : <span class="reserved">function</span>(){
<span class="reserved">this</span>.actions = [];
},
addCall : <span class="reserved">function</span>(fcn, args, scope){
<span class="reserved">this</span>.actions.push(new YAHOO.ext.Actor.Action(scope, fcn, args || []));
},
<span class="comment">/**
* Add an async function call to the capture queue.
* <span class="attrib">@param</span> {Function} fcn The function to call
* <span class="attrib">@param</span> {Number} callbackIndex The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED.
* <span class="attrib">@param</span> {&lt;i&gt;Array&lt;/i&gt;} args The arguments to call the function with
* <span class="attrib">@param</span> {&lt;i&gt;Object&lt;/i&gt;} scope (optional) The scope of the function
*/</span>
addAsyncCall : <span class="reserved">function</span>(fcn, callbackIndex, args, scope){
<span class="reserved">this</span>.actions.push(new YAHOO.ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex));
},
pause : <span class="reserved">function</span>(seconds){
<span class="reserved">this</span>.actions.push(new YAHOO.ext.Actor.PauseAction(seconds));
}
};
<span class="comment">/**
* <span class="attrib">@class</span> Used by {<span class="attrib">@link</span> YAHOO.ext.Animator} to run multiple animation sequences at once. Generally used internally. Documentation to come.&lt;br&gt;&lt;br&gt;
*/</span>
YAHOO.ext.Animator.CompositeSequence = <span class="reserved">function</span>(){
<span class="reserved">this</span>.sequences = [];
<span class="reserved">this</span>.completed = 0;
<span class="reserved">this</span>.trackDelegate = <span class="reserved">this</span>.trackCompletion.createDelegate(<span class="reserved">this</span>);
}
YAHOO.ext.Animator.CompositeSequence.<span class="reserved">prototype</span> = {
add : <span class="reserved">function</span>(sequence){
<span class="reserved">this</span>.sequences.push(sequence);
},
play : <span class="reserved">function</span>(onComplete){
<span class="reserved">this</span>.completed = 0;
<span class="reserved">if</span>(<span class="reserved">this</span>.sequences.length &lt; 1){
<span class="reserved">if</span>(onComplete)onComplete();
<span class="reserved">return</span>;
}
<span class="reserved">this</span>.onComplete = onComplete;
<span class="reserved">for</span>(var i = 0; i &lt; <span class="reserved">this</span>.sequences.length; i++){
<span class="reserved">this</span>.sequences[i].play(<span class="reserved">this</span>.trackDelegate);
}
},
trackCompletion : <span class="reserved">function</span>(){
++<span class="reserved">this</span>.completed;
<span class="reserved">if</span>(<span class="reserved">this</span>.completed &gt;= <span class="reserved">this</span>.sequences.length &amp;&amp; <span class="reserved">this</span>.onComplete){
<span class="reserved">this</span>.onComplete();
}
},
stop : <span class="reserved">function</span>(){
<span class="reserved">for</span>(var i = 0; i &lt; <span class="reserved">this</span>.sequences.length; i++){
<span class="reserved">this</span>.sequences[i].stop();
}
},
isPlaying : <span class="reserved">function</span>(){
<span class="reserved">for</span>(var i = 0; i &lt; <span class="reserved">this</span>.sequences.length; i++){
<span class="reserved">if</span>(<span class="reserved">this</span>.sequences[i].isPlaying()){
<span class="reserved">return</span> true;
}
}
<span class="reserved">return</span> false;
}
};
</pre>
<hr>
<hr>
<font size="-1">
</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Sat Oct 14 06:07:10 2006</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink