352 lines
12 KiB
JavaScript
352 lines
12 KiB
JavaScript
|
Ox.load(function() {
|
||
|
|
|
||
|
|
var app = {
|
||
|
|
|
||
|
|
$ui: {},
|
||
|
|
|
||
|
|
data: {},
|
||
|
|
|
||
|
|
fn: {
|
||
|
|
|
||
|
|
animate: function(callback) {
|
||
|
|
var css = app.fn.getCSS(),
|
||
|
|
home = !app.fn.url();
|
||
|
|
home && app.$ui.logo.attr({
|
||
|
|
src: app.fn.getLogoURL()
|
||
|
|
})
|
||
|
|
Ox.forEach(app.fn.getCSS(), function(css, element) {
|
||
|
|
app.$ui[element].animate(
|
||
|
|
css,
|
||
|
|
1000,
|
||
|
|
element == 'logo' ? function() {
|
||
|
|
!home && app.$ui.logo.attr({
|
||
|
|
src: app.fn.getLogoURL()
|
||
|
|
});
|
||
|
|
callback();
|
||
|
|
} : void 0
|
||
|
|
);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
getCSS: function() {
|
||
|
|
return app.fn.url() ? {
|
||
|
|
panel: {
|
||
|
|
opacity: 1
|
||
|
|
},
|
||
|
|
line: {
|
||
|
|
top: '26px',
|
||
|
|
left: '4px',
|
||
|
|
width: '32px',
|
||
|
|
fontSize: '1px',
|
||
|
|
opacity: 0
|
||
|
|
},
|
||
|
|
logo: {
|
||
|
|
top: '8px',
|
||
|
|
left: '8px',
|
||
|
|
width: '32px',
|
||
|
|
height: '16px'
|
||
|
|
},
|
||
|
|
sections: {
|
||
|
|
top: '8px',
|
||
|
|
left: app.window.center - 256 + 'px'
|
||
|
|
},
|
||
|
|
themes: {
|
||
|
|
top: '8px',
|
||
|
|
right: '8px'
|
||
|
|
}
|
||
|
|
} : {
|
||
|
|
panel: {
|
||
|
|
opacity: 0
|
||
|
|
},
|
||
|
|
line: {
|
||
|
|
top: app.window.middle + 12 + 'px',
|
||
|
|
left: app.window.center - 192 + 'px',
|
||
|
|
width: '384px',
|
||
|
|
fontSize: '12px',
|
||
|
|
opacity: 1
|
||
|
|
},
|
||
|
|
logo: {
|
||
|
|
left: app.window.center - 128 + 'px',
|
||
|
|
top: app.window.middle - 128 + 'px',
|
||
|
|
width: '256px',
|
||
|
|
height: '128px'
|
||
|
|
},
|
||
|
|
sections: {
|
||
|
|
top: app.window.middle + 36 + 'px',
|
||
|
|
left: app.window.center - 256 + 'px'
|
||
|
|
},
|
||
|
|
themes: {
|
||
|
|
top: app.window.middle + 60 + 'px',
|
||
|
|
right: app.window.center - 40 + 'px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getIconURL: function() {
|
||
|
|
return 'source/Ox.UI/themes/' + app.user('theme')
|
||
|
|
+ '/png/icon16.png';
|
||
|
|
},
|
||
|
|
|
||
|
|
getLogoURL: function() {
|
||
|
|
return 'source/Ox.UI/themes/' + app.user('theme')
|
||
|
|
+ '/png/logo' + (app.fn.url() ? 16 : 128) + '.png'
|
||
|
|
},
|
||
|
|
|
||
|
|
getLogoCSS: function() {
|
||
|
|
return {
|
||
|
|
boxShadow: '0 0 1px ' + (
|
||
|
|
app.user('theme') == 'classic'
|
||
|
|
? 'rgb(0, 0, 0)'
|
||
|
|
: 'rgb(255, 255, 255)'
|
||
|
|
)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
hashchange: function() {
|
||
|
|
var url = app.fn.url(),
|
||
|
|
section = url.split('/')[0];
|
||
|
|
app.fn[!url || !app.url ? 'animate' : 'void'](function() {
|
||
|
|
if (section && section != app.url.split('/')[0] && !app.foo) {
|
||
|
|
app.fn.setSection(section);
|
||
|
|
}
|
||
|
|
app.url = url;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
load: function() {
|
||
|
|
var $window = Ox.$(window);
|
||
|
|
app.fn.setTheme(app.user('theme') || 'classic');
|
||
|
|
!app.user('url') && app.user({url: 'about'});
|
||
|
|
app.fn.render();
|
||
|
|
Ox.getJSON('index.json', function(data) {
|
||
|
|
app.data = data;
|
||
|
|
});
|
||
|
|
$window.bind({
|
||
|
|
hashchange: app.fn.hashchange,
|
||
|
|
resize: app.fn.resize
|
||
|
|
});
|
||
|
|
window.oxjs = app; // so that you can play with it in the console
|
||
|
|
Ox.load({UI: {debug: true, theme: app.user('theme')}}, app.fn.render);
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
var $body = (Ox.UI ? $ : Ox.$)('body').empty();
|
||
|
|
Ox.forEach(app.fn.getCSS(), function(css, element) {
|
||
|
|
app.$ui[element] = app.ui[element]().css(
|
||
|
|
Ox.extend(css, element == 'logo' ? app.fn.getLogoCSS() : {})
|
||
|
|
).appendTo($body);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
resize: function() {
|
||
|
|
app.window = app.fn.window();
|
||
|
|
Ox.forEach(app.fn.getCSS(), function(css, element) {
|
||
|
|
app.$ui[element].css(css);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
setSection: function(section) {
|
||
|
|
app.$ui.panel.replaceElement(1, app.ui[section]());
|
||
|
|
},
|
||
|
|
|
||
|
|
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.fn.getIconURL()
|
||
|
|
});
|
||
|
|
app.$ui.logo && app.$ui.logo.attr({
|
||
|
|
src: app.fn.getLogoURL()
|
||
|
|
}).css(app.fn.getLogoCSS());
|
||
|
|
Ox.Theme ? Ox.Theme(theme) : Ox.$('body').addClass(
|
||
|
|
'OxTheme' + Ox.toTitleCase(theme)
|
||
|
|
);
|
||
|
|
},
|
||
|
|
|
||
|
|
url: function() {
|
||
|
|
var len = arguments.length, ret;
|
||
|
|
if (len == 0) {
|
||
|
|
ret = window.location.hash.substr(1);
|
||
|
|
} else {
|
||
|
|
if (len == 2) {
|
||
|
|
app.foo = true;
|
||
|
|
}
|
||
|
|
window.location.hash = '#' + arguments[0];
|
||
|
|
if (len == 2) {
|
||
|
|
app.foo = false;
|
||
|
|
}
|
||
|
|
ret = app;
|
||
|
|
}
|
||
|
|
return ret;
|
||
|
|
},
|
||
|
|
|
||
|
|
void: function(callback) {
|
||
|
|
callback();
|
||
|
|
},
|
||
|
|
|
||
|
|
window: function() {
|
||
|
|
return {
|
||
|
|
center: Math.floor(window.innerWidth / 2),
|
||
|
|
height: window.innerHeight,
|
||
|
|
middle: Math.floor(window.innerHeight / 2),
|
||
|
|
width: window.innerWidth
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
ui: {
|
||
|
|
|
||
|
|
about: function() {
|
||
|
|
return Ox.Element();
|
||
|
|
},
|
||
|
|
|
||
|
|
contact: function() {
|
||
|
|
return Ox.Element();
|
||
|
|
},
|
||
|
|
|
||
|
|
development: function() {
|
||
|
|
return Ox.Element();
|
||
|
|
},
|
||
|
|
|
||
|
|
documentation: 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/'
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
download: function() {
|
||
|
|
return Ox.Element()
|
||
|
|
.html('<code>bzr branch http://code.0x2620.org/oxjs</code>');
|
||
|
|
},
|
||
|
|
|
||
|
|
examples: function() {
|
||
|
|
return Ox.ExamplePanel({
|
||
|
|
examples: app.data.examples,
|
||
|
|
keywords: /\b(Ox\.[\w]+)\b/g,
|
||
|
|
path: 'examples/',
|
||
|
|
replace: [[/\b(Ox[\.\w]+)\b/g, '<b>$1</b>']],
|
||
|
|
selected: ''
|
||
|
|
})
|
||
|
|
.bindEvent({
|
||
|
|
select: function(data) {
|
||
|
|
app.fn.url(
|
||
|
|
'examples' + (data.id ? '/' + data.id : '')
|
||
|
|
)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
line: function() {
|
||
|
|
return (Ox.UI ? $ : Ox.$)('<div>')
|
||
|
|
.addClass('ui line')
|
||
|
|
.css({
|
||
|
|
top: app.window.middle + 12 + 'px',
|
||
|
|
left: app.window.center - 192 + 'px',
|
||
|
|
})
|
||
|
|
.html('A JavaScript Library for Web Applications')
|
||
|
|
},
|
||
|
|
|
||
|
|
logo: function() {
|
||
|
|
return (Ox.UI ? $ : Ox.$)('<img>')
|
||
|
|
.addClass('ui logo')
|
||
|
|
.attr({
|
||
|
|
src: app.fn.getLogoURL()
|
||
|
|
})
|
||
|
|
.bind({
|
||
|
|
click: function() {
|
||
|
|
app.fn.url(app.fn.url() ? '' : app.user('url'));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
panel: function() {
|
||
|
|
return Ox.UI
|
||
|
|
? Ox.SplitPanel({
|
||
|
|
elements: [
|
||
|
|
{
|
||
|
|
element: Ox.Bar({size: 32}),
|
||
|
|
size: 32
|
||
|
|
},
|
||
|
|
{
|
||
|
|
element: Ox.Element()
|
||
|
|
}
|
||
|
|
],
|
||
|
|
orientation: 'vertical'
|
||
|
|
})
|
||
|
|
.css({opacity: 0})
|
||
|
|
: Ox.$('<div>')
|
||
|
|
},
|
||
|
|
|
||
|
|
readme: function() {
|
||
|
|
return Ox.Element();
|
||
|
|
},
|
||
|
|
|
||
|
|
sections: function() {
|
||
|
|
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui sections');
|
||
|
|
[
|
||
|
|
'about', 'readme', 'examples', 'documentation',
|
||
|
|
'download', 'development', 'contact'
|
||
|
|
].forEach(function(section, i) {
|
||
|
|
i && $element.append(Ox.$('<span>').html(' | '));
|
||
|
|
Ox.$('<span>')
|
||
|
|
.addClass('link' + (
|
||
|
|
app.user('section') == section ? ' selected' : ''
|
||
|
|
))
|
||
|
|
.html(Ox.toTitleCase(section))
|
||
|
|
.bind({
|
||
|
|
click: function() {
|
||
|
|
app.$ui.sections.children().removeClass('selected');
|
||
|
|
$(this).addClass('selected');
|
||
|
|
app.fn.url(section);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.appendTo($element);
|
||
|
|
});
|
||
|
|
return $element;
|
||
|
|
},
|
||
|
|
|
||
|
|
themes: function() {
|
||
|
|
var $element = (Ox.UI ? $ : Ox.$)('<div>').addClass('ui themes');
|
||
|
|
['classic', 'modern'].forEach(function(theme, i) {
|
||
|
|
i && $element.append(Ox.$('<span>').html(' | '));
|
||
|
|
Ox.$('<span>')
|
||
|
|
.addClass('link' + (
|
||
|
|
app.user('theme') == theme ? ' selected' : ''
|
||
|
|
))
|
||
|
|
.html(theme == 'classic' ? 'Light' : 'Dark')
|
||
|
|
.bind({
|
||
|
|
click: function() {
|
||
|
|
app.$ui.themes.children().removeClass('selected');
|
||
|
|
$(this).addClass('selected');
|
||
|
|
app.fn.setTheme(theme)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.appendTo($element);
|
||
|
|
});
|
||
|
|
return $element;
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
user: Ox.localStorage('OxJS'),
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
app.url = app.fn.url();
|
||
|
|
app.window = app.fn.window();
|
||
|
|
app.fn.load();
|
||
|
|
|
||
|
|
});
|