index.js: catch file url, refactoring, cleanup

index.js

@@ -1,8 +1,34 @@
 'use strict';
-
+window.onerror = function(error, url) {
+    if (!url) {
+        document.onreadystatechange = function() {
+            if (document.readyState == 'complete') {
+                var logo = new Image();
+                logo.onload = function() {
+                    var warning = document.createElement('div');
+                    warning.innerHTML = 'Please open this file over HTTP.';
+                    warning.style.margin = '16px';
+                    document.body.appendChild(warning);
+                }
+                logo.src = 'source/Ox.UI/themes/classic/png/logo128.png';
+                document.body.style.backgroundColor = 'rgb(224, 224, 224)';
+                document.body.style.color = 'rgb(64, 64, 64)';
+                document.body.style.fontFamily = [
+                    'Lucida Grande', 'Segoe UI', 'DejaVu Sans',
+                    'Lucida Sans Unicode', 'Helvetica', 'Arial', 'sans-serif'
+                ].join(', ');
+                document.body.style.fontSize = '13px';
+                document.body.style.margin = Math.floor(
+                    window.innerHeight / 2
+                ) - 128 + 'px';
+                document.body.style.textAlign = 'center';
+                document.body.appendChild(logo);
+            }
+        };
+    }
+};
 Ox.load(function() {
-
+    var app = window.oxjs = {
-    var app = {
         $ui: {},
         animate: function() {
             var home = app.url.get().page == '';
@@ -21,7 +47,7 @@ Ox.load(function() {
             ].forEach(function(element) {
                 app.$ui[element].stop().animate(
                     app.getCSS(element),
-                    1000,
+                    500,
                     element == 'screen' ? function() {
                         if (!home) {
                             app.$ui.logo.attr({src: app.getSRC('logo')});
@@ -53,7 +79,17 @@ Ox.load(function() {
                 page: '',
                 previousPage: 'about',
                 theme: 'classic'
-            }
+            },
+            warning: 'Aw, snap! This website requires an up-to-date, '
+                + 'HTML5-compliant web browser. '
+                + 'It should work fine in current versions of '
+                + '<a href="http://google.com/chrome/">Chrome</a>, '
+                + '<a href"http://mozilla.org/firefox/">Firefox</a> and '
+                + '<a href="http://apple.com/safari/">Safari</a>, or '
+                + 'Internet Explorer with '
+                + '<a href="http://google.com/chromeframe/">'
+                + 'Chrome Frame</a> installed. '
+                + 'To proceed at your own risk, click on the logo above.'
         },
         db: Ox.localStorage('OxJS'),
         getCSS: function(element) {
@@ -202,9 +238,7 @@ Ox.load(function() {
                     }, 500);
                 });
             }
-            Ox.$window.on({
+            Ox.$window.on({hashchange: app.urlchange});
-                hashchange: app.urlchange
-            });
             app.state.loaded = true;
         },
         loadData: function(callback) {
@@ -217,14 +251,10 @@ Ox.load(function() {
                     Ox.get('readme/html/_' + id + '.html' + q, function(html) {
                         app.data.html[id] = html;
                         if (Ox.len(app.data.html) == app.data.pages.length) {
-                            if (navigator.onLine) {
+                            navigator.onLine ? Ox.getJSON(url, function(data) {
-                                Ox.getJSON(url, function(data) {
                                 app.data.downloads = data;
                                 callback();
-                                });
+                            }) : callback();
-                            } else {
-                                callback();
-                            }
                         }
                     });
                 });
@@ -234,8 +264,7 @@ Ox.load(function() {
             app.setTheme(app.user.theme);
             app.$ui.screen = app.ui.screen();
             app.$ui.loading = app.ui.loading();        
-            app.$ui.logo = app.ui.logo()
+            app.$ui.logo = app.ui.logo().one({
-                .one({
                 load: function() {
                     Ox.$('body')
                         .append(app.$ui.screen)
@@ -253,17 +282,14 @@ Ox.load(function() {
                 paddingLeft: '8px',
                 paddingRight: '8px',
                 fontSize: '13px'
-            });
+            }).find('.OxButton:first-child').css({
-            $buttonGroup.find('.OxButton:first-child').css({
-                //paddingLeft: '9px',
                 borderTopLeftRadius: '6px',
                 borderBottomLeftRadius: '6px'
-            });
+            }).find('.OxButton:last-child').css({
-            $buttonGroup.find('.OxButton:last-child').css({
-                //paddingRight: '9px',
                 borderTopRightRadius: '6px',
                 borderBottomRightRadius: '6px'
             });
+            return $buttonGroup;
         },
         re: {
             code: [
@@ -474,7 +500,8 @@ Ox.load(function() {
                     .css(app.getCSS('logo'));
             },
             menu: function() {
-                var $menu = Ox.ButtonGroup({
+                return app.patchButtonGroup(
+                    Ox.ButtonGroup({
                         buttons: app.data.pages,
                         min: 0,
                         selectable: true,
@@ -482,25 +509,19 @@ Ox.load(function() {
                     .addClass('menu animate')
                     .bindEvent({
                         change: function(data) {
-                            if (data.value) {
+                            data.value && app.url.set({page: data.value});
-                                app.url.set({page: data.value});
-                            }
                         }
                     })
-                app.patchButtonGroup($menu);
+                );
-                return $menu;
             },
             page: function(page, replace) {
-                var $element = Ox.Container();
+                return Ox.Container().append(
-                $('<div>')
+                    $('<div>').addClass('OxSelectable page').html(
-                    .addClass('OxSelectable page')
-                    .html(
                         app.data.html[page]
                             .replace(app.re.size[0], app.re.size[1])
                             .replace(app.re.version[0], app.re.version[1])
                     )
-                    .appendTo($element);
+                );
-                return $element;
             },
             panel: function() {
                 var $panel = Ox.TabPanel({
@@ -519,11 +540,10 @@ Ox.load(function() {
                                 app.url.set();
                             }
                         }
-                        }),
-                    $buttonGroup = $panel.find('.OxButtonGroup').css({
-                        top: '6px'
                     });
-                app.patchButtonGroup($buttonGroup);
+                app.patchButtonGroup(
+                    $panel.find('.OxButtonGroup').css({top: '6px'})
+                );
                 return $panel;
             },
             readme: function() {
@@ -542,9 +562,7 @@ Ox.load(function() {
                     var $item = $('<div>')
                             .addClass('item')
                             .attr({id: 'readme_' + item.id})
-                            .css({
+                            .css({width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'})
-                                width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
-                            })
                             .on({
                                 click: function(e) {
                                     if (!$(this).is('.selected')) {
@@ -605,7 +623,8 @@ Ox.load(function() {
                 return Ox.$('<div>').addClass('screen animate');
             },
             switch: function() {
-                var $switch = Ox.ButtonGroup({
+                return app.patchButtonGroup(
+                    Ox.ButtonGroup({
                         buttons: [
                             {id: 'classic', title: 'Light'},
                             {id: 'modern', title: 'Dark'}
@@ -618,22 +637,11 @@ Ox.load(function() {
                         change: function(data) {
                             app.setTheme(data.value);
                         }
-                    });
+                    })
-                app.patchButtonGroup($switch);
+                );
-                return $switch;
             },
             warning: function() {
-                return $('<div>')
+                return $('<div>').addClass('warning').html(app.data.warning);
-                    .addClass('warning')
-                    .html(
-                        'Aw, snap! This website requires an up-to-date, HTML5-compliant web browser. '
-                        + 'It should work fine in current versions of '
-                        + '<a href="http://google.com/chrome/">Chrome</a>,'
-                        + '<a href"http://mozilla.org/firefox/">Firefox</a> '
-                        + 'and <a href="http://apple.com/safari/">Safari</a>, '
-                        + 'or Internet Explorer with <a href="http://google.com/chromeframe/">Chrome Frame</a> installed. '
-                        + 'To proceed at your own risk, click on the logo above.'
-                    );
             }
         },
         url: {
@@ -670,8 +678,5 @@ Ox.load(function() {
         },
         user: {}
     };
-
     app.init();
-    window.oxjs = app;
-
 });