171 lines
5.3 KiB
JavaScript
171 lines
5.3 KiB
JavaScript
|
//>>built
|
||
|
define("dojox/fx/ext-dojo/complex", ["dojo/_base/kernel", "dojo/_base/lang", "dojo/_base/array","dojo/_base/declare", "dojo/_base/connect",
|
||
|
"dojo/_base/Color", "dojo/_base/fx", "dojo/fx"],
|
||
|
function(dojo, lang, arrayUtil, declare, connectUtil, Color, baseFx, coreFx){
|
||
|
lang.getObject("dojox.fx.ext-dojo.complex", true);
|
||
|
|
||
|
var da = baseFx.animateProperty;
|
||
|
dojo.animateProperty = baseFx.animateProperty = function(options){
|
||
|
// summary:
|
||
|
// An extension of dojo.animateProperty which adds functionality
|
||
|
// that animates a "complex property". The primary example is the
|
||
|
// clip style: rect(10px 30px 10px 50px).
|
||
|
// Note this can also be used with (and is actually intended for)
|
||
|
// CSS3 properties, such as transform:
|
||
|
// transform: rotate(10deg) translateX(0px)
|
||
|
//
|
||
|
// description:
|
||
|
// The standard animation doesn't know what to do with something like
|
||
|
// rect(...). This class identifies complex properties by they being a
|
||
|
// string and having parenthesis. If so, that property is made into a
|
||
|
// dojox.fx._Complex object and the getValue() is obtained from
|
||
|
// there.
|
||
|
//
|
||
|
// example:
|
||
|
// | var ani = dojo.animateProperty({
|
||
|
// | node:dojo.byId("myDiv"),
|
||
|
// | duration:600,
|
||
|
// | properties:{
|
||
|
// | clip:{start:'rect(0px 50px 50px 0px)', end:'rect(10px 30px 30px 10px)'}
|
||
|
// | }
|
||
|
// | }).play();
|
||
|
//
|
||
|
var d = dojo;
|
||
|
var ani = da(options);
|
||
|
|
||
|
connectUtil.connect(ani, "beforeBegin", function(){
|
||
|
// dojo.Animate original still invokes and still
|
||
|
// works. We're appending this functionality to
|
||
|
// modify targeted properties.
|
||
|
ani.curve.getValue = function(r){
|
||
|
// Overwriting dojo.Animate's curve.getValue
|
||
|
// This is mostly duplicate code, except it looks
|
||
|
// for an instance of dojox.fx._Complex.
|
||
|
var ret = {};
|
||
|
for(var p in this._properties){
|
||
|
var prop = this._properties[p],
|
||
|
start = prop.start;
|
||
|
if(start instanceof d.Color){
|
||
|
ret[p] = d.blendColors(start, prop.end, r, prop.tempColor).toCss();
|
||
|
}else if(start instanceof dojox.fx._Complex){
|
||
|
ret[p] = start.getValue(r);
|
||
|
}else if(!d.isArray(start)){
|
||
|
ret[p] = ((prop.end - start) * r) + start + (p != "opacity" ? prop.units || "px" : 0);
|
||
|
}
|
||
|
}
|
||
|
return ret;
|
||
|
};
|
||
|
|
||
|
// this.properties has already been set, as has this.curve._properties.
|
||
|
// We're fixing the props in curve which will have NaN attributes from
|
||
|
// our string property.
|
||
|
var pm = {};
|
||
|
for(var p in this.properties){
|
||
|
var o = this.properties[p];
|
||
|
if(typeof(o.start) == "string" && /\(/.test(o.start)){
|
||
|
this.curve._properties[p].start = new dojox.fx._Complex(o);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
});
|
||
|
return ani; // dojo.Animation
|
||
|
}
|
||
|
|
||
|
return declare("dojox.fx._Complex", null, {
|
||
|
// summary:
|
||
|
// A class that takes a complex property such as
|
||
|
// clip style: rect(10px 30px 10px 50px), and breaks it
|
||
|
// into seperate animatable units. The object has a getValue()
|
||
|
// that will return a string with the modified units.
|
||
|
//
|
||
|
PROP: /\([\w|,|+|\-|#|\.|\s]*\)/g,
|
||
|
constructor: function(options){
|
||
|
var beg = options.start.match(this.PROP);
|
||
|
var end = options.end.match(this.PROP);
|
||
|
|
||
|
var begProps = arrayUtil.map(beg, this.getProps, this);
|
||
|
var endProps = arrayUtil.map(end, this.getProps, this);
|
||
|
|
||
|
this._properties = {};
|
||
|
this.strProp = options.start;
|
||
|
arrayUtil.forEach(begProps, function(prop, i){
|
||
|
arrayUtil.forEach(prop, function(p, j){
|
||
|
this.strProp = this.strProp.replace(p, "PROP_"+i+""+j);
|
||
|
this._properties["PROP_"+i+""+j] = this.makePropObject(p, endProps[i][j])
|
||
|
},this);
|
||
|
},this);
|
||
|
},
|
||
|
|
||
|
getValue: function(/*Float*/r){
|
||
|
// summary:
|
||
|
// Returns a string with teh same integrity as the
|
||
|
// original star and end, but with the modified units.
|
||
|
var str = this.strProp, u;
|
||
|
for(var nm in this._properties){
|
||
|
var v, o = this._properties[nm];
|
||
|
if(o.units == "isColor"){
|
||
|
v = Color.blendColors(o.beg, o.end, r).toCss(false);
|
||
|
u = "";
|
||
|
}else{
|
||
|
v = ((o.end - o.beg) * r) + o.beg;
|
||
|
u = o.units;
|
||
|
}
|
||
|
str = str.replace(nm, v + u);
|
||
|
}
|
||
|
|
||
|
return str; // String
|
||
|
},
|
||
|
|
||
|
makePropObject: function(/* String */beg, /* String */end){
|
||
|
// summary:
|
||
|
// Returns an object that stores the numeric value and
|
||
|
// units of the beggining and ending properties.
|
||
|
//
|
||
|
var b = this.getNumAndUnits(beg);
|
||
|
var e = this.getNumAndUnits(end);
|
||
|
return {
|
||
|
beg:b.num,
|
||
|
end:e.num,
|
||
|
units:b.units
|
||
|
}; // Object
|
||
|
},
|
||
|
|
||
|
getProps: function(/* String */str){
|
||
|
// summary:
|
||
|
// Helper function that splits a stringified set of properties
|
||
|
// into individual units.
|
||
|
//
|
||
|
str = str.substring(1, str.length-1);
|
||
|
var s;
|
||
|
if(/,/.test(str)){
|
||
|
str = str.replace(/\s/g, "");
|
||
|
s = str.split(",");
|
||
|
}else{
|
||
|
str = str.replace(/\s{2,}/g, " ");
|
||
|
s = str.split(" ");
|
||
|
}
|
||
|
return s; // String
|
||
|
},
|
||
|
getNumAndUnits: function(prop){
|
||
|
// summary:
|
||
|
// Helper function that returns the numeric verion of the string
|
||
|
// property (or dojo.Color object) and the unit in which it was
|
||
|
// defined.
|
||
|
//
|
||
|
if(!prop){ return {}; }
|
||
|
if(/#/.test(prop)){
|
||
|
return {
|
||
|
num: new Color(prop),
|
||
|
units:"isColor"
|
||
|
}; // Object
|
||
|
}
|
||
|
var o = {
|
||
|
num:parseFloat(/-*[\d\.\d|\d]{1,}/.exec(prop).join(""))
|
||
|
};
|
||
|
o.units = /[a-z]{1,}/.exec(prop);//.join("");
|
||
|
o.units = o.units && o.units.length ? o.units.join("") : "";
|
||
|
return o; // Object
|
||
|
}
|
||
|
});
|
||
|
});
|