You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
5.0 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(function($, document) {
var CLASS_PROGRESSBAR = $.className('progressbar');
var CLASS_PROGRESSBAR_IN = $.className('progressbar-in');
var CLASS_PROGRESSBAR_OUT = $.className('progressbar-out');
var CLASS_PROGRESSBAR_INFINITE = $.className('progressbar-infinite');
var SELECTOR_PROGRESSBAR = $.classSelector('.progressbar');
var _findProgressbar = function(container) {
container = $(container || 'body');
if (container.length === 0) return;
container = container[0];
if (container.classList.contains(CLASS_PROGRESSBAR)) {
return container;
}
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR);
if (progressbars) {
for (var i = 0, len = progressbars.length; i < len; i++) {
var progressbar = progressbars[i];
if (progressbar.parentNode === container) {
return progressbar;
}
}
}
};
/**
* 创建并显示进度条
* @param {Object} container 可选默认body支持selector,DOM Node,mui wrapper
* @param {Object} progress 可选undefined表示循环数字表示具体进度
* @param {Object} color 可选,指定颜色样式(目前暂未提供实际样式,可暂时不暴露此参数)
*/
var showProgressbar = function(container, progress, color) {
if (typeof container === 'number') {
color = progress;
progress = container;
container = 'body';
}
container = $(container || 'body');
if (container.length === 0) return;
container = container[0];
var progressbar;
if (container.classList.contains(CLASS_PROGRESSBAR)) {
progressbar = container;
} else {
var progressbars = container.querySelectorAll(SELECTOR_PROGRESSBAR + ':not(.' + CLASS_PROGRESSBAR_OUT + ')');
if (progressbars) {
for (var i = 0, len = progressbars.length; i < len; i++) {
var _progressbar = progressbars[i];
if (_progressbar.parentNode === container) {
progressbar = _progressbar;
break;
}
}
}
if (!progressbar) {
progressbar = document.createElement('span');
progressbar.className = CLASS_PROGRESSBAR + ' ' + CLASS_PROGRESSBAR_IN + (typeof progress !== 'undefined' ? '' : (' ' + CLASS_PROGRESSBAR_INFINITE)) + (color ? (' ' + CLASS_PROGRESSBAR + '-' + color) : '');
if (typeof progress !== 'undefined') {
progressbar.innerHTML = '<span></span>';
}
container.appendChild(progressbar);
} else {
progressbar.classList.add(CLASS_PROGRESSBAR_IN);
}
}
if (progress) setProgressbar(container, progress);
return progressbar;
};
/**
* 关闭进度条
* @param {Object} container 可选默认body支持selector,DOM Node,mui wrapper
*/
var hideProgressbar = function(container) {
var progressbar = _findProgressbar(container);
if (!progressbar) {
return;
}
var classList = progressbar.classList;
if (!classList.contains(CLASS_PROGRESSBAR_IN) || classList.contains(CLASS_PROGRESSBAR_OUT)) {
return;
}
classList.remove(CLASS_PROGRESSBAR_IN);
classList.add(CLASS_PROGRESSBAR_OUT);
progressbar.addEventListener('webkitAnimationEnd', function() {
progressbar.parentNode && progressbar.parentNode.removeChild(progressbar);
progressbar = null;
});
return;
};
/**
* 设置指定进度条进度
* @param {Object} container 可选默认body支持selector,DOM Node,mui wrapper
* @param {Object} progress 可选默认0 取值范围[0-100]
* @param {Object} speed 进度条动画时间
*/
var setProgressbar = function(container, progress, speed) {
if (typeof container === 'number') {
speed = progress;
progress = container;
container = false;
}
var progressbar = _findProgressbar(container);
if (!progressbar || progressbar.classList.contains(CLASS_PROGRESSBAR_INFINITE)) {
return;
}
if (progress) progress = Math.min(Math.max(progress, 0), 100);
progressbar.offsetHeight;
var span = progressbar.querySelector('span');
if (span) {
var style = span.style;
style.webkitTransform = 'translate3d(' + (-100 + progress) + '%,0,0)';
if (typeof speed !== 'undefined') {
style.webkitTransitionDuration = speed + 'ms';
} else {
style.webkitTransitionDuration = '';
}
}
return progressbar;
};
$.fn.progressbar = function(options) {
var progressbarApis = [];
options = options || {};
this.each(function() {
var self = this;
var progressbarApi = self.mui_plugin_progressbar;
if (!progressbarApi) {
self.mui_plugin_progressbar = progressbarApi = {
options: options,
setOptions: function(options) {
this.options = options;
},
show: function() {
return showProgressbar(self, this.options.progress, this.options.color);
},
setProgress: function(progress) {
return setProgressbar(self, progress);
},
hide: function() {
return hideProgressbar(self);
}
};
} else if (options) {
progressbarApi.setOptions(options);
}
progressbarApis.push(progressbarApi);
});
return progressbarApis.length === 1 ? progressbarApis[0] : progressbarApis;
};
// $.setProgressbar = setProgressbar;
// $.showProgressbar = showProgressbar;
// $.hideProgressbar = hideProgressbar;
})(mui, document);