updates for loader
This commit is contained in:
rolux
parent
cda03f71e9
commit
0e3f49f134
2 changed files with 135 additions and 85 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in a new issue