oxjs/index.js

Ox.load(function() {

    var app = {
        $ui: {},
        animate: function(callback) {
            var home = !app.url.get();
            app.state.animating = true;
            if (home) {
                app.$ui.logo.attr({
                    src: app.getSRC('logo')
                });
                app.$ui.screen.show();
                app.$ui.label.show();
                app.$ui.menu.options({value: ''}).show();
            } else {
                app.$ui.menu.options({value: app.user('url').split('/')[0]});
            }
            app.$ui.panel.find('.OxButtonGroup').css({opacity: 0});
            [
                'screen', 'logo', 'label', 'menu', 'switch'
            ].forEach(function(element) {
                app.$ui[element].stop().animate(
                    app.getCSS(element),
                    1000,
                    element == 'screen' ? function() {
                        if (!home) {
                            app.$ui.logo.attr({
                                src: app.getSRC('logo')
                            });
                            app.$ui.panel.find('.OxButtonGroup').css({opacity: 1});
                            app.$ui.screen.hide();
                            app.$ui.label.hide();
                            app.$ui.menu.hide().options({value: ''});
                        }
                        app.state.animating = false;
                        callback();
                    } : void 0
                );
            });
        },
        data: {
            pages: [
                {id: 'about', title: 'About'},
                {id: 'readme', title: 'Readme'},
                {id: 'examples', title: 'Examples'},
                {id: 'doc', title: 'Documentation'},
                {id: 'downloads', title: 'Downloads'},
                {id: 'development', title: 'Development'}
            ]
        },
        getCSS: function(element) {
            var css = {},
                home = !app.url.get(),
                center = Math.floor(window.innerWidth / 2),
                middle = Math.floor(window.innerHeight / 2);
            if (element == 'label') {
                css = home ? {
                    top: middle + 16 + 'px',
                    left: center - 128 + 'px',
                    width: '240px',
                    height: '14px',
                    fontSize: '11px',
                    opacity: 1
                } : {
                    top: '26px',
                    left: '4px',
                    width: '32px',
                    height: '4px',
                    fontSize: '1px',
                    opacity: 0
                }
            } else if (element == 'loading') {
                css.top = middle + 40 + 'px'
            } else if (element == 'logo') {
                css = home || !app.state.loaded ? {
                    left: center - 128 + 'px',
                    top: middle - 128 + 'px',
                    width: '256px',
                    height: '128px'
                } : {
                    top: '8px',
                    left: '8px',
                    width: '32px',
                    height: '16px'
                };
            } else if (element == 'menu') {
                css = home ? {
                    top: middle + 48 + 'px',
                    left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
                } : {
                    top: '8px',
                    left: Math.ceil(center - app.$ui.menu.width() / 2) + 'px'
                };
            } else if (element == 'screen') {
                css.opacity = home ? 1 : 0;
            } else if (element == 'switch') {
                css = home ? {
                    top: middle + 80 + 'px',
                    right: Math.floor(center - app.$ui.switch.width() / 2) + 'px'
                } : {
                    top: '8px',
                    right: '8px'
                };
            } else if (element == 'warning') {
                css = {
                    left: center - 128 + 'px',
                    top: middle + 16 + 'px',
                };
            }
            return css;
        },
        getSRC: function(element) {
            var src,
                home = !app.url.get(),
                theme = app.user('theme');
            if (element == 'icon') {
                src = 'source/Ox.UI/themes/' + theme
                    + '/png/icon16.png';
            } else if (element == 'loading') {
                src = 'source/Ox.UI/themes/' + theme
                    + '/svg/symbolLoadingAnimated.svg'
            } else if (element == 'logo') {
                src = 'source/Ox.UI/themes/' + theme + '/png/logo'
                    + (home || !app.state.loaded ? 128 : 16) + '.png'                
            }
            return src;
        },
        history: {},
        init: function() {
            app.loadScreen(function() {
                app.loadData(function() {
                    Ox.load({UI: {theme: app.theme}}, app.load);
                });
            });
        },
        load: function(browserSupported) {
            var url = app.url.get();
            if (url) {
                app.user({url: url})
            } else if (!app.user('url')) {
                app.user({url: 'about'});
            }
            app.$ui.panel = app.ui.panel()
                .select(app.url.parse(app.user('url')).page)
                .appendTo(Ox.$body);
            // jqueryfy so that we can animate
            ['screen', 'logo', 'loading'].forEach(function(element) {
                app.$ui[element] = $('.' + element);
            });
            app.$ui.loading.animate({opacity: 0}, 500, function() {
                app.$ui.loading.remove();
            });
            if (!browserSupported) {
                app.$ui.warning = app.ui.warning()
                    .css(app.getCSS('warning'))
                    .appendTo(Ox.$body);
                app.$ui.logo
                    .css({cursor: 'pointer'})
                    .one({
                        click: function() {
                            app.$ui.warning.remove();
                            app.load(true);
                        }
                    });
            } else if (!url) {
                app.$ui.logo
                    .css({cursor: 'pointer'})
                    .bind({
                        click: app.toggle
                    });
                ['label', 'menu', 'switch'].forEach(function(element) {
                    app.$ui[element] = app.ui[element]()
                        .css({opacity: 0})
                        .appendTo(Ox.$body);
                    app.$ui[element]
                        .css(app.getCSS(element))
                        .animate({opacity: 1}, 500);
                });
            } else {
                ['label', 'menu', 'switch'].forEach(function(element) {
                    app.$ui[element] = app.ui[element]().appendTo(Ox.$body);
                    app.$ui[element].css(app.getCSS(element)).hide();
                });
                app.$ui.screen.animate({opacity: 0}, 500, function() {
                    app.$ui.screen.hide();
                });
                app.$ui.logo.animate({opacity: 0}, 500, function() {
                    app.$ui.logo
                        .attr({src: app.getSRC('logo')})
                        .css(app.getCSS('logo'))
                        .animate({opacity: 1}, 500, function() {
                            app.$ui.logo
                                .css({cursor: 'pointer'})
                                .bind({
                                    click: app.toggle
                                });
                        });
                    app.$ui.switch.css({opacity: 0}).show().animate({
                        opacity: 1
                    }, 500);
                });
            }
            Ox.$window.bind({
                hashchange: app.urlchange
            });
            app.state.loaded = true;
        },
        loadData: function(callback) {
            Ox.getJSON('index.json', function(data) {
                app.data = Ox.extend(app.data, data);
                callback();                
            });
        },
        loadScreen: function(callback) {
            app.setTheme(app.user('theme') || 'classic');            
            app.$ui.screen = app.ui.screen();
            app.$ui.loading = app.ui.loading();        
            app.$ui.logo = app.ui.logo()
                .bindOnce({
                    load: function() {
                        Ox.$('body')
                            .append(app.$ui.screen)
                            .append(app.$ui.logo)
                            .append(app.$ui.loading);
                        callback();
                    }
                });
            Ox.$(window).bind({
                resize: app.resize
            });
        },
        re: {
            code: [
                new RegExp(
                    '<span class="OxIdentifier">Ox</span>'
                    + '(<span class="OxOperator">\.</span>'
                    + '<span class="OxIdentifier">UI</span>)?'
                    + '<span class="OxOperator">\.</span>'
                    + '<span class="OxIdentifier">([\\$\\w]+)<\/span>',
                    'g'
                ),
                function (str) {
                    return '<a href="#doc/' + Ox.stripTags(str)
                        + '" class="doclink">' + str + '</a>';
                }
            ],
            comment: [
                /\b(Ox\.\w+)\b/g,
                '<a href="#doc/$1" class="OxMonospace doclink">$1</a>'
            ],
            version: [
                '{version}',
                function() {
                    return (
                        /:\/\/oxjs.org\//.test(window.location.href)
                            ? 'The latest version is'
                            : 'You\'re currently running version'
                    ) + ' <code>' + app.data.version + '.</code>'
                }
            ]
        },
        resize: function() {
            [
                'logo', 'loading', 'label', 'menu', 'switch'
            ].forEach(function(element) {
                app.$ui[element] && app.$ui[element].css(app.getCSS(element));
            });
        },
        setTheme: function(theme) {
            app.user({theme: theme});
            (Ox.$('#icon') || Ox.$('<link>').attr({
                id: 'icon',
                rel: 'shortcut icon',
                type: 'image/png'
            }).appendTo(Ox.$('head'))).attr({
                href: app.getSRC('icon')
            });
            app.$ui.logo && app.$ui.logo
                .attr({src: app.getSRC('logo')})
                .css(app.getCSS('logo'));
            Ox.Theme
                ? Ox.Theme(theme)
                : Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(theme)
            );
        },
        state: {
            animating: false,
            loaded: false
        },
        toggle: function() {
            !app.state.animating && app.url.set(
                app.url.get() ? '' : app.user('url')
            );
        },
        ui: {
            doc: function() {
                return Ox.DocPanel({
                    files: app.data.documentation,
                    getModule: function(item) {
                        var file = item.file.replace(/^dev\//, '');
                        return file.split('/')[0];
                    },
                    getSection: function(item) {
                        var file = item.file.replace(/^dev\//, '');
                        return item.section || file.split('/')[2].split('.')[0];
                    },
                    path: 'dev/',
                    replace: [app.re.code],
                });
            },
            examples: function() {
                return Ox.ExamplePanel({
                        examples: app.data.examples,
                        keywords: /\b(Ox\.[\w]+)\b/g,
                        path: 'examples/',
                        replaceCode: [app.re.code],
                        replaceComment: [app.re.comment],
                        selected: ''
                    })
                    .bindEvent({
                        select: function(data) {
                            app.url.set(
                                'examples' + (data.id ? '/' + data.id : '')
                            )
                        }
                    });
            },
            label: function() {
                return Ox.Label({
                        textAlign: 'center',
                        title: 'A JavaScript Library for Web Applications',
                        width: 256
                    })
                    .addClass('label animate')
                    .bind({
                        click: app.toggle
                    });
            },
            loading: function() {
                return Ox.$('<img>')
                    .addClass('loading')
                    .attr({src: app.getSRC('loading')})
                    .css(app.getCSS('loading'));
            },
            logo: function() {
                return Ox.$('<img>')
                    .addClass('logo animate')
                    .attr({src: app.getSRC('logo')})
                    .css(app.getCSS('logo'));
            },
            menu: function() {
                return Ox.ButtonGroup({
                        buttons: app.data.pages,
                        min: 0,
                        selectable: true,
                    })
                    .addClass('menu animate')
                    .bindEvent({
                        change: function(data) {
                            data.value && app.url.set(data.value);
                        }
                    })
            },
            page: function(page, replace) {
                var $element = Ox.Container();
                Ox.get('readme/html/_' + page + '.html', function(html) {
                    $('<div>')
                        .addClass('OxSerif page')
                        .html(html.replace(app.re.version[0], app.re.version[1]))
                        .appendTo($element);
                });
                return $element;
            },
            panel: function() {
                return Ox.TabPanel({
                    content: function(id) {
                        return app.$ui[id] = app.ui[id] ? app.ui[id]() : app.ui.page(id);
                    },
                    size: 32,
                    tabs: app.data.pages
                })
                .bindEvent({
                    change: function(data) {
                        app.state.loaded && app.url.set(data.selected);
                    }
                });
            },
            readme: function() {
                var $list = Ox.Container().css({overflowY: 'scroll'}),
                    $text = Ox.Container().addClass('OxSerif text'),
                    self = {},
                    that = Ox.SplitPanel({
                            elements: [
                                {element: $list, size: 256},
                                {element: $text}
                            ],
                            orientation: 'horizontal'
                        }, self)
                        .addClass('readme');
                app.data.readme.forEach(function(item, i) {
                    var $item = $('<div>')
                        .addClass('item')
                        .attr({id: 'readme_' + item.id})
                        .css({
                            width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
                        })
                        .bind({
                            click: function(e) {
                                if (!$(this).is('.selected')) {
                                    selectItem(item.id);
                                } else if (e.metaKey) {
                                    selectItem();
                                }
                            }
                        })
                        .appendTo($list);
                    $('<div>')
                        .addClass('OxSerif title')
                        .html(item.title)
                        .appendTo($item);
                    $('<div>')
                        .addClass('OxSerif OxLight date')
                        .html(Ox.formatDate(item.date, '%B %e, %Y', true))
                        .appendTo($item);
                });
                selectItem(self.options.selected);
                function selectItem(id) {
                    $('.readme .item.selected').removeClass('selected');
                    id && $('#readme_' + id).addClass('selected');                    
                    Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
                        $text.html(html);
                        $text.find('.code').each(function() {
                            var $this = $(this);
                            $this.replaceWith(
                                Ox.SyntaxHighlighter({
                                    source: $this.text()
                                })
                                .attr({id: $this.attr('id')})
                            );
                        });
                    });
                    app.url.set('readme' + (id ? '/' + id : ''));
                }
                self.setOption = function(key, value) {
                    if (key == 'selected') {
                        selectItem(value);
                    }
                }
                return that;
            },
            screen: function() {
                return Ox.$('<div>').addClass('screen animate');
            },
            switch: function() {
                return Ox.ButtonGroup({
                        buttons: [
                            {id: 'classic', title: 'Light'},
                            {id: 'modern', title: 'Dark'}
                        ],
                        selectable: true,
                        value: app.user('theme')
                    })
                    .addClass('switch animate')
                    .bindEvent({
                        change: function(data) {
                            app.setTheme(data.value);
                        }
                    });
            },
            warning: function() {
                return $('<div>')
                    .addClass('warning')
                    .html(
                        'Aw, snap! This website requires an up-to-date, HTML5-compliant web browser. '
                        + 'It should work fine in current versions of Chrome, Firefox and Safari, '
                        + 'or Internet Explorer with Chrome Frame installed. '
                        + 'To proceed at your own risk, click on the logo above.'
                    );
            }
        },
        url: {
            get: function() {
                return window.location.hash.substr(1);
            },
            parse: function(url) {
                var split = (
                    url === void 0 ? app.url.get() : url
                ).split('/');
                return {page: split[0], item: split[1] || ''};
            },
            set: function(url) {
                window.location.hash = '#' + url;
                return app;
            }
        },
        urlchange: function() {
            var url = app.url.get(),
                current = app.url.parse(url);
            url && app.user({url: url});
            Ox.print(JSON.stringify({
                'current': current,
                'history': app.history,
                'user.url': app.user('url')
            }, null, '    '));
            if (current.page != app.history.page) {
                app.$ui.panel.select(current.page);
            }
            if (Ox.in(['readme', 'examples', 'doc'], current.page)) {
                Ox.print('cp',current.page, current.item)
                app.$ui[current.page].options({selected: current.item});
            }
            (!current.page || !app.history.page ? app.animate : Ox.void)(function() {
                //app.url.replace(url);
                app.history = current;
                Ox.print('CALLBACK, HISTORY', app.history)
            });
        },
        user: Ox.localStorage('OxJS')
    };

    app.init();
    window.oxjs = app;

});