Skip to content

Commit 07b1656

Browse files
vitchvitch
committed
Tweaks to the expose plugin to allow you to use it in situations where you are un/exposing an element repeatedly in a small time (e.g in response to mouse movements)
1 parent d65b237 commit 07b1656

File tree

1 file changed

+94
-89
lines changed

1 file changed

+94
-89
lines changed

‎src/toolbox/toolbox.expose.js‎

Lines changed: 94 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -62,120 +62,125 @@
6262
if (fn) { return fn.call($.mask); }
6363
}
6464

65-
var mask, exposed, loaded, config, overlayIndex;
65+
var mask, exposed, loadStatus, config, overlayIndex;
6666

6767

6868
$.mask = {
6969

7070
load: function(conf, els) {
71-
7271
// already loaded ?
73-
if (loaded) { return this; }
74-
75-
// configuration
76-
if (typeof conf == 'string') {
77-
conf = {color: conf};
78-
}
79-
80-
// use latest config
81-
conf = conf || config;
82-
83-
config = conf = $.extend($.extend({}, tool.conf), conf);
84-
85-
// get the mask
86-
mask = $("#" + conf.maskId);
87-
88-
// or create it
89-
if (!mask.length) {
90-
mask = $('<div/>').attr("id", conf.maskId);
91-
$("body").append(mask);
92-
}
93-
94-
// set position and dimensions
95-
var size = viewport();
96-
97-
mask.css({
98-
position:'absolute',
99-
top: 0,
100-
left: 0,
101-
width: size[0],
102-
height: size[1],
103-
display: 'none',
104-
opacity: conf.startOpacity,
105-
zIndex: conf.zIndex
106-
});
107-
108-
if (conf.color) {
109-
mask.css("backgroundColor", conf.color);
110-
}
111-
112-
// onBeforeLoad
113-
if (call(conf.onBeforeLoad) === false) {
72+
if (loadStatus == 'full') {
11473
return this;
11574
}
116-
117-
// esc button
118-
if (conf.closeOnEsc) {
119-
$(document).bind("keydown.mask", function(e) {
120-
if (e.keyCode == 27) {
121-
$.mask.close(e);
122-
}
123-
});
124-
}
125-
126-
// mask click closes
127-
if (conf.closeOnClick) {
128-
mask.bind("click.mask", function(e) {
129-
$.mask.close(e);
130-
});
131-
}
132-
133-
// resize mask when window is resized
134-
$(window).bind("resize.mask", function() {
135-
$.mask.fit();
136-
});
137-
138-
// exposed elements
139-
if (els && els.length) {
140-
141-
overlayIndex = els.eq(0).css("zIndex");
142-
143-
// make sure element is positioned absolutely or relatively
144-
$.each(els, function() {
145-
var el = $(this);
146-
if (!/relative|absolute|fixed/i.test(el.css("position"))) {
147-
el.css("position", "relative");
148-
}
75+
if (!loadStatus) {
76+
77+
// configuration
78+
if (typeof conf == 'string') {
79+
conf = {color: conf};
80+
}
81+
82+
// use latest config
83+
conf = conf || config;
84+
85+
config = conf = $.extend($.extend({}, tool.conf), conf);
86+
87+
// get the mask
88+
mask = $("#" + conf.maskId);
89+
90+
// or create it
91+
if (!mask.length) {
92+
mask = $('<div/>').attr("id", conf.maskId);
93+
$("body").append(mask);
94+
}
95+
96+
// set position and dimensions
97+
var size = viewport();
98+
99+
mask.css({
100+
position:'absolute',
101+
top: 0,
102+
left: 0,
103+
width: size[0],
104+
height: size[1],
105+
display: 'none',
106+
opacity: conf.startOpacity,
107+
zIndex: conf.zIndex
108+
});
109+
110+
if (conf.color) {
111+
mask.css("backgroundColor", conf.color);
112+
}
113+
114+
// onBeforeLoad
115+
if (call(conf.onBeforeLoad) === false) {
116+
return this;
117+
}
118+
119+
// esc button
120+
if (conf.closeOnEsc) {
121+
$(document).bind("keydown.mask", function(e) {
122+
if (e.keyCode == 27) {
123+
$.mask.close(e);
124+
}
125+
});
126+
}
127+
128+
// mask click closes
129+
if (conf.closeOnClick) {
130+
mask.bind("click.mask", function(e) {
131+
$.mask.close(e);
132+
});
133+
}
134+
135+
// resize mask when window is resized
136+
$(window).bind("resize.mask", function() {
137+
$.mask.fit();
149138
});
150-
151-
// make elements sit on top of the mask
152-
exposed = els.css({ zIndex: Math.max(conf.zIndex + 1, overlayIndex == 'auto' ? 0 : overlayIndex)});
153-
}
139+
140+
// exposed elements
141+
if (els && els.length) {
142+
143+
overlayIndex = els.eq(0).css("zIndex");
144+
145+
// make sure element is positioned absolutely or relatively
146+
$.each(els, function() {
147+
var el = $(this);
148+
if (!/relative|absolute|fixed/i.test(el.css("position"))) {
149+
el.css("position", "relative");
150+
}
151+
});
152+
153+
// make elements sit on top of the mask
154+
exposed = els.css({ zIndex: Math.max(conf.zIndex + 1, overlayIndex == 'auto' ? 0 : overlayIndex)});
155+
}
156+
}
154157

155158
// reveal mask
156-
mask.css({display: 'block'}).fadeTo(conf.loadSpeed, conf.opacity, function() {
159+
mask.css({display: 'block'}).stop().fadeTo(conf.loadSpeed, conf.opacity, function() {
157160
$.mask.fit();
158161
call(conf.onLoad);
159-
loaded = "full";
162+
loadStatus = "full";
160163
});
161164

162-
loaded = true;
165+
loadStatus = true;
163166
return this;
164167
},
165168

166169
close: function() {
167-
if (loaded) {
170+
if (loadStatus) {
168171

169172
// onBeforeClose
170173
if (call(config.onBeforeClose) === false) { return this; }
171174

172-
mask.fadeOut(config.closeSpeed, function() {
175+
mask.stop().fadeOut(config.closeSpeed, function() {
173176
call(config.onClose);
174177
if (exposed) {
175178
exposed.css({zIndex: overlayIndex});
176179
}
177-
loaded = false;
178-
});
180+
loadStatus = false;
181+
});
182+
183+
loadStatus = 'closing';
179184

180185
// unbind various event listeners
181186
$(document).unbind("keydown.mask");
@@ -187,7 +192,7 @@
187192
},
188193

189194
fit: function() {
190-
if (loaded) {
195+
if (loadStatus) {
191196
var size = viewport();
192197
mask.css({width: size[0], height: size[1]});
193198
}
@@ -198,7 +203,7 @@
198203
},
199204

200205
isLoaded: function(fully) {
201-
return fully ? loaded == 'full' : loaded;
206+
return fully ? loadStatus == 'full' : loadStatus;
202207
},
203208

204209
getConf: function() {

0 commit comments

Comments
 (0)