Skip to content

Commit 7c98784

Browse files
author
Gaspare Sganga
committed
v2.1.1
1 parent 18be158 commit 7c98784

File tree

7 files changed

+73
-39
lines changed

7 files changed

+73
-39
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
55
and this project adheres to [Semantic Versioning](http://semver.org/).
66

77

8+
## v2.1.1 - 2018-04-22
9+
### Fixed
10+
- Gracefully hides when target element is arbitrary removed from DOM
11+
12+
13+
814
## v2.1.0 - 2018-04-04
915
### Added
1016
- `Resize` *action*

‎dist/loadingoverlay.js

Lines changed: 61 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/***************************************************************************************************
22
LoadingOverlay - A flexible loading overlay jQuery plugin
33
Author : Gaspare Sganga
4-
Version : 2.1.0
4+
Version : 2.1.1
55
License : MIT
66
Documentation : https://gasparesganga.com/labs/jquery-loading-overlay/
77
***************************************************************************************************/
@@ -118,7 +118,7 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
118118
// Data Template
119119
var _dataTemplate = {
120120
"count" : 0,
121-
"overlay" : undefined,
121+
"container" : undefined,
122122
"settings" : undefined,
123123
"wholePage" : undefined,
124124
"resizeIntervalId" : undefined,
@@ -217,34 +217,34 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
217217
settings.minSize = parseInt(settings.minSize, 10) || 0;
218218
settings.resizeInterval = parseInt(settings.resizeInterval, 10) || 0;
219219

220-
var data = container.data("loadingoverlay");
220+
var overlay = container.data("loadingoverlay");
221221
if (typeof data === "undefined") {
222222
// Init data
223-
data = $.extend({}, _dataTemplate);
223+
var data = $.extend({}, _dataTemplate);
224+
data.container = container;
224225
data.wholePage = container.is("body");
225-
container.data("loadingoverlay", data);
226226

227227
// Overlay
228-
data.overlay = $("<div>", {
228+
overlay = $("<div>", {
229229
"class" : "loadingoverlay"
230230
})
231231
.css(_css.overlay)
232232
.css("flex-direction", settings.direction.toLowerCase() === "row" ? "row" : "column");
233233
if (settings.backgroundClass) {
234-
data.overlay.addClass(settings.backgroundClass);
234+
overlay.addClass(settings.backgroundClass);
235235
} else {
236-
data.overlay.css("background", settings.background);
236+
overlay.css("background", settings.background);
237237
}
238238
if (data.wholePage) {
239-
data.overlay.css({
239+
overlay.css({
240240
"position" : "fixed",
241241
"top" : 0,
242242
"left" : 0,
243243
"width" : "100%",
244244
"height" : "100%"
245245
});
246246
}
247-
if (typeof settings.zIndex !== "undefined") data.overlay.css("z-index", settings.zIndex);
247+
if (typeof settings.zIndex !== "undefined") overlay.css("z-index", settings.zIndex);
248248

249249
// Image
250250
if (settings.image) {
@@ -266,7 +266,7 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
266266
"fill" : settings.imageColor
267267
};
268268
}
269-
var element = _CreateElement(data.overlay, settings.imageOrder, settings.imageAutoResize, settings.imageResizeFactor, settings.imageAnimation);
269+
var element = _CreateElement(overlay, settings.imageOrder, settings.imageAutoResize, settings.imageResizeFactor, settings.imageAnimation);
270270
if (settings.image.slice(0, 4).toLowerCase() === "<svg" && settings.image.slice(-6).toLowerCase() === "</svg>") {
271271
// Inline SVG
272272
element.append(settings.image);
@@ -292,7 +292,7 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
292292

293293
// Font Awesome
294294
if (settings.fontawesome) {
295-
var element = _CreateElement(data.overlay, settings.fontawesomeOrder, settings.fontawesomeAutoResize, settings.fontawesomeResizeFactor, settings.fontawesomeAnimation)
295+
var element = _CreateElement(overlay, settings.fontawesomeOrder, settings.fontawesomeAutoResize, settings.fontawesomeResizeFactor, settings.fontawesomeAnimation)
296296
.addClass("loadingoverlay_fa");
297297
$("<div>", {
298298
"class" : settings.fontawesome
@@ -302,13 +302,13 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
302302

303303
// Custom
304304
if (settings.custom) {
305-
var element = _CreateElement(data.overlay, settings.customOrder, settings.customAutoResize, settings.customResizeFactor, settings.customAnimation)
305+
var element = _CreateElement(overlay, settings.customOrder, settings.customAutoResize, settings.customResizeFactor, settings.customAnimation)
306306
.append(settings.custom);
307307
}
308308

309309
// Text
310310
if (settings.text) {
311-
data.text = _CreateElement(data.overlay, settings.textOrder, settings.textAutoResize, settings.textResizeFactor, settings.textAnimation)
311+
data.text = _CreateElement(overlay, settings.textOrder, settings.textAutoResize, settings.textResizeFactor, settings.textAnimation)
312312
.addClass("loadingoverlay_text")
313313
.text(settings.text);
314314
if (settings.textClass) {
@@ -320,7 +320,7 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
320320

321321
// Progress
322322
if (settings.progress) {
323-
var element = _CreateElement(data.overlay, settings.progressOrder, settings.progressAutoResize, settings.progressResizeFactor, false)
323+
var element = _CreateElement(overlay, settings.progressOrder, settings.progressAutoResize, settings.progressResizeFactor, false)
324324
.addClass("loadingoverlay_progress");
325325
var wrapper = $("<div>")
326326
.css(_css.progress_wrapper)
@@ -372,11 +372,17 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
372372
}
373373
settings.fade = [parseInt(settings.fade[0], 10), parseInt(settings.fade[1], 10)]
374374

375+
375376
// Save settings
376377
data.settings = settings;
378+
// Save data
379+
overlay.data("loadingoverlay_data", data);
380+
// Save reference to overlay
381+
container.data("loadingoverlay", overlay);
382+
377383

378384
// Resize
379-
data.overlay
385+
overlay
380386
.fadeTo(0, 0.01)
381387
.appendTo("body");
382388
_IntervalResize(container, true);
@@ -387,19 +393,21 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
387393
}
388394

389395
// Show LoadingOverlay
390-
data.overlay.fadeTo(settings.fade[0], 1);
396+
overlay.fadeTo(settings.fade[0], 1);
391397
}
392398
data.count++;
393399
}
394400

395401
function Hide(container, force){
396402
container = $(container);
397-
var data = container.data("loadingoverlay");
398-
if (typeof data === "undefined") return;
403+
var overlay = container.data("loadingoverlay");
404+
var data = _GetData(overlay);
405+
if (data === false) return;
406+
399407
data.count--;
400408
if (force || data.count <= 0) {
401409
if (data.resizeIntervalId) clearInterval(data.resizeIntervalId);
402-
data.overlay.fadeOut(data.settings.fade[1], function(){
410+
overlay.fadeOut(data.settings.fade[1], function(){
403411
$(this).remove();
404412
});
405413
container.removeData("loadingoverlay");
@@ -412,8 +420,10 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
412420

413421
function Text(container, value){
414422
container = $(container);
415-
var data = container.data("loadingoverlay");
416-
if (typeof data === "undefined" || !data.text) return;
423+
var overlay = container.data("loadingoverlay");
424+
var data = _GetData(overlay);
425+
if (data === false || !data.text) return;
426+
417427
if (value === false) {
418428
data.text.hide();
419429
} else {
@@ -425,8 +435,10 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
425435

426436
function Progress(container, value){
427437
container = $(container);
428-
var data = container.data("loadingoverlay");
429-
if (typeof data === "undefined" || !data.progress) return;
438+
var overlay = container.data("loadingoverlay");
439+
var data = _GetData(overlay);
440+
if (data === false || !data.progress) return;
441+
430442
if (value === false) {
431443
data.progress.bar.hide();
432444
} else {
@@ -443,13 +455,15 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
443455

444456

445457
function _IntervalResize(container, force){
446-
var data = container.data("loadingoverlay");
458+
var overlay = container.data("loadingoverlay");
459+
var data = _GetData(overlay);
460+
if (data === false) return;
447461

448462
// Overlay
449463
if (!data.wholePage) {
450464
var isFixed = container.css("position") === "fixed";
451465
var pos = isFixed ? container[0].getBoundingClientRect() : container.offset();
452-
data.overlay.css({
466+
overlay.css({
453467
"position" : isFixed ? "fixed" : "absolute",
454468
"top" : pos.top + parseInt(container.css("border-top-width"), 10),
455469
"left" : pos.left + parseInt(container.css("border-left-width"), 10),
@@ -467,22 +481,21 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
467481
if (data.settings.maxSize && size > data.settings.maxSize) size = data.settings.maxSize;
468482
if (data.settings.minSize && size < data.settings.minSize) size = data.settings.minSize;
469483
}
470-
data.overlay.children(".loadingoverlay_element").each(function(){
484+
overlay.children(".loadingoverlay_element").each(function(){
471485
var $this = $(this);
472486
if (force || $this.data("loadingoverlay_autoresize")) {
473487
var resizeFactor = $this.data("loadingoverlay_resizefactor");
474488
if ($this.hasClass("loadingoverlay_fa") || $this.hasClass("loadingoverlay_text")) {
475489
$this.css("font-size", (size * resizeFactor) + data.settings.size.units);
476490
} else if ($this.hasClass("loadingoverlay_progress")) {
477-
var progress = container.data("loadingoverlay").progress;
478-
progress.bar.css("height", (size * resizeFactor) + data.settings.size.units);
479-
if (!progress.fixed) {
480-
progress.bar
491+
data.progress.bar.css("height", (size * resizeFactor) + data.settings.size.units);
492+
if (!data.progress.fixed) {
493+
data.progress.bar
481494
.css("top", $this.position().top)
482495
.css("top", "-=" + (size * resizeFactor * 0.5) + data.settings.size.units);
483-
} else if (progress.fixed === "bottom") {
496+
} else if (data.progress.fixed === "bottom") {
484497
$this
485-
.css("bottom", progress.margin ? progress.margin.value + (progress.margin.fixed ? progress.margin.units : "%") : 0)
498+
.css("bottom", data.progress.margin ? data.progress.margin.value + (data.progress.margin.fixed ? data.progress.margin.units : "%") : 0)
486499
.css("bottom", "+=" + (size * resizeFactor) + data.settings.size.units);
487500
}
488501
} else {
@@ -497,6 +510,21 @@ LoadingOverlay - A flexible loading overlay jQuery plugin
497510
}
498511

499512

513+
function _GetData(overlay){
514+
var data = (typeof overlay === "undefined") ? undefined : overlay.data("loadingoverlay_data");
515+
if (typeof data === "undefined") {
516+
// Clean DOM
517+
$(".loadingoverlay").each(function(){
518+
var $this = $(this);
519+
if (!document.body.contains($this.data("loadingoverlay_data").container[0])) $this.remove();
520+
});
521+
return false;
522+
} else {
523+
return data;
524+
}
525+
}
526+
527+
500528
function _CreateElement(overlay, order, autoResize, resizeFactor, animation){
501529
var element = $("<div>", {
502530
"class" : "loadingoverlay_element",

0 commit comments

Comments
 (0)