Subversion Repositories Applications.papyrus

Compare Revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dojox/fx/style.js
New file
0,0 → 1,221
if(!dojo._hasResource["dojox.fx.style"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx.style"] = true;
dojo.provide("dojox.fx.style");
dojo.experimental("dojox.fx.style");
//
// summary: dojox.fx CSS Class _Animations:
//
// description: a set of functions to animate properties based on
// normalized CSS class definitions.
//
// provides: addClass, removeClass, and toggleClass
//
dojo.require("dojox.fx._base");
 
// FIXME: should the call signatures match dojo.addClass/removeClass/toggleClass and extend
// by having a third (or fourth) param to mix in additional _Animation args for advanced
// usage (delay: curve: repeat: easing: etc ... )
 
dojox.fx.addClass = function(/*dojox.fx._arg.StyleArgs*/ args){
// summary: Animate the effects of adding a class to a node
// description:
// Creates an animation that will animate
// the properties of a node to the properties
// defined in a standard CSS .class definition.
// (calculating the differences itself)
//
// example:
//
// .bar { line-height: 12px; }
// .foo { line-height: 40px; }
// <div class="bar" id="test">
// Multi<br>line<br>text
// </div>
//
// // animate to line-height:40px
// dojo.fx.addClass({ node:"test", cssClass:"foo" }).play();
//
var node = (args.node = dojo.byId(args.node));
 
var pushClass = (function(){
// summary: onEnd we want to add the class to the node
// (as dojo.addClass naturally would) in case our
// class parsing misses anything the browser would
// otherwise interpret. this may cause some flicker,
// and will only apply the class so children can inherit
// after the animation is done (potentially more flicker)
var innerNode = node; // FIXME: why do we do this like this?
return function(){
dojo.addClass(innerNode, args.cssClass);
innerNode.style.cssText = _beforeStyle;
}
})();
 
// _getCalculatedStleChanges is the core of our style/class animations
var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,true);
var _beforeStyle = node.style.cssText;
var _anim = dojo.animateProperty(dojo.mixin({
properties: mixedProperties
},args));
dojo.connect(_anim,"onEnd",_anim,pushClass);
return _anim; // dojo._Animation
};
 
dojox.fx.removeClass = function(/*dojox.fx._arg.StyleArgs*/ args){
// summary: Animate the effects of removing a class from a node
// description:
// Creates an animation that will animate the properties of a
// node (args.node) to the properties calculated after removing
// a standard CSS className from a that node.
//
// calls dojo.removeClass(args.cssClass) onEnd of animation
//
// standard dojo._Animation object rules apply.
//
// example:
// | // animate the removal of "foo" from a node with id="bar"
// | dojox.fx.removeClass({
// | node: "bar",
// | cssClass: "foo"
// | }).play();
 
var node = (args.node = dojo.byId(args.node));
 
var pullClass = (function(){
// summary: onEnd we want to remove the class from the node
// (as dojo.removeClass naturally would) in case our class
// parsing misses anything the browser would otherwise
// interpret. this may cause some flicker, and will only
// apply the class so children can inherit after the
// animation is done (potentially more flicker)
//
var innerNode = node;
return function(){
dojo.removeClass(innerNode, args.cssClass);
innerNode.style.cssText = _beforeStyle;
}
})();
 
var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,false);
var _beforeStyle = node.style.cssText;
var _anim = dojo.animateProperty(dojo.mixin({
properties: mixedProperties
},args));
dojo.connect(_anim,"onEnd",_anim,pullClass);
return _anim; // dojo._Animation
};
 
dojox.fx.toggleClass = function(/*DomNode|String*/node, /*String*/cssClass, /*Boolean?*/condition){
// summary:
// Animate the effects of Toggling a class on a Node
//
// description:
// creates an animation that will animate the effect of
// toggling a class on or off of a node.
// Adds a class to node if not present, or removes if present.
// Pass a boolean condition if you want to explicitly add or remove.
// node:
// The domNode (or string of the id) to toggle
// cssClass:
// String of the classname to add to the node
// condition:
// If passed, true means to add the class, false means to remove.
//
// example:
// | // add the class "sampleClass" to a node id="theNode"
// | dojox.fx.toggleClass("theNode","sampleClass",true).play();
// example:
// | // toggle the class "sampleClass" on the node id="theNode"
// | dojox.fx.toggleClass("theNode","sampleClass").play();
if(typeof condition == "undefined"){
condition = !dojo.hasClass(node, cssClass);
}
return dojox.fx[(condition ? "addClass" : "removeClass")]({ node: node, cssClass:cssClass }); // dojo._Animation
// TODO: support 4th param animMixin to allow passing of easing and duration and other _Animtion options
};
 
dojox.fx._allowedProperties = [
// summary:
// this is our pseudo map of properties we will check for.
// it should be much more intuitive. a way to normalize and
// "predict" intent, or even something more clever ...
// open to suggestions.
 
// no-brainers:
"width",
"height",
// only if position = absolute || relative?
"left", "top", "right", "bottom",
// these need to be filtered through dojo.colors?
// "background", // normalize to:
/* "backgroundImage", */
// "backgroundPosition", // FIXME: to be effective, this needs "#px #px"?
"backgroundColor",
 
"color",
 
// "border",
"borderBottomColor", "borderBottomWidth",
"borderTopColor","borderTopWidth",
"borderLeftColor","borderLeftWidth",
"borderRightColor","borderRightWidth",
 
// "padding", // normalize to:
"paddingLeft", "paddingRight", "paddingTop", "paddingBottom",
// "margin", // normalize to:
"marginLeft", "marginTop", "marginRight", "marginBottom",
 
// unit import/delicate?:
"lineHeight",
"letterSpacing",
"fontSize"
];
 
