')
.addClass('page')
.css({
margin: '32px',
width: window.innerWidth - 640 + 'px'
})
.html(app.data.html.documentation),
examples: app.data.docItems ? null : app.data.examples,
examplesPath: app.data.docItems ? null : 'examples/',
files: app.data.docItems ? null : app.data.documentation,
getModule: function(item) {
return item.file.replace(/^dev\//, '')
.split('/')[0];
},
getSection: function(item) {
return item.section
|| item.file.replace(/^dev\//, '')
.split('/')[2].split('.')[0];
},
items: app.data.docItems || null,
path: 'dev/',
references: /\b(Ox\.[\w\$]+(?=\W))/g,
replace: [app.re.code],
results: app.data.testResults || null,
selected: app.user.item.doc,
showLoading: true,
showTests: true
})
.bindEvent({
example: function(data) {
app.url.push({page: 'examples', item: data.id});
},
select: function(data) {
app.user.item.doc = data.id;
app.url.push();
}
})
.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.data.html.examples),
examples: app.data.examples,
mode: app.url.parse().mode || 'source',
path: 'examples/',
references: /\b(Ox\.[\w\$]+(?=\W))/g,
replaceCode: [app.re.code],
replaceComment: [app.re.comment],
selected: app.user.item.examples
})
.bindEvent({
change: function(data) {
app.url.push({
page: 'examples',
item: app.user.item.examples,
mode: data.value == 'live' ? 'live' : ''
});
},
select: function(data) {
app.user.item.examples = data.id;
app.url.push();
}
});
},
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'
});
},
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() {
return app.patchButtonGroup(
Ox.ButtonGroup({
buttons: app.data.pages,
min: 0,
selectable: true,
})
.addClass('menu animate')
.bindEvent({
change: function(data) {
data.value && app.url.push({page: data.value});
}
})
);
},
page: function(page, replace) {
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])
)
);
},
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.url.push();
}
}
});
app.patchButtonGroup(
$panel.find('.OxButtonGroup').css({top: '6px'})
);
return $panel;
},
readme: function() {
var $list = Ox.Container()
.css({overflowY: 'scroll'})
.on({
click: function(e) {
var $target = $(e.target),
$parent = $target.parent();
if ($parent.is('.item')) {
$target = $parent;
}
selectItem(
$target.is('.item') && (
$target.is(':not(.selected)')
|| !e.metaKey
) ? $target.attr('id') : ''
);
}
}),
$text = Ox.Container()
.addClass('OxSerif OxSelectable text'),
$panel = Ox.SplitPanel({
elements: [
{element: $list, size: 256},
{element: $text}
],
orientation: 'horizontal'
})
.update(function(key, value) {
key == 'selected' && selectItem(value);
})
.addClass('readme');
Ox.sortBy(app.data.readme, '-date').forEach(function(item, i) {
var $item = $('
')
.addClass('item')
.attr({id: item.id})
.css({width: 224 - Ox.UI.SCROLLBAR_SIZE + 'px'})
.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) {
if (id && !Ox.getObjectById(app.data.readme, id)) {
id = '';
}
$panel.find('.item.selected').removeClass('selected');
id && $panel.find('.item#' + id).addClass('selected');
Ox.get('readme/' + (
id || 'index/readme'
) + '.html?' + Math.random(1000000), 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.url.push();
}
return $panel;
},
screen: function() {
return Ox.$('
').addClass('screen animate');
},
switch: function() {
return app.patchButtonGroup(
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);
}
})
);
},
warning: function() {
return $('
').addClass('warning').html(app.data.warning);
}
},
url: {
change: function() {
var data = app.url.parse();
app.user.previousPage = app.user.page;
app.user.page = data.page;
if (data.page in app.user.item) {
app.user.item[data.page] = data.item;
}
app.db(app.user);
if (app.user.page != app.user.previousPage) {
app.$ui.panel.select(app.user.page);
}
if (app.user.page) {
app.$ui[app.user.page].options(Ox.extend({
selected: data.item
}, app.user.page == 'examples' ? {
mode: data.mode || 'source'
} : {}));
}
if (!app.user.page || !app.user.previousPage) {
app.animate();
}
Ox.print('URL CHANGE', JSON.stringify(data));
},
format: function(data) {
var hash = '';
data = data || {
page: app.user.page,
item: app.user.item[app.user.page] || ''
};
if (data.page) {
hash = '#' + data.page;
if (data.item && data.page in app.user.item) {
hash += '/' + data.item;
if (data.page == 'examples' && data.mode == 'live') {
hash += '/live';
}
}
}
Ox.print('URL FORMAT', JSON.stringify(data), hash);
return hash;
},
parse: function(hash) {
hash = hash || window.location.hash;
var data = {}, formattedHash, split = hash.slice(1).split('/');
data.page = Ox.getObjectById(app.data.pages, split[0])
? split[0] : '';
data.item = data.page in app.user.item && split[1]
? split[1] : '';
data.mode = data.page == 'examples' && split[2] == 'live'
? 'live' : '';
Ox.print('URL PARSE', hash, JSON.stringify(data))
formattedHash = app.url.format(data);
hash != formattedHash && app.url.replace(formattedHash);
return data;
},
push: function(data) {
Ox.print('PUSH', JSON.stringify(data))
window.location.hash = app.url.format(data);
return app;
},
replace: function(hash) {
var location = window.location;
if (history.replaceState) {
history.replaceState(
{}, '', location.origin + location.pathname + hash
);
}
return app;
}
},
user: {}
};
app.init();
});