testing loading overlay

Former-commit-id: 5b1f117f
Former-commit-id: 63ad76ce42f62739c5efc3990b496b285966a619 [formerly c88adb280d83bfa9d64b23234b16b0d0786a91bd]
Former-commit-id: ae672ed78ab0350bd11c41a51b7f8baa51b0ad57

www/assets/js/loadingoverlay.js

+/***************************************************************************************************
+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

+/***************************************************************************************************
+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

@@ -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