oxjs/source/js/OxUI.js

(function() {

    var path = Array.prototype.slice.apply(
            document.getElementsByTagName('script')
        ).filter(function(script) {
            return /OxUI\.js$/(script.src);
        })[0].src.replace('OxUI.js', ''),
        scripts = [
            {ready: typeof Ox != 'undefined', src: 'Ox.js'},
            {ready: typeof $ != 'undefined', src: 'jquery.js'}
        ],
        uiCallback,
        ready = false,
        readyCallbacks = [];

    Ox = typeof Ox != 'undefined' ? Ox : function() {};    
    Ox.UI = function(callback) {
        uiCallback = callback;
    };

    scripts.forEach(function(script) {
        var element;
        if (!script.ready) {
            element = document.createElement('script');
            element.src = path + script.src;
            element.type = 'text/javascript';
            element.onload = function() {
                script.ready = true;
                onload();
            };
            document.getElementsByTagName('head')[0].appendChild(element);
        }
    });

    onload();

    function onload() {
        if (scripts.map(function(script) {
            return script.ready;
        }).reduce(function(pre, cur) {
            return pre && cur;
        })) {

            Ox.UI = {};
            Ox.UI.ready = function(callback) {
                if (!ready) {
                    readyCallbacks.push(callback);                
                } else {
                    callback();
                }
            };    

            $(function() {
                Ox.UI.$body = $('body');
                Ox.UI.$document = $(document);
                Ox.UI.$head = $('head');
                Ox.UI.$window = $(window);
                ready = true;
                readyCallbacks.forEach(function(callback) {
                    callback();
                });
            });    

            Ox.UI.elements = {};
            Ox.UI.DEFAULT_THEME = 'classic';
            Ox.UI.DIMENSIONS = {
                horizontal: ['width', 'height'],
                vertical: ['height', 'width']
            };
            Ox.UI.EDGES = {
                horizontal: ['left', 'right', 'top', 'bottom'],
                vertical: ['top', 'bottom', 'left', 'right']
            };
            Ox.UI.getImagePath = function(filename) {
                // fixme: not the best idea to do this here
                if (filename == 'symbolPlay.svg') {
                    filename = 'symbolRight.svg';
                }
                return Ox.UI.PATH + filename.split('.').pop() +
                    '/ox.ui.' + Ox.UI.theme() + '/' + filename;
            };

            Ox.UI.PATH = $('script[src*="OxUI.js"]')
                .attr('src').replace('js/OxUI.js', '');
            Ox.UI.SCROLLBAR_SIZE = $.browser.mozilla ? 16 : 12;
            // fixme: the follwing should be deprecated
            Ox.UI.theme = function() {
                var theme;
                Ox.forEach(Ox.UI.$body.attr('class').split(' '), function(v) {
                    if (Ox.startsWith(v, 'OxTheme')) {
                        theme = v.replace('OxTheme', '').toLowerCase();
                        return false;
                    }
                });
                return theme || Ox.UI.DEFAULT_THEME; // fixme: shouldn't be neccessary
            };
            Ox.UI.getBarSize = function(size) {
                var sizes = {
                    small: 20,
                    medium: 24,
                    large: 28,
                };
                return sizes[size];
            };
            Ox.UI.symbols = {
                alt: '\u2325',
                apple: '\uF8FF',
                arrow_down: '\u2193',
                arrow_left: '\u2190',
                arrow_right: '\u2192',
                arrow_up: '\u2191',
                backspace: '\u232B',
                backup: '\u2707',
                ballot: '\u2717',
                black_star: '\u2605',
                burn: '\u2622',
                caps_lock: '\u21EA',
                check: '\u2713',
                //clear: '\u2327',
                clear: '\u00D7',
                click: '\uF803',
                close: '\u2715',
                command: '\u2318',
                control: '\u2303',
                cut: '\u2702',
                'delete': '\u2326',
                diamond: '\u25C6',
                edit: '\uF802',
                eject: '\u23CF',
                escape: '\u238B',
                end: '\u2198',
                enter: '\u2324',
                fly: '\u2708',
                gear: '\u2699',
                home: '\u2196',
                info: '\u24D8',
                navigate: '\u2388',
                option: '\u2387',
                page_up: '\u21DE',
                page_down: '\u21DF',
                redo: '\u21BA',
                'return': '\u21A9',
                //select: '\u21D5',
                select: '\u25BE',
                shift: '\u21E7',
                sound: '\u266B',
                space: '\u2423',
                tab: '\u21E5',
                trash: '\u267A',
                triangle_down: '\u25BC',
                triangle_left: '\u25C0',
                triangle_right: '\u25BA',
                triangle_up: '\u25B2',
                undo: '\u21BB',
                voltage: '\u26A1',
                warning: '\u26A0',
                white_star: '\u2606'
            };
            $.getJSON(Ox.UI.PATH + 'json/OxUI.json', function(data) {

                function loadImage(src) {
                    var dfd = new $.Deferred();
                    var image = new Image();
                    image.onload = function() {
                        dfd.resolve();
                    };
                    image.src = Ox.UI.PATH + src;
                    return dfd.promise();
                }

                function loadScript(src) {
                    // jQuery doesn't work here, does some unwanted magic
                    var dfd = new $.Deferred();
                    var script = document.createElement('script');
                    script.onload = function() {
                        //setTimeout(function() {
                            console.log('onload', src)
                            dfd.resolve();
                        //}, 1000)
                    };
                    script.src = Ox.UI.PATH + src;
                    script.type = 'text/javascript';
                    document.getElementsByTagName('head')[0].appendChild(script);
                    return dfd.promise();
                }

                var $head = $('head'),
                    promises = [];
                // fixme: find a better way to not wait for flags
                data = data.filter(function(image) {
                    return !Ox.startsWith(image, 'svg/ox.map/')
                });
                data.forEach(function(src) {
                    if (/\.js$/(src)) {
                        promises.push(loadScript(src));
                    } else {
                        promises.push(loadImage(src));
                    }
                });
                $.when.apply(null, promises)
                    .done(uiCallback || []);
            });

        }

    }

}());