dojox.fx._getStyleSnapshot = function(/* Object */cache){
// summary:
// uses a dojo.getComputedStyle(node) cache reference and
// iterates through the 'documented/supported animate-able'
// properties.
//
// returns: Array
// an array of raw, calculcated values (no keys), to be normalized/compared
// elsewhere
return dojo.map(dojox.fx._allowedProperties,function(style){
return cache[style]; // String
}); // Array
};
 
dojox.fx._getCalculatedStyleChanges = function(/*dojox.fx._arg.StyleArgs*/ args, /*Boolean*/addClass){
// summary: calclate the difference in style properties between two states
// description:
// calculate and normalize(?) the differences between two states
// of a node (args.node) by quickly adding or removing a class, and
// iterateing over the results of dojox.fx._getStyleSnapshot()
//
// addClass:
// true to calculate what adding a class would do,
// false to calculate what removing the class would do
 
var node = (args.node = dojo.byId(args.node));
var compute = dojo.getComputedStyle(node);
 
// take our snapShots
var _before = dojox.fx._getStyleSnapshot(compute);
dojo[(addClass ? "addClass" : "removeClass")](node,args.cssClass);
var _after = dojox.fx._getStyleSnapshot(compute);
dojo[(addClass ? "removeClass" : "addClass")](node,args.cssClass);
 
var calculated = {};
var i = 0;
dojo.forEach(dojox.fx._allowedProperties,function(prop){
if(_before[i] != _after[i]){
// FIXME: the static unit: px is not good, either. need to parse unit from computed style?
calculated[prop] = { end: parseInt(_after[i]) /* start: parseInt(_before[i]), unit: 'px' */ };
}
i++;
});
return calculated;
};
 
}
/trunk/api/js/dojo1.0/dojox/fx/README
New file
0,0 → 1,69
-------------------------------------------------------------------------------
dojox.fx
-------------------------------------------------------------------------------
Version 1.0.0
Release date: 10/31/2007
-------------------------------------------------------------------------------
Project state:
prototype / expermental
-------------------------------------------------------------------------------
Credits
Peter Higgins (dante)
Jonathan Bond-Caron (jbondc@gmail.com)
Shane O'Sullivan (shaneosullivan1@gmail.com)
-------------------------------------------------------------------------------
Project description
 
dojox.fx provides a class of animation effects to use, and
other animation addons to dojo base.
 
-------------------------------------------------------------------------------
Dependencies:
 
dojox.fx requires dojo (core) and the dojo.fx package
dojox.fx.easing requires only dojo core.
-------------------------------------------------------------------------------
Documentation
 
existing API surface:
 
dojox.fx._base:
- dojox.fx.crossFade - crossfade two nodes easily
- dojox.fx.sizeTo - size a node about it's center to a new width/height
- dojox.fx.slideBy - slide a node by a t,l offset
- dojox.fx.highlight - animates the background color of a node, and returns
it to the color it was.
 
(all use standard _Animation properties, like duration, easing, node, etc)
 
dojox.fx._core:
- dojox.fx._Line - a 2-d _Line implementation, backwards compatible with
dojo._Line ... you might could safely do something akin to
dojo._Line.prototype = dojox.fx._Line.prototype;
and enable this for all dojo _Animations?
 
dojox.fx.style: - experimental CSS animation via class definitions
- dojox.fx.addClass - animate the effects of applying a class to a node
- dojox.fx.removeClass - " " " " removing a class from a node
- dojox.fx.toggleClass - wrapper for addClass/removeClass
 
dojox.fx.easing: - a collection of easing functions to use
this is a "stand alone" class, and can be used via:
dojo.require("dojox.fx.easing");
and provides:
dojo.fx.easing.easeIn/easeOut/easeInOut
to use in an _Animation easing: property
 
-------------------------------------------------------------------------------
Installation instructions
 
Grab the following from the Dojo SVN Repository:
http://svn.dojotoolkit.org/dojo/dojox/trunk/fx.js
http://svn.dojotoolkit.org/dojo/dojox/trunk/fx/*
 
Install into the following directory structure:
/dojox/fx/
 
