140 lines
No EOL
4.2 KiB
JavaScript
140 lines
No EOL
4.2 KiB
JavaScript
Ox.load('UI', function() {
|
|
|
|
var $ui = {}, items = [];
|
|
|
|
renderUI(function() {
|
|
loadJSON(function(files) {
|
|
loadHTML(files, function() {
|
|
renderList();
|
|
});
|
|
});
|
|
});
|
|
|
|
function loadJSON(callback) {
|
|
Ox.getJSON('json/readme.json', callback);
|
|
}
|
|
|
|
function loadHTML(files, callback) {
|
|
files.forEach(function(file) {
|
|
Ox.get('html/' + file.name, function(html) {
|
|
var match = html.match(/<h1>(.+)<\/h1>/);
|
|
items.push({
|
|
date: file.date,
|
|
file: file.name,
|
|
html: html,
|
|
title: match ? match[1] : file
|
|
});
|
|
items.length == files.length && callback(items);
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderUI(callback) {
|
|
$ui.logo = $('<a>').attr({href: 'https://oxjs.org'})
|
|
.append(
|
|
$('<img>').attr({src: '../source/Ox/png/OxJS64.png'})
|
|
);
|
|
$ui.title = $('<a>').attr({href: 'https://oxjs.org/#readme'})
|
|
.append(
|
|
$('<div>').css({color: 'rgb(192, 192, 192)'}).html('readme')
|
|
);
|
|
$ui.bar = Ox.Bar({size: 24})
|
|
.addClass('head')
|
|
.append($ui.logo)
|
|
.append($ui.title);
|
|
$ui.text = Ox.Container().addClass('text'),
|
|
$ui.inner = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: Ox.Element(),
|
|
resizable: true,
|
|
resize: [256, 384, 512],
|
|
size: 384
|
|
},
|
|
{
|
|
element: $ui.text
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
});
|
|
$ui.outer = Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: $ui.bar,
|
|
size: 24
|
|
},
|
|
{
|
|
element: $ui.inner
|
|
}
|
|
],
|
|
orientation: 'vertical'
|
|
})
|
|
.appendTo(Ox.$body);
|
|
callback();
|
|
}
|
|
|
|
function renderList() {
|
|
Ox.print('?', items)
|
|
$ui.list = Ox.TextList({
|
|
columns: [
|
|
{
|
|
id: 'file',
|
|
unique: true
|
|
},
|
|
{
|
|
id: 'title',
|
|
operator: '+',
|
|
title: 'Title',
|
|
visible: true,
|
|
width: 256
|
|
},
|
|
{
|
|
align: 'right',
|
|
format: function(value) {
|
|
return Ox.formatDate(value, '%B %e, %Y', true);
|
|
},
|
|
id: 'date',
|
|
operator: '-',
|
|
title: 'Date',
|
|
visible: true,
|
|
width: 128
|
|
}
|
|
],
|
|
columnsVisible: true,
|
|
items: Ox.api(items, {unique: 'file'}),
|
|
max: 1,
|
|
min: 1,
|
|
selected: [items[0].file],
|
|
sort: [{key: 'date', operator: '-'}]
|
|
})
|
|
.bindEvent({
|
|
resize: function(data) {
|
|
this.resizeColumn('title', data.size - 128);
|
|
},
|
|
select: selectText
|
|
});
|
|
$ui.inner.replaceElement(0, $ui.list);
|
|
selectText({ids: [items[0].file]});
|
|
}
|
|
|
|
function selectText(data) {
|
|
Ox.print(data)
|
|
if (data.ids.length) {
|
|
$ui.text.html(Ox.getObject(items, 'file', data.ids[0]).html);
|
|
$ui.text.find('.code').each(function() {
|
|
var $this = $(this);
|
|
$this.replaceWith(
|
|
Ox.SyntaxHighlighter({
|
|
source: $this.text()
|
|
})
|
|
.css({
|
|
border: '1px solid rgb(192, 192, 192)'
|
|
})
|
|
);
|
|
})
|
|
} else {
|
|
$ui.text.empty();
|
|
}
|
|
}
|
|
|
|
}); |