' + Ox.VERSION + '.'
}
]
},
resize: function() {
[
'logo', 'loading', 'label', 'menu', 'switch'
].forEach(function(element) {
app.$ui[element] && app.$ui[element].css(app.getCSS(element));
});
},
rotate: function() {
var css, deg = 0,
previousTime = +new Date(),
interval = setInterval(function() {
var currentTime = +new Date(),
delta = (currentTime - previousTime) / 1000,
loadingIcon = document.getElementById('loadingIcon');
if (loadingIcon) {
previousTime = currentTime;
deg = Math.round((deg + delta * 360) % 360 / 30) * 30;
css = 'rotate(' + deg + 'deg)';
loadingIcon.style.MozTransform = css;
loadingIcon.style.MSTransform = css;
loadingIcon.style.OTransform = css;
loadingIcon.style.WebkitTransform = css;
} else {
clearInterval(interval);
}
}, 83);
},
setTheme: function(theme) {
app.user.theme = theme;
app.db(app.user);
(Ox.$('#icon') || Ox.$('').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().page ? {
page: '',
item: ''
} : {
page: app.user.previousPage,
item: app.user.previousPage in app.user.item
? app.user.item[app.user.previousPage] : ''
}
);
},
ui: {
doc: function() {
return Ox.DocPanel({
element: $('')
.addClass('page')
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
.html(app.html.documentation),
examples: app.data.docItems ? void 0 : app.data.examples,
examplesPath: app.data.docItems ? void 0 : 'examples/',
files: app.data.docItems ? void 0 : 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];
},
items: app.data.docItems || void 0,
path: 'dev/',
references: /\b(Ox\.[\w\$]+)\b/g,
replace: [app.re.code],
results: app.data.testResults || void 0,
selected: app.user.item.doc,
showTests: true
})
.bindEvent({
example: function(data) {
app.url.set({
page: 'examples',
item: {examples: data.id}
});
},
select: function(data) {
app.user.item.doc = data.id;
app.db(app.user);
app.url.set();
}
})
.bindEventOnce({
load: function(data) {
app.data.docItems = data.items;
},
tests: function(data) {
app.data.testResults = data.results;
}
});
},
examples: function() {
return Ox.ExamplePanel({
element: $('
')
.addClass('page')
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
.html(app.html.examples),
examples: app.data.examples,
path: 'examples/',
references: /\b(Ox\.[\w\$]+)\b/g,
replaceCode: [app.re.code],
replaceComment: [app.re.comment],
selected: app.user.item.examples
})
.bindEvent({
select: function(data) {
app.user.item.examples = data.id;
app.db(app.user);
app.url.set();
}
});
},
label: function() {
return Ox.Label({
textAlign: 'center',
title: 'A JavaScript Library for Web Applications',
width: 256
})
.addClass('label animate')
.css({
paddingTop: '4px',
paddingBottom: '4px',
borderRadius: '6px'
})
.on({
click: app.toggle
});
},
loading: function() {
return Ox.$('![]()
')
.addClass('loading')
.attr({id: 'loadingIcon', src: app.getSRC('loading')})
.css(app.getCSS('loading'));
},
logo: function() {
return Ox.$('![]()
')
.addClass('logo animate')
.attr({src: app.getSRC('logo')})
.css(app.getCSS('logo'));
},
menu: function() {
var $menu = Ox.ButtonGroup({
buttons: app.data.pages,
min: 0,
selectable: true,
})
.addClass('menu animate')
.bindEvent({
change: function(data) {
if (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(app.html[page].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();
}
}
}),
$buttonGroup = $panel.find('.OxButtonGroup').css({
top: '6px'
});
app.patchButtonGroup($buttonGroup);
return $panel;
},
readme: function() {
var $list = Ox.Container().css({overflowY: 'scroll'}),
$text = Ox.Container().addClass('OxSerif OxSelectable text'),
self = {},
that = Ox.SplitPanel({
elements: [
{element: $list, size: 256},
{element: $text}
],
orientation: 'horizontal'
}, self)
.addClass('readme');
Ox.sortBy(app.data.readme, '-date').forEach(function(item, i) {
var $item = $('
')
.addClass('item')
.attr({id: 'readme_' + item.id})
.css({
width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'
})
.on({
click: function(e) {
if (!$(this).is('.selected')) {
selectItem(item.id);
} else if (e.metaKey) {
selectItem();
}
}
})
.appendTo($list);
$('
')
.addClass('OxSerif title')
.html(item.title)
.appendTo($item);
$('
')
.addClass('OxSerif OxLight date')
.html(Ox.formatDate(item.date, '%B %e, %Y', true))
.appendTo($item);
});
selectItem(app.user.item.readme);
function selectItem(id) {
$('.readme .item.selected').removeClass('selected');
id && $('#readme_' + id).addClass('selected');
Ox.get('readme/html/' + (id || '_readme') + '.html', function(html) {
$text.empty()
.append(
id ? html
: $('
')
.addClass('page')
.css({
margin: '16px',
width: window.innerWidth - 640 + 'px'
})
.html(html)
)
.find('.code').each(function() {
var $this = $(this);
$this.replaceWith(
Ox.SyntaxHighlighter({
source: $this.text()
})
.attr({id: $this.attr('id')})
);
});
});
app.user.item.readme = id;
app.db(app.user);
app.url.set();
}
self.setOption = function(key, value) {
if (key == 'selected') {
selectItem(value);
}
}
return that;
},
screen: function() {
return Ox.$('
').addClass('screen animate');
},
switch: function() {
var $switch = 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);
}
});
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.'
);
}
},
url: {
get: function() {
var split = window.location.hash.slice(1).split('/');
return {page: split[0], item: split[1] || ''};
},
set: function(data) {
data = data || app.user;
window.location.hash = data.page + (
data.item && data.item[data.page] ? '/' + data.item[data.page] : ''
);
return app;
}
},
urlchange: function() {
var url = app.url.get();
app.user.previousPage = app.user.page;
app.user.page = url.page;
if (url.item && url.page in app.user.item) {
app.user.item[url.page] = url.item;
}
app.db(app.user);
if (app.user.page != app.user.previousPage) {
app.$ui.panel.select(app.user.page);
}
if (url.item) {
app.$ui[url.page] && app.$ui[url.page].options({selected: url.item});
}
if (!app.user.page || !app.user.previousPage) {
app.animate();
}
},
user: {}
};
app.init();
window.oxjs = app;
});