...which should be at the same level as your Dojo checkout.
-------------------------------------------------------------------------------
/trunk/api/js/dojo1.0/dojox/fx/easing.js
New file
0,0 → 1,42
if(!dojo._hasResource["dojox.fx.easing"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx.easing"] = true;
dojo.provide("dojox.fx.easing");
/*
dojox.fx.easing is in this little file so you don't need dojox.fx to utilize this.
dojox.fx has a lot of fun animations, but this module is optimized for size ...
 
*/
dojox.fx.easing = {
// summary: Collection of easing functions to use beyond the default dojo._defaultEasing
//
// description:
// Easing functions are used to manipulate the iteration through
// an _Animation's _Line. _Line being the properties of an Animation,
// and the easing function progresses through that Line determing
// how quickly (or slowly) it should go.
//
// example:
// dojo.require("dojox.fx.easing");
// var anim = dojo.fadeOut({
// node: 'node',
// duration: 2000,
// easing: dojox.fx.easing.easeIn
// }).play();
//
easeIn: function(/* Decimal? */n){
// summary: an easing function that speeds an _Animation up closer to end
return Math.pow(n, 3);
},
 
easeOut: function(/* Decimal? */n){
// summary: an easing function that slows an _Animation down towards end
return (1 - Math.pow(1-n,3));
},
 
easeInOut: function(/* Decimal? */n){
// summary: an easing function that "humps" in the middle of an _Animation?
return ((3 * Math.pow(n, 2)) - (2 * Math.pow(n, 3)))
}
};
 
}
/trunk/api/js/dojo1.0/dojox/fx/_core.js
New file
0,0 → 1,60
if(!dojo._hasResource["dojox.fx._core"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx._core"] = true;
dojo.provide("dojox.fx._core");
 
dojox.fx._Line = function(start, end){
// summary: a custom _Line to accomodate multi-dimensional values
//
// description:
// a normal dojo._Line is the curve, and does Line(start,end)
// for propertyAnimation. as we make more complicatied animations, we realize
// some properties can have 2, or 4 values relevant (x,y) or (t,l,r,b) for example
//
// this function provides support for those Lines, and is ported directly from 0.4
// this is a lot of extra code for something so seldom used, so we'll put it here as
// and optional core addition. you can create a new line, and use it during onAnimate
// as you see fit.
//
// start: Integer|Array
// An Integer (or an Array of integers) to use as a starting point
// end: Integer|Array
// An Integer (or an Array of integers) to use as an ending point
//
// example: see dojox.fx.smoothScroll
//
// example:
// | // this is 10 .. 100 and 50 .. 500
// | var curve = new dojox.fx._Line([10,50],[100,500]);
// | // dojo._Animation.onAnimate is called at every step of the animation
// | // to define current values. this _Line returns an array
// | // at each step. arguments[0] and [1] in this example.
//
this.start = start;
this.end = end;
if(dojo.isArray(start)){
// multi-dimensional branch
var diff = [];
dojo.forEach(this.start, function(s,i){
diff[i] = this.end[i] - s;
}, this);
this.getValue = function(/*float*/ n){
var res = [];
dojo.forEach(this.start, function(s, i){
res[i] = (diff[i] * n) + s;
}, this);
return res; // Array
}
}else{
// single value branch, document here for both branches:
var diff = end - start;
this.getValue = function(/*float*/ n){
// summary: Returns the point on the line, or an array of points
// n: a floating point number greater than 0 and less than 1
// returns: Mixed
return (diff * n) + this.start; // Decimal
}
}
};
 
}
/trunk/api/js/dojo1.0/dojox/fx/tests/_animation.css
New file
0,0 → 1,113
.testBox {
border:1px solid #333;
width:75px;
height:75px;
}
.absolutely { position:absolute;
top:0; left:0;
}
.floating {
float:left;
}
.wide {
width:200px;
}
.tall {
height:200px;
}
.tiny {
width:3px;
height:3px;
}
 
 
.black {
color:#fff;
background-color:#000;
}
 
.white {
color:#666;
background-color:#fff;
}
 
.green {
color:#000;
background-color:#eef;
}
.red {
color:#fff;
background-color:#ffe;
}
.blue {
color:#000;
background-color:#fef !important;
}
 
/* font sizes */
.baseFont {
line-height:14px;
font:12px Arial,sans-serif;
letter-spacing:0.1em;
}
 
.spacedVertical {
line-height:42px;
}
.spacedHorizontal {
letter-spacing:0.42em;
}
.fontSizeTest {
font:20px Arial,sans-serif;
}
 
/* margins */
.bigMargin {
margin:30px;
}
.noMargin {
margin:0;
}
.mediumMargin {
margin:15px;
}
.bigMarginLeft {
margin-left:150px;
}
 
/* padding */
.padded {
padding:3px;
}
.noPadding {
padding:0;
}
.topPadding {
padding-top:50px;
}
.bigPadding {
padding:30px;
}
 
/* positioning */
 
.offsetSome {
top:50px;
left:75px;
}
 
.topLeft {
top:0;
left:0;
}
.bottomRight {
bottom:0;
right:0;
}
 
.bothAxis {
top:10px;
left:10px;
right:10px;
bottom:10px;
}
/trunk/api/js/dojo1.0/dojox/fx/tests/example_Line.html
New file
0,0 → 1,82
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojoClass detail information</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
#node {
position:absolute;
top:100px; left:100px;
width:400px;
height:400px;
padding:12px;
-moz-border-radius:5pt;
overflow:hidden;
border:1px solid #333;
}
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true"
src="../../../dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojox.fx.easing");
dojo.require("dojox.gfx");
 
