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 17:02:51 +02:00
parent cda03f71e9
commit 0e3f49f134
2 changed files with 135 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
demos/calendar/js/calendar.js
View file

@ -2,7 +2,7 @@ console.log('calling Ox.UI()')
//console.log('Ox =', Ox)
//console.log('Ox.UI =', Ox.UI)
Ox.UI(function() {
Ox.UI({display: 'modern'}, function() {
console.log('running Ox.UI()')
//console.log('Ox =', Ox)

218
source/js/OxUI.js
View file

@ -17,7 +17,10 @@ Provides function Ox.UI([options], callback) that fires when
).filter(function(element) {
return /OxUI\.js$/.test(element.src);
})[0].src.replace('js/OxUI.js', ''),
documentReady = false,
documentReadyCallbacks = [],
head = document.getElementsByTagName('head')[0],
logs = [],
oxUICallback = function() {},
oxUIDefaults = {
// 'classic', 'modern', 'console' or 'none'
@ -26,9 +29,7 @@ Provides function Ox.UI([options], callback) that fires when
oxUIFunction = function(options, callback) {
oxUICallback = arguments.length == 2 ? callback : options;
oxUIOptions = arguments.length == 2 && options ? options : oxUIDefaults;
},
documentReady = false,
documentReadyCallbacks = [];
};
files.forEach(function(file, i) {
files[i] = {
@ -40,6 +41,7 @@ Provides function Ox.UI([options], callback) that fires when
Ox = typeof Ox != 'undefined' ? Ox : function() {};
Ox.UI = oxUIFunction;
log('Loading essential scripts and stylesheets...')
waitForDocument();
waitForFiles();
@ -60,7 +62,7 @@ Provides function Ox.UI([options], callback) that fires when
}
function onload() {
file.ready = true;
console.log(file.src, 'ready')
log(file.src.split('/').pop() + ' loaded.')
if (file.src == 'js/Ox.js') {
Ox.UI = oxUIFunction;
}
@ -76,6 +78,48 @@ Provides function Ox.UI([options], callback) that fires when
}
});
function getElement(str) {
// Generic HTML Element Object (mimics jQuery)
return {
0: str[0] == '<' ? document.createElement(str.substr(1, str.length - 2)) :
str[0] == '.' ? document.getElementsByClassName(str.substr(1))[0] :
str[0] == '#' ? document.getElementById(str.substr(1)) :
document.getElementsByTagName(str)[0],
addClass: function(str) {
this[0].className += (this[0].className ? ' ' : '') + str;
return this;
},
append: function(element) {
this[0].appendChild(element[0]);
return this;
},
appendTo: function(element) {
element[0].appendChild(this[0]);
return this;
},
attr: function(obj) {
for (var key in obj) {
this[0].setAttribute(key, obj[key]);
}
return this;
},
css: function(obj) {
for (var key in obj) {
this[0].style[key] = obj[key];
}
return this;
},
html: function(str) {
this[0].innerHTML = str;
return this;
},
mousedown: function(fn) {
this[0].onmousedown = fn;
return this;
}
};
}
function isFileType(src, type) {
return new RegExp('\.' + type + '$').test(src);
}
@ -91,10 +135,48 @@ Provides function Ox.UI([options], callback) that fires when
}, false);
}
function log(str) {
var date = new Date(),
element = getElement('.console'),
str = [
date.getHours(), date.getMinutes(), date.getSeconds()
].map(function(num) {
return pad(num, 2)
}).join(':') + '.' + pad(date.getTime() % 1000, 3) + ' ' + str;
logs.push(str);
if (element[0]) {
logs.forEach(function(str) {
getElement('<div>')
.css({
height: '16px',
fontFamily: [
'Menlo', 'Monaco',
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
'Consolas', 'Lucida Console'
].join(', '),
fontSize: '12px',
color: 'rgb(240, 240, 240)'
})
.html(str)
.appendTo(element);
element[0].scrollTop = 1000000;
});
logs = [];
}
function pad(num, len) {
var str = num.toString();
while (str.length < len) {
str = '0' + str;
}
return str;
}
console.log(str);
}
function waitForDocument() {
document.addEventListener('DOMContentLoaded', onload, false);
function onload() {
console.log('document ready')
log('Document ready.')
document.removeEventListener('DOMContentLoaded', onload, false);
documentReady = true;
bootOxUI();
@ -118,11 +200,11 @@ Provides function Ox.UI([options], callback) that fires when
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/'}
//{name: 'Safari', url: 'http://www.apple.com/safari/'}
];
if (options.display != 'none') {
body = element('body');
body = getElement('body');
css = {
position: 'absolute',
left: 0,
@ -133,25 +215,25 @@ Provides function Ox.UI([options], callback) that fires when
MozUserSelect: 'none',
WebkitUserSelect: 'none'
};
div = element('<div>')
div = getElement('<div>')
.addClass(options.display == 'console' ? 'console' : '')
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
padding: '4px',
background: 'rgb(' + (
options.display == 'classic' ? '240, 240, 240' : '16, 16, 16')
+ ')',
color: 'rgb(240, 240, 240)',
opacity: 1,
overflow: options.display == 'console' ? 'auto' : 'hidden',
zIndex: 1000
})
.appendTo(body);
}
console.log('userAgent', getUserAgent())
getUserAgent() ? start() : stop();
function getUserAgent() {
@ -164,76 +246,38 @@ Provides function Ox.UI([options], callback) that fires when
return userAgent;
}
function element(str) {
// Generic HTML Element Object (mimics jQuery)
return {
0: str[0] == '<' ?
document.createElement(str.substr(1, str.length - 2)) :
document.getElementsByTagName(str)[0],
addClass: function(str) {
this[0].className = str;
return this;
},
append: function(element) {
this[0].appendChild(element[0]);
return this;
},
appendTo: function(element) {
element[0].appendChild(this[0]);
return this;
},
attr: function(obj) {
for (var key in obj) {
this[0].setAttribute(key, obj[key]);
}
return this;
},
css: function(obj) {
for (var key in obj) {
this[0].style[key] = obj[key];
}
return this;
},
html: function(str) {
this[0].innerHTML = str;
return this;
},
mousedown: function(fn) {
this[0].onmousedown = fn;
return this;
}
};
}
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,
})
.css(css)
.css({
width: '32px',
height: '32px'
})
.mousedown(function(e) {
e.preventDefault()
})
.appendTo(div);
};
image.src = src;
var image, src;
if (options.display == 'console') {
log('Loading additional scripts and images...')
} else {
image = new Image(),
src = path + 'svg/ox.ui.' + options.display + '/symbolLoading.svg';
image.onload = function() {
getElement('<img>')
.attr({
src: src,
})
.css(css)
.css({
width: '32px',
height: '32px'
})
.mousedown(function(e) {
e.preventDefault()
})
.appendTo(div);
};
image.src = src;
}
}
function stop() {
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' : ','
i == userAgents.length - 1 ? '.' :
i == userAgents.length - 2 ? ' or' : ','
);
}).join(' ');
if (options.display == 'none') {
@ -241,7 +285,8 @@ Provides function Ox.UI([options], callback) that fires when
} else {
div.addClass('error');
if (options.display == 'console') {
element('<div>').html(message).appendTo(body);
log(message);
log = function() {};
} else {
userAgents.forEach(function(userAgent) {
var image = new Image();
@ -254,7 +299,7 @@ Provides function Ox.UI([options], callback) that fires when
}
}
function showImages() {
var box = element('<div>')
var box = getElement('<div>')
.css(css)
.css({
width: (userAgents.length * 72) + 'px',
@ -262,7 +307,7 @@ Provides function Ox.UI([options], callback) that fires when
})
.appendTo(div);
userAgents.forEach(function(userAgent, i) {
var link = element('<a>')
var link = getElement('<a>')
.attr({
href: userAgent.url,
title: userAgent.name
@ -274,7 +319,7 @@ Provides function Ox.UI([options], callback) that fires when
height: '72px',
})
.appendTo(box);
element('<img>')
getElement('<img>')
.attr({
src: userAgent.src
})
@ -306,6 +351,8 @@ Provides function Ox.UI([options], callback) that fires when
var $head = $('head'),
promises = documentReady ? [] : [waitForDocument()];
log('OxUI.json loaded.')
// fixme: find a better way to not wait for flags
data = data.filter(function(image) {
return !Ox.startsWith(image, 'svg/ox.map/');
@ -313,8 +360,9 @@ Provides function Ox.UI([options], callback) that fires when
data.forEach(function(src) {
promises.push(loadFile(src));
});
$.when.apply(null, promises)
.then(function() {
.done(function() {
var $div, error = $('.error').length;
if (!error) {
$div = $('div');
@ -324,8 +372,8 @@ Provides function Ox.UI([options], callback) that fires when
}, 1000, function() {
$div.remove();
});
oxUICallback();
}
oxUICallback();
})
.fail(function() {
throw new Error('File not found.');
@ -335,7 +383,10 @@ Provides function Ox.UI([options], callback) that fires when
var dfd = new $.Deferred(),
isJS = isFileType(src, 'js'),
element = isJS ? document.createElement('script') : new Image();
element.onload = dfd.resolve;
element.onload = function() {
log(src.split('/').pop() + ' loaded.');
dfd.resolve();
}
element.src = path + src;
if (isJS) {
element.type = 'text/javascript';
@ -350,8 +401,7 @@ Provides function Ox.UI([options], callback) that fires when
function waitForDocument() {
var dfd = new $.Deferred();
$(function() {
documentReady = true;
initDocument()
initDocument();
dfd.resolve();
});
return dfd.promise();
@ -370,7 +420,7 @@ Provides function Ox.UI([options], callback) that fires when
}
Ox.UI.ready = function(callback) {
if (!documentReady) {
if (!Ox.UI.$window) {
documentReadyCallbacks.push(callback);
} else {
callback();