launch sequence

build/css/ox.ui.css

@@ -701,7 +701,7 @@ Lists
     font-weight: bold;
     font-size: 10px;
     text-overflow: ellipsis;
-    cursor: pointer;
+    //cursor: pointer;
     overflow: hidden;
     white-space: nowrap;
 }
@@ -717,7 +717,7 @@ Lists
     display: none;
 }
 .OxTextList .OxBar .OxOrder.OxSelected {
-    cursor: pointer;
+    //cursor: pointer;
     display: block;
 }
 .OxTextList .OxBar .OxResize {

build/js/ox.load.js

@@ -1,44 +1,120 @@
-(function() {
+$(function() {
-    var image = new Image(),
+
-        src = document.scripts ?
+    var $body = $('body'),
-                document.scripts[0].getAttribute('src')
+        $head = $('head'),
-                .replace('js/ox.load.js', 'png/ox.ui.classic/loading.png') :
+        css = {
-                '/static/oxjs/build/png/ox.ui.classic/loading.png';
+            position: 'absolute',
-    image.src = src;
+            left: 0,
-    image.onload = function() {
+            top: 0,
-        var deg = 0,
+            right: 0,
-            img = document.createElement('img'),
+            bottom: 0,
-            key,
+            margin: 'auto',
-            style = {
+            MozUserSelect: 'none',
-                position: 'absolute',
+            WebkitUserSelect: 'none'
-                left: 0,
+        },
-                top: 0,
+        file = 'js/ox.load.js',
-                right: 0,
+        path = $('script[src*=' + file + ']').attr('src').replace(file, ''),
-                bottom: 0,
+        userAgent,
-                width: '32px',
+        userAgents = {
-                height: '32px',
+            'Chrome': 'http://www.google.com/chrome/',
-                margin: 'auto',
+            'Firefox': 'http://www.mozilla.org/firefox/',
-                //opacity: 0,
+            'Internet Explorer': '',
-                MozUserSelect: 'none',
+            'Opera': '',
-                WebkitUserSelect: 'none'
+            'Safari': 'http://www.apple.com/safari/'
-            };
+        };
-        img.setAttribute('src', src);
+
-        for (var key in style) {
+    userAgent = getUserAgent();
-            img.style[key] = style[key];
+    userAgents[userAgent] ? start() : stop();
-        }
+
-        document.body ? loaded() : document.addEventListener('DOMContentLoaded', loaded, false);
+    function getUserAgent() {
+        var userAgent = '';
+        $.each(userAgents, function(name, link) {
+            if (navigator.userAgent.indexOf(name) > -1) {
+                userAgent = name;
+                return false;
+            }
+        });
+        return userAgent;
+    }
+
+    function start() {
+        var image = new Image(),
+            src = path + 'png/ox.ui.classic/loading.png';
+        image.src = src;
+        image.onload = function() {
+            var $img = $('<img>')
+                    .attr({
+                        src: src
+                    })
+                    .css($.extend(css, {
+                        width: '32px',
+                        height: '32px'
+                    }))
+                    .appendTo($body),
+                deg = 0,
+                interval = setInterval(function() {
+                    deg = (deg + 30) % 360;
+                    $img.css({
+                        MozTransform: 'rotate(' + deg + 'deg)',
+                        WebkitTransform: 'rotate(' + deg + 'deg)',
+                    });
+                }, 83);
+        };
+    }
+
+    function stop() {
+        var counter = 0,
+            length = 0,
+            src = {};
+        $.each(userAgents, function(name, link) {
+            if (link) {
+                length++;
+            }
+        });
+        $.each(userAgents, function(name, link) {
+            var image;
+            if (link) {
+                image = new Image();
+                src[name] = path + 'png/ox.ui/browser' + name + '128.png';
+                image.src = src[name];
+                image.onload = function() {
+                    if (++counter == length) {
+                        loaded();
+                    }
+                }
+            }
+        });
         function loaded() {
-            //var opacity = 0;
+            var $div = $('<div>')
-            document.removeEventListener('DOMContentLoaded', loaded, false);
+                    .css($.extend(css, {
-            //document.body.style.background = 'rgb(240, 240, 240)';
+                        width: '216px',
-            document.body.appendChild(img);
+                        height: '72px'
-            setInterval(function() {
+                    }));
-                //opacity += 0.083
+            $.each(src, function(name, src) {
-                deg = (deg + 30) % 360;
+                $('<a>')
-                //img.style.opacity = Math.max(opacity, 1);
+                    .attr({
-                img.style.MozTransform = 'rotate(' + deg + 'deg)';
+                        href: userAgents[name],
-                img.style.WebkitTransform = 'rotate(' + deg + 'deg)';
+                        title: name
-            }, 83);
+                    })
+                    .append(
+                        $('<img>')
+                            .attr({
+                                src: src
+                            })
+                            .css({
+                                float: 'left',
+                                width: '64px',
+                                height: '64px',
+                                border: 0,
+                                margin: '4px',
+                                cursor: 'pointer'
+                            })
+                    )
+                    .appendTo($div);
+            });
+            $div.appendTo($body);
+            //throw new Error('User Agent not supported.');
         }
     }
-})();
+
+});

build/js/ox.ui.js

@@ -43,8 +43,7 @@ requires
                 });
                 return functions.sort();
             }(),
-            path: $('script[src*=ox.ui.js]').attr('src')
+            path: $('script[src*=ox.ui.js]').attr('src').replace('js/ox.ui.js', ''),
-                .replace('js/ox.ui.js', ''),
             scrollbarSize: $.browser.mozilla ? 16 : 12,
             symbols: {
                 alt: '\u2325',
@@ -136,6 +135,8 @@ requires
             var self = {},
                 that = this;
 
+            self.time = +new Date();
+
             self.options = $.extend({
                 id: '',
                 init: '',
@@ -145,6 +146,17 @@ requires
                 requestURL: '',
             }, options);
 
+            function getUserAgent() {
+                var userAgent = '';
+                $.each(['Chrome', 'Firefox', 'Internet Explorer', 'Opera', 'Safari'], function(i, v) {
+                    if (navigator.userAgent.indexOf(v) > -1) {
+                        userAgent = v;
+                        return false;
+                    }
+                });
+                return userAgent;
+            }
+
             function getUserData() {
                 //return {};
                 return {
@@ -156,6 +168,7 @@ requires
                         userAgent: navigator.userAgent
                     },
                     screen: screen,
+                    time: (+new Date() - self.time) / 1000,
                     window: {
                         innerHeight: window.innerHeight,
                         innerWidth: window.innerWidth,
@@ -186,32 +199,40 @@ requires
             };
 
             that.launch = function(callback) {
-                var time = +new Date();
+                var time = +new Date(),
+                    userAgent = getUserAgent(),
+                    userAgents = ['Chrome', 'Firefox', 'Safari'];
                 document.title = self.options.name;
                 $.ajaxSetup({
                     timeout: self.options.requestTimeout,
                     type: self.options.requestType,
                     url: self.options.requestURL
                 });
-                loadImages(function() {
+                userAgents.indexOf(userAgent) > -1 ? start() : stop();
-                    window.google = function() {};
+                function start() {
-                    $.getScript('http://maps.google.com/maps/api/js?callback=google&sensor=false', function() {
+                    loadImages(function() {
-                        $.getJSON(self.options.config, function(data) {
+                        window.google = function() {};
-                            var config = data;
+                        $.getScript('http://maps.google.com/maps/api/js?callback=google&sensor=false', function() {
-                            that.request(self.options.init, $.extend(getUserData(), {
+                            $.getJSON(self.options.config, function(data) {
-                                time: (+new Date() - time) / 1000
+                                var config = data;
-                            }), function(data) {
+                                that.request(self.options.init, getUserData(), function(data) {
-                                Ox.print('!!!', data)
+                                    Ox.print('!!!', data)
-                                var user = data.data.user
+                                    var user = data.data.user;
-                                $body.empty();
+                                    $(function() {
-                                callback({
+                                        $('body').empty();
-                                    config: config,
+                                        callback({
-                                    user: user
+                                            config: config,
+                                            user: user
+                                        });                                        
+                                    });
                                 });
                             });
                         });
                     });
-                });
+                }
+                function stop() {
+                    that.request(self.options.init, getUserData(), function() {});
+                }
                 return that;
             };
 
@@ -670,8 +691,8 @@ requires
 
                 function callback(data) {
                     delete requests[options.id];
-                    Ox.length(requests) == 0 && Ox.Event.trigger('', 'requestStop'); 
+                    Ox.length(requests) == 0 && Ox.Event.trigger('', 'requestStop');
-                    options.callback(data);
+                    options.callback(data); // fixme: doesn't work if callback hasn't been passed
                 }
 
                 function debug(request) {
@@ -5597,7 +5618,8 @@ requires
                 itemWidth: self.itemWidth,
                 keys: 'foo',
                 orientation: 'both',
-                request: function() {},
+                keys: self.options.keys,
+                request: self.options.request,
                 rowLength: 1,
                 size: 128,
                 type: 'icon',            
@@ -6348,7 +6370,7 @@ requires
                     columns: [],
                     columnsMovable: false,
                     columnsRemovable: false,
-                    //columnWidth: [40, 800],
+                    columnWidth: [40, 800],
                     id: '',
                     request: function() {}, // {sort, range, keys, callback}
                     sort: []

tools/build/build.py

@@ -0,0 +1,14 @@
+import os
+import simplejson
+
+images = []
+path = '../../build/'
+
+for dirname, dirnames, filenames in os.walk(path + 'png'):
+    for filename in filenames:
+        if filename[:1] != '.':
+            images.append(os.path.join(dirname.replace(path, ''), filename))
+
+f = open(path + 'json/ox.ui.images.json', 'w')
+f.write(simplejson.dumps(images))
+f.close()