-
Notifications
You must be signed in to change notification settings - Fork 37
/
visibility.js
137 lines (126 loc) · 5.01 KB
/
visibility.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
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
import _ from "../util/index";
import { MethodError } from "../errors";
import { WEBKIT_PREFIX } from "../const";
import HOOK from "../util/selectorhooks";
import AnimationHandler from "../util/animationhandler";
var TRANSITION_EVENT_TYPE = WEBKIT_PREFIX ? "webkitTransitionEnd" : "transitionend",
ANIMATION_EVENT_TYPE = WEBKIT_PREFIX ? "webkitAnimationEnd" : "animationend",
makeMethod = (name, condition) => function(animationName, callback) {
if (typeof animationName !== "string") {
callback = animationName;
animationName = null;
}
if (callback && typeof callback !== "function") {
throw new MethodError(name, arguments);
}
var node = this[0],
style = node.style,
computed = _.computeStyle(node),
hiding = condition,
done = () => {
// Check equality of the flag and aria-hidden to recognize
// cases when an animation was toggled in the intermediate
// state. Don't need to proceed in such situation
if (String(hiding) === node.getAttribute("aria-hidden")) {
if (animationHandler) {
node.removeEventListener(eventType, animationHandler, true);
// restore initial state
style.cssText = animationHandler.initialCssText;
} else {
// no animation was applied
if (hiding) {
let displayValue = computed.display;
if (displayValue !== "none") {
// internally store original display value
this._._display = displayValue;
}
style.display = "none";
} else {
// restore previously store display value
style.display = this._._display || "inherit";
}
}
// always update element visibility property
// use value "inherit" to respect parent container visibility
style.visibility = hiding ? "hidden" : "inherit";
if (callback) callback.call(this);
}
},
animationHandler = AnimationHandler(node, computed, animationName, hiding, done),
eventType = animationName ? ANIMATION_EVENT_TYPE : TRANSITION_EVENT_TYPE;
if (typeof hiding !== "boolean") {
hiding = !HOOK[":hidden"](node, computed);
}
if (animationHandler) {
node.addEventListener(eventType, animationHandler, true);
// trigger animation(s)
style.cssText = animationHandler.initialCssText + animationHandler.cssText;
} else {
// done callback is always async
setTimeout(done, 0);
}
// trigger CSS3 transition if it exists
return this.set("aria-hidden", String(hiding));
};
_.register({
/**
* Show an element using CSS3 transition or animation
* @memberof! $Element#
* @alias $Element#show
* @param {String} [animationName] CSS animation to apply during transition
* @param {Function} [callback] function that executes when animation is done
* @return {$Element}
* @function
* @example
* link.show(); // displays element
*
* foo.show(function() {
* // do something when transition is completed
* });
*
* bar.show("fade", function() {
* // do something when "fade" animation is completed
* });
*/
show: makeMethod("show", false),
/**
* Hide an element using CSS3 transition or animation
* @memberof! $Element#
* @alias $Element#hide
* @param {String} [animationName] CSS animation to apply during transition
* @param {Function} [callback] function that executes when animation is done
* @return {$Element}
* @function
* @example
* link.hide(); // hides element
*
* foo.hide(function() {
* // do something when transition is completed
* });
*
* bar.hide("fade", function() {
* // do something when "fade" animation is completed
* });
*/
hide: makeMethod("hide", true),
/**
* Toggle an element using CSS3 transition or animation
* @memberof! $Element#
* @alias $Element#toggle
* @param {String} [animationName] CSS animation to apply during transition
* @param {Function} [callback] function that executes when animation is done
* @return {$Element}
* @function
* @example
* link.toggle(); // toggles element visibility
*
* foo.toggle(function() {
* // do something when transition is completed
* });
*
* bar.toggle("fade", function() {
* // do something when "fade" animation is completed
* });
*/
toggle: makeMethod("toggle")
});