portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.min.js

   1 /*--------------------------------------------------------------------\r
   2  *JAVASCRIPT "FakeLoader.js"\r
   3  *Version:    1.1.0 - 2014\r
   4  *author:     João Pereira\r
   5  *website:    http://www.joaopereira.pt\r
   6  *Licensed MIT \r
   7 -----------------------------------------------------------------------*/\r
   8 (function ($) {\r
   9  \r
  10     $.fn.fakeLoader = function(options) {\r
  11         //Defaults\r
  12         $.fn.settings = $.extend({\r
  13             timeToHide:10, // Default Time to hide fakeLoader\r
  14             pos:'fixed',// Default Position\r
  15             top:'0px',  // Default Top value\r
  16             left:'0px', // Default Left value\r
  17             width:'100%', // Default width \r
  18             height:'100%', // Default Height\r
  19             zIndex: '999',  // Default zIndex \r
  20             bgColor: '#2ecc71', // Default background color\r
  21                         opacity:'0.6',//默认透明度\r
  22                         text:'',//默认加载中文字\r
  23             spinner:'spinner1', // Default Spinner\r
  24             imagePath:'' // Default Path custom image\r
  25         }, options);\r
  26                 var timer=null;\r
  27                 $.fn.Setopacity=function(opacity){\r
  28                         $(".loadingbackground").fadeTo("slow",opacity);\r
  29                 };\r
  30                 $.fn.SetTimeToHide=function(timetohide){\r
  31                         var el = $(this);\r
  32                         el.settings.timeToHide=timetohide;\r
  33                         if(!!timer)clearTimeout(timer);\r
  34                         el.css({\r
  35                                 'display':"block"\r
  36                         });//fadeTo("fast",el.settings.opacity);\r
  37                         $(".loadingbackground").fadeTo(1,el.settings.opacity);\r
  38                         setTimeout(function(){\r
  39                                 el.fadeOut();//fadeTo("slow",0);\r
  40                         }, el.settings.timeToHide);\r
  41                 };\r
  42                 $.fn.setToHide=function(){\r
  43                         var el = $(this);\r
  44                         if(!!timer)clearTimeout(timer);\r
  45                         el.fadeOut();//fadeTo("slow",0);\r
  46                 };\r
  47                 //The target\r
  48         var el = $(this);\r
  49 \r
  50         //Customized Spinners\r
  51         var spinner01 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';\r
  52         var spinner02 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';\r
  53         var spinner03 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div></div>';\r
  54         var spinner04 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner4"></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';\r
  55         var spinner05 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';\r
  56         var spinner06 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';\r
  57         var spinner07 = '<div class="loadingbackground"></div><div class="loadingTip"><div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div><br><div class="f2"><span class="loading">'+el.settings.text+'</span></div>';\r
  58 \r
  59         //Init styles\r
  60         var initStyles = {\r
  61             'position':el.settings.pos,\r
  62             'width':el.settings.width,\r
  63             'height':el.settings.height,\r
  64             'top':el.settings.top,\r
  65             'left':el.settings.left\r
  66         };\r
  67 \r
  68         //Apply styles\r
  69         el.css(initStyles);             \r
  70         //Each \r
  71         el.each(function() {\r
  72             var a = el.settings.spinner;\r
  73             //console.log(a)\r
  74                 switch (a) {\r
  75                     case 'spinner1':\r
  76                             el.html(spinner01);\r
  77                         break;\r
  78                     case 'spinner2':\r
  79                             el.html(spinner02);\r
  80                         break;\r
  81                     case 'spinner3':\r
  82                             el.html(spinner03);\r
  83                         break;\r
  84                     case 'spinner4':\r
  85                             el.html(spinner04);\r
  86                         break;\r
  87                     case 'spinner5':\r
  88                             el.html(spinner05);\r
  89                         break;\r
  90                     case 'spinner6':\r
  91                             el.html(spinner06);\r
  92                         break;\r
  93                     case 'spinner7':\r
  94                             el.html(spinner07);\r
  95                         break;\r
  96                     default:\r
  97                         el.html(spinner01);\r
  98                     }\r
  99 \r
 100                 //Add customized loader image\r
 101 \r
 102                 if (el.settings.imagePath !='') {\r
 103                     el.html('<div class="fl"><img src="'+el.settings.imagePath+'"><span>'+el.settings.text+'</span></div>');\r
 104                 }\r
 105                                 centerLoader();\r
 106         });\r
 107                 \r
 108         //Time to hide fakeLoader\r
 109                 if(el.settings.timeToHide>0){\r
 110                         timer=setTimeout(function(){\r
 111                                         el.fadeOut();//fadeTo("slow",0);\r
 112                         }, el.settings.timeToHide);\r
 113                 }\r
 114         //Return Styles \r
 115         this.css({\r
 116             //'backgroundColor':el.settings.bgColor,\r
 117                         'display':"block",\r
 118             'zIndex':el.settings.zIndex\r
 119         });\r
 120                 \r
 121         $(".loadingbackground").css(initStyles).css({\r
 122             'backgroundColor':el.settings.bgColor,\r
 123                         'opacity':el.settings.opacity,\r
 124             'zIndex':el.settings.zIndex+1\r
 125         });\r
 126                 $(".loadingTip").css(initStyles).css({\r
 127             //'backgroundColor':el.settings.bgColor,\r
 128             'zIndex':el.settings.zIndex+2\r
 129         });\r
 130                 return this;\r
 131     }; // End Fake Loader\r
 132  \r
 133 \r
 134         //Center Spinner\r
 135         function centerLoader() {\r
 136 \r
 137             var winW = $(window).width();\r
 138             var winH = $(window).height();\r
 139 \r
 140             var spinnerW = $('.fl').outerWidth();\r
 141             var spinnerH = $('.fl').outerHeight();\r
 142                         var fW = $('.f2').outerWidth();\r
 143                         var left=(winW/2)-(spinnerW/2);\r
 144                         var left2=(winW/2)-(fW/2);\r
 145                         left=left>0?left:winW/2-20;\r
 146                         left2=left2==0||fW==0?left:left2;\r
 147                         //left2=left2>0?left2:winW/2-40;\r
 148                         left2=left2-20;\r
 149                         console.log("loding gif:"+left+"   text:"+left2);\r
 150                         $('.fl').css({\r
 151                                 'position':'absolute',\r
 152                                 'left':left,\r
 153                                 'top':(winH/2)-(spinnerH/2)\r
 154                         });\r
 155                         $('.f2').css({\r
 156                                 'position':'absolute',\r
 157                                 'left':left2,\r
 158                                 'top':(winH/2)+(spinnerH/2)\r
 159                         });\r
 160         }\r
 161 \r
 162         $(window).load(function(){\r
 163                 centerLoader();\r
 164               $(window).resize(function(){\r
 165                 centerLoader();\r
 166               });\r
 167         });\r
 168 \r
 169 \r
 170 }(jQuery));\r
 171 \r
 172 \r
 173 \r
 174 \r