var surface, shape, line, node;
dojo.addOnLoad(function(){
// dojo._Line is just a simple class to hold some numbers, and return a given point
// on the line as a percentage, essentially
var _line = new dojo._Line(20,75); // a holder for the numbers 100..300
console.log(_line,_line.getValue(0.5 /* Float: 0..1 */)); // should return 200
 
node = dojo.byId('node');
 
surface = dojox.gfx.createSurface(node,400,400);
shape = surface.createCircle({ cx: 200, cy: 200, r: 20 })
.setFill([0,0,255])
.setStroke({ color:[128,128,128], width: 1});
// so we just make a raw _Animation
var _anim = new dojo._Animation({
// the id of the shape
node: node,
// some easing options
easing: dojox.fx.easing.easeInOut,
// our radius start and end values
curve:_line,
// call transform on the shape with the values
onAnimate: function(){
shape.setShape({ r: arguments[0] });
},
duration:1200 // ms
// rate:100 // ms, so duration/rate iterations
});
 
 
dojo.connect(_anim,"onEnd",function(){
dojo.animateProperty({
node: node,
duration:1000,
properties: {
left: { end: 300, unit:"px" }
},
onEnd: function(){
dojo.fadeOut({ node: node, duration:3000 }).play();
}
}).play(500);
});
_anim.play(2000);
});
</script>
</head>
<body class="tundra">
<h1>animateProperty for dojox.gfx</h1>
<div id="node"></div>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_animateClass.html
New file
0,0 → 1,222
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../style.js"></script><!-- debugging -->
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "_animation.css"; /* external stylesheets to enhance readability in this test */
</style>
<script type="text/javascript">
dojo.require("dojox.fx.style");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.fx.style tests</h1>
 
<p id="fontTest">
dojox.fx.style provides a few methods to animate the changes that would occur
when adding or removing a class from a domNode.
</p>
<ul class="testUl" id="test1">
<li class="baseFont">dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation</li>
<li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li>
<li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li>
</ul>
 
<button dojoType="dijit.form.Button">
spacing test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"spacedHorizontal"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
 
<button dojoType="dijit.form.Button">
line-height test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"spacedVertical"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
 
<button dojoType="dijit.form.Button">
font-size test
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("li.baseFont").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"fontSizeTest"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
 
<h2>testing sizes</h2>
 
<button dojoType="dijit.form.Button" id="addTall">
add .tall
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass({
node:n,
cssClass:"tall",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('removeTall').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeTall" disabled="true">
remove .tall
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass({
node:n,
cssClass:"tall",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('addTall').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="addWide">
add .wide
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.addClass({
node:n,
cssClass:"wide",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('removeWide').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button" id="removeWide" disabled="true">
remove .wide
<script type="dojo/method" event="onClick">
var delay = 500;
var _anims = [];
dojo.query("#colorTest > .testBox").forEach(function(n){
_anims.push(dojox.fx.removeClass({
node:n,
cssClass:"wide",
delay: delay
}));
delay+=200;
});
this.setDisabled(true);
dijit.byId('addWide').setDisabled(false);
dojo.fx.combine(_anims).play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .tiny
<script type="dojo/method" event="onClick">
var _anims = [];
// until dojox.fx.NodeList-fx is ready:
dojo.query("#colorTest > .testBox").forEach(function(node){
_anims.push(dojox.fx.toggleClass(node,"tiny"));
})
dojo.fx.combine(_anims).play(5);
</script>
</button>
<div id="colorTest">
<div id="colorTest1" class="floating testBox white"></div>
<div id="colorTest2" class="floating testBox black"></div>
<div id="colorTest3" class="floating testBox green"></div>
</div>
 
<br style="clear:both">
<h2>testing position</h2>
<p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos.
normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar
will take precedent. the below position test shows the results of this:
</p>
<button dojoType="dijit.form.Button">
.offsetSome
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","offsetSome").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.topLeft
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","topLeft").play();
</script>
</button>
<button dojoType="dijit.form.Button">
.bottomRight
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","bottomRight").play();
</script>
</button>
<div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock">
<div class="testBox absolutely" id="positionTest"></div>
</div>
<button dojoType="dijit.form.Button">
toggle .green
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","green").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .black
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","black").play();
</script>
</button>
<button dojoType="dijit.form.Button">
toggle .blue
<script type="dojo/method" event="onClick">
dojox.fx.toggleClass("positionTest","blue").play();
</script>
</button>
 
<p>Some properties
cannot be modified (fontFace, and so on), so to ensure the results at the end
of the animation are applied correctly and fully, the class name is set on the node
via dojo.add/removeClass().
</p>
 
</body>
</html>
 
/trunk/api/js/dojo1.0/dojox/fx/tests/test_easing.html
New file
0,0 → 1,107
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.easing functions:</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
 
.block {
width:200px;
height:100px;
background:#666;
border:1px solid #ccc;
display:block;
color:#fff;
text-align:center;
}
</style>
<script type="text/javascript">
dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work)
dojo.require("dojox.fx.easing");
 
 
var allAnim = null;
dojo.addOnLoad(function(){
 
var easeInAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeIn',
duration:2000,
easing: dojox.fx.easing.easeIn
}),
dojo.fadeIn({
node: 'easeIn',
duration:2000,
easing: dojox.fx.easing.easeIn
})
]);
 
 
var easeOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeOut',
duration:2000,
easing: dojox.fx.easing.easeOut
}),
dojo.fadeIn({
node: 'easeOut',
duration:2000,
easing: dojox.fx.easing.easeOut
})
]);
 
var easeInOutAnim = dojo.fx.chain([
dojo.fadeOut({
node: 'easeInOut',
duration:2000,
easing: dojox.fx.easing.easeInOut
}),
dojo.fadeIn({
node: 'easeInOut',
duration:2000,
easing: dojox.fx.easing.easeInOut
})
]);
 
dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play");
dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play");
dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play");
 
// argh! FIXME: combine and chain are destructive to the animations. :(
// allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]);
allAnim = { play: function(){
console.log("can't do this via fx.combine - destructive");
easeInAnim.play();
easeOutAnim.play();
easeInOutAnim.play();
}
};
 
}); // dojo.addOnLoad
</script>
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.fx.easing function tests:</h1>
 
(click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>)
 
<div id="easeIn" class="block">dojox.fx.easing.easeIn</div>
<br><br>
<div id="easeOut" class="block">dojox.fx.easing.easeOut</div>
<br><br>
<div id="easeInOut" class="block">dojox.fx.easing.easeInOut</div>
<p>
dojox.fx.easing is stand-alone, and does not require the dojox.fx base files.
</p>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_highlight.html
New file
0,0 → 1,41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.highlight</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script>
<script type="text/javascript">
dojo.require("dojox.fx");
</script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
</head>
<body class="tundra">
 
<h1 class="testTitle">dojox.fx.highlight tests</h1>
 
<div id="attention" style="position:absolute; left:300px; top:200px; padding:10px;" >
<h3>This is the default highlight</h3>
</div>
 
<div id="attention2" style="position:absolute; left:300px; top:80px; padding:10px;" >
<h3>BRING ATTENTION HERE!</h3>
</div>
 
<div id="attention3" style="position:absolute; left:350px; top:150px; padding:10px; background-color:#CCCCCC" >
<h3>Highlight me</h3>
</div>
 
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention'}).play()">test #1 (default)</a>
<br>
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention', repeat:1}).play()">test #2 (default - play twice)</a>
<br>
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention2', color:'#0066FF', duration:800}).play()">test #3</a>
<br>
<a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention3', color:'#0066FF', duration:800}).play()">test #4</a>
 
</body></html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_crossFade.html
New file
0,0 → 1,145
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx - animation sets to use!</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
#crossfade {
position:absolute;
top:0;
left:300px;
border:2px solid #ededed;
width:50px; height:50px;
background:#fff;
text-align:center;
}
table tr { padding:5px; margin:5px; border:1px solid #ccc; }
 
.box {
width:75px; height:75px; float:left;
border:1px solid #ededed;
padding:20px;
background-color:#fee;
}
.two { background-color:#c7bedd; }
.nopad { padding:0 !important;
width:100px; height:100px; border:0;
}
.hidden {
opacity:0;
}
</style>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
function basicXfade(){
dojox.fx.crossFade({
nodes: [dojo.byId('node1'),dojo.byId('node2')],
duration: 1000
}).play();
};
 
function absoluteXfade(){
dojox.fx.crossFade({
nodes: ["node3","node4"],
duration:1000
}).play();
};
 
var _anim;
function simpleLoop(){
dojo.byId('button').disabled = "disabled";
_anim = dojox.fx.crossFade({
nodes: ["node5","node6"],
duration:1000
});
dojo.connect(_anim,"onEnd","simpleLoop");
_anim.play(500);
};
function stopLoop(){ _anim.stop(); }
 
function buttonExample(){
dojox.fx.crossFade({
nodes: [
// FIXME: fails in ie6?!?
dijit.byId('node7').domNode,
dijit.byId('node8').domNode
],
duration: 350
}).play();
}
 
dojo.addOnLoad(function(){
// this is a hack to make nodes with class="hidden" hidden
// because ie6 is a horrible wretched beast
dojo.query(".hidden").forEach(function(node){
dojo.style(node,"opacity","0");
});
 
 
});
 
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.crossFade test</h1>
 
<h3>a simple demonstration of two nodes fading simultaneously</h3>
<div>
<input type="button" onclick="basicXfade()" value="run" />
<div style="padding:20px">
<div id="node1" style="display:inline;" class="box hidden">box1</div>
<div id="node2" class="box">box2</div>
</div>
<br style="clear:both">
</div>
 
<h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3>
<input type="button" onclick="absoluteXfade()" value="run" />
<div>
<div style="width:100px; height:100px; position:relative; border:1px solid #666; ">
<div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div>
<div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div>
</div>
<br style="clear:both">
</div>
 
<h3>simple looping crossfade</h3>
<input type="button" onclick="simpleLoop()" value="run" id="button" />
<div>
<div style="padding:20px;">
<div id="node5" class="box nopad">box one</div>
<div id="node6" class="box two nopad hidden">box two</div>
</div>
<br style="clear:both">
</div>
 
<!-- FIXME: acting oddly, only in IE though
<h3>An example of cross-fading a dijit.form.Button</h3>
<input type="button" onclick="buttonExample()" value="run" id="button" />
<div>
<div style="position:relative;">
<div dojoType="dijit.TitlePane" id="node7"
style="position:absolute; top:0; left:0;">Lorem content two</div>
<div dojoTYpe="dijit.TitlePane" id="node8" class="hidden"
style="position:absolute; top:0; left:0;">Lorem content one</div>
</div>
<br style="clear:both;">
</div>
-->
 
<h3>that's all, folks...</h3>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_slideBy.html
New file
0,0 → 1,58
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx - animation sets to use!</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
 
#sizeToTest {
position:absolute;
top:0;
left:300px;
border:2px solid #ededed;
width:50px; height:50px;
background:#fff;
text-align:center;
}
 
</style>
<script type="text/javascript">
function chainTest(){
// FIXME: not recalculating mixin in init? or not re-mixing, rather.
// happens to a lot of propertyAnimations, actually when chaining, with a
// fixed 'start' property in the mixin. see _base/fx.js:slideBy()
dojo.fx.chain([
dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }),
dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 })
]).play();
}
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.slideBy test</h1>
 
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a>
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a>
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a>
<a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a>
<a href="#" onclick="javascript:chainTest()">chainTest</a>
 
