1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
//>>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
}
});
});
|
