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';
-    image.src = src;
-    image.onload = function() {
-        var deg = 0,
-            img = document.createElement('img'),
-            key,
-            style = {
             position: 'absolute',
             left: 0,
             top: 0,
             right: 0,
             bottom: 0,
-                width: '32px',
-                height: '32px',
             margin: 'auto',
-                //opacity: 0,
             MozUserSelect: 'none',
             WebkitUserSelect: 'none'
+        },
+        file = 'js/ox.load.js',
+        path = $('script[src*=' + file + ']').attr('src').replace(file, ''),
+        userAgent,
+        userAgents = {
+            'Chrome': 'http://www.google.com/chrome/',
+            'Firefox': 'http://www.mozilla.org/firefox/',
+            'Internet Explorer': '',
+            'Opera': '',
+            '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();
+
+    function getUserAgent() {
+        var userAgent = '';
+        $.each(userAgents, function(name, link) {
+            if (navigator.userAgent.indexOf(name) > -1) {
+                userAgent = name;
+                return false;
             }
-        document.body ? loaded() : document.addEventListener('DOMContentLoaded', loaded, false);
+        });
-        function loaded() {
+        return userAgent;
-            //var opacity = 0;
+    }
-            document.removeEventListener('DOMContentLoaded', loaded, false);
+
-            //document.body.style.background = 'rgb(240, 240, 240)';
+    function start() {
-            document.body.appendChild(img);
+        var image = new Image(),
-            setInterval(function() {
+            src = path + 'png/ox.ui.classic/loading.png';
-                //opacity += 0.083
+        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.style.opacity = Math.max(opacity, 1);
+                    $img.css({
-                img.style.MozTransform = 'rotate(' + deg + 'deg)';
+                        MozTransform: 'rotate(' + deg + 'deg)',
-                img.style.WebkitTransform = '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 $div = $('<div>')
+                    .css($.extend(css, {
+                        width: '216px',
+                        height: '72px'
+                    }));
+            $.each(src, function(name, src) {
+                $('<a>')
+                    .attr({
+                        href: userAgents[name],
+                        title: name
+                    })
+                    .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,24 +199,27 @@ 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
                 });
+                userAgents.indexOf(userAgent) > -1 ? start() : stop();
+                function start() {
                     loadImages(function() {
                         window.google = function() {};
                         $.getScript('http://maps.google.com/maps/api/js?callback=google&sensor=false', function() {
                             $.getJSON(self.options.config, function(data) {
                                 var config = data;
-                            that.request(self.options.init, $.extend(getUserData(), {
+                                that.request(self.options.init, getUserData(), function(data) {
-                                time: (+new Date() - time) / 1000
-                            }), function(data) {
                                     Ox.print('!!!', data)
-                                var user = data.data.user
+                                    var user = data.data.user;
-                                $body.empty();
+                                    $(function() {
+                                        $('body').empty();
                                         callback({
                                             config: config,
                                             user: user
@@ -212,6 +228,11 @@ requires
                                 });
                             });
                         });
+                    });
+                }
+                function stop() {
+                    that.request(self.options.init, getUserData(), function() {});
+                }
                 return that;
             };
 
@@ -671,7 +692,7 @@ requires
                 function callback(data) {
                     delete requests[options.id];
                     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()