<div id="sizeToTest">
lorem. ipsum.
</div>
HTML AFTER
<br>
 
 
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_sizeTo.html
New file
0,0 → 1,140
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.sizeTo | experimental fx add-ons for the Dojo Toolkit</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
<script type="text/javascript" src="../_base.js"></script>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/themes/dijit.css";
@import "../../../dijit/themes/tundra/tundra.css";
@import "../../../dijit/tests/css/dijitTests.css";
.testBox {
position:absolute;
top:0; left:0;
width:50px;
height:50px;
background:#ededed;
border:1px solid #b7b7b7;
-moz-border-radius:6pt;
-webkit-border-radius:5pt;
overflow:hidden;
}
</style>
<script type="text/javascript">
var test1 = function(e){
// this is our click test,
dojox.fx.sizeTo({
node: e.target,
width: 120,
height:120,
duration:250
}).play(5);
};
var testundo = function(e){
dojox.fx.sizeTo({
node: e.target,
width:50,
height:50,
duration:320
}).play(5);
};
var test2 = function(e){
dojox.fx.sizeTo({
node: e.target,
width: 120,
height:120,
duration:120,
method:"combine"
}).play(5);
};
 
var noIdTest = function(){
var myNode = dojo.query(".noIdHere")[0]; // first one wins
if(myNode){
// mmm, fake events (all we're using is the target anyway ... )
(!dojo.hasClass(myNode,"testRun") ? test2 : testundo)({ target: myNode });
dojo.toggleClass(myNode,"testRun");
}
};
var init = function(){
// lets setup out connections, etc ...
dojo.connect(dojo.byId("sizer1"),"onmousedown","test1");
dojo.connect(dojo.byId("sizer1"),"onmouseup","testundo"); // generic resest
// did you know dojo normalizes onmouseenter onmouseleave!?!? neat. ie got _one_ thing right.
dojo.connect(dojo.byId("sizer2"),"onmouseenter","test2");
dojo.connect(dojo.byId("sizer2"),"onmouseout","testundo");
// example using dojo.query to get a couple of nodes and roll into one anim
var hasRun = false;
dojo.connect(dojo.byId("sizer3"),"onclick",function(e){
var _anims = [];
dojo.query(".testBox").forEach(function(n){
_anims.push(
dojox.fx.sizeTo({ node: n,
width: ( hasRun ? "50" : "150"),
height: ( hasRun ? "50" : "150"),
method:"chain",
duration:720
})
);
});
hasRun=!hasRun;
var anim = dojo.fx.combine(_anims);
anim.play();
});
};
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<h1 class="testTitle">dojox.fx.sizeTo test</h1>
<p>quick sizeTo API overview:</p>
 
<pre>
dojox.fx.sizeTo({
// basic requirements:
node: "aDomNodeId", // or a domNode reference
width: 200, // measured in px
height: 200, // measured in px
method: "chain" // is default, or "combine"
});
</pre>
<p>
little test blocks (works in Opera, FF/win/mac:
</p>
 
<div style="position:relative; height:60px; width:600px; margin:0 auto;">
<div id="sizer1" class="testBox">
mouse down / mouse up
</div>
<div id="sizer2" class="testBox" style="left:60px;" >
hover / exit
</div>
<div class="testBox noIdHere" style="left:120px; ">
<a href="javascript:noIdTest()">noIdTest()</a>
</div>
<div class="testBox" id="sizer3" style="left:180px;">
all of em'
</div>
</div>
<br style="clear:both;">
(click the box labeled "all of em'" again to reset all nodes)
HTML AFTER
<br>
 
</body>
</html>
/trunk/api/js/dojo1.0/dojox/fx/tests/test_scroll.html
New file
0,0 → 1,93
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dojox.fx.scroll</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script>
<!-- <script type="text/javascript" src="../scroll.js"></script> -->
<script type="text/javascript">
dojo.require("dojox.fx.easing");
dojo.require("dojox.fx.scroll");
 
function gotoName(name){
// summary; searches for a <a name=""></a> attrib, and scrolls to it
dojo.query('a[name="'+name+'"]').forEach(function(node){
// first one wins
var anim = dojox.fx.smoothScroll({
node: node,
win:window,
duration:300,
easing:dojox.fx.easing.easeOut
}).play();
return;
});
}
 
dojo.addOnLoad(function(){
/*dojo.connect(dojo.byId("goToHeader0"), "onclick", function (e) {
var h2s = dojo.html.iframeContentDocument(dojo.byId("embed0")).getElementsByTagName('h2');
var h2 = h2s[h2s.length-1];
var anm = new dojo.lfx.smoothScroll(h2,dojo.html.iframeContentWindow(dojo.byId("embed0")),null,500);
anm.play();
});
*/
 
dojo.connect(dojo.byId("goToHeader"), "onclick", function (e) {
var node = dojo.byId('targetHeader3');
var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:500, easing:dojox.fx.easing.easeOut });
anim0.play();
});
 
dojo.connect(dojo.byId("goToHeader1"), "onclick", function(/* Event */e){
var node = dojo.byId('targetHeader1');
var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:1000, easing:dojox.fx.easing.easeOut });
anim0.play();
});
});
</script>
</head>
<body class="tundra">
 
