489 lines
23 KiB
JavaScript
489 lines
23 KiB
JavaScript
/**
|
||
* 区域/全局 loading 效果<layui组件，依赖jQuery>
|
||
* @version v1.3 最新版
|
||
* @author jlx (neusofts#neusofts.com)
|
||
* @extends {jQuery.fn.loading}
|
||
* @param {String|Object=} arg1 调用方法名<均为空参则默认show，其他方法：toggle,hide,hideAll,destroy,destroyAll>，若为一个Object参数则更新全局配置&show<返回loading>
|
||
* @param {Object=} arg2 若arg1为{String}，arg2为{Object}，则优先私有配置
|
||
* @property {String=''} overlayClassName 自定义遮罩层className，可多个，默认空String
|
||
* @property {String=''} imgClassName 自定义image的className，可多个，默认空String
|
||
* @property {String='#fff'} background 自定义遮罩层背景色，默认#fff
|
||
* @property {Number=0.6} opacity 自定义遮罩层的透明度，默认0.6 <为0时无遮罩层>
|
||
* @property {String=''} text 自定义loading文本，默认空String<非空时参考offsetTop设置>
|
||
* @property {String=''} textCss 自定义loading文本样式，默认空String<高优先级>
|
||
* @property {String=''} textClassName 自定义文本的className，可多个，默认空String
|
||
* @property {String=''} title 自定义div、img、text的title，默认空String
|
||
* @property {Number=0} offsetTop 自定义图片+文本模式的top偏移量<text为空建议不设置offsetTop>
|
||
* @property {Number=0|String=''|null} imgSrc 自定义loading图片路径，默认为图片序列的0索引<0-10>，可配索引或图片url路径<为null时无图片>
|
||
* @property {Function=} beforeShow 自定义loading显示前的回调，默认空Function，参数1=this，参数2=jQuery
|
||
* @property {Function=} afterShow 自定义loading显示后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading
|
||
* @property {Number=19999999+1} imgZIndex 自定义图片的z-index值，默认19999999+1
|
||
* @property {Number=19999999} overlayZIndex 自定义遮罩层的z-index值，默认19999999
|
||
* @property {Function=} afterHide 自定义loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
|
||
* @property {Function=} afterHideAll 自定义全部loading隐藏/销毁后的回调，默认空Function，参数1=this，参数2=jQuery，参数3=$loading(销毁时无参数3)
|
||
* @property {Number=600} animateTime 自定义loading显示/隐藏的动画时长 <为0时无动画>，默认600
|
||
* @property {Boolean=false} clickHide 自定义单击loading遮罩层/图片/文字是否隐藏loading，默认false
|
||
* @property {Boolean=false} inheritRadius 自定义遮罩层是否继承父节点的边框效果，默认false
|
||
* @event hide,hideAll,destroy,destroyAll 均监听$(obj)的lay-loading(.hide | .hideAll | .destroy | .destroyAll)事件，参数event, loadingObj
|
||
* @return {Object|jQuery|Object<Array>} 返回<loading | loadingArr | jQuery | Error>对象
|
||
* @example
|
||
* $('body').loading(str?: string = 'show'); // 创建/显示loading <body,html,window,document均处理为body>
|
||
* $('body|other').loading({...}); // 注：更新全局配置 + show
|
||
* $('body|other').loading('show', {...}); // 创建/显示 + 局部配置优先
|
||
* var loadingObj = $('body|other').loading('hide').show(); // 隐藏 -> 显示
|
||
* var loadingObj = $('body|other').loading('show', {afterHide: function (loadingObj, jQueryObj, $loading) {...}});
|
||
*/
|
||
|
||
(() => {
|
||
'use strict';
|
||
goog.require('path');
|
||
goog.require('layui');
|
||
goog.provide('layui.loading');
|
||
const { loading } = layui;
|
||
loading.IMG_PATH = path.join(goog.basePath, '../ui/layui/extend/loading/images');
|
||
var _ = $.extend
|
||
, W = window // BOM/DOM
|
||
, fnName = {}
|
||
, lang = {Illegal_operation: '非法操作'} // 外部语言包模块
|
||
, _toString = Object.prototype.toString
|
||
, ds = { // 外部工具模块
|
||
getTime: function (arg) {
|
||
return arg ? (+ new Date(arg)) : (+ new Date());
|
||
},
|
||
|
||
is: {
|
||
string: function (str) {
|
||
return _toString.call(str) == '[object String]';
|
||
},
|
||
number: function (num) {
|
||
return _toString.call(num) == '[object Number]';
|
||
},
|
||
plainObject: function (obj) {
|
||
if (obj === undefined) {
|
||
return false;
|
||
} else {
|
||
return _toString.call(obj) === '[object Object]';
|
||
}
|
||
},
|
||
'undefined': function (v) {
|
||
return v === undefined || v === null;
|
||
},
|
||
'function': function (fun) {
|
||
return _toString.call(fun) === '[object Function]';
|
||
}
|
||
},
|
||
|
||
loadImage: function (url, callback, error) {
|
||
if (!url) {
|
||
return callback({src: url});
|
||
}
|
||
|
||
var imgObj;
|
||
|
||
imgObj = new Image();
|
||
imgObj.src = url;
|
||
|
||
if (imgObj.complete && callback) {
|
||
return callback(imgObj);
|
||
}
|
||
|
||
imgObj.onload = function () {
|
||
imgObj.onload = null;
|
||
callback && callback(imgObj);
|
||
};
|
||
|
||
imgObj.onerror = function (e) {
|
||
imgObj.onerror = null;
|
||
error && error(e);
|
||
};
|
||
|
||
return imgObj;
|
||
}
|
||
};
|
||
|
||
_($.fn, {
|
||
loading: function () {
|
||
var nodeNames = 'BODY,HTML,#document,undefined'
|
||
, $that = !this[0] || nodeNames.indexOf(this[0].nodeName) > -1 ? $('body') : this // 多集合仅保留body对象
|
||
, isBODY = $that[0].nodeName == 'BODY'
|
||
, arg1 = arguments[0], arg2 = arguments[1]
|
||
, loadingClassName = 'lay-loading' // 注：hideAll等操作的索引，若冲突请自行改之
|
||
, eventNameResize = 'resize.' + loadingClassName
|
||
, eventNameClick = 'click.'+ loadingClassName +'.clickHide'
|
||
, zIndex = 19999999
|
||
, errorFn = function () {
|
||
throw new Error(lang.Illegal_operation);
|
||
}
|
||
, imgUrl = layui.loading.IMG_PATH + '/loading/loading'
|
||
, imgSrcArr = [
|
||
imgUrl + '.gif',
|
||
imgUrl + '-bars.gif'
|
||
].concat(function () { for (var arr = [], i = 0; i <= 8; i++) { arr.push(imgUrl + '-' + i + '.gif'); }; return arr; }())
|
||
, pteMethods = {
|
||
resize: function () {
|
||
if (!this || !this instanceof $) return;
|
||
|
||
var offsetTop = this.settings && (this.settings.offsetTop || 0);
|
||
var $objs = this.$this.children('.' + loadingClassName + ':visible');
|
||
var hasImgSrc = !ds.is['undefined'](this.settings.imgSrc);
|
||
var imageH = 0, $parent = {}, parentW = 0, parentH = 0, isFixed, offsetP, safariBug, parentPosition;
|
||
var isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent); // !document.documentMode;
|
||
|
||
$objs.each(function (key, divAndimg) {
|
||
$parent = $(divAndimg).parent();
|
||
parentPosition = ('fixed,relative').indexOf($parent.css('position'));
|
||
isFixed = parentPosition > -1 || $parent[0] === $(this)[0].offsetParent;
|
||
safariBug = parentPosition < 0 && $parent[0].offsetParent !== $('body')[0] && isSafari;
|
||
// console.log(parentPosition); // -1 -1
|
||
// console.log($parent[0]); // YS-in YS-in
|
||
// console.log($(this)[0].offsetParent); // body YS-in
|
||
// console.log($parent[0].offsetParent); // body YS-out
|
||
offsetP = isFixed || safariBug ? { top: 0, left: 0 } : { top: $parent[0].offsetTop, left: $parent[0].offsetLeft };
|
||
parentW = $parent.outerWidth();
|
||
parentH = $parent.outerHeight();
|
||
|
||
if ($parent[0].nodeName == 'BODY') {
|
||
if ($(divAndimg).is('div')) {
|
||
$(divAndimg).css({
|
||
width: '100%',
|
||
height: '100%',
|
||
position: 'fixed'
|
||
});
|
||
} else if ($(divAndimg).is('img')) {
|
||
imageH = $(divAndimg).height();
|
||
$(divAndimg).css({
|
||
position: 'fixed',
|
||
top: $(W).height() / 2 - $(divAndimg).height() / 2 - offsetTop,
|
||
left: $(W).width() / 2 - $(divAndimg).width() / 2
|
||
});
|
||
} else {
|
||
$(divAndimg).css({
|
||
position: 'fixed',
|
||
top: $(W).height() / 2 + (imageH ? 6 : ( - $(divAndimg).height() / 2)) + imageH / 2 - offsetTop,
|
||
left: $(W).width() / 2 - $(divAndimg).width() / 2
|
||
});
|
||
}
|
||
} else {
|
||
if ($(divAndimg).is('div')) {
|
||
$(divAndimg).css({
|
||
// width: parentW,
|
||
// height: parentH,
|
||
width: '100%',
|
||
height: '100%',
|
||
top: offsetP.top,
|
||
left: offsetP.left
|
||
});
|
||
} else if ($(divAndimg).is('img')) {
|
||
imageH = $(divAndimg).height();
|
||
$(divAndimg).css({
|
||
top: parentH / 2 - $(divAndimg).height() / 2 + offsetP.top - offsetTop,
|
||
left: parentW / 2 - $(divAndimg).width() / 2 + offsetP.left
|
||
});
|
||
} else {
|
||
imageH = hasImgSrc ? imageH : 0;
|
||
$(divAndimg).css({
|
||
top: parentH / 2 + imageH / 2 + (imageH ? 6 : ( - $(divAndimg).height() / 2)) + offsetP.top - offsetTop,
|
||
left: parentW / 2 - $(divAndimg).width() / 2 + offsetP.left
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
return this;
|
||
},
|
||
|
||
subsequent: function () {
|
||
var $loading = arguments[0];
|
||
var that = $loading.parent().data('loading') || this;
|
||
var time = that.settings.animateTime;
|
||
var $this = that.$this;
|
||
var fn = that.settings[arguments[1]]
|
||
var operate = arguments[2];
|
||
var method = arguments[3];
|
||
var isAuto = arguments[4];
|
||
|
||
if (arguments[1] === 'afterHideAll') {
|
||
fn = fnName.settings.afterHideAll;
|
||
}
|
||
|
||
$loading.fadeOut(time, function () {
|
||
$(this)[operate]();
|
||
});
|
||
|
||
W.setTimeout(function () {
|
||
!isAuto && fn && fn(that, $this, operate == 'hide' ? $loading : undefined);
|
||
!isAuto && $this.trigger(loadingClassName + '.' + method, that);
|
||
}, time);
|
||
|
||
return that;
|
||
}
|
||
};
|
||
|
||
fnName.settings = fnName.settings || {
|
||
'overlayClassName': '',
|
||
'imgClassName': '',
|
||
'background': '#fff',
|
||
'opacity': 0.6,
|
||
'text': '',
|
||
'textCss': '', // {}
|
||
'textClassName': '',
|
||
'title': '',
|
||
'offsetTop': 0, // img&text的top偏移量
|
||
'imgSrc': imgSrcArr[0], // 注：默认以图片居中为主，若img&text同时微调可设置offsetTop
|
||
'beforeShow': function () {},
|
||
'afterShow': function () {},
|
||
'imgZIndex': zIndex + 1, // text共用
|
||
'overlayZIndex': zIndex,
|
||
'afterHide': function () {},
|
||
'afterHideAll': function () {},
|
||
'animateTime': 600,
|
||
'clickHide': !1, //可配置afterHide为reload需求
|
||
'inheritRadius': false
|
||
}
|
||
|
||
var initialCss = {
|
||
'top': -zIndex,
|
||
'left': -zIndex,
|
||
'z-index': 0,
|
||
'position': 'absolute',
|
||
'padding': 'initial',
|
||
'margin': 'initial',
|
||
'border': 'initial',
|
||
'width': 'initial',
|
||
'min-width': 'initial',
|
||
'max-width': 'initial',
|
||
'height': 'initial',
|
||
'min-height': 'initial',
|
||
'max-height': 'initial',
|
||
'opacity': 'initial'
|
||
}
|
||
, overlayStyle = {
|
||
'background': '#fff',
|
||
'height': 0, // resize value
|
||
'width': 0, // resize value
|
||
'top': 0, // resize value <html除外, 子标签在body内>
|
||
'left': 0, // resize value <html除外, 子标签在body内>
|
||
'z-index': 0,
|
||
'opacity': 0,
|
||
'position': 'absolute',
|
||
'border': '1px solid transparent',
|
||
'border-radius': 0,
|
||
'padding': 'initial',
|
||
'margin': 'initial',
|
||
'border': 'initial'
|
||
}
|
||
, imageStyle = _({}, initialCss)
|
||
, textStyle = _({}, initialCss, {
|
||
'background': 'initial',
|
||
'overflow': 'initial',
|
||
'white-space': 'nowrap',
|
||
'line-height': '120%',
|
||
'text-align': 'center',
|
||
'vertical-align': 'middle'
|
||
});
|
||
|
||
function Class(options) {
|
||
if (options && options.imgSrc !== null && ds.is.number(options.imgSrc)) {
|
||
options.imgSrc = imgSrcArr[options.imgSrc]; // undefined时$.extend不覆盖默认配置
|
||
}
|
||
|
||
this.hasNewSetting = ds.is.plainObject(options);
|
||
this.$this = options.$this;
|
||
this.settings = _({}, fnName.settings, this.hasNewSetting ? options : {});
|
||
this.settings.overlayStyle = overlayStyle;
|
||
this.settings.imageStyle = imageStyle;
|
||
this.settings.textStyle = textStyle;
|
||
}
|
||
|
||
_(Class.prototype, {
|
||
show: function () {
|
||
var _this = this;
|
||
var $this = this.$this;
|
||
var settings = this.settings;
|
||
var beforeShow = settings.beforeShow;
|
||
var overlayStyle = settings.overlayStyle;
|
||
var imageStyle = settings.imageStyle;
|
||
var textStyle = settings.textStyle;
|
||
var textCss = settings.textCss || {};
|
||
var $loadingObjSingle = $this.children('.' + loadingClassName);
|
||
var hasImgSrc = !ds.is['undefined'](settings.imgSrc);
|
||
|
||
beforeShow && beforeShow(this, $this);
|
||
|
||
if (!this.hasNewSetting && $loadingObjSingle.size() > 0) {
|
||
pteMethods.subsequent.apply(this, [
|
||
$loadingObjSingle,
|
||
'afterShow',
|
||
'show',
|
||
'show'
|
||
]);
|
||
|
||
$(W).trigger(eventNameResize);
|
||
} else {
|
||
this.destroy('auto'), ds.loadImage(hasImgSrc ? settings.imgSrc : null, function (imgObj) {
|
||
// create时不考虑动画
|
||
var $overlay = $('<div></div>');
|
||
var $image = $('<img />');
|
||
var $text = $('<span></span>');
|
||
var text = $.trim(settings.text);
|
||
var overlayW = isBODY ? window.screen.availWidth : $this.outerWidth();
|
||
var overlayH = isBODY ? window.screen.availHeight : $this.outerHeight();
|
||
|
||
overlayStyle['background'] = settings['background'];
|
||
overlayStyle['z-index'] = settings['overlayZIndex'];
|
||
overlayStyle['opacity'] = settings['opacity'];
|
||
overlayStyle['height'] = overlayH;
|
||
overlayStyle['width'] = overlayW;
|
||
if (settings.inheritRadius) {
|
||
// For IE
|
||
overlayStyle['border-top-left-radius'] = $this.css('border-top-left-radius');
|
||
overlayStyle['border-top-right-radius'] = $this.css('border-top-right-radius');
|
||
overlayStyle['border-bottom-left-radius'] = $this.css('border-bottom-left-radius');
|
||
overlayStyle['border-bottom-right-radius'] = $this.css('border-bottom-right-radius');
|
||
}
|
||
imageStyle['z-index'] = settings['imgZIndex'];
|
||
textStyle['z-index'] = settings['imgZIndex'];
|
||
|
||
$overlay
|
||
.addClass(loadingClassName)
|
||
.addClass(settings.overlayClassName)
|
||
.css(overlayStyle)
|
||
.attr('title', settings.title)
|
||
.appendTo($this).hide();
|
||
|
||
imgObj.src && $image
|
||
.addClass(loadingClassName)
|
||
.addClass(settings.imgClassName)
|
||
.css(imageStyle)
|
||
.attr('src', imgObj.src)
|
||
.attr('title', settings.title)
|
||
.appendTo($this).hide();
|
||
|
||
$text
|
||
.addClass(loadingClassName)
|
||
.addClass(settings.textClassName)
|
||
.css(_({}, textStyle, textCss))
|
||
.html(text)
|
||
.attr('title', settings.title)
|
||
.appendTo($this).hide();
|
||
|
||
setTimeout(function () {
|
||
$overlay[!settings['opacity'] ? 'remove' : 'show']();
|
||
$image[!hasImgSrc ? 'remove' : 'show']();
|
||
$text[!text.length ? 'remove' : 'show']();
|
||
$(W).trigger(eventNameResize);
|
||
settings.afterShow && settings.afterShow(_this, $this);
|
||
$this.trigger(loadingClassName + '.' + 'show', _this);
|
||
}, 0.1e3);
|
||
}, function (e) {
|
||
throw new Error(e);
|
||
});
|
||
}
|
||
|
||
return {
|
||
hide: errorFn,
|
||
hideAll: errorFn,
|
||
destroy: errorFn,
|
||
destroyAll: errorFn
|
||
};
|
||
},
|
||
|
||
toggle: function () {
|
||
if (this.$this.children('.' + loadingClassName + ':visible').size() > 0) {
|
||
return this.hide();
|
||
} else {
|
||
return this.show();
|
||
}
|
||
},
|
||
|
||
hide: function () {
|
||
return pteMethods.subsequent.apply(this, [
|
||
this.$this.children('.' + loadingClassName),
|
||
'afterHide',
|
||
'hide',
|
||
'hide'
|
||
]);
|
||
},
|
||
|
||
hideAll: function () {
|
||
return pteMethods.subsequent.apply(this, [
|
||
$('.' + loadingClassName),
|
||
'afterHideAll',
|
||
'hide',
|
||
'hideAll'
|
||
]);
|
||
},
|
||
|
||
// <传入新配置/销毁后> 新建将启用最新全局配置
|
||
destroy: function (isAuto) {
|
||
return pteMethods.subsequent.apply(this, [
|
||
this.$this.children('.' + loadingClassName),
|
||
'afterHide',
|
||
'remove',
|
||
'destroy',
|
||
isAuto
|
||
]);
|
||
},
|
||
|
||
destroyAll: function () {
|
||
return pteMethods.subsequent.apply(this, [
|
||
$('.' + loadingClassName),
|
||
'afterHideAll',
|
||
'remove',
|
||
'destroyAll'
|
||
]);
|
||
}
|
||
});
|
||
|
||
// 一个{}参数：更新全局配置&show <兼容IE8>
|
||
if (ds.is.plainObject(arg1)) {
|
||
if (arg1.imgSrc) {
|
||
arg1.imgSrc = imgSrcArr[arg1.imgSrc];
|
||
}
|
||
|
||
return $that.loading('show', _(fnName.settings, arg1));
|
||
}
|
||
|
||
// arg1为string默认调用方法 & arg2默认为局部配置
|
||
if (ds.is.string(arg1) || !arg1) {
|
||
var loading = {}, loadingArr = [], rdm;
|
||
|
||
arg1 = arg1 ? arg1 : 'show';
|
||
|
||
$that.each(function (index, obj) {
|
||
if (arg2) {
|
||
arg2.$this = $(obj);
|
||
|
||
if (arg2.afterHideAll) {
|
||
fnName.settings.afterHideAll = arg2.afterHideAll;
|
||
}
|
||
} else {
|
||
arg2 = {$this: $(obj)};
|
||
}
|
||
|
||
rdm = '.rdm' + ds.getTime() + index;
|
||
loading = new Class(arg2);
|
||
$(obj).data('loading', loading);
|
||
ds.is['function'](loading[arg1]) && loading[arg1]();
|
||
loadingArr.push(loading);
|
||
|
||
// 单击div/img/text是否隐藏
|
||
$(obj).off(eventNameClick).on(eventNameClick, '.' + loadingClassName, function (e) {
|
||
loading.settings.clickHide && $(obj).data('loading').hide();
|
||
e.stopPropagation();
|
||
return false;
|
||
});
|
||
|
||
// resize监听
|
||
$(W).off(eventNameResize + rdm).on(eventNameResize + rdm, function () {
|
||
pteMethods.resize.call($(obj).data('loading') || null);
|
||
});
|
||
});
|
||
}
|
||
|
||
return loadingArr.length > 1 ? loadingArr : loadingArr[0];
|
||
}
|
||
});
|
||
|
||
return $;
|
||
})(); |