diff --git a/index.js b/index.js index 7fccc197..86758569 100644 --- a/index.js +++ b/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 = { + var app = window.oxjs = { $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 ' + + 'Chrome, ' + + 'Firefox and ' + + 'Safari, or ' + + 'Internet Explorer with ' + + '' + + 'Chrome Frame 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({ - hashchange: app.urlchange - }); + Ox.$window.on({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) { - Ox.getJSON(url, function(data) { - app.data.downloads = data; - callback(); - }); - } else { + navigator.onLine ? Ox.getJSON(url, function(data) { + app.data.downloads = data; callback(); - } + }) : callback(); } }); }); @@ -234,17 +264,16 @@ 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() - .one({ - load: function() { - Ox.$('body') - .append(app.$ui.screen) - .append(app.$ui.logo) - .append(app.$ui.loading); - app.rotate(); - callback(); - } - }); + app.$ui.logo = app.ui.logo().one({ + load: function() { + Ox.$('body') + .append(app.$ui.screen) + .append(app.$ui.logo) + .append(app.$ui.loading); + app.rotate(); + callback(); + } + }); Ox.$(window).on({resize: app.resize}); }, patchButtonGroup: function($buttonGroup) { @@ -253,17 +282,14 @@ Ox.load(function() { paddingLeft: '8px', paddingRight: '8px', fontSize: '13px' - }); - $buttonGroup.find('.OxButton:first-child').css({ - //paddingLeft: '9px', + }).find('.OxButton:first-child').css({ borderTopLeftRadius: '6px', borderBottomLeftRadius: '6px' - }); - $buttonGroup.find('.OxButton:last-child').css({ - //paddingRight: '9px', + }).find('.OxButton:last-child').css({ 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,48 +509,41 @@ Ox.load(function() { .addClass('menu animate') .bindEvent({ change: function(data) { - if (data.value) { - app.url.set({page: data.value}); - } + data.value && app.url.set({page: data.value}); } }) - app.patchButtonGroup($menu); - return $menu; + ); }, page: function(page, replace) { - var $element = Ox.Container(); - $('
') - .addClass('OxSelectable page') - .html( + return Ox.Container().append( + $('
').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({ - content: function(id) { - return app.$ui[id] = app.ui[id] - ? app.ui[id]() : app.ui.page(id); - }, - size: 36, - tabs: app.data.pages - }) - .bindEvent({ - change: function(data) { - if (app.state.loaded) { - app.user.page = data.selected; - app.db(app.user); - app.url.set(); - } + content: function(id) { + return app.$ui[id] = app.ui[id] + ? app.ui[id]() : app.ui.page(id); + }, + size: 36, + tabs: app.data.pages + }) + .bindEvent({ + change: function(data) { + if (app.state.loaded) { + app.user.page = data.selected; + app.db(app.user); + 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 = $('
') .addClass('item') .attr({id: 'readme_' + item.id}) - .css({ - width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px' - }) + .css({width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'}) .on({ click: function(e) { if (!$(this).is('.selected')) { @@ -605,7 +623,8 @@ Ox.load(function() { return Ox.$('
').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 $('
') - .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.' - ); + return $('
').addClass('warning').html(app.data.warning); } }, url: { @@ -670,8 +678,5 @@ Ox.load(function() { }, user: {} }; - app.init(); - window.oxjs = app; - });