let tpl = '{svg}
',
loading = '.dcat-loading',
LOADING_SVG = [
'',
];
class Loading {
constructor(Dcat, options) {
options = $.extend({
container: Dcat.config.pjax_container_selector,
zIndex: 100,
width: '52px',
color: Dcat.color.dark60,
background: '#fff',
style: '',
svg: LOADING_SVG[0]
}, options);
let _this = this,
defStyle = 'position:absolute;',
content;
_this.$container = $(options.container);
content = $(
tpl
.replace('{svg}', options.svg)
.replace('{color}', options.color)
.replace('{color}', options.color)
.replace('{width}', options.width)
.replace('{style}', `${defStyle}background:${options.background};z-index:${options.zIndex};${options.style}`)
);
content.appendTo(_this.$container);
}
destroy() {
this.$container.find(loading).remove();
}
}
function destroyAll() {
$(loading).remove();
}
function extend(Dcat) {
// 全屏居中loading
Dcat.loading = function (options) {
if (options === false) {
// 关闭loading
return setTimeout(destroyAll, 70);
}
// 配置参数
options = $.extend({
zIndex: 999991014,
width: '58px',
shade: 'rgba(255, 255, 255, 0.1)',
background: 'transparent',
top: 200,
svg: LOADING_SVG[0],
}, options);
var win = $(window),
// 容器
$container = $(''),
// 遮罩层直接沿用layer
shadow = $('');
$container.appendTo('body');
if (options.shade) {
shadow.appendTo('body');
}
function resize() {
$container.css({
left: (win.width() - 300)/2,
top: (win.height() - options.top)/2
});
}
// 自适应窗口大小
win.on('resize', resize);
resize();
$container.loading(options);
};
// 给元素附加加载状态
$.fn.loading = function (opt) {
if (opt === false) {
return $(this).find(loading).remove();
}
opt = opt || {};
opt.container = $(this);
return new Loading(Dcat, opt);
};
// 按钮加载状态
$.fn.buttonLoading = function (start) {
let $this = $(this),
loadingId = $this.attr('data-loading'),
content;
if (start === false) {
if (! loadingId) {
return $this;
}
$this.find('.waves-ripple').remove();
return $this
.removeClass('disabled btn-loading waves-effect')
.removeAttr('disabled')
.removeAttr('data-loading')
.html(
$this.find('.' + loadingId).html()
);
}
if (loadingId) {
return $this;
}
content = $this.html();
loadingId = 'ld-'+Dcat.helpers.random();
let loading = ``;
let btnClass = ['btn', 'layui-layer-btn0', 'layui-layer-btn1'];
for (let i in btnClass) {
if ($this.hasClass(btnClass[i])) {
loading = LOADING_SVG[0].replace('{color}', 'currentColor').replace('{width}', '50px;height:11px;');
}
}
return $this
.addClass('disabled btn-loading')
.attr('disabled', true)
.attr('data-loading', loadingId)
.html(`
${content}
${loading}
`);
}
}
export default extend