-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
Mask.js
109 lines (99 loc) · 2.61 KB
/
Mask.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
/**
* @requires javelin-install
* javelin-dom
* @provides javelin-mask
* @javelin
*/
/**
* Show a "mask" over the page for lightboxes or dialogs. This is used by
* Workflow to draw visual attention to modal dialogs.
*
* JX.Mask.show();
* // Show a dialog, lightbox, or other modal UI.
* JX.Mask.hide();
*
* Masks are stackable, if modal UIs need to spawn other modal UIs.
*
* The mask has class `jx-mask`, which you should apply styles to. For example:
*
* .jx-mask {
* opacity: 0.8;
* background: #000000;
* position: fixed;
* top: 0;
* bottom: 0;
* left: 0;
* right: 0;
* z-index: 2;
* }
*
* You can create multiple mask styles and select them with the `mask_type`
* parameter to `show()` (for instance, a light mask for dialogs and a dark
* mask for lightboxing):
*
* JX.Mask.show('jx-light-mask');
* // ...
* JX.Mask.hide();
*
* This will be applied as a class name to the mask element, which you can
* customize in CSS:
*
* .jx-light-mask {
* background: #ffffff;
* }
*
* The mask has sigil `jx-mask`, which can be used to intercept events
* targeting it, like clicks on the mask.
*
* @group control
*/
JX.install('Mask', {
statics : {
_stack : [],
_mask : null,
_currentType : null,
/**
* Show a mask over the document. Multiple calls push masks onto a stack.
*
* @param string Optional class name to apply to the mask, if you have
* multiple masks (e.g., one dark and one light).
* @return void
*/
show : function(mask_type) {
var self = JX.Mask;
mask_type = mask_type || null;
if (!self._stack.length) {
self._mask = JX.$N('div', {className: 'jx-mask', sigil: 'jx-mask'});
document.body.appendChild(self._mask);
}
self._adjustType(mask_type)
JX.Mask._stack.push(mask_type);
},
/**
* Hide the current mask. The mask stack is popped, which may reveal another
* mask below the current mask.
*
* @return void
*/
hide : function() {
var self = JX.Mask;
var mask_type = self._stack.pop();
self._adjustType(mask_type);
if (!self._stack.length) {
JX.DOM.remove(JX.Mask._mask);
JX.Mask._mask = null;
}
},
_adjustType : function(new_type) {
var self = JX.Mask;
if (self._currentType) {
JX.DOM.alterClass(self._mask, self._currentType, false);
self._currentType = null;
}
if (new_type) {
JX.DOM.alterClass(self._mask, new_type, true);
self._currentType = new_type;
}
}
}
});