Skip to content

Commit 66d05b1

Browse files
pborissowpborissow
committed
Minor documentation updates
1 parent d2ffa58 commit 66d05b1

1 file changed

Lines changed: 207 additions & 190 deletions

File tree

‎src/utils/Effects.js‎

Lines changed: 207 additions & 190 deletions
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,208 @@
1-
if(!javaxt) var javaxt={};
2-
if(!javaxt.dhtml) javaxt.dhtml={};
3-
4-
//******************************************************************************
5-
//** Effects
6-
//*****************************************************************************/
7-
/**
8-
* Used to dynamically apply transition effects to elements.
9-
*
10-
******************************************************************************/
11-
12-
javaxt.dhtml.Effects = function() {
13-
14-
var me = this;
15-
16-
//**************************************************************************
17-
//** fadeIn
18-
//**************************************************************************
19-
/** Used to gradually update the opacity of a given element. Assumes the
20-
* element style is initially set to display:none;
21-
*/
22-
this.fadeIn = function(el, transitionEffect, duration, callback){
23-
el.style.opacity = 0;
24-
el.style.display = "";
25-
me.setTransition(el, transitionEffect, duration);
26-
setTimeout(function(){
27-
el.style.opacity = "";
28-
setTimeout(function(){
29-
removeTransition(el);
30-
if (callback) callback.apply(el, []);
31-
}, duration+50);
32-
}, 50);
33-
};
34-
35-
36-
//**************************************************************************
37-
//** fadeOut
38-
//**************************************************************************
39-
/** Used to gradually update the opacity of a given element until it is no
40-
* longer visible.
41-
*/
42-
this.fadeOut = function(el, transitionEffect, duration, callback){
43-
me.setTransition(el, transitionEffect, duration);
44-
setTimeout(function(){
45-
el.style.opacity = 0;
46-
setTimeout(function(){
47-
el.style.display = "none";
48-
removeTransition(el);
49-
if (callback) callback.apply(el, []);
50-
}, duration+50);
51-
}, 50);
52-
};
53-
54-
55-
//**************************************************************************
56-
//** setTransition
57-
//**************************************************************************
58-
/** Used to set the transition style for a given element.
59-
*/
60-
this.setTransition = function(el, transitionEffect, duration){
61-
if (isNaN(duration) || duration<=0) return;
62-
var points = getPoints(transitionEffect);
63-
setTransition(el, duration, points);
64-
};
65-
66-
67-
//**************************************************************************
68-
//** getPoints
69-
//**************************************************************************
70-
var getPoints = function(transitionEffect){
71-
if (isArray(transitionEffect)){
72-
return transitionEffect;
73-
}
74-
else{
75-
var points = javaxt.dhtml.Transitions[transitionEffect];
76-
if (!points) points = javaxt.dhtml.Transitions["ease"];
77-
return points;
78-
}
79-
};
80-
81-
82-
//**************************************************************************
83-
//** isArray
84-
//**************************************************************************
85-
var isArray = function(obj){
86-
return (Object.prototype.toString.call(obj)==='[object Array]');
87-
};
88-
89-
90-
//**************************************************************************
91-
//** setTransition
92-
//**************************************************************************
93-
/** Used to set or update the transition style for a the given element.
94-
* all 500ms cubic-bezier(0.52, 0.075, 0.47, 0.895)
95-
*/
96-
var setTransition = function(el, t, arr) {
97-
98-
99-
var x1 = arr[0];
100-
var y1 = arr[1];
101-
var x2 = arr[2];
102-
var y2 = arr[3];
103-
104-
105-
106-
// set all transition types. ugly ugly vendor prefixes
107-
el.style.WebkitTransition =
108-
el.style.MozTransition =
109-
el.style.MsTransition =
110-
el.style.OTransition =
111-
el.style.transition =
112-
'all ' + t + 'ms cubic-bezier' +
113-
'(' + x1 + ', ' + y1 + ', ' + x2 + ', ' + y2 + ')';
114-
115-
116-
if ( !supportsBezierRange ) {
117-
118-
var wy1, wy2;
119-
120-
if (y1 > 1) wy1 = 1;
121-
if (y1 < 0) wy1 = 0;
122-
if (y2 > 1) wy2 = 1;
123-
if (y2 < 0) wy2 = 0;
124-
125-
el.style.WebkitTransition = 'all ' + t + 'ms cubic-bezier' + '(' + x1 + ', ' + wy1 + ', ' + x2 + ', ' + wy2 + ')';
126-
}
127-
128-
};
129-
130-
131-
//**************************************************************************
132-
//** removeTransition
133-
//**************************************************************************
134-
var removeTransition = function(el){
135-
el.style.WebkitTransition =
136-
el.style.MozTransition =
137-
el.style.MsTransition =
138-
el.style.OTransition =
139-
el.style.transition = "";
140-
141-
if ( !supportsBezierRange ) {
142-
el.style.WebkitTransition = "";
143-
}
144-
};
145-
146-
147-
//**************************************************************************
148-
//** supportsBezierRange
149-
//**************************************************************************
150-
var supportsBezierRange = (function() {
151-
var el = document.createElement('div');
152-
el.style.WebkitTransitionTimingFunction = 'cubic-bezier(1,0,0,1.1)';
153-
return !!el.style.WebkitTransitionTimingFunction.length;
154-
})();
155-
};
156-
157-
javaxt.dhtml.Transitions = {
158-
linear : [0.250, 0.250, 0.750, 0.750],
159-
ease : [0.250, 0.100, 0.250, 1.000],
160-
easeIn : [0.420, 0.000, 1.000, 1.000],
161-
easeOut : [0.000, 0.000, 0.580, 1.000],
162-
easeInOut : [0.420, 0.000, 0.580, 1.000],
163-
164-
165-
easeInQuad : [0.550, 0.085, 0.680, 0.530],
166-
easeInCubic : [0.550, 0.055, 0.675, 0.190],
167-
easeInQuart : [0.895, 0.030, 0.685, 0.220],
168-
easeInQuint : [0.755, 0.050, 0.855, 0.060],
169-
easeInSine : [0.470, 0.000, 0.745, 0.715],
170-
easeInExpo : [0.950, 0.050, 0.795, 0.035],
171-
easeInCirc : [0.600, 0.040, 0.980, 0.335],
172-
easeInBack : [0.600, -0.280, 0.735, 0.045],
173-
174-
easeOutQuad : [0.250, 0.460, 0.450, 0.940],
175-
easeOutCubic : [0.215, 0.610, 0.355, 1.000],
176-
easeOutQuart : [0.165, 0.840, 0.440, 1.000],
177-
easeOutQuint : [0.230, 1.000, 0.320, 1.000],
178-
easeOutSine : [0.390, 0.575, 0.565, 1.000],
179-
easeOutExpo : [0.190, 1.000, 0.220, 1.000],
180-
easeOutCirc : [0.075, 0.820, 0.165, 1.000],
181-
easeOutBack : [0.175, 0.885, 0.320, 1.275],
182-
183-
easeInOutQuad : [0.455, 0.030, 0.515, 0.955],
184-
easeInOutCubic : [0.645, 0.045, 0.355, 1.000],
185-
easeInOutQuart : [0.770, 0.000, 0.175, 1.000],
186-
easeInOutQuint : [0.860, 0.000, 0.070, 1.000],
187-
easeInOutSine : [0.445, 0.050, 0.550, 0.950],
188-
easeInOutExpo : [1.000, 0.000, 0.000, 1.000],
189-
easeInOutCirc : [0.785, 0.135, 0.150, 0.860],
190-
easeInOutBack : [0.680, -0.550, 0.265, 1.550]
1+
if(!javaxt) var javaxt={};
2+
if(!javaxt.dhtml) javaxt.dhtml={};
3+
4+
//******************************************************************************
5+
//** Effects
6+
//*****************************************************************************/
7+
/**
8+
* Used to dynamically apply transition effects to elements.
9+
*
10+
******************************************************************************/
11+
12+
javaxt.dhtml.Effects = function() {
13+
14+
var me = this;
15+
16+
//**************************************************************************
17+
//** fadeIn
18+
//**************************************************************************
19+
/** Used to gradually update the opacity of a given element. At the end of
20+
* the animation, the element "opacity" and "display" styles will be
21+
* deleted and the element will be visible.
22+
* @param el DOM element
23+
* @param transitionEffect Name of transition effect (e.g. "easeIn",
24+
* "linear", etc)
25+
* @param duration Transition time, in milliseconds
26+
* @param callback Optional callback function called when the transition is
27+
* complete
28+
*/
29+
this.fadeIn = function(el, transitionEffect, duration, callback){
30+
el.style.opacity = 0;
31+
el.style.display = "";
32+
me.setTransition(el, transitionEffect, duration);
33+
setTimeout(function(){
34+
el.style.opacity = "";
35+
setTimeout(function(){
36+
removeTransition(el);
37+
if (callback) callback.apply(el, []);
38+
}, duration+50);
39+
}, 50);
40+
};
41+
42+
43+
//**************************************************************************
44+
//** fadeOut
45+
//**************************************************************************
46+
/** Used to gradually update the opacity of a given element until it is no
47+
* longer visible. At the end of the animation, the element "opacity" style
48+
* will be set to 0 and the "display" style will be set to "none".
49+
* @param el DOM element
50+
* @param transitionEffect Name of transition effect (e.g. "easeOut",
51+
* "linear", etc)
52+
* @param duration Transition time, in milliseconds
53+
* @param callback Optional callback function called when the transition is
54+
* complete
55+
*/
56+
this.fadeOut = function(el, transitionEffect, duration, callback){
57+
me.setTransition(el, transitionEffect, duration);
58+
setTimeout(function(){
59+
el.style.opacity = 0;
60+
setTimeout(function(){
61+
el.style.display = "none";
62+
removeTransition(el);
63+
if (callback) callback.apply(el, []);
64+
}, duration+50);
65+
}, 50);
66+
};
67+
68+
69+
//**************************************************************************
70+
//** setTransition
71+
//**************************************************************************
72+
/** Used to set the transition style for a given element.
73+
* @param el DOM element
74+
* @param transitionEffect Name of transition effect (e.g. "ease", "linear")
75+
* @param duration Transition time, in milliseconds
76+
*/
77+
this.setTransition = function(el, transitionEffect, duration){
78+
if (isNaN(duration) || duration<=0) return;
79+
var points = getPoints(transitionEffect);
80+
setTransition(el, duration, points);
81+
};
82+
83+
84+
//**************************************************************************
85+
//** getPoints
86+
//**************************************************************************
87+
var getPoints = function(transitionEffect){
88+
if (isArray(transitionEffect)){
89+
return transitionEffect;
90+
}
91+
else{
92+
var points = javaxt.dhtml.Transitions[transitionEffect];
93+
if (!points) points = javaxt.dhtml.Transitions["ease"];
94+
return points;
95+
}
96+
};
97+
98+
99+
//**************************************************************************
100+
//** isArray
101+
//**************************************************************************
102+
var isArray = function(obj){
103+
return (Object.prototype.toString.call(obj)==='[object Array]');
104+
};
105+
106+
107+
//**************************************************************************
108+
//** setTransition
109+
//**************************************************************************
110+
/** Used to set or update the transition style for a the given element.
111+
* all 500ms cubic-bezier(0.52, 0.075, 0.47, 0.895)
112+
*/
113+
var setTransition = function(el, t, arr) {
114+
115+
116+
var x1 = arr[0];
117+
var y1 = arr[1];
118+
var x2 = arr[2];
119+
var y2 = arr[3];
120+
121+
122+
123+
// set all transition types. ugly ugly vendor prefixes
124+
el.style.WebkitTransition =
125+
el.style.MozTransition =
126+
el.style.MsTransition =
127+
el.style.OTransition =
128+
el.style.transition =
129+
'all ' + t + 'ms cubic-bezier' +
130+
'(' + x1 + ', ' + y1 + ', ' + x2 + ', ' + y2 + ')';
131+
132+
133+
if ( !supportsBezierRange ) {
134+
135+
var wy1, wy2;
136+
137+
if (y1 > 1) wy1 = 1;
138+
if (y1 < 0) wy1 = 0;
139+
if (y2 > 1) wy2 = 1;
140+
if (y2 < 0) wy2 = 0;
141+
142+
el.style.WebkitTransition = 'all ' + t + 'ms cubic-bezier' + '(' + x1 + ', ' + wy1 + ', ' + x2 + ', ' + wy2 + ')';
143+
}
144+
145+
};
146+
147+
148+
//**************************************************************************
149+
//** removeTransition
150+
//**************************************************************************
151+
var removeTransition = function(el){
152+
el.style.WebkitTransition =
153+
el.style.MozTransition =
154+
el.style.MsTransition =
155+
el.style.OTransition =
156+
el.style.transition = "";
157+
158+
if ( !supportsBezierRange ) {
159+
el.style.WebkitTransition = "";
160+
}
161+
};
162+
163+
164+
//**************************************************************************
165+
//** supportsBezierRange
166+
//**************************************************************************
167+
var supportsBezierRange = (function() {
168+
var el = document.createElement('div');
169+
el.style.WebkitTransitionTimingFunction = 'cubic-bezier(1,0,0,1.1)';
170+
return !!el.style.WebkitTransitionTimingFunction.length;
171+
})();
172+
};
173+
174+
javaxt.dhtml.Transitions = {
175+
linear : [0.250, 0.250, 0.750, 0.750],
176+
ease : [0.250, 0.100, 0.250, 1.000],
177+
easeIn : [0.420, 0.000, 1.000, 1.000],
178+
easeOut : [0.000, 0.000, 0.580, 1.000],
179+
easeInOut : [0.420, 0.000, 0.580, 1.000],
180+
181+
182+
easeInQuad : [0.550, 0.085, 0.680, 0.530],
183+
easeInCubic : [0.550, 0.055, 0.675, 0.190],
184+
easeInQuart : [0.895, 0.030, 0.685, 0.220],
185+
easeInQuint : [0.755, 0.050, 0.855, 0.060],
186+
easeInSine : [0.470, 0.000, 0.745, 0.715],
187+
easeInExpo : [0.950, 0.050, 0.795, 0.035],
188+
easeInCirc : [0.600, 0.040, 0.980, 0.335],
189+
easeInBack : [0.600, -0.280, 0.735, 0.045],
190+
191+
easeOutQuad : [0.250, 0.460, 0.450, 0.940],
192+
easeOutCubic : [0.215, 0.610, 0.355, 1.000],
193+
easeOutQuart : [0.165, 0.840, 0.440, 1.000],
194+
easeOutQuint : [0.230, 1.000, 0.320, 1.000],
195+
easeOutSine : [0.390, 0.575, 0.565, 1.000],
196+
easeOutExpo : [0.190, 1.000, 0.220, 1.000],
197+
easeOutCirc : [0.075, 0.820, 0.165, 1.000],
198+
easeOutBack : [0.175, 0.885, 0.320, 1.275],
199+
200+
easeInOutQuad : [0.455, 0.030, 0.515, 0.955],
201+
easeInOutCubic : [0.645, 0.045, 0.355, 1.000],
202+
easeInOutQuart : [0.770, 0.000, 0.175, 1.000],
203+
easeInOutQuint : [0.860, 0.000, 0.070, 1.000],
204+
easeInOutSine : [0.445, 0.050, 0.550, 0.950],
205+
easeInOutExpo : [1.000, 0.000, 0.000, 1.000],
206+
easeInOutCirc : [0.785, 0.135, 0.150, 0.860],
207+
easeInOutBack : [0.680, -0.550, 0.265, 1.550]
191208
};

0 commit comments

Comments
 (0)