Skip to content
GitLab
Commit c30a70d8 authored by Jorge Samuel Mendes de Jesus's avatar Jorge Samuel Mendes de Jesus
Browse files

testing loading overlay 

Former-commit-id: 5b1f117f
Former-commit-id: 63ad76ce42f62739c5efc3990b496b285966a619 [formerly c88adb280d83bfa9d64b23234b16b0d0786a91bd]
Former-commit-id: ae672ed78ab0350bd11c41a51b7f8baa51b0ad57
parent 21c2c05c
Hide whitespace changes
Inline Side-by-side
www/assets/js/loadingoverlay.js 0 → 100644
View file @ c30a70d8
/***************************************************************************************************
LoadingOverlay - A flexible loading overlay jQuery plugin
Author : Gaspare Sganga
Version : 1.2
License : MIT
Documentation : http://gasparesganga.com/labs/jquery-loading-overlay
****************************************************************************************************/
(function($, undefined){
var _defaults = {
color : "rgba(255, 255, 255, 0.8)",
custom : "",
fade : true,
fontawesome : "",
image : "loading.gif",
maxSize : "100px",
minSize : "20px",
resizeInterval : 0,
size : "50%",
zIndex : 1
};
$.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);
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);
});
case "hide":
return this.each(function(){
_Hide(this, options);
});
}
};
function _Show(container, settings){
container = $(container);
var fixed = container.is("body");
var count = container.data("LoadingOverlayCount");
if (count === undefined) count = 0;
if (count == 0) {
var overlay = $("<div>", {
class : "loadingoverlay",
css : {
"background-color" : settings.color,
"display" : "flex",
"flex-direction" : "column",
"align-items" : "center",
"justify-content" : "center",
"z-index" : settings.zIndex
}
});
if (settings.image) overlay.css({
"background-image" : "url("+settings.image+")",
"background-position" : "center center",
"background-repeat" : "no-repeat"
});
if (settings.fontawesome) $("<div>", {
class : "loadingoverlay_fontawesome "+settings.fontawesome
}).appendTo(overlay);
if (settings.custom) $(settings.custom).appendTo(overlay);
if (fixed) {
overlay.css({
"position" : "fixed",
"top" : 0,
"left" : 0,
"width" : "100%",
"height" : "100%"
});
} else {
overlay.css({
"position" : "absolute",
"top" : 0,
"left" : 0
});
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"))
});
}
}
_Resize(container, overlay, settings, fixed);
if (settings.resizeInterval > 0) {
var resizeIntervalId = setInterval(function(){
_Resize(container, overlay, settings, fixed);
}, settings.resizeInterval);
container.data("LoadingOverlayResizeIntervalId", resizeIntervalId);
}
if (!settings.fade) {
settings.fade = [0, 0];
} else if (settings.fade === true) {
settings.fade = [400, 200];
} else if (typeof settings.fade == "string" || typeof settings.fade == "number") {
settings.fade = [settings.fade, settings.fade];
}
container.data("LoadingOverlayFadeOutDuration", settings.fade[1]);
overlay.hide().appendTo(container).fadeIn(settings.fade[0]);
}
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.children(".loadingoverlay").fadeOut(container.data("LoadingOverlayFadeOutDuration"), function(){
$(this).remove()
});
container.removeData(["LoadingOverlayCount", "LoadingOverlayFadeOutDuration", "LoadingOverlayResizeIntervalId"]);
} else {
container.data("LoadingOverlayCount", count);
}
}
function _Resize(container, overlay, settings, fixed){
if (!fixed) overlay.css({
"width" : container.innerWidth(),
"height" : container.innerHeight()
});
var size = "auto";
if (settings.size && settings.size != "auto") {
var c = fixed ? $(window) : container;
size = Math.min(c.innerWidth(), c.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("background-size", size);
overlay.children(".loadingoverlay_fontawesome").css("font-size", size);
}
}(jQuery));
www/assets/js/loadingoverlay.min.js 0 → 100644
View file @ c30a70d8
/***************************************************************************************************
LoadingOverlay - A flexible loading overlay jQuery plugin
Author : Gaspare Sganga
Version : 1.2
License : MIT
Documentation : http://gasparesganga.com/labs/jquery-loading-overlay
****************************************************************************************************/
!function(a,b){function d(c,d){c=a(c);var e=c.is("body"),g=c.data("LoadingOverlayCount");if(g===b&&(g=0),0==g){var h=a("<div>",{"class":"loadingoverlay",css:{"background-color":d.color,display:"flex","flex-direction":"column","align-items":"center","justify-content":"center"}});if(d.image&&h.css({"background-image":"url("+d.image+")","background-position":"center center","background-repeat":"no-repeat"}),d.fontawesome&&a("<div>",{"class":"loadingoverlay_fontawesome "+d.fontawesome}).appendTo(h),d.custom&&a(d.custom).appendTo(h),e?h.css({position:"fixed",top:0,left:0,width:"100%",height:"100%"}):(h.css({position:"absolute",top:0,left:0}),"static"==c.css("position")&&h.css({top:c.position().top+parseInt(c.css("margin-top"))+parseInt(c.css("border-top-width")),left:c.position().left+parseInt(c.css("margin-left"))+parseInt(c.css("border-left-width"))})),f(c,h,d,e),d.resizeInterval>0){var i=setInterval(function(){f(c,h,d,e)},d.resizeInterval);c.data("LoadingOverlayResizeIntervalId",i)}d.fade?d.fade===!0?d.fade=[400,200]:("string"==typeof d.fade||"number"==typeof d.fade)&&(d.fade=[d.fade,d.fade]):d.fade=[0,0],c.data("LoadingOverlayFadeOutDuration",d.fade[1]),h.hide().appendTo(c).fadeIn(d.fade[0])}g++,c.data("LoadingOverlayCount",g)}function e(c,d){c=a(c);var e=c.data("LoadingOverlayCount");if(e!==b)if(e--,d||0>=e){var f=c.data("LoadingOverlayResizeIntervalId");f&&clearInterval(f),c.children(".loadingoverlay").fadeOut(c.data("LoadingOverlayFadeOutDuration"),function(){a(this).remove()}),c.removeData(["LoadingOverlayCount","LoadingOverlayFadeOutDuration","LoadingOverlayResizeIntervalId"])}else c.data("LoadingOverlayCount",e)}function f(b,c,d,e){e||c.css({width:b.innerWidth(),height:b.innerHeight()});var f="auto";if(d.size&&"auto"!=d.size){var g=e?a(window):b;f=Math.min(g.innerWidth(),g.innerHeight())*parseFloat(d.size)/100,d.maxSize&&f>parseInt(d.maxSize)&&(f=parseInt(d.maxSize)+"px"),d.minSize&&f<parseInt(d.minSize)&&(f=parseInt(d.minSize)+"px")}c.css("background-size",f),c.children(".loadingoverlay_fontawesome").css("font-size",f)}var c={color:"rgba(255, 255, 255, 0.8)",custom:"",fade:!0,fontawesome:"",image:"loading.gif",maxSize:"100px",minSize:"20px",resizeInterval:0,size:"50%"};a.LoadingOverlaySetup=function(b){a.extend(!0,c,b)},a.LoadingOverlay=function(b,f){switch(b.toLowerCase()){case"show":var g=a.extend(!0,{},c,f);d("body",g);break;case"hide":e("body",f)}},a.fn.LoadingOverlay=function(b,f){switch(b.toLowerCase()){case"show":var g=a.extend(!0,{},c,f);return this.each(function(){d(this,g)});case"hide":return this.each(function(){e(this,f)})}}}(jQuery);
\ No newline at end of file
www/index.html
View file @ c30a70d8
......@@ -3,10 +3,10 @@
<html lang="en">
<head>
<title>World Soil Museum</title>
<link rel="icon" type="image/x-icon" href="./assets/isric_icon.ico">
<link rel="preload" href="./images/background/bg5.jpg">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Asap">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
......@@ -45,6 +45,8 @@
<!-- we meed Jquery to load subsections -->
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="/assets/js/loadingoverlay.js"></script>
<!-- adopting tap events for on -->
<script src="/assets/js/touche.js"></script>
......@@ -86,6 +88,12 @@
<!-- data-overlay: "true" - semi-transparent black overlay on top of bg enabled, "false" - disabled -->
<!-- data-overlay-opacity: set the opacity/transparency of the black overlay -->
<body data-default-background-img="./images/background/bg5.jpg" data-overlay="true" data-overlay-opacity="0.35">
<script>
(function(){
console.log("trying overlay")
$.LoadingOverlay("show");
})();
</script>
<!-- Outer Container -->
<div id="outer-container">
......@@ -250,5 +258,8 @@
<!-- Custom functions for this theme -->
<script src="assets/js/functions.js"></script>
<script src="assets/js/initialise-functions.js"></script>
<script>
$.LoadingOverlay("hide");
</script>
</html>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment