From c1f3cdec3421f3e221a7c25455a80c69c8dfefe4 Mon Sep 17 00:00:00 2001 From: Gaspare Sganga Date: Fri, 22 Apr 2016 17:42:17 +0200 Subject: [PATCH] Version 1.2 --- LICENSE | 2 +- .../loadingoverlay_progress.js | 67 +++++++++++++ .../loadingoverlay_progress.min.js | 8 ++ extras/loadingoverlay_progress/test.html | 94 +++++++++++++++++++ src/loadingoverlay.js | 19 +++- src/loadingoverlay.min.js | 4 +- 6 files changed, 187 insertions(+), 7 deletions(-) create mode 100644 extras/loadingoverlay_progress/loadingoverlay_progress.js create mode 100644 extras/loadingoverlay_progress/loadingoverlay_progress.min.js create mode 100644 extras/loadingoverlay_progress/test.html diff --git a/LICENSE b/LICENSE index e23e9fa..d796948 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2015 Gaspare Sganga +Copyright (c) 2015-2016 Gaspare Sganga Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/extras/loadingoverlay_progress/loadingoverlay_progress.js b/extras/loadingoverlay_progress/loadingoverlay_progress.js new file mode 100644 index 0000000..2dbdef7 --- /dev/null +++ b/extras/loadingoverlay_progress/loadingoverlay_progress.js @@ -0,0 +1,67 @@ +/*************************************************************************************************** +LoadingOverlay Extras - Progress + Author : Gaspare Sganga + Version : 1.2 + License : MIT + Documentation : http://gasparesganga.com/labs/jquery-loading-overlay +****************************************************************************************************/ +var LoadingOverlayProgress = function(options){ + var _bar; + var _text; + var _settings = $.extend(true, {}, { + bar : { + "bottom" : "25px", + "height" : "20px", + "background" : "#9bbb59" + }, + text : { + "bottom" : "50px", + "font" : "14pt/1.2 sans-serif", + "color" : "#303030" + } + }, options); + + return { + Init : Init, + Update : Update + }; + + function Init(){ + var wrapper = $("
", { + class : "loadingoverlay_progress_wrapper", + css : { + "position" : "relative", + "width" : "100%", + "flex" : "1 0 auto" + } + }); + _bar = $("
", { + class : "loadingoverlay_progress_bar", + css : $.extend(true, { + "position" : "absolute", + "left" : "0" + }, _settings.bar) + }).appendTo(wrapper); + _text = $("
", { + class : "loadingoverlay_progress_text", + css : $.extend(true, { + "position" : "absolute", + "left" : "0", + "text-align" : "right", + "white-space" : "nowrap" + }, _settings.text), + text : "0 %" + }).appendTo(wrapper); + Update(0); + return wrapper; + } + + function Update(value){ + if (value < 0) value = 0; + if (value > 100) value = 100; + var r = {"right" : (100 - value) + "%"}; + _bar.css(r); + _text.css(r); + _text.text(value + "%"); + } +}; \ No newline at end of file diff --git a/extras/loadingoverlay_progress/loadingoverlay_progress.min.js b/extras/loadingoverlay_progress/loadingoverlay_progress.min.js new file mode 100644 index 0000000..0c8af5a --- /dev/null +++ b/extras/loadingoverlay_progress/loadingoverlay_progress.min.js @@ -0,0 +1,8 @@ +/*************************************************************************************************** +LoadingOverlay Extras - Progress + Author : Gaspare Sganga + Version : 1.2 + License : MIT + Documentation : http://gasparesganga.com/labs/jquery-loading-overlay +****************************************************************************************************/ +var LoadingOverlayProgress=function(a){function e(){var a=$("
",{"class":"loadingoverlay_progress_wrapper",css:{position:"relative",width:"100%",flex:"1 0 auto"}});return b=$("
",{"class":"loadingoverlay_progress_bar",css:$.extend(!0,{position:"absolute",left:"0"},d.bar)}).appendTo(a),c=$("
",{"class":"loadingoverlay_progress_text",css:$.extend(!0,{position:"absolute",left:"0","text-align":"right","white-space":"nowrap"},d.text),text:"0 %"}).appendTo(a),f(0),a}function f(a){0>a&&(a=0),a>100&&(a=100);var d={right:100-a+"%"};b.css(d),c.css(d),c.text(a+"%")}var b,c,d=$.extend(!0,{},{bar:{bottom:"25px",height:"20px",background:"#9bbb59"},text:{bottom:"50px",font:"14pt/1.2 sans-serif",color:"#303030"}},a);return{Init:e,Update:f}}; \ No newline at end of file diff --git a/extras/loadingoverlay_progress/test.html b/extras/loadingoverlay_progress/test.html new file mode 100644 index 0000000..9f06aed --- /dev/null +++ b/extras/loadingoverlay_progress/test.html @@ -0,0 +1,94 @@ + + + + + LoadingOverlay Extras - Progress - Test + + + + + + + + +
Element 1
+
Element 2
+ + \ No newline at end of file diff --git a/src/loadingoverlay.js b/src/loadingoverlay.js index 212a4a4..e21ac64 100644 --- a/src/loadingoverlay.js +++ b/src/loadingoverlay.js @@ -1,7 +1,7 @@ /*************************************************************************************************** LoadingOverlay - A flexible loading overlay jQuery plugin Author : Gaspare Sganga - Version : 1.1 + Version : 1.2 License : MIT Documentation : http://gasparesganga.com/labs/jquery-loading-overlay ****************************************************************************************************/ @@ -9,6 +9,7 @@ LoadingOverlay - A flexible loading overlay jQuery plugin var _defaults = { color : "rgba(255, 255, 255, 0.8)", custom : "", + fade : true, fontawesome : "", image : "loading.gif", maxSize : "100px", @@ -103,7 +104,15 @@ LoadingOverlay - A flexible loading overlay jQuery plugin }, settings.resizeInterval); container.data("LoadingOverlayResizeIntervalId", resizeIntervalId); } - overlay.appendTo(container); + 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); @@ -117,8 +126,10 @@ LoadingOverlay - A flexible loading overlay jQuery plugin if (force || count <= 0) { var resizeIntervalId = container.data("LoadingOverlayResizeIntervalId"); if (resizeIntervalId) clearInterval(resizeIntervalId); - container.removeData("LoadingOverlayCount").removeData("LoadingOverlayResizeIntervalId"); - container.children(".loadingoverlay").remove(); + container.children(".loadingoverlay").fadeOut(container.data("LoadingOverlayFadeOutDuration"), function(){ + $(this).remove() + }); + container.removeData(["LoadingOverlayCount", "LoadingOverlayFadeOutDuration", "LoadingOverlayResizeIntervalId"]); } else { container.data("LoadingOverlayCount", count); } diff --git a/src/loadingoverlay.min.js b/src/loadingoverlay.min.js index fc37211..73da26b 100644 --- a/src/loadingoverlay.min.js +++ b/src/loadingoverlay.min.js @@ -1,8 +1,8 @@ /*************************************************************************************************** LoadingOverlay - A flexible loading overlay jQuery plugin Author : Gaspare Sganga - Version : 1.1 + 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("
",{"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("
",{"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)}h.appendTo(c)}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.removeData("LoadingOverlayCount").removeData("LoadingOverlayResizeIntervalId"),c.children(".loadingoverlay").remove()}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",{"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("
",{"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