This repository has been archived by the owner on Nov 25, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 293
/
cssfx.js
103 lines (90 loc) · 3.61 KB
/
cssfx.js
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
/*
* Copyright 2007-2013 Charles du Jeu - Abstrium SAS <team (at) pyd.io>
* This file is part of Pydio.
*
* Pydio is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* Pydio is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with Pydio. If not, see <http://www.gnu.org/licenses/>.
*
* The latest code can be found at <http://pyd.io/>.
*/
Effect.CSS_SUPPORTED = Modernizr.csstransitions && Modernizr.cssanimations;
Effect.CSS_ANIMATE = function(effectName, element, options){
var className;
var originalMethod;
var endStyle = {};
if(!options) options = {};
switch (effectName){
case "RowFade":
className = 'quick bounceOutLeft';
originalMethod = 'Fade';
break;
case "RowAppear":
className = 'quick fadeInLeft';
originalMethod = 'Appear';
break;
case "ErrorShake":
className = 'shake';
originalMethod = 'Shake';
break;
case "MessageAppear":
className = 'fadeInUpBig';
endStyle = {opacity: 1};
originalMethod ='Appear';
element.setOpacity(0);
element.show();
break;
case "MessageFade":
className = 'long fadeOutDownBig';
endStyle = {opacity: 0};
originalMethod ='Appear';
if(!options.afterFinish){
options.afterFinish = function(){
element.hide();
};
}
break;
case "MenuAppear":
className = 'super-quick fadeIn';
endStyle = {opacity: 1};
originalMethod ='Appear';
break;
}
if(Effect.CSS_SUPPORTED){
["webkitAnimationEnd", "mozAnimationEnd", "oAnimationEnd", "animationEnd", "transitionend", "animationend", "oanimationend", "mozanimationend"].map(
function(event){
element.observeOnce(event, function(){
('animated ' + className).split(" ").map(function(cName){
element.removeClassName(cName);
});
if(endStyle) element.setStyle(endStyle);
if(options && options.afterFinish) options.afterFinish();
});
}
);
element.addClassName('animated ' + className);
}else{
new Effect[originalMethod](element, options);
}
};
/**
* Migrating original Scriptaculous effects to CSS3-based effects when possible
* @param element
* @param options Same options
* @constructor
*/
Effect.RowFade = function(element, options){ Effect.CSS_ANIMATE("RowFade", element, options);};
Effect.RowAppear = function(element, options){ Effect.CSS_ANIMATE("RowAppear", element, options); };
Effect.MessageFade = function(element, options){ Effect.CSS_ANIMATE("MessageFade", element, options);};
Effect.MessageAppear = function(element, options){ Effect.CSS_ANIMATE("MessageAppear", element, options); };
Effect.MenuAppear = function(element, options){ Effect.CSS_ANIMATE("MenuAppear", element, options); };
Effect.ErrorShake = function(element, options){ Effect.CSS_ANIMATE("ErrorShake", element, options); };