<a name="top"></a>
<h1 class="testTitle">dojox.fx.scroll tests</h1>
 
<div id="targetHeader3" style="position:absolute; left:0px; top:3000px; padding:100px;" ><h3>YOU FOUND ME!</h3>
<p>neat.</p>
</div>
 
<p>dojox.fx.scroll provides:</p>
<ul>
<li>dojox.fx.smoothScroll()</li>
</ul>
which will create and return a dojo._Animation to scroll
a window to a desired offset.
<p></p>
<h2><code>getScroll</code></h2>
<p>
Scroll top: <span id="scrollTop">0</span><br>
Scroll left: <span id="scrollLeft">0</span>
</p>
 
<table style="position:fixed;top:20px;right:20px;">
<tr><td>
<!-- <input type="button" id="goToHeader0" value="scroll only the iframe (to a node in iframe)"><br> -->
<input type="button" id="goToHeader" value="scroll to to far node"><br>
<input type="button" id="goToHeader1" value="scroll to a node in top window">
</td></tr>
</table>
 
<p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
 
 
<h2 id='targetHeader1'><code>getElementsByClass</code></h2>
 
<p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
 
<h3 id='targetHeader2'>ContainsAny</h3>
<input type="button" onclick="gotoName('top');" value="back to top">
<p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p>
 
 
</body></html>
/trunk/api/js/dojo1.0/dojox/fx/_arg.js
New file
0,0 → 1,27
if(!dojo._hasResource["dojox.fx._arg"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx._arg"] = true;
dojo.provide("dojox.fx._arg");
 
dojox.fx._arg.StyleArgs = function(/*Object*/ args){
// summary:
// The node and CSS class to use for style manipulations.
// node: DOMNode
// The node to manipulate
// cssClass: String
// The class to use during the manipulation
this.node = args.node;
this.cssClass = args.cssClass;
}
 
dojox.fx._arg.ShadowResizeArgs = function(/*Object*/ args){
// summary:
// The odd way to document object parameters.
// x: Integer
// the width to set
// y: Integer
// the height to set
this.x = args.x;
this.y = args.y;
}
 
}
/trunk/api/js/dojo1.0/dojox/fx/_base.js
New file
0,0 → 1,195
if(!dojo._hasResource["dojox.fx._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx._base"] = true;
dojo.provide("dojox.fx._base");
// summary: add-on Animations to dojo.fx
 
dojo.require("dojo.fx");
 
// convenience functions:
dojox.fx.chain = dojo.fx.chain;
dojox.fx.combine = dojo.fx.combine;
dojox.fx.wipeIn = dojo.fx.wipeIn;
dojox.fx.wipeOut = dojo.fx.wipeOut;
dojox.fx.slideTo = dojo.fx.slideTo;
 
dojox.fx.sizeTo = function(/* Object */args){
// summary: Create an animation that will size a node
// description:
// Returns an animation that will size "node"
// defined in args Object about it's center to
// a width and height defined by (args.width, args.height),
// supporting an optional method: chain||combine mixin
// (defaults to chain).
//
// - works best on absolutely or relatively positioned elements?
//
// example:
// | // size #myNode to 400px x 200px over 1 second
// | dojo.fx.sizeTo({ node:'myNode',
// | duration: 1000,
// | width: 400,
// | height: 200,
// | method: "chain"
// | }).play();
//
var node = (args.node = dojo.byId(args.node));
var compute = dojo.getComputedStyle;
 
var method = args.method || "chain";
if (method=="chain"){ args.duration = Math.floor(args.duration/2); }
var top, newTop, left, newLeft, width, height = null;
 
var init = (function(){
var innerNode = node;
return function(){
var pos = compute(innerNode).position;
top = (pos == 'absolute' ? node.offsetTop : parseInt(compute(node).top) || 0);
left = (pos == 'absolute' ? node.offsetLeft : parseInt(compute(node).left) || 0);
width = parseInt(dojo.style(node,'width'));
height = parseInt(dojo.style(node,'height'));
 
newLeft = left - Math.floor((args.width - width)/2);
newTop = top - Math.floor((args.height - height)/2);
 
if(pos != 'absolute' && pos != 'relative'){
var ret = dojo.coords(innerNode, true);
top = ret.y;
left = ret.x;
innerNode.style.position="absolute";
innerNode.style.top=top+"px";
innerNode.style.left=left+"px";
}
}
})();
init(); // hmmm, do we need to init() or just the once beforeBegin?
 
var anim1 = dojo.animateProperty(dojo.mixin({
properties: {
height: { start: height, end: args.height || 0, unit:"px" },
top: { start: top, end: newTop }
}
}, args));
var anim2 = dojo.animateProperty(dojo.mixin({
properties: {
width: { start: width, end: args.width || 0, unit:"px" },
left: { start: left, end: newLeft }
}
}, args));
 
var anim = dojo.fx[((args.method == "combine") ? "combine" : "chain")]([anim1,anim2]);
dojo.connect(anim, "beforeBegin", anim, init);
return anim; // dojo._Animation
};
 
dojox.fx.slideBy = function(/* Object */args){
// summary: Returns an animation to slide a node by a defined offset.
//
// description:
// Returns an animation that will slide a node (args.node) from it's
// current position to it's current posision plus the numbers defined
// in args.top and args.left. standard dojo.fx mixin's apply.
//
// example:
// | // slide domNode 50px down, and 22px left
// | dojox.fx.slideBy({
// | node: domNode, duration:400,
// | top: 50, left: -22
// | }).play();
 
var node = (args.node = dojo.byId(args.node));
var compute = dojo.getComputedStyle;
var top = null; var left = null;
var init = (function(){
var innerNode = node;
return function(){
var pos = compute(innerNode,'position');
top = (pos == 'absolute' ? node.offsetTop : parseInt(compute(node, 'top')) || 0);
left = (pos == 'absolute' ? node.offsetLeft : parseInt(compute(node, 'left')) || 0);
if(pos != 'absolute' && pos != 'relative'){
var ret = dojo.coords(innerNode, true);
top = ret.y;
left = ret.x;
innerNode.style.position="absolute";
innerNode.style.top=top+"px";
innerNode.style.left=left+"px";
}
}
})();
init();
var _anim = dojo.animateProperty(dojo.mixin({
properties: {
// FIXME: is there a way to update the _Line after creation?
// null start values allow chaining to work, animateProperty will
// determine them for us (except in ie6? -- ugh)
top: { /* start: top, */end: top+(args.top||0) },
left: { /* start: left, */end: left+(args.left||0) }
}
}, args));
dojo.connect(_anim,"beforeBegin",_anim,init);
return _anim; // dojo._Animation
};
 
dojox.fx.crossFade = function(/* Object */args){
// summary: Returns an animation cross fading two element simultaneously
//
// args:
// args.nodes: Array - two element array of domNodes, or id's
//
// all other standard animation args mixins apply. args.node ignored.
//
if(dojo.isArray(args.nodes)){
// simple check for which node is visible, maybe too simple?
var node1 = args.nodes[0] = dojo.byId(args.nodes[0]);
var op1 = dojo.style(node1,"opacity");
var node2 = args.nodes[1] = dojo.byId(args.nodes[1]);
var op2 = dojo.style(node2, "opacity");
 
var _anim = dojo.fx.combine([
dojo[((op1==0)?"fadeIn":"fadeOut")](dojo.mixin({
node: node1
},args)),
dojo[((op1==0)?"fadeOut":"fadeIn")](dojo.mixin({
node: node2
},args))
]);
return _anim; // dojo._Animation
}else{
// improper syntax in args, needs Array
return false; // Boolean
}
};
 
dojox.fx.highlight = function(/*Object*/ args){
// summary: Highlight a node
// description:
// Returns an animation that sets the node background to args.color
// then gradually fades back the original node background color
//
// example:
// dojox.fx.highlight({ node:"foo" }).play();
 
var node = (args.node = dojo.byId(args.node));
 
args.duration = args.duration || 400;
// Assign default color light yellow
var startColor = args.color || '#ffff99';
var endColor = dojo.style(node, "backgroundColor");
var wasTransparent = (endColor == "transparent" || endColor == "rgba(0, 0, 0, 0)");
 
var anim = dojo.animateProperty(dojo.mixin({
properties: {
backgroundColor: { start: startColor, end: endColor }
}
}, args));
 
dojo.connect(anim, "onEnd", anim, function(){
if(wasTransparent){
node.style.backgroundColor = "transparent";
}
});
 
return anim; // dojo._Animation
};
 
}
/trunk/api/js/dojo1.0/dojox/fx/scroll.js
New file
0,0 → 1,40
if(!dojo._hasResource["dojox.fx.scroll"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.fx.scroll"] = true;
dojo.provide("dojox.fx.scroll");
dojo.experimental("dojox.fx.scroll");
 
dojo.require("dojox.fx._core");
 
dojox.fx.smoothScroll = function(/* Object */args){
// summary: Returns an animation that will smooth-scroll to a node (specified in etup())
// description: This implementation support either horizental or vertical scroll, as well as
// both. In addition, element in iframe can be scrolled to correctly.
// offset: {x: int, y: int} this will be added to the target position
// duration: Duration of the animation in milliseconds.
// win: a node or window object to scroll
if(!args.target){ args.target = dojo.coords(args.node,true); }
 
var isWindow = dojo[(dojo.isIE ? "isObject" : "isFunction")](args["win"].scrollTo);
 
var _anim = (isWindow) ?
(function(val){
args.win.scrollTo(val[0],val[1]);
}) :
(function(val){
args.win.scrollLeft = val[0];
args.win.scrollTop = val[1];
});
 
var anim = new dojo._Animation(dojo.mixin({
beforeBegin: function(){
if(this.curve){ delete this.curve; }
var current = isWindow ? dojo._docScroll() : {x: args.win.scrollLeft, y: args.win.scrollTop};
anim.curve = new dojox.fx._Line([current.x,current.y],[args.target.x,args.target.y]);
},
onAnimate: _anim
},args));
return anim; // dojo._Animation
};
 
}