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