1/** 2 * Modal Loading JavaScript Library 3 * @author c 4 * @date 2017-11-06 5 * @param {window} global 6 * @param {jQuery} $ 7 * @param {function} factory 8 * @return {void} 9 * @version 1.0.0 10 */ 11(function(window, $, factory) { 12 13 window.Loading = factory(window, $); 14 15})(window, jQuery, function(window, $) { 16 17 var windowWidth; 18 var windowHeight; 19 20 /** 21 * æé Loading 22 * @author c 23 * @date 2017-11-06 24 * @param {Object} options æé Loadingçå ·ä½åæ° 25 * @return {Loading} Loading对象 26 */ 27 function Loading(options) { 28 return new Loading.prototype._init($('body'), options); 29 } 30 31 /** 32 * åå§åå½æ° 33 * @author c 34 * @date 2017-11-06 35 * @param {Object} $this jQuery对象 36 * @param {Object} options æé Loadingçå ·ä½åæ° 37 * @return {Loading} Loading对象 38 */ 39 const init = Loading.prototype._init = function($target, options) { 40 41 this.version = '1.0.0'; 42 43 this.$target = $target; 44 45 this.set = $.extend(true, {}, this.set, options); 46 47 this._build(); 48 49 return this; 50 51 }; 52 53 /** 54 * æ建Loading 55 * @return {void} 56 */ 57 Loading.prototype._build = function() { 58 59 this.$modalMask = $('<div class="modal-mask"></div>'); 60 61 this.$modalLoading = $('<div class="modal-loading custom-loading"></div>'); 62 63 this.$loadingTitle = $('<p class="loading-title"></p>'); 64 65 this.$loadingAnimation = $('<div class="loading-animate"></div>'); 66 67 this.$animationOrigin = $('<div class="animate-origin"><span></span></div>'); 68 69 this.$animationImage = $('<img/>'); 70 71 this.$loadingDiscription = $('<p class="loading-discription"></p>'); 72 73 // zIndex 74 if(this.set.zIndex <= 0) { 75 this.set.zIndex = (this.$target.siblings().length-1 || this.$target.children().siblings().length) + 10001; 76 } 77 78 // var attr, value; 79 // for(attr in this.set) { 80 // if(attr !== 'zIndex' && attr !== 'animationDuration') { 81 // value = this.set[attr]; 82 // if(typeof value === 'number') { 83 // if(value <= 0) { 84 // this.set[attr] = 'auto'; 85 // } else { 86 // this.set[attr] = (value + this.set.unit); 87 // } 88 // } 89 // } 90 // } 91 92 // æ建Loading 93 this._buildMask(); 94 95 this._buildLoading(); 96 97 this._buildTitle(); 98 99 this._buildLoadingAnimation(); 100 101 this._buildDiscription(); 102 103 // æ¯å¦åå§åè¿ 104 this._init = false; 105 106 if(this.set.defaultApply) { 107 this.apply(); 108 } 109 110 } 111 112 /** 113 * æ建Mask 114 * @return {void} 115 */ 116 Loading.prototype._buildMask = function() { 117 118 // å¦æä¸éç¨é®ç½©å± 119 if(!this.set.mask) { 120 this.$modalMask.css({ 121 position: 'absolute', 122 top: '-200%', 123 }); 124 return ; 125 } 126 127 // é®ç½©å±æ ·å¼ 128 this.$modalMask.css({ 129 backgroundColor: this.set.maskBgColor, 130 zIndex: this.set.zIndex, 131 }); 132 133 // æ·»å é¢å¤çclass 134 this.$modalMask.addClass(this.set.maskClassName); 135 136 } 137 138 /** 139 * æ建Loading 140 * @return {void} 141 */ 142 Loading.prototype._buildLoading = function() { 143 144 this.$modalLoading.css({ 145 width: this.set.loadingWidth, 146 height: this.set.loadingHeight, 147 padding: this.set.loadingPadding, 148 backgroundColor: this.set.loadingBgColor, 149 borderRadius: this.set.loadingBorderRadius, 150 }); 151 152 // å¸å±æ¹å¼ 153 if(this.set.direction === 'hor') { 154 this.$modalLoading.addClass('modal-hor-layout'); 155 } 156 157 // å°loadingæ·»å å°maskä¸ 158 this.$modalMask.append(this.$modalLoading); 159 160 } 161 162 /** 163 * æ建Title 164 * @return {void} 165 */ 166 Loading.prototype._buildTitle = function() { 167 168 if(!this.set.title) { 169 return ; 170 } 171 172 173 this.$loadingTitle.css({ 174 color: this.set.titleColor, 175 fontSize: this.set.titleFontSize, 176 }); 177 178 this.$loadingTitle.addClass(this.set.titleClassName); 179 180 this.$loadingTitle.text(this.set.title); 181 182 // å°titleæ·»å å°loadingä¸ 183 this.$modalLoading.append(this.$loadingTitle); 184 185 } 186 187 /** 188 * æ建LoadingAnimation 189 * @return {void} 190 */ 191 Loading.prototype._buildLoadingAnimation = function() { 192 193 // loadingAnimation 194 this.$loadingAnimation.css({ 195 width: this.set.animationWidth, 196 height: this.set.animationHeight, 197 }); 198 199 if(this.set.loadingAnimation === 'origin') { // originå¨ç» 200 this.$animationOrigin.children().css({ 201 width: this.set.animationOriginWidth, 202 height: this.set.animationOriginHeight, 203 backgroundColor: this.set.animationOriginColor, 204 }); 205 for(var i = 0; i < 5; i++) { 206 this.$loadingAnimation.append(this.$animationOrigin.clone()); 207 } 208 }
208 else if(this.set.loadingAnimation === 'image') { // å¾çå è½½å¨ç» 209 this.$animationImage.attr('src', this.set.animationSrc); 210 this.$loadingAnimation.append(this.$animationImage); 211 } //else { 212 // throw new Error("[loadingAnimation] åæ°é误. åæ°å¼åªè½ä¸º['origin', 'image']"); 213 // } 214 215 this.$loadingAnimation.addClass(this.set.animationClassName); 216 217 // å°loadingAnimationæ·»å å°loadingä¸ 218 this.$modalLoading.append(this.$loadingAnimation); 219 220 } 221 222 /** 223 * æ建Discription 224 * @return {void} 225 */ 226 Loading.prototype._buildDiscription = function() { 227 228 if(!this.set.discription) { 229 return ; 230 } 231 232 this.$loadingDiscription.css({ 233 color: this.set.discriptionColor, 234 fontSize: this.set.discriptionFontSize, 235 }); 236 237 this.$loadingDiscription.addClass(this.set.discriptionClassName); 238 239 this.$loadingDiscription.text(this.set.discription); 240 241 // å°titleæ·»å å°loadingä¸ 242 this.$modalLoading.append(this.$loadingDiscription); 243 244 } 245 246 /** 247 * å®ä½ 248 * @return {void} 249 */ 250 Loading.prototype._position = function() { 251 252 windowWidth = $(window).width(); 253 windowHeight = $(window).height(); 254 255 var loadingWidth = this.$modalLoading.outerWidth(); 256 var loadingHeight = this.$modalLoading.outerHeight(); 257 258 var x1 = windowWidth >>> 1; 259 var x2 = loadingWidth >>> 1; 260 var left = x1 - x2; 261 262 var y1 = windowHeight >>> 1; 263 var y2 = loadingHeight >>> 1; 264 var top = y1 - y2; 265 266 this.$modalLoading.css({ top, left }); 267 268 } 269 270 /** 271 * å ¥å±è¿åº¦å¨ç» 272 * @return {void} 273 */ 274 Loading.prototype._transitionAnimationIn = function() { 275 276 if(!this.set.animationIn) { 277 this.$modalMask.css({ display: 'block' }); 278 } else { 279 // this.$modalMask.removeClass(this.set.animationOut).addClass(this.set.animationIn); 280 this.$modalMask.addClass(this.set.animationIn); 281 } 282 283 } 284 285 /** 286 * åºå±è¿åº¦å¨ç» 287 * @return {void} 288 */ 289 Loading.prototype._transitionAnimationOut = function() { 290 291 292 if(!this.set.animationOut) { 293 294 // this.$modalMask.css({ display: 'none' }); 295 this.$modalMask.remove(); 296 297 } else { 298 299 this._timer && this._timer.clearTimeout(this._timer); 300 301 this.$modalMask.removeClass(this.set.animationIn).addClass(this.set.animationOut); 302 303 // this._timer = setTimeout(() => { 304 // this.$modalMask.remove(); 305 // }, this.set.animationDuration); 306 307 var self = this; 308 309 this._timer = setTimeout(function() { 310 self.$modalMask.remove(); 311 }, this.set.animationDuration); 312 313 } 314 } 315 316 /** 317 * æ¾ç¤ºLoading 318 * @return {void} 319 */ 320 Loading.prototype.apply = function() { 321 this._transitionAnimationIn(); 322 323 // è¿æ ·æç说å¯ä»¥å¢å æ§è½, å 为ä¸éè¦ä»å åä¸å¯»æ¾_initLoadingæ¹æ³. 324 if(!this._init) { 325 // åå§åLoading 326 this._initLoading(); 327 } 328 329 } 330 331 /** 332 * éèLoading 333 * @return {void} 334 */ 335 Loading.prototype.out = function() { 336 this._transitionAnimationOut(); 337 } 338 339 /** 340 * åå§åLoading 341 * @return {void} 342 */ 343 Loading.prototype._initLoading = function() { 344 345 // å·²ç»åå§è¿ æ éå次åå§å 346 if(this._init) { 347 return ; 348 } 349 350 // æ·»å å°é¡µé¢ä¸ 351 this.$target.append(this.$modalMask); 352 353 // å®ä½ 354 this._position(); 355 356 // $(window).resize(() => { 357 // windowWidth = $(window).width(); 358 // windowHeight = $(window).height(); 359 // this._position(); 360 // }); 361 362 var self = this; 363 364 $(window).resize(function() { 365 windowWidth = $(window).width(); 366 windowHeight = $(window).height(); 367 self._position(); 368 }); 369 370 this._init = true; 371 } 372 373 /** 374 * Loadingåæ°å±æ§ 375 * å¯ä»¥ç®åç设置ä¸äºcssæ ·å¼, å¤æçcssæ ·å¼å¯ä»¥éè¿å¢å classæ¥æ´æ¹æ ·å¼. 376 * 377 * åç´ åä½: å¦ææ¯å符串, ååæ设置. å¦ææ¯æ°åç±»å, é»è®¤åä½ä¸º{unit}. zIndexé¤å¤. 378 * 379 * å¦æåä½æ ·å¼ä¸ºundefined(ä¾å¦: titleFontFamily), é£ä¹å°ä¼éç¨å ¨å±çåä½æ ·å¼(fontFamily) 380 * 381 * @author c 382 * @date 2017-11-06 383 * @version 1.0.0 384 */ 385 Loading.prototype.set = { 386 direction: 'ver', // æ¹å. ver: åç´, hor: æ°´å¹³. 387 388 title: undefined, // æ é¢å 容. 389 titleColor: '#FFF', // æ é¢æåé¢è². 390 titleFontSize: 14, // æ é¢æååä½å¤§å°. 391 titleClassName: undefined, // æ é¢é¢å¤çclasså¼. 392 // titleFontFamily: undefined, // æ é¢åä½æ ·å¼ 393 394 discription: undefined, // æè¿°å 容. 395 discriptionColor: '#FFF', // æè¿°æåé¢è².
396 discriptionFontSize: 14, // æè¿°æååä½å¤§å°. 397 discriptionClassName: undefined, // æè¿°é¢å¤çclasså¼. 398 // directionFontFamily: undefined, // æè¿°åä½æ ·å¼. 399 400 loadingWidth: 'auto', // Loading宽度. 401 loadingHeight: 'auto', // Loadingé«åº¦. 402 loadingPadding: 20, // Loadingå è¾¹è·. 403 loadingBgColor: '#252525', // Loadingèæ¯é¢è². 404 loadingBorderRadius: 12, // LoadingçborderRadius. 405 // loadingPosition: 'fixed', // Loadingçposition 406 407 mask: true, // é®ç½©å±. true: æ¾ç¤ºé®ç½©å±, false: ä¸æ¾ç¤º. 408 maskBgColor: 'rgba(0, 0, 0, .6)', // é®ç½©å±èæ¯é¢è². 409 maskClassName: undefined, // 为é®ç½©å±æ·»å . 410 // maskPosition: 'fixed', // é®ç½©å±position 411 412 loadingAnimation: 'origin', // å è½½å¨ç». origin: 表示使ç¨é»è®¤çåç¹å¨ç», image: 表示使ç¨èªå®ä¹å¾çä½ä¸ºå è½½å¨ç». 413 animationSrc: undefined, // å¾çå è½½å¨ç»çå°å. (åæ: loadingAnimation=origin, 以ä¸ç®ç§°originæè image) 414 animationWidth: 40, // å¨ç»å®½åº¦. 为imageæ¶è¡¨ç¤ºå¾çç宽度. 415 animationHeight: 40, // å¨ç»é«åº¦. 为imageæ¶è¡¨ç¤ºå¾ççé«åº¦. 416 animationOriginWidth: 4, // åç¹å¨ç»å®½åº¦. (åæ: origin) 417 animationOriginHeight: 4, // åç¹å¨ç»é«åº¦. (åæ: origin) 418 animationOriginColor: '#FFF', // åç¹å¨ç»çé¢è². (åæ: origin) 419 animationClassName: undefined, // 为å¨ç»æ·»å ä¸ä¸ªé¢å¤çclasså¼. 420 421 defaultApply: true, // é»è®¤èªå¨æ¾ç¤º. 422 animationIn: 'animated fadeIn', // å ¥å±å¨ç». 423 animationOut: 'animated fadeOut', // åºå±å¨ç». 424 animationDuration: 1000, // å¨ç»æç»æ¶é´(åä½:ms) 425 // fontFamily: 'sans-serif', // æååä½æ ·å¼. 426 // position: 'fixed', // å®ä½. maskåloadingçå®ä½. 427 // unit: 'px', // 设置é»è®¤åä½. 428 zIndex: 0, // æå¤å´å±çº§(mask). å¦ææ¯0æè è´æ°, å为{$this.siblings() + 10001}. 429 430 }; 431 432 init.prototype = Loading.prototype; 433 434 return Loading; 435});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.