add first version of readme
This commit is contained in:
rolux
parent
044da383db
commit
9032821f14
9 changed files with 187 additions and 0 deletions
27
readme/css/readme.css
Normal file
27
readme/css/readme.css
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
.head img {
|
||||||
|
float: left;
|
||||||
|
width: 32px;
|
||||||
|
height: 16px;
|
||||||
|
margin: 4px 2px 4px 4px;
|
||||||
|
}
|
||||||
|
.head div {
|
||||||
|
float: left;
|
||||||
|
height: 15px;
|
||||||
|
padding: 1px 2px 0 2px;
|
||||||
|
margin: 4px 2px 4px 2px;
|
||||||
|
background: -webkit-linear-gradient(top, rgb(128, 128, 128), rgb(64, 64, 64));
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
border: 1px solid rgb(192, 192, 192);
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
padding: 16px 24px 16px 24px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
7
readme/html/test1.html
Normal file
7
readme/html/test1.html
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<p class="title">This is just a test</p>
|
||||||
|
|
||||||
|
<p>Foo bar baz.</p>
|
||||||
|
|
||||||
|
<p>foo: <code>// this is some code</code></p>
|
||||||
|
|
||||||
|
<blockquote>blockquote</blockquote>
|
||||||
1
readme/html/test2.html
Normal file
1
readme/html/test2.html
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<p class="title">This is another test, with a longer title</p>
|
||||||
13
readme/index.html
Normal file
13
readme/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>OxJS - readme</title
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||||
|
<link rel="shortcut icon" type="image/png" href="../source/Ox/png/OxJS16.png"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="css/readme.css"/>
|
||||||
|
<script type="text/javascript" src="../dev/Ox.js"></script>
|
||||||
|
<script type="text/javascript" src="js/readme.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
129
readme/js/readme.js
Normal file
129
readme/js/readme.js
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
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(/<p class="title">(.+)<\/p>/);
|
||||||
|
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.Element().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);
|
||||||
|
} else {
|
||||||
|
$ui.text.empty();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
10
readme/json/readme.json
Normal file
10
readme/json/readme.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"date": "2012-04-01 04:01:12",
|
||||||
|
"name": "test2.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"date": "2012-03-31 03:31:12",
|
||||||
|
"name": "test1.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
BIN
source/Ox/png/OxJS16.png
Normal file
BIN
source/Ox/png/OxJS16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 301 B |
BIN
source/Ox/png/OxJS256.png
Normal file
BIN
source/Ox/png/OxJS256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 860 B |
BIN
source/Ox/png/OxJS64.png
Normal file
BIN
source/Ox/png/OxJS64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 B |
Loading…
Reference in a new issue