0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

updates for loader

Browse source
This commit is contained in:
rolux 2011-04-23 14:33:41 +02:00
parent 7430ef1023
commit cda03f71e9
2 changed files with 233 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demos/calendar/js/calendar.js
View file

@ -7,8 +7,6 @@ Ox.UI(function() {
console.log('running Ox.UI()') console.log('running Ox.UI()')
//console.log('Ox =', Ox) //console.log('Ox =', Ox)
Ox.UI.ready(function() {
Ox.theme('modern'); Ox.theme('modern');
//Ox.print('$$$$', Ox.Calendar) //Ox.print('$$$$', Ox.Calendar)
@ -141,6 +139,4 @@ Ox.UI(function() {
width: window.innerWidth width: window.innerWidth
}).appendTo(Ox.UI.$body); }).appendTo(Ox.UI.$body);
});
}); });

135
source/js/OxUI.js
View file

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