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,102 +78,15 @@ Provides function Ox.UI([options], callback) that fires when
         }
     });
 
-    function isFileType(src, type) {
+    function getElement(str) {
-        return new RegExp('\.' + type + '$').test(src);
-    }
-
-    function isIncluded(src) {
-        var isCSS = isFileType(src);
-        return Array.prototype.slice.apply(
-            document.getElementsByTagName(isCSS ? 'link' : 'script')
-        ).map(function(element) {
-            return element[isCSS ? 'href' : 'src'] == path + src;
-        }).reduce(function(prev, curr) {
-            return prev || curr; 
-        }, false);
-    }
-
-    function waitForDocument() {
-        document.addEventListener('DOMContentLoaded', onload, false);
-        function onload() {
-            console.log('document ready')
-            document.removeEventListener('DOMContentLoaded', onload, false);
-            documentReady = true;
-            bootOxUI();
-        }
-    }
-
-    function waitForFiles() {
-        files.map(function(file) {
-            return file.ready;
-        }).reduce(function(pre, cur) {
-            return pre && cur;
-        }) && loadOxUI();
-    }
-
-    function bootOxUI() {
-
-        // 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 = {
-                position: 'absolute',
-                left: 0,
-                top: 0,
-                right: 0,
-                bottom: 0,
-                margin: 'auto',
-                MozUserSelect: 'none',
-                WebkitUserSelect: 'none'
-            };
-            div = element('<div>')
-                .css({
-                    position: 'absolute',
-                    left: 0,
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    background: 'rgb(' + (
-                        options.display == 'classic' ? '240, 240, 240' : '16, 16, 16')
-                    + ')',
-                    color: 'rgb(240, 240, 240)',
-                    opacity: 1,
-                    zIndex: 1000
-                })
-                .appendTo(body);
-        }
-
-        console.log('userAgent', getUserAgent())
-
-        getUserAgent() ? start() : stop();
-
-        function getUserAgent() {
-            var userAgent = '';
-            userAgents.forEach(function(v) {
-                if (navigator.userAgent.indexOf(v.name) > -1) {
-                    userAgent = v.name;
-                }
-            });
-            return userAgent;
-        }
-
-        function element(str) {
         // Generic HTML Element Object (mimics jQuery)
         return {
-                0: str[0] == '<' ? 
+            0: str[0] == '<' ? document.createElement(str.substr(1, str.length - 2)) :
-                    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 = str;
+                this[0].className += (this[0].className ? ' ' : '') + str;
                 return this;
             },
             append: function(element) {
@@ -205,12 +120,141 @@ Provides function Ox.UI([options], callback) that fires when
         };
     }
 
+    function isFileType(src, type) {
+        return new RegExp('\.' + type + '$').test(src);
+    }
+
+    function isIncluded(src) {
+        var isCSS = isFileType(src);
+        return Array.prototype.slice.apply(
+            document.getElementsByTagName(isCSS ? 'link' : 'script')
+        ).map(function(element) {
+            return element[isCSS ? 'href' : 'src'] == path + src;
+        }).reduce(function(prev, curr) {
+            return prev || curr; 
+        }, 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() {
+            log('Document ready.')
+            document.removeEventListener('DOMContentLoaded', onload, false);
+            documentReady = true;
+            bootOxUI();
+        }
+    }
+
+    function waitForFiles() {
+        files.map(function(file) {
+            return file.ready;
+        }).reduce(function(pre, cur) {
+            return pre && cur;
+        }) && loadOxUI();
+    }
+
+    function bootOxUI() {
+
+        // 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 = getElement('body');
+            css = {
+                position: 'absolute',
+                left: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                margin: 'auto',
+                MozUserSelect: 'none',
+                WebkitUserSelect: 'none'
+            };
+            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')
+                    + ')',
+                    opacity: 1,
+                    overflow: options.display == 'console' ? 'auto' : 'hidden',
+                    zIndex: 1000
+                })
+                .appendTo(body);
+        }
+
+        getUserAgent() ? start() : stop();
+
+        function getUserAgent() {
+            var userAgent = '';
+            userAgents.forEach(function(v) {
+                if (navigator.userAgent.indexOf(v.name) > -1) {
+                    userAgent = v.name;
+                }
+            });
+            return userAgent;
+        }
+
         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...')
+            } else {
+                image = new Image(),
+                src = path + 'svg/ox.ui.' + options.display + '/symbolLoading.svg';
                 image.onload = function() {
-                element('<img>')
+                    getElement('<img>')
                         .attr({
                             src: src,
                         })
@@ -226,14 +270,14 @@ Provides function Ox.UI([options], callback) that fires when
                 };
                 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();