205 lines
6.1 KiB
JavaScript
205 lines
6.1 KiB
JavaScript
/*
|
|
var loader = new widgets.Loader({ message: "loading: New loading message..." });
|
|
-----
|
|
var loader = new widgets.Loader({
|
|
id: "loader",
|
|
bars: 12,
|
|
radius: 20,
|
|
lineWidth: 3,
|
|
lineHeight: 10
|
|
});
|
|
loader.stop();
|
|
|
|
loader.message("loading: New loading message...");
|
|
|
|
*/
|
|
|
|
if (typeof(widgets) === "undefined") widgets = {};
|
|
|
|
(function(root) {
|
|
|
|
var PI = Math.PI;
|
|
var defaultConfig = {
|
|
id: "loader",
|
|
bars: 12,
|
|
radius: 0,
|
|
lineWidth: 20,
|
|
lineHeight: 70
|
|
};
|
|
|
|
var getWindowSize = function() {
|
|
if (window.innerWidth && window.innerHeight) {
|
|
var width = window.innerWidth;
|
|
var height = window.innerHeight;
|
|
} else if (document.body && document.body.offsetWidth) {
|
|
var width = window.innerWidth = document.body.offsetWidth;
|
|
var height = window.innerHeight = document.body.offsetHeight;
|
|
} else if (document.compatMode === 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
|
|
var width = window.innerWidth = document.documentElement.offsetWidth;
|
|
var height = window.innerHeight = document.documentElement.offsetHeight;
|
|
}
|
|
return {
|
|
width: width,
|
|
height: height
|
|
};
|
|
};
|
|
|
|
root.Loader = function (config) {
|
|
var that = this;
|
|
if (!document.body) return;
|
|
if (!config) config = {};
|
|
for (var key in defaultConfig) {
|
|
if (typeof(config[key]) === "undefined") {
|
|
config[key] = defaultConfig[key];
|
|
}
|
|
}
|
|
//
|
|
var canvas = document.getElementById(config.id);
|
|
if (!canvas) {
|
|
var div = document.createElement("div");
|
|
div.style.cssText = "color: #fff; pointer-events: none; -webkit-transition-property: opacity; -webkit-transition-duration: .5s; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; background: rgba(0,0,0,0.5); opacity: 1";
|
|
if (config.message) {
|
|
var span = document.createElement("span");
|
|
span.style.cssText = "font-family: courier; opacity: 1; display: inline-block;background: rgba(0,0,0,0.65); border-radius: 10px; padding: 10px; width: 200px; text-align: center; position: absolute; z-index: 1000;";
|
|
div.appendChild(span);
|
|
that.span = span;
|
|
}
|
|
var canvas = document.createElement("canvas");
|
|
document.body.appendChild(canvas);
|
|
canvas.id = config.id;
|
|
canvas.style.cssText = "opacity: 1; position: absolute; z-index: 1000;";
|
|
div.appendChild(canvas);
|
|
document.body.appendChild(div);
|
|
} else {
|
|
that.span = canvas.parentNode.getElementsByTagName("span")[0];
|
|
}
|
|
//
|
|
var max = config.lineHeight + 20;
|
|
var size = max * 2 + config.radius;
|
|
var windowSize = getWindowSize();
|
|
var width = windowSize.width - size;
|
|
var height = windowSize.height - size;
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
canvas.style.left = (width / 2) + "px";
|
|
canvas.style.top = (height / 2) + "px";
|
|
if (config.message) {
|
|
that.span.style.left = ((width + size) / 2 - that.span.offsetWidth/2) + "px";
|
|
that.span.style.top = (height / 2 + size - 10) + "px";
|
|
}
|
|
var that = this;
|
|
var interval = 0;
|
|
var offset = 0;
|
|
var delay = config.delay;
|
|
var bars = config.bars;
|
|
var radius = config.radius;
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.globalCompositeOperation = "lighter";
|
|
ctx.shadowOffsetX = 1;
|
|
ctx.shadowOffsetY = 1;
|
|
ctx.shadowBlur = 1;
|
|
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
|
|
//
|
|
function animate() {
|
|
var windowSize = getWindowSize();
|
|
var width = windowSize.width - size;
|
|
var height = windowSize.height - size;
|
|
//
|
|
canvas.style.left = (width / 2) + "px";
|
|
canvas.style.top = (height / 2) + "px";
|
|
if (config.message) {
|
|
that.span.style.left = ((width + size) / 2 - that.span.offsetWidth/2) + "px";
|
|
that.span.style.top = (height / 2 + size - 10) + "px";
|
|
}
|
|
//
|
|
ctx.save();
|
|
ctx.clearRect(0, 0, size, size);
|
|
ctx.translate(size / 2, size / 2);
|
|
var hues = 360 - 360 / bars;
|
|
for (var i = 0; i < bars; i++) {
|
|
var angle = (i / bars * 2 * PI) + offset;
|
|
ctx.save();
|
|
ctx.translate(radius * Math.sin(-angle), radius * Math.cos(-angle));
|
|
ctx.rotate(angle);
|
|
// round-rect properties
|
|
var x = -config.lineWidth / 2;
|
|
var y = 0;
|
|
var width = config.lineWidth;
|
|
var height = config.lineHeight;
|
|
var curve = width / 2;
|
|
// round-rect path
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + curve, y);
|
|
ctx.lineTo(x + width - curve, y);
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + curve);
|
|
ctx.lineTo(x + width, y + height - curve);
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - curve, y + height);
|
|
ctx.lineTo(x + curve, y + height);
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - curve);
|
|
ctx.lineTo(x, y + curve);
|
|
ctx.quadraticCurveTo(x, y, x + curve, y);
|
|
// round-rect fill
|
|
var hue = ((i / (bars - 1)) * hues);
|
|
ctx.fillStyle = "hsla(" + hue + ", 100%, 50%, 0.85)";
|
|
ctx.fill();
|
|
ctx.restore();
|
|
}
|
|
ctx.restore();
|
|
offset += 0.07;
|
|
//
|
|
if (config.messageAnimate) {
|
|
var iteration = offset / 0.07 >> 0;
|
|
if (iteration % 10 === 0) {
|
|
var length = config.messageAnimate.length;
|
|
var n = iteration / 10 % length;
|
|
that.span.innerHTML = config.message + config.messageAnimate[n];
|
|
}
|
|
}
|
|
};
|
|
//
|
|
this.message = function(message) {
|
|
if (!interval) this.start();
|
|
config.message = message;
|
|
if (message.substr(-3) === "...") {
|
|
config.message = message.substr(0, message.length - 3);
|
|
config.messageAnimate = [ ". ",".. ","..." ].reverse();
|
|
} else {
|
|
config.messageAnimate = false;
|
|
}
|
|
that.span.innerHTML = config.message + (config.messageAnimate[0] || "");
|
|
};
|
|
//
|
|
this.stop = function () {
|
|
if (interval) {
|
|
window.clearInterval(interval);
|
|
interval = 0;
|
|
}
|
|
if (canvas && canvas.style) {
|
|
canvas.parentNode.style.opacity = 0;
|
|
window.setTimeout(function () {
|
|
canvas.parentNode.style.display = "none";
|
|
ctx.clearRect(0, 0, size, size);
|
|
}, 500);
|
|
}
|
|
};
|
|
//
|
|
this.start = function (max) {
|
|
if (interval) return;
|
|
canvas.parentNode.style.top = document.body.scrollTop + "px";
|
|
canvas.parentNode.style.opacity = 1;
|
|
canvas.parentNode.style.display = "block";
|
|
canvas.style.left = (width / 2) + "px";
|
|
canvas.style.top = (height / 2) + "px";
|
|
if (!config.delay) animate();
|
|
interval = window.setInterval(animate, 30);
|
|
if (config.message) {
|
|
this.message(config.message);
|
|
}
|
|
};
|
|
//
|
|
this.start(30 * 1000);
|
|
//
|
|
return this;
|
|
};
|
|
|
|
})(widgets); |