diff --git a/demos/calendar/js/calendar.js b/demos/calendar/js/calendar.js index e148fb9c..d8aae052 100644 --- a/demos/calendar/js/calendar.js +++ b/demos/calendar/js/calendar.js @@ -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) diff --git a/source/js/OxUI.js b/source/js/OxUI.js index 8e386b6f..0bffba40 100644 --- a/source/js/OxUI.js +++ b/source/js/OxUI.js @@ -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('
') + .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 = getElement('
') + .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('') - .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('') + .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('
').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('
') + var box = getElement('
') .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('') + var link = getElement('') .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('') + getElement('') .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();