157 lines
5.0 KiB
JavaScript
157 lines
5.0 KiB
JavaScript
$(function() {
|
|
|
|
var $body = $('body'),
|
|
$div = $('<div>')
|
|
.css({
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background: 'rgb(240, 240, 240)',
|
|
opacity: 1,
|
|
zIndex: 1000
|
|
})
|
|
.appendTo($body),
|
|
css = {
|
|
position: 'absolute',
|
|
left: 0,
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
margin: 'auto',
|
|
MozUserSelect: 'none',
|
|
WebkitUserSelect: 'none'
|
|
},
|
|
file = 'js/ox.load.js',
|
|
path = $('script[src*=' + file + ']').attr('src').replace(file, ''),
|
|
userAgent,
|
|
userAgents = {
|
|
'Chrome': 'http://www.google.com/chrome/',
|
|
'Firefox': 'http://www.mozilla.org/firefox/',
|
|
'Internet Explorer': '',
|
|
'Opera': 'http://www.opera.com/',
|
|
'Safari': 'http://www.apple.com/safari/'
|
|
};
|
|
|
|
userAgent = getUserAgent();
|
|
userAgents[userAgent] ? start() : stop();
|
|
|
|
function getUserAgent() {
|
|
var userAgent = '';
|
|
$.each(userAgents, function(name, link) {
|
|
if (navigator.userAgent.indexOf(name) > -1) {
|
|
userAgent = name;
|
|
return false;
|
|
}
|
|
if (!userAgent && navigator.userAgent.indexOf('Gecko') > -1)
|
|
userAgent = 'Firefox';
|
|
});
|
|
return userAgent;
|
|
}
|
|
|
|
function start() {
|
|
var image = new Image(),
|
|
src = path + 'png/ox.ui.classic/loading.png';
|
|
image.src = src;
|
|
image.onload = function() {
|
|
var $img = $('<img>')
|
|
.attr({
|
|
src: src
|
|
})
|
|
.css($.extend(css, {
|
|
width: '32px',
|
|
height: '32px'
|
|
}))
|
|
.mousedown(function(e) {
|
|
e.preventDefault();
|
|
})
|
|
.appendTo($div),
|
|
deg = 0,
|
|
interval = setInterval(function() {
|
|
deg = (deg + 30) % 360;
|
|
$img.css({
|
|
MozTransform: 'rotate(' + deg + 'deg)',
|
|
WebkitTransform: 'rotate(' + deg + 'deg)',
|
|
});
|
|
}, 83);
|
|
};
|
|
}
|
|
|
|
function stop() {
|
|
var counter = 0,
|
|
length = 0,
|
|
src = {};
|
|
$.each(userAgents, function(name, link) {
|
|
if (link) {
|
|
length++;
|
|
}
|
|
});
|
|
$.each(userAgents, function(name, link) {
|
|
var image;
|
|
if (link) {
|
|
image = new Image();
|
|
src[name] = path + 'png/ox.ui/browser' + name + '128.png';
|
|
image.src = src[name];
|
|
image.onload = function() {
|
|
if (++counter == length) {
|
|
loaded();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
function loaded() {
|
|
var $div_ = $('<div>')
|
|
.css($.extend(css, {
|
|
width: (length * 72) + 'px',
|
|
height: '72px'
|
|
})),
|
|
i = 0;
|
|
$.each(src, function(name, src) {
|
|
$('<a>')
|
|
.attr({
|
|
href: userAgents[name],
|
|
title: name
|
|
})
|
|
.css({
|
|
position: 'absolute',
|
|
left: (i++ * 72) + 'px',
|
|
width: '72px',
|
|
height: '72px',
|
|
})
|
|
.append(
|
|
$('<img>')
|
|
.attr({
|
|
src: src
|
|
})
|
|
.css($.extend(css, {
|
|
width: '64px',
|
|
height: '64px',
|
|
border: 0,
|
|
cursor: 'pointer'
|
|
}))
|
|
.mousedown(function(e) {
|
|
e.preventDefault();
|
|
})
|
|
.mouseenter(function() {
|
|
$(this).animate({
|
|
width: '72px',
|
|
height: '72px',
|
|
}, 250);
|
|
})
|
|
.mouseleave(function() {
|
|
$(this).animate({
|
|
width: '64px',
|
|
height: '64px',
|
|
}, 250);
|
|
})
|
|
)
|
|
.appendTo($div_);
|
|
});
|
|
$div_.appendTo($div);
|
|
//throw new Error('User Agent not supported.');
|
|
}
|
|
}
|
|
|
|
});
|