updates for loader
This commit is contained in:
rolux
parent
7430ef1023
commit
cda03f71e9
2 changed files with 233 additions and 192 deletions
|
|
@ -7,8 +7,6 @@ Ox.UI(function() {
|
|||
console.log('running Ox.UI()')
|
||||
//console.log('Ox =', Ox)
|
||||
|
||||
Ox.UI.ready(function() {
|
||||
|
||||
Ox.theme('modern');
|
||||
|
||||
//Ox.print('$$$$', Ox.Calendar)
|
||||
|
|
@ -142,5 +140,3 @@ Ox.UI(function() {
|
|||
}).appendTo(Ox.UI.$body);
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -6,7 +6,7 @@ OxUI Loader
|
|||
Provides function Ox.UI([options], callback) that fires when
|
||||
OxUI.css, Ox.js und jquery.js have loaded
|
||||
all images have loaded
|
||||
the DOM is ready
|
||||
the document is ready
|
||||
*/
|
||||
|
||||
(function() {
|
||||
|
|
@ -15,19 +15,18 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
path = Array.prototype.slice.apply(
|
||||
document.getElementsByTagName('script')
|
||||
).filter(function(element) {
|
||||
return /OxUI\.js$/(element.src);
|
||||
return /OxUI\.js$/.test(element.src);
|
||||
})[0].src.replace('js/OxUI.js', ''),
|
||||
head = document.getElementsByTagName('head')[0],
|
||||
oxUICallback = function() {},
|
||||
oxUIFunction = function(options, callback) {
|
||||
var defaults = {
|
||||
// 'classic', 'modern', 'verbose' or anything falsy
|
||||
oxUIDefaults = {
|
||||
// 'classic', 'modern', 'console' or 'none'
|
||||
display: 'classic'
|
||||
};
|
||||
oxUICallback = arguments.length == 2 ? callback : options;
|
||||
oxUIOptions = arguments.length == 2 && options ? options : {};
|
||||
},
|
||||
oxUIOptions = {},
|
||||
oxUIFunction = function(options, callback) {
|
||||
oxUICallback = arguments.length == 2 ? callback : options;
|
||||
oxUIOptions = arguments.length == 2 && options ? options : oxUIDefaults;
|
||||
},
|
||||
documentReady = false,
|
||||
documentReadyCallbacks = [];
|
||||
|
||||
|
|
@ -78,7 +77,7 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
});
|
||||
|
||||
function isFileType(src, type) {
|
||||
return new RegExp('\.' + type + '$')(src);
|
||||
return new RegExp('\.' + type + '$').test(src);
|
||||
}
|
||||
|
||||
function isIncluded(src) {
|
||||
|
|
@ -95,8 +94,9 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
function waitForDocument() {
|
||||
document.addEventListener('DOMContentLoaded', onload, false);
|
||||
function onload() {
|
||||
console.log('DOMContentLoaded')
|
||||
console.log('document ready')
|
||||
document.removeEventListener('DOMContentLoaded', onload, false);
|
||||
documentReady = true;
|
||||
bootOxUI();
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +111,18 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
|
||||
function bootOxUI() {
|
||||
|
||||
var body = element('body'),
|
||||
// runs when the document is ready
|
||||
|
||||
var body, css, div,
|
||||
options = oxUIOptions || oxUIDefaults,
|
||||
userAgents = [
|
||||
{name: 'Chrome', url: 'http://www.google.com/chrome/'},
|
||||
{name: 'Firefox', url: 'http://www.mozilla.org/firefox/'},
|
||||
{name: 'Safari', url: 'http://www.apple.com/safari/'}
|
||||
];
|
||||
|
||||
if (options.display != 'none') {
|
||||
body = element('body');
|
||||
css = {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
|
|
@ -121,7 +132,7 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
margin: 'auto',
|
||||
MozUserSelect: 'none',
|
||||
WebkitUserSelect: 'none'
|
||||
},
|
||||
};
|
||||
div = element('<div>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
|
|
@ -129,16 +140,17 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background: 'rgb(240, 240, 240)',
|
||||
background: 'rgb(' + (
|
||||
options.display == 'classic' ? '240, 240, 240' : '16, 16, 16')
|
||||
+ ')',
|
||||
color: 'rgb(240, 240, 240)',
|
||||
opacity: 1,
|
||||
zIndex: 1000
|
||||
})
|
||||
.appendTo(body),
|
||||
userAgents = [
|
||||
{name: 'Chrome', url: 'http://www.google.com/chrome/'},
|
||||
{name: 'Firefox', url: 'http://www.mozilla.org/firefox/'},
|
||||
{name: 'Safari', url: 'http://www.apple.com/safari/'}
|
||||
];
|
||||
.appendTo(body);
|
||||
}
|
||||
|
||||
console.log('userAgent', getUserAgent())
|
||||
|
||||
getUserAgent() ? start() : stop();
|
||||
|
||||
|
|
@ -152,7 +164,6 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
return userAgent;
|
||||
}
|
||||
|
||||
|
||||
function element(str) {
|
||||
// Generic HTML Element Object (mimics jQuery)
|
||||
return {
|
||||
|
|
@ -195,12 +206,13 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
}
|
||||
|
||||
function start() {
|
||||
console.log('start')
|
||||
var image = new Image(),
|
||||
src = path + 'svg/ox.ui.classic/symbolLoading.svg';
|
||||
image.onload = function() {
|
||||
element('<img>')
|
||||
.attr({
|
||||
src: src
|
||||
src: src,
|
||||
})
|
||||
.css(css)
|
||||
.css({
|
||||
|
|
@ -216,24 +228,44 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
}
|
||||
|
||||
function stop() {
|
||||
var counter = 0;
|
||||
console.log('stop')
|
||||
var counter = 0,
|
||||
message = 'Browser not supported, use ' + userAgents.map(function(userAgent, i) {
|
||||
return userAgent.name + (
|
||||
i == userAgent.length - 1 ? '.' :
|
||||
i == userAgent.length - 2 ? ' or' : ','
|
||||
);
|
||||
}).join(' ');
|
||||
if (options.display == 'none') {
|
||||
throw new Error(message);
|
||||
} else {
|
||||
div.addClass('error');
|
||||
if (options.display == 'console') {
|
||||
element('<div>').html(message).appendTo(body);
|
||||
} else {
|
||||
userAgents.forEach(function(userAgent) {
|
||||
var image = new Image();
|
||||
userAgent.src = path + 'png/ox.ui/browser' + userAgent.name + '128.png';
|
||||
image.onload = function() {
|
||||
++counter == userAgents.length && loaded();
|
||||
++counter == userAgents.length && showImages();
|
||||
}
|
||||
image.src = userAgent.src;
|
||||
});
|
||||
function loaded() {
|
||||
}
|
||||
}
|
||||
function showImages() {
|
||||
var box = element('<div>')
|
||||
.css(css)
|
||||
.css({
|
||||
width: (userAgents.length * 72) + 'px',
|
||||
height: '72px'
|
||||
})
|
||||
.appendTo(div);
|
||||
userAgents.forEach(function(userAgent, i) {
|
||||
var link = element('<a>')
|
||||
.attr({
|
||||
href: userAgents[name],
|
||||
title: name
|
||||
href: userAgent.url,
|
||||
title: userAgent.name
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
|
|
@ -243,6 +275,9 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
})
|
||||
.appendTo(box);
|
||||
element('<img>')
|
||||
.attr({
|
||||
src: userAgent.src
|
||||
})
|
||||
.css(css)
|
||||
.css({
|
||||
width: '64px',
|
||||
|
|
@ -262,19 +297,15 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
|
||||
function loadOxUI() {
|
||||
|
||||
Ox.UI = {};
|
||||
Ox.UI.ready = function(callback) {
|
||||
if (!documentReady) {
|
||||
documentReadyCallbacks.push(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
// runs when css and js files have loaded
|
||||
|
||||
documentReady && initDocument();
|
||||
|
||||
$.getJSON(path + 'json/OxUI.json', function(data) {
|
||||
|
||||
var $head = $('head'),
|
||||
promises = [waitForDocument()];
|
||||
promises = documentReady ? [] : [waitForDocument()];
|
||||
|
||||
// fixme: find a better way to not wait for flags
|
||||
data = data.filter(function(image) {
|
||||
return !Ox.startsWith(image, 'svg/ox.map/');
|
||||
|
|
@ -284,14 +315,17 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
});
|
||||
$.when.apply(null, promises)
|
||||
.then(function() {
|
||||
var $div = Ox.UI.$body.find('div');
|
||||
Ox.UI.$body.find('img').remove();
|
||||
var $div, error = $('.error').length;
|
||||
if (!error) {
|
||||
$div = $('div');
|
||||
$('img').remove();
|
||||
$div.animate({
|
||||
opacity: 0
|
||||
}, 1000, function() {
|
||||
$div.remove();
|
||||
});
|
||||
oxUICallback();
|
||||
}
|
||||
})
|
||||
.fail(function() {
|
||||
throw new Error('File not found.');
|
||||
|
|
@ -316,14 +350,8 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
function waitForDocument() {
|
||||
var dfd = new $.Deferred();
|
||||
$(function() {
|
||||
Ox.UI.$body = $('body');
|
||||
Ox.UI.$document = $(document);
|
||||
Ox.UI.$head = $('head');
|
||||
Ox.UI.$window = $(window);
|
||||
documentReady = true;
|
||||
documentReadyCallbacks.forEach(function(callback) {
|
||||
callback();
|
||||
});
|
||||
initDocument()
|
||||
dfd.resolve();
|
||||
});
|
||||
return dfd.promise();
|
||||
|
|
@ -331,6 +359,23 @@ Provides function Ox.UI([options], callback) that fires when
|
|||
|
||||
});
|
||||
|
||||
function initDocument() {
|
||||
Ox.UI.$body = $('body');
|
||||
Ox.UI.$document = $(document);
|
||||
Ox.UI.$head = $('head');
|
||||
Ox.UI.$window = $(window);
|
||||
documentReadyCallbacks.forEach(function(callback) {
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
Ox.UI.ready = function(callback) {
|
||||
if (!documentReady) {
|
||||
documentReadyCallbacks.push(callback);
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
Ox.UI.elements = {};
|
||||
Ox.UI.DEFAULT_THEME = 'classic';
|
||||
|
|
|
|||
Loading…
Reference in a new issue