-
Notifications
You must be signed in to change notification settings - Fork 127
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Gaspare Sganga
committed
Feb 15, 2015
1 parent
d9ededa
commit db4bcf1
Showing
3 changed files
with
142 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,7 @@ | ||
# jquery-loading-overlay | ||
# jQuery LoadingOverlay | ||
|
||
A flexible loading overlay jQuery plugin | ||
|
||
--- | ||
|
||
Documentation and examples at http://gasparesganga.com/labs/jquery-loading-overlay |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
/*************************************************************************************************** | ||
LoadingOverlay - A flexible loading overlay jQuery plugin | ||
Author : Gaspare Sganga | ||
Version : 1.0 | ||
License : MIT | ||
Documentation : http://gasparesganga.com/labs/jquery-loading-overlay | ||
****************************************************************************************************/ | ||
(function($, undefined){ | ||
var _defaults = { | ||
color : "rgba(255, 255, 255, 0.8)", | ||
image : "loading.gif", | ||
maxSize : "100px", | ||
minSize : "20px", | ||
resizeInterval : 0, | ||
size : "50%" | ||
}; | ||
|
||
$.LoadingOverlaySetup = function(settings){ | ||
$.extend(true, _defaults, settings); | ||
}; | ||
|
||
$.LoadingOverlay = function(action, options){ | ||
switch (action.toLowerCase()) { | ||
case "show": | ||
var settings = $.extend(true, {}, _defaults, options); | ||
_Show("body", settings, true); | ||
break; | ||
|
||
case "hide": | ||
_Hide("body", options); | ||
break; | ||
} | ||
}; | ||
|
||
$.fn.LoadingOverlay = function(action, options){ | ||
switch (action.toLowerCase()) { | ||
case "show": | ||
var settings = $.extend(true, {}, _defaults, options); | ||
return this.each(function(){ | ||
_Show(this, settings, false); | ||
}); | ||
|
||
case "hide": | ||
return this.each(function(){ | ||
_Hide(this, options); | ||
}); | ||
} | ||
}; | ||
|
||
|
||
function _Show(container, settings, fixed){ | ||
container = $(container); | ||
var count = container.data("LoadingOverlayCount"); | ||
if (count === undefined) count = 0; | ||
if (count == 0) { | ||
var overlay = $("<div>", { | ||
class : "loadingoverlay", | ||
css : { | ||
"background-color" : settings.color, | ||
"background-image" : (settings.image ? "url("+settings.image+")" : "none"), | ||
"background-position" : "center center", | ||
"background-repeat" : "no-repeat" | ||
} | ||
}); | ||
if (fixed) { | ||
overlay.css({ | ||
"position" : "fixed", | ||
"top" : 0, | ||
"left" : 0, | ||
"width" : "100%", | ||
"height" : "100%" | ||
}); | ||
} else { | ||
overlay.css({ | ||
"position" : "absolute", | ||
"top" : 0, | ||
"left" : 0 | ||
}); | ||
_CalculateSize(container, overlay, settings); | ||
if (container.css("position") == "static") { | ||
overlay.css({ | ||
"top" : container.position().top + parseInt(container.css("margin-top")) + parseInt(container.css("border-top-width")), | ||
"left" : container.position().left + parseInt(container.css("margin-left")) + parseInt(container.css("border-left-width")) | ||
}); | ||
} | ||
if (settings.resizeInterval > 0) { | ||
var resizeIntervalId = setInterval(function(){ | ||
_CalculateSize(container, overlay, settings); | ||
}, settings.resizeInterval); | ||
container.data("LoadingOverlayResizeIntervalId", resizeIntervalId); | ||
} | ||
} | ||
overlay.appendTo(container); | ||
} | ||
count++; | ||
container.data("LoadingOverlayCount", count); | ||
} | ||
|
||
function _Hide(container, force){ | ||
container = $(container); | ||
var count = container.data("LoadingOverlayCount"); | ||
if (count === undefined) return; | ||
count--; | ||
if (force || count <= 0) { | ||
var resizeIntervalId = container.data("LoadingOverlayResizeIntervalId"); | ||
if (resizeIntervalId) clearInterval(resizeIntervalId); | ||
container.removeData("LoadingOverlayCount").removeData("LoadingOverlayResizeIntervalId"); | ||
container.children(".loadingoverlay").remove(); | ||
} else { | ||
container.data("LoadingOverlayCount", count); | ||
} | ||
} | ||
|
||
function _CalculateSize(container, overlay, settings){ | ||
var size = "auto"; | ||
if (settings.size && settings.size != "auto") { | ||
var size = Math.min(container.innerWidth(), container.innerHeight()) * parseFloat(settings.size) / 100; | ||
if (settings.maxSize && size > parseInt(settings.maxSize)) size = parseInt(settings.maxSize)+"px"; | ||
if (settings.minSize && size < parseInt(settings.minSize)) size = parseInt(settings.minSize)+"px"; | ||
} | ||
$(overlay).css({ | ||
"width" : container.innerWidth(), | ||
"height" : container.innerHeight(), | ||
"background-size" : size | ||
}); | ||
} | ||
|
||
}(jQuery)); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.