index.js: catch file url, refactoring, cleanup
This commit is contained in:
rolux
parent
67df31a83d
commit
90ba278630
1 changed files with 88 additions and 83 deletions
171
index.js
171
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 '
|
||||
+ '<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({
|
||||
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();
|
||||
$('<div>')
|
||||
.addClass('OxSelectable page')
|
||||
.html(
|
||||
return Ox.Container().append(
|
||||
$('<div>').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 = $('<div>')
|
||||
.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.$('<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>')
|
||||
.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.'
|
||||
);
|
||||
return $('<div>').addClass('warning').html(app.data.warning);
|
||||
}
|
||||
},
|
||||
url: {
|
||||
|
|
@ -670,8 +678,5 @@ Ox.load(function() {
|
|||
},
|
||||
user: {}
|
||||
};
|
||||
|
||||
app.init();
|
||||
window.oxjs = app;
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue