updates for loader

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)

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('<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, src;
-            var image = new Image(),
+            if (options.display == 'console') {
-                src = path + 'svg/ox.ui.classic/symbolLoading.svg';
+                log('Loading additional scripts and images...')
-            image.onload = function() {
+            } else {
-                element('<img>')
+                image = new Image(),
-                    .attr({
+                src = path + 'svg/ox.ui.' + options.display + '/symbolLoading.svg';
-                        src: src,
+                image.onload = function() {
-                    })
+                    getElement('<img>')
-                    .css(css)
+                        .attr({
-                    .css({
+                            src: src,
-                        width: '32px',
+                        })
-                        height: '32px'
+                        .css(css)
-                    })
+                        .css({
-                    .mousedown(function(e) {
+                            width: '32px',
-                        e.preventDefault()
+                            height: '32px'
-                    })
+                        })
-                    .appendTo(div);
+                        .mousedown(function(e) {
-            };
+                            e.preventDefault()
-            image.src = src;
+                        })
+                        .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 == userAgents.length - 1 ? '.' :
-                        i == userAgent.length - 2 ? ' or' : ','
